/* global React */

/* ============================================================
   CONTRIBUTORS — Nelly + JT, stacked
   ============================================================ */
function Contributor({ data }) {
  return (
    <article className={`contrib ${data.flip ? "flip" : ""}`}>
      <div className="c-portrait">
        <span className="frame-tag">Contributor · No. {data.no}</span>
        <img src={data.portrait} alt={data.name} />
        <span className="signature">{data.sig}</span>
      </div>
      <div className="c-body">
        <div className="c-eyebrow">
          <span>Lane Editor — {data.lane}</span>
        </div>
        <h3 className="c-name">
          {data.first} <span className="it">{data.last}</span>
        </h3>
        <p className="c-role">{data.role}</p>
        <p className="c-bio">{data.bio}</p>
        <div className="c-tags">
          {data.tags.map((t, i) => <span key={i} className="c-tag">{t}</span>)}
        </div>
        <div className="c-stats">
          <div className="c-stat">
            <div className="n">{data.stats[0].n}<span className="it">.</span></div>
            <div className="l">{data.stats[0].l}</div>
          </div>
          <div className="c-stat">
            <div className="n">{data.stats[1].n}</div>
            <div className="l">{data.stats[1].l}</div>
          </div>
          <div className="c-stat">
            <div className="n"><span className="it">{data.stats[2].n}</span></div>
            <div className="l">{data.stats[2].l}</div>
          </div>
        </div>
        <a className="c-cta" href={data.href}>
          Read {data.first.split(" ")[0]}’s guides <span className="arr">→</span>
        </a>
      </div>
    </article>
  );
}

function Contributors() {
  const nelly = {
    no: "01",
    first: "Nelly",
    last: "",
    sig: "— N.",
    portrait: "/assets/nelly.png",
    lane: "Women",
    role: "Tailoring, travel, and the case for one good blazer.",
    bio: "Nelly leads the Women lane. Twelve years dressing women for boardrooms, beaches, and the long flights between. She believes in fewer pieces, better cut, and the quiet authority of navy.",
    tags: ["Tailoring", "Mediterranean", "Capsule", "Travel", "Editor’s pick"],
    stats: [
      { n: "12yr", l: "On the floor" },
      { n: "248", l: "Guides published" },
      { n: "Istanbul", l: "Home base" },
    ],
    href: "/en/contributors/nelly/",
    flip: false,
  };
  const jt = {
    no: "02",
    first: "JT",
    last: "",
    sig: "— JT",
    portrait: "/assets/jt.png",
    lane: "Men",
    role: "Building a closet that lasts longer than the trends do.",
    bio: "JT runs the Men lane. Former workroom hand, current evangelist for the navy crewneck. He thinks most guys own enough — they just need a better starting five and someone to tell them which shoes can stay.",
    tags: ["Knitwear", "Denim", "Starter five", "Workwear", "Editor’s pick"],
    stats: [
      { n: "08yr", l: "On the floor" },
      { n: "176", l: "Guides published" },
      { n: "Atlanta", l: "Home base" },
    ],
    href: "/en/contributors/jt/",
    flip: true,
  };
  return (
    <section id="contributors" className="section section-rule" data-screen-label="07 Contributors">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">
            The <span className="display italic" style={{color:"var(--accent)"}}>two voices</span> behind the lanes.
          </h2>
          <div className="meta">
            Two editors<br/>—one shared standard
          </div>
        </div>
        <Contributor data={nelly} />
        <Contributor data={jt} />
      </div>
    </section>
  );
}
window.Contributors = Contributors;

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" data-screen-label="08 Footer">
      <div className="footer-inner">
        <div className="footer-mast">
          How to<span className="gold">.</span> <span style={{ fontStyle: "italic" }}>Fashion.</span>
        </div>
        <div className="footer-grid">
          <div className="footer-col footer-sub">
            <h4>The Subscriber</h4>
            <p>One letter, every Tuesday. Five new guides, no filler. Unsubscribe whenever — we won’t take it personally.</p>
            <div className="footer-sub-input">
              <input placeholder="you@somewhere.com" />
              <button>Sign up</button>
            </div>
          </div>
          <div className="footer-col">
            <h4>Lanes</h4>
            <ul>
              <li><a href="/en/women/">Women</a></li>
              <li><a href="/en/men/">Men</a></li>
              <li><a href="/en/women/seasonal/">Seasonal drops</a></li>
              <li>Editor’s picks</li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>The Co.</h4>
            <ul>
              <li><a href="/en/about/">About</a></li>
              <li>Editions — Beauty, Fashion</li>
              <li><a href="/en/contributors/nelly/">Contributors</a></li>
              <li><a href="/en/press/">Press</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Elsewhere</h4>
            <ul>
              <li><a href="/en/social/instagram/">Instagram</a></li>
              <li><a href="/en/newsletter/">Newsletter</a></li>
              <li>Podcast — coming soon</li>
              <li><a href="/en/contact/">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 The How To Co. · All rights reserved.</span>
          <span>Edition 02 — Fashion · Made in NYC + Milan</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;