// Footer for Layer 1 static pages.
// All hrefs must resolve. Network links go to sibling editions; internal links
// hit real routes. Update href="#" candidates as those routes ship.

const Footer = () => (
  <footer className="footer">
    <div className="footer-stamp">T</div>
    <div className="container">
      <div className="footer-top">
        <div className="footer-masthead">
          <div className="issue">The HowTo Network · Issue Nº 014 · Spring 2026</div>
          <h3 className="serif">HowTo:<em>Travel.</em></h3>
          <p className="tagline">We believe everyone has the ability to see the world. Our job is the guidance, inspiration, and company to help you go.</p>
        </div>
        <div className="footer-signup">
          <h4 className="serif">The <em>Saturday Letter.</em></h4>
          <p>One email, every Saturday morning. A destination, a guide, and a field note from a traveler in the middle of nowhere.</p>
          <div className="form">
            <input placeholder="your@email.com" />
            <button className="btn">Join 84k</button>
          </div>
        </div>
      </div>
      <div className="footer-colophon">
        <div className="footer-col">
          <h5>Colophon</h5>
          <p className="about">Set in Playfair Display and DM Sans. Printed on the internet. Edited from a train somewhere between Porto and Lisbon.</p>
        </div>
        <div className="footer-col">
          <h5>Explore</h5>
          <ul>
            <li><a href="https://roundtrips.org">RoundTrips</a></li>
            <li><a href="/plan/">Plan</a></li>
            <li><a href="/book/">Book</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>The Network</h5>
          <ul>
            <li><a href="https://thehowtonetwork.com">HowTo Network</a></li>
            <li><a href="https://howtohomeedition.com">HowTo: Home</a></li>
            <li><a href="https://howtofoodedition.com">HowTo: Food</a></li>
            <li><a href="https://howtobeautyedition.com">HowTo: Beauty</a></li>
            <li><a href="https://howtotechedition.com">HowTo: Tech</a></li>
            <li><a href="https://howtofamilyedition.com">HowTo: Family</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Field Offices</h5>
          <ul>
            <li>Brooklyn · New York</li>
            <li>Kreuzberg · Berlin</li>
            <li>Shibuya · Tokyo</li>
            <li>Condesa · Mexico City</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 HowTo Network · Made with care in 14 timezones</span>
        <div className="socials">
          <a href="/privacy">Privacy</a>
          <a href="/terms">Terms</a>
          <a href="https://thehowtonetwork.com">Network</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });