/* global React, M_IMAGES, M_L2_MENU */

/* ============================================================
   Editor's slip — letter from JT
   ============================================================ */
function MEditorSlip() {
  return (
    <section className="section" data-screen-label="02 Editor">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">
            From the <span className="display italic" style={{ color: "var(--gold)" }}>editor.</span>
          </h2>
          <div className="meta" style={{
            fontFamily: "var(--f-mono)", fontSize: 10,
            letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7
          }}>
            Issue 02 — Spring/Summer ’26<br />
            By JT, Lane Editor
          </div>
        </div>
        <div className="editor-slip">
          <aside className="slip-aside">
            <div className="row"><span>Edition</span><span>Vol. 02 — Fashion</span></div>
            <div className="row"><span>Lane</span><span>Men</span></div>
            <div className="row"><span>Editor</span><span>JT</span></div>
            <div className="row"><span>Filed from</span><span>Atlanta</span></div>
            <div className="row"><span>Reading time</span><span>4 min</span></div>
            <div className="slip-portrait">
              <img src={M_IMAGES.editor} alt="JT, Lane Editor" />
            </div>
          </aside>
          <div className="slip-body">
            <p>
              Most guys own enough. They just need a better starting five and someone to
              tell them which shoes can stay. That's the whole job here. Build a closet
              you can actually rotate through, in fabrics that age, in cuts that fit you.
            </p>
            <p>
              The lane runs in five parts. <em>Build</em> is your starter five — the
              pieces that earn their keep all year. <em>Wear</em> is how to put them on
              for work, weekends, and the in-between. <em>Fit</em> is the part nobody
              talks about: shoulder seams, sleeve length, when to find a tailor.
            </p>
            <div className="pull">
              "Buy once, fit it right, wear it for a decade. Everything else is noise."
            </div>
            <p>
              Read in any order. Skim the index, save what you need, come back when the
              seasons turn. We file Tuesdays — five new each week. No filler, no rules
              you didn't ask for.
            </p>
            <div className="signoff">
              <span>Yours,</span>
              <span className="sig">— JT</span>
              <span>· Lane Editor, Men</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.MEditorSlip = MEditorSlip;

/* ============================================================
   L2 — BUILD
   ============================================================ */
const M_BUILD = [
  { n: "01", t: "The starter blazer", sub: "Navy first, unstructured shoulder, wool you can travel in.", m: "8 min" },
  { n: "02", t: "The white oxford", sub: "Heavier than poplin, softer than denim. The shirt that does it all.", m: "5 min" },
  { n: "03", t: "Raw denim", sub: "One pair, broken in over a year. The case for slow.", m: "7 min" },
  { n: "04", t: "An overcoat", sub: "Camel or charcoal. Mid-thigh. Wear it for fifteen years.", m: "6 min" },
  { n: "05", t: "Real leather shoes", sub: "Two pairs. One brown, one darker brown. Nothing more.", m: "5 min" },
  { n: "06", t: "The grey crewneck", sub: "Cotton in summer, lambswool in winter. The case against the hoodie.", m: "5 min" },
  { n: "07", t: "Trousers, off the rack", sub: "How to find a pair, how to find a hemmer.", m: "5 min" },
];

function ML2Build() {
  return (
    <section id="build" className="l2 l2-build" data-screen-label="03 Build">
      <div className="frame">
        <header className="l2-head">
          <div className="l2-num">01</div>
          <div className="l2-titleblock">
            <div className="l2-eyebrow">Lane 01 · The Foundation</div>
            <h2 className="l2-title">Build <span className="it">the closet.</span></h2>
          </div>
          <div className="l2-meta">10 guides<br />Updated weekly</div>
        </header>
        <p className="l2-lede">
          The pieces every closet earns its way around. Buy once, fit right, wear for a decade.
        </p>
        <div className="build-grid">
          <a className="build-hero" style={{ backgroundImage: `url(${M_IMAGES.buildHero})` }}>
            <div className="build-hero-meta">
              <span className="num">Featured · No. 01 · Build</span>
              <h3 className="t">How to buy your <span className="it">first real blazer</span> — and never look back.</h3>
              <span className="d">8 min · By JT</span>
            </div>
          </a>
          <div className="build-list">
            {M_BUILD.slice(1).map((g) => (
              <a key={g.n} className="row" href={`#build-${g.n}`}>
                <span className="n">{g.n}</span>
                <span className="t">{g.t}<small>{g.sub}</small></span>
                <span className="m">{g.m}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.ML2Build = ML2Build;

/* ============================================================
   L2 — WEAR
   ============================================================ */
const M_WEAR = [
  { n: "01", img: "wear1", t: "Denim", it: "that ages with you.", d: "How to pick raw denim once and wear it for a decade.", m: "5 min" },
  { n: "02", img: "wear2", t: "Layer for", it: "shoulder season.", d: "Three weights, two textures, and the trick to making it look unplanned.", m: "6 min" },
  { n: "03", img: "wear3", t: "Tailoring,", it: "off-duty.", d: "A blazer with sneakers, done so it looks intentional and not desperate.", m: "5 min" },
];

function ML2Wear() {
  return (
    <section id="wear" className="l2 l2-wear" data-screen-label="04 Wear">
      <div className="frame">
        <header className="l2-head">
          <div className="l2-num">02</div>
          <div className="l2-titleblock">
            <div className="l2-eyebrow">Lane 02 · The Everyday</div>
            <h2 className="l2-title">Wear <span className="it">it well.</span></h2>
          </div>
          <div className="l2-meta">20 guides<br />Updated Tuesdays</div>
        </header>
        <p className="l2-lede">
          How to put your closet on for work, weekends, and the in-between. Real outfits,
          real weather, no styling tricks you can't repeat at home.
        </p>
        <div className="wear-grid">
          {M_WEAR.map((c) => (
            <a key={c.n} className="wear-card">
              <div className="img" style={{ backgroundImage: `url(${M_IMAGES[c.img]})` }} />
              <div className="meta">
                <span className="num">No. {c.n} · Wear</span>
                <span>{c.m}</span>
              </div>
              <h3>{c.t} <span className="it">{c.it}</span></h3>
              <p>{c.d}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ML2Wear = ML2Wear;

/* ============================================================
   L2 — FIT  (replaces women's "Style")
   ============================================================ */
const M_FIT = [
  { n: "01", t: "The shoulder seam,", it: "explained.", d: "If only one thing fits right, make it this. The 60-second mirror test.", tag: "Fit · Tailoring" },
  { n: "02", t: "Sleeve length,", it: "two ways.", d: "Quarter-inch of shirt, or half — and which one is for you.", tag: "Fit · Tailoring" },
  { n: "03", t: "Trouser break,", it: "decoded.", d: "Full, half, no break. A short visual guide and what to ask the hemmer.", tag: "Fit · Trousers" },
  { n: "04", t: "Collar and chest,", it: "shirts.", d: "Why most shirts don't fit, and what to fix at the dry cleaner.", tag: "Fit · Shirts" },
  { n: "05", t: "Finding a tailor,", it: "any city.", d: "What to ask, what to pay, when to walk away. Works in any city.", tag: "Fit · Tailoring" },
  { n: "06", t: "Off-the-rack", it: "rules of thumb.", d: "Buy bigger than you think. Tailor down, never out.", tag: "Fit · Strategy" },
];

function ML2Fit() {
  return (
    <section id="fit" className="l2 l2-style" data-screen-label="05 Fit">
      <div className="frame">
        <header className="l2-head">
          <div className="l2-num">03</div>
          <div className="l2-titleblock">
            <div className="l2-eyebrow">Lane 03 · The Specifics</div>
            <h2 className="l2-title">Fit, <span className="it">on purpose.</span></h2>
          </div>
          <div className="l2-meta">14 guides<br />New each Friday</div>
        </header>
        <p className="l2-lede">
          The part nobody talks about. Shoulder seams, sleeve length, when to find a
          tailor — the difference between a guy who looks good and a guy who looks great.
        </p>
        <div className="style-grid">
          {M_FIT.map((c) => (
            <a key={c.n} className="style-cell">
              <span className="num">No. {c.n} · Fit</span>
              <h4>{c.t} <span className="it">{c.it}</span></h4>
              <p>{c.d}</p>
              <span className="tag">{c.tag}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ML2Fit = ML2Fit;

/* ============================================================
   L2 — FINISH
   ============================================================ */
const M_FINISH = [
  { n: "01", img: "fin1", t: "The belt", it: "rule.", d: "Match the leather to the shoe. The only rule worth keeping." },
  { n: "02", img: "fin2", t: "Loafer", it: "hours.", d: "The shoe that does the most while asking the least." },
  { n: "03", img: "fin3", t: "A real", it: "watch.", d: "One mechanical, on a strap you can replace. Wear it everywhere." },
  { n: "04", img: "fin4", t: "Socks,", it: "reconsidered.", d: "Same length as the trouser. Same family of color. The end." },
];

function ML2Finish() {
  return (
    <section id="finish" className="l2 l2-finish" data-screen-label="06 Finish">
      <div className="frame">
        <header className="l2-head">
          <div className="l2-num">04</div>
          <div className="l2-titleblock">
            <div className="l2-eyebrow">Lane 04 · The Punctuation</div>
            <h2 className="l2-title">Finish <span className="it">the look.</span></h2>
          </div>
          <div className="l2-meta">8 guides<br />Curated quarterly</div>
        </header>
        <p className="l2-lede">
          The accessories that quietly do the most. Pick once, finish anything.
        </p>
        <div className="finish-list">
          {M_FINISH.map((r) => (
            <a key={r.n} className="finish-row">
              <span className="n">{r.n}</span>
              <div className="img" style={{ backgroundImage: `url(${M_IMAGES[r.img]})` }} />
              <div className="body">
                <h4>{r.t} <span className="it">{r.it}</span></h4>
                <p>{r.d}</p>
              </div>
              <span className="arr">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ML2Finish = ML2Finish;

/* ============================================================
   L2 — SEASONAL
   ============================================================ */
function ML2Seasonal() {
  return (
    <section id="seasonal" className="l2 l2-seasonal" data-screen-label="07 Seasonal">
      <div className="frame">
        <header className="l2-head">
          <div className="l2-num">05</div>
          <div className="l2-titleblock">
            <div className="l2-eyebrow">Lane 05 · The Drops</div>
            <h2 className="l2-title">Seasonal <span className="it">drops.</span></h2>
          </div>
          <div className="l2-meta">5 drops a year<br />Curated by JT</div>
        </header>
        <p className="l2-lede">
          Five times a year, a packet of guides keyed to the weather you're actually in.
        </p>
        <div className="seasonal-grid">
          <a className="season-card" style={{ backgroundImage: `url(${M_IMAGES.spring})` }}>
            <div className="top">
              <span className="badge">Live · S/S '26</span>
              <span>Drop 04</span>
            </div>
            <div className="bot">
              <h4>Warm weather, <span className="it">tailored.</span></h4>
              <p>Ten guides for keeping the closet sharp when the wool comes off.</p>
              <span className="cta">Open the drop →</span>
            </div>
          </a>
          <a className="season-card" style={{ backgroundImage: `url(${M_IMAGES.fall})` }}>
            <div className="top">
              <span className="badge">Coming · A/W '26</span>
              <span>Drop 05</span>
            </div>
            <div className="bot">
              <h4>Cold weather, <span className="it">made warm.</span></h4>
              <p>Layering, knitwear, and the case for one good overcoat. Filed in September.</p>
              <span className="cta">Notify me →</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}
window.ML2Seasonal = ML2Seasonal;

/* ============================================================
   ESSENTIALS — JT's starter five
   ============================================================ */
const M_STARTER = [
  { ic: "①", nm: "Navy", it: "blazer", m: "Build · 01" },
  { ic: "②", nm: "White", it: "oxford", m: "Build · 02" },
  { ic: "③", nm: "Raw", it: "denim", m: "Build · 03" },
  { ic: "④", nm: "Grey", it: "crewneck", m: "Build · 06" },
  { ic: "⑤", nm: "Brown", it: "leather shoe", m: "Build · 05" },
];

function MEssentials() {
  return (
    <section className="section section-rule" data-screen-label="08 Essentials">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 06</div>
          <h2 className="title">
            The <span className="display italic" style={{ color: "var(--gold)" }}>starter five.</span>
          </h2>
          <div className="meta" style={{
            fontFamily: "var(--f-mono)", fontSize: 10,
            letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7
          }}>
            The capsule<br />Five pieces, infinite outfits
          </div>
        </div>
        <div className="essentials">
          <div className="essentials-intro">
            <h3>Five pieces, <span className="it">a decade of wear.</span></h3>
            <p>
              If you only build five things this year, build these. Everything else in
              the closet is in service of making them work harder.
            </p>
          </div>
          <div className="starter-five">
            {M_STARTER.map((s, i) => (
              <a key={i} className="item">
                <span className="icn">{s.ic}</span>
                <span className="nm">{s.nm} <span className="it">{s.it}</span></span>
                <span className="meta">{s.m}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.MEssentials = MEssentials;

/* ============================================================
   QUESTIONS — the questions you don't want to ask out loud
   ============================================================ */
const M_QS = [
  { n: "01", q: "How much should I spend on a first blazer?", a: "Less than you think — the cut matters more than the price tag. Aim for fit, not label." },
  { n: "02", q: "Do I really need a tailor?", a: "Yes, for two pieces a year. The blazer first, the trousers second." },
  { n: "03", q: "Are sneakers okay with tailoring?", a: "With the right pair, in the right setting, absolutely. Canvas low-tops, never running shoes." },
  { n: "04", q: "Black shoes or brown?", a: "Brown for almost everything. Black for very specific occasions you'll know on sight." },
  { n: "05", q: "What's wrong with the hoodie?", a: "Nothing — but a grey crewneck does the same job and dresses up. Buy one of each." },
  { n: "06", q: "How many suits do I need?", a: "One that fits, in navy. Two if you wear them weekly. Charcoal next." },
];

function MQuestions() {
  return (
    <section className="section section-rule" data-screen-label="09 Questions">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 07</div>
          <h2 className="title">
            The <span className="display italic" style={{ color: "var(--gold)" }}>questions</span> you'd rather not ask.
          </h2>
          <div className="meta" style={{
            fontFamily: "var(--f-mono)", fontSize: 10,
            letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7
          }}>
            Asked often<br />Answered briefly
          </div>
        </div>
        <div className="qs">
          {M_QS.map((q) => (
            <a key={q.n} className="qs-item">
              <span className="num">No. {q.n}</span>
              <span className="q">{q.q}</span>
              <span className="a">{q.a}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MQuestions = MQuestions;

/* ============================================================
   BRIDGE — to the women's lane
   ============================================================ */
function MBridge() {
  return (
    <section className="bridge" data-screen-label="10 Bridge">
      <div className="bridge-bg" style={{ backgroundImage: `url(${M_IMAGES.women})` }} />
      <div className="frame">
        <div className="label">Cross-lane · Vol. 02</div>
        <h3>Or browse <span className="it">the women's</span> handbook.</h3>
        <p>Same standard, different closet. Run by Nelly — built around her own starter five.</p>
        <a className="bridge-cta" href="/en/women/">Open the women's lane <span className="arr">→</span></a>
      </div>
    </section>
  );
}
window.MBridge = MBridge;

/* ============================================================
   Lookbook (men's) + Editor card (JT) + sticky L2 nav
   ============================================================ */
const M_LOOKS = [
  { n: "01", title: "Tailored Navy", tag: "Build · 01" },
  { n: "02", title: "Raw Denim", tag: "Build · 03" },
  { n: "03", title: "The Overcoat", tag: "Build · 04" },
  { n: "04", title: "Loafer Hours", tag: "Finish · 02" },
  { n: "05", title: "Off-Duty Knit", tag: "Wear · 02" },
  { n: "06", title: "Evening Sharp", tag: "Fit · 06" },
  { n: "07", title: "Weekend Workwear", tag: "Wear · 03" },
  { n: "08", title: "White Sneakers", tag: "Wear · 02" },
];

function MenLookbook() {
  const [paused, setPaused] = React.useState(false);
  const imgs = [M_IMAGES.look1, M_IMAGES.look2, M_IMAGES.look3, M_IMAGES.look4, M_IMAGES.look5, M_IMAGES.look6, M_IMAGES.look7, M_IMAGES.look8];
  const doubled = [...M_LOOKS, ...M_LOOKS];
  const doubledImgs = [...imgs, ...imgs];
  return (
    <section className="section section-rule lookbook" data-screen-label="11 Lookbook">
      <div className="lookbook-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            No. 08<span className="dot" />The Lookbook
          </div>
          <h2>From the <span className="it">runway</span> — and the sidewalk.</h2>
        </div>
      </div>
      <div className="lookbook-marquee"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}>
        <div className={`lookbook-track-marquee ${paused ? "paused" : ""}`}>
          {doubled.map((l, i) => (
            <div key={i} className="look">
              <div className="img" style={{ backgroundImage: `url(${doubledImgs[i]})` }} />
              <div className="info" style={{ flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
                <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
                  <span className="num">Look {l.n}</span>
                  <span>{l.tag}</span>
                </div>
                <span className="title">{l.title}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MenLookbook = MenLookbook;

function MenEditor() {
  return (
    <section id="contributors" className="section section-rule" data-screen-label="12 Editor">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 09</div>
          <h2 className="title">
            The voice <span className="display italic" style={{ color: "var(--gold)" }}>behind the lane.</span>
          </h2>
          <div className="meta" style={{
            fontFamily: "var(--f-mono)", fontSize: 10,
            letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7
          }}>
            One editor<br />Eight years on the floor
          </div>
        </div>
        <article className="contrib">
          <div className="c-portrait">
            <span className="frame-tag">Lane Editor · No. 02</span>
            <img src={M_IMAGES.editor} alt="JT" />
            <span className="signature">— JT</span>
          </div>
          <div className="c-body">
            <div className="c-eyebrow"><span>Lane Editor — Men</span></div>
            <h3 className="c-name">JT<span className="it">.</span></h3>
            <p className="c-role">Building a closet that lasts longer than the trends do.</p>
            <p className="c-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.
            </p>
            <div className="c-tags">
              {["Knitwear", "Denim", "Starter five", "Workwear", "Editor's pick"].map((t, i) =>
                <span key={i} className="c-tag">{t}</span>
              )}
            </div>
            <div className="c-stats">
              <div className="c-stat"><div className="n">08yr<span className="it">.</span></div><div className="l">On the floor</div></div>
              <div className="c-stat"><div className="n">176</div><div className="l">Guides published</div></div>
              <div className="c-stat"><div className="n"><span className="it">Atlanta</span></div><div className="l">Home base</div></div>
            </div>
            <a className="c-cta">Read JT's guides <span className="arr">→</span></a>
          </div>
        </article>
      </div>
    </section>
  );
}
window.MenEditor = MenEditor;

function ML2Nav() {
  const [active, setActive] = React.useState("build");
  React.useEffect(() => {
    const onScroll = () => {
      const ids = M_L2_MENU.map(m => m.id);
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top < 200) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="ticker" style={{ position: "sticky", top: 70, zIndex: 40 }} data-screen-label="L2 Nav">
      <div style={{
        maxWidth: "var(--maxw)", margin: "0 auto",
        padding: "0 var(--gutter)",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24
      }}>
        <span style={{
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.3em",
          textTransform: "uppercase", color: "var(--ink-dim)"
        }}>The Index</span>
        <div style={{ display: "flex", gap: 28 }}>
          {M_L2_MENU.map(m => (
            <a key={m.id} href={m.href} style={{
              fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: active === m.id ? "var(--ink)" : "var(--ink-dim)",
              borderBottom: active === m.id ? "1px solid var(--gold)" : "1px solid transparent",
              paddingBottom: 4, transition: "color 0.2s"
            }}>
              <span style={{ color: "var(--gold)", marginRight: 8 }}>{m.n}</span>{m.nm}
            </a>
          ))}
        </div>
        <span style={{
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.3em",
          textTransform: "uppercase", color: "var(--ink-mute)"
        }}>57 guides</span>
      </div>
    </div>
  );
}
window.ML2Nav = ML2Nav;