// Shared chrome: header, footer, newsletter strip.

const { useState } = React;

function SiteHeader({ page, onNav, issue }) {
  return (
    <header className="site-top">
      <div className="site-top__inner">
        <a
          href="#"
          className="site-top__wordmark"
          onClick={(e) => { e.preventDefault(); onNav("cover"); }}
        >
          Tokyo Golf Fashion
        </a>
        <nav className="site-top__nav" aria-label="Primary">
          <a
            href="#"
            aria-current={page === "cover" ? "page" : undefined}
            onClick={(e) => { e.preventDefault(); onNav("cover"); }}
          >
            Cover
          </a>
          <a
            href="#"
            aria-current={page === "article" ? "page" : undefined}
            onClick={(e) => { e.preventDefault(); onNav("article"); }}
          >
            Archive
          </a>
          <a
            href="#"
            aria-current={page === "about" ? "page" : undefined}
            onClick={(e) => { e.preventDefault(); onNav("about"); }}
          >
            About
          </a>
        </nav>
        <div className="site-top__issue">
          Volume I · 2026
        </div>
      </div>
    </header>
  );
}

function NewsletterStrip() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  return (
    <section className="newsletter-strip">
      <div className="newsletter-strip__inner">
        <div className="newsletter-strip__copy">
          <h3>A quiet letter, every Sunday.</h3>
          <p>
            Each Sunday morning, the week's piece — with a short editor's note.
            No blasts, no retargeting, no affiliate links inside the body.
          </p>
        </div>
        <div>
          {submitted ? (
            <p className="newsletter-strip__success">
              Thank you. The next letter arrives on Sunday morning.
            </p>
          ) : (
            <form
              className="newsletter-strip__form"
              onSubmit={(e) => {
                e.preventDefault();
                if (email.includes("@")) setSubmitted(true);
              }}
            >
              <div className="newsletter-strip__field">
                <input
                  type="email"
                  required
                  placeholder="your@address.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
                <button type="submit">Subscribe →</button>
              </div>
              <p className="newsletter-strip__note">
                No tracking pixels. Unsubscribe with one click.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="site-footer__inner">
        <div>
          <div className="site-footer__brand">Tokyo Golf Fashion</div>
          <div className="site-footer__motto" lang="ja">
            東京のゴルフは、静かに着る。
          </div>
        </div>
        <div>
          <h4>Read</h4>
          <ul>
            <li><a href="#">Editorial</a></li>
            <li><a href="#">Lookbooks</a></li>
            <li><a href="#">Guides</a></li>
            <li><a href="#">Grails</a></li>
          </ul>
        </div>
        <div>
          <h4>Follow</h4>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Pinterest</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">RSS</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Disclosure</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="site-footer__baseline">
        <span>© 2026 Tokyo Golf Fashion — Volume I · 2026</span>
        <span>ISSN pending · Printed nowhere · Published weekly</span>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, NewsletterStrip });