/* global React, W_IMAGES */

/* ============================================================
   Editor's slip — letter from Nelly
   ============================================================ */
function EditorSlip() {
  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 Nelly, 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>Women</span></div>
            <div className="row"><span>Editor</span><span>Nelly</span></div>
            <div className="row"><span>Filed from</span><span>Istanbul</span></div>
            <div className="row"><span>Reading time</span><span>4 min</span></div>
            <div className="slip-portrait">
              <img src={W_IMAGES.editor} alt="Nelly, Lane Editor" />
            </div>
          </aside>
          <div className="slip-body">
            <p>
              The closet you actually wear isn't a wishlist — it's a working tool. Five
              pieces, sometimes seven, that you pull from on the way out the door without
              thinking about them. Everything else is decoration. We built this lane around
              that idea.
            </p>
            <p>
              The job here is to get you to a wardrobe that travels with you, season after
              season. <em>Build</em> is where you start — the pieces every closet earns its
              way around. <em>Wear</em> is the everyday — how to put them on without
              looking like you tried too hard. <em>Style</em> is the fun part: the small
              decisions that make a get-up specific to you.
            </p>
            <div className="pull">
              "Style isn't having more — it's knowing what to do with what you already own."
            </div>
            <p>
              Read in any order you like. Skim the index, save what you need, come back
              when the seasons turn. We update Tuesdays. Five new each week, no filler,
              no rules you didn't ask for.
            </p>
            <div className="signoff">
              <span>Yours,</span>
              <span className="sig">— Nelly</span>
              <span>· Lane Editor, Women</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.EditorSlip = EditorSlip;

/* ============================================================
   L2 — BUILD
   ============================================================ */
const BUILD_GUIDES = [
  { n: "01", t: "The blazer", sub: "Navy first, fit at the shoulder, fabric you can travel in.", m: "8 min" },
  { n: "02", t: "The white shirt", sub: "Poplin vs. oxford. The case for cotton, always.", m: "5 min" },
  { n: "03", t: "Denim that fits", sub: "Three rises, three breaks. Find yours once.", m: "7 min" },
  { n: "04", t: "The trench", sub: "Shoulder seam, sleeve length, why beige still wins.", m: "6 min" },
  { n: "05", t: "A real handbag", sub: "Buy once. Carry it for ten years.", m: "5 min" },
  { n: "06", t: "Knitwear, the long view", sub: "Cashmere, merino, the difference your closet feels.", m: "6 min" },
  { n: "07", t: "Tailored trousers", sub: "Pleat or flat front — and how to find a hemmer.", m: "5 min" },
];

function L2Build() {
  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 wardrobe.</span></h2>
          </div>
          <div className="l2-meta">12 guides<br />Updated weekly</div>
        </header>
        <p className="l2-lede">
          The pieces every closet earns its way around. Buy them once, fit them right,
          wear them for a decade.
        </p>
        <div className="build-grid">
          <a className="build-hero" style={{ backgroundImage: `url(${W_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 Nelly</span>
            </div>
          </a>
          <div className="build-list">
            {BUILD_GUIDES.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.L2Build = L2Build;

/* ============================================================
   L2 — WEAR
   ============================================================ */
const WEAR_CARDS = [
  { n: "01", img: "wear1", t: "Layer for", it: "shoulder season.", d: "Three weights, two textures, and the trick to making them look unplanned.", m: "5 min" },
  { n: "02", img: "wear2", t: "White sneakers,", it: "without looking lazy.", d: "Why the right pair of canvas low-tops is still the most versatile shoe you own.", m: "4 min" },
  { n: "03", img: "wear3", t: "The navy blazer,", it: "in spring.", d: "How to take winter's hardest worker into warm weather without breaking a sweat.", m: "6 min" },
];

function L2Wear() {
  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">24 guides<br />Updated Tuesdays</div>
        </header>
        <p className="l2-lede">
          How to put your closet on without looking like you tried too hard. Real outfits,
          real weather, no styling tricks you can't repeat at home.
        </p>
        <div className="wear-grid">
          {WEAR_CARDS.map((c) => (
            <a key={c.n} className="wear-card">
              <div className="img" style={{ backgroundImage: `url(${W_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.L2Wear = L2Wear;

/* ============================================================
   L2 — STYLE
   ============================================================ */
const STYLE_CELLS = [
  { n: "01", t: "Mixing", it: "neutrals.", d: "Cream, oat, bone, ivory. They're not the same — and that's the point.", tag: "Style · Color" },
  { n: "02", t: "Tucking,", it: "half-tucking.", d: "When to commit. When to break the rule. The thirty-second test.", tag: "Style · Detail" },
  { n: "03", t: "One belt,", it: "two outfits.", d: "The accessory that quietly does the most. Pick once, finish anything.", tag: "Style · Finish" },
  { n: "04", t: "Pearl,", it: "reconsidered.", d: "How to wear the most overdone jewel without looking like your grandmother.", tag: "Style · Jewelry" },
  { n: "05", t: "The case for", it: "a man's watch.", d: "Why oversized wears better than dainty — and where to start.", tag: "Style · Watches" },
  { n: "06", t: "Soft tailoring,", it: "off-duty.", d: "A blazer with sneakers, done so it looks intentional.", tag: "Style · Tailoring" },
];

function L2Style() {
  return (
    <section id="style" className="l2 l2-style" data-screen-label="05 Style">
      <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">Style, <span className="it">on purpose.</span></h2>
          </div>
          <div className="l2-meta">18 guides<br />New each Friday</div>
        </header>
        <p className="l2-lede">
          The small decisions that make an outfit specific to you. Mixing, tucking,
          finishing — the punctuation marks of a get-up.
        </p>
        <div className="style-grid">
          {STYLE_CELLS.map((c) => (
            <a key={c.n} className="style-cell">
              <span className="num">No. {c.n} · Style</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.L2Style = L2Style;

/* ============================================================
   L2 — FINISH
   ============================================================ */
const FINISH_ROWS = [
  { n: "01", img: "fin1", t: "The handbag", it: "rotation.", d: "Three bags, three uses. The math that makes the closet make sense." },
  { n: "02", img: "fin2", t: "Scarves,", it: "year-round.", d: "Silk in summer, wool in winter, tied four ways that aren't fussy." },
  { n: "03", img: "fin3", t: "Loafer", it: "hours.", d: "The shoe that does the most while asking the least." },
  { n: "04", img: "fin4", t: "Earrings,", it: "everyday.", d: "Two pairs, no more, that you'll wear until the gold wears thin." },
];

function L2Finish() {
  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">9 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">
          {FINISH_ROWS.map((r) => (
            <a key={r.n} className="finish-row">
              <span className="n">{r.n}</span>
              <div className="img" style={{ backgroundImage: `url(${W_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.L2Finish = L2Finish;

/* ============================================================
   L2 — SEASONAL
   ============================================================ */
function L2Seasonal() {
  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">6 drops a year<br />Curated by Nelly</div>
        </header>
        <p className="l2-lede">
          Six times a year, a packet of guides keyed to the weather you're actually in.
          Saved by tens of thousands of readers.
        </p>
        <div className="seasonal-grid">
          <a className="season-card" style={{ backgroundImage: `url(${W_IMAGES.spring})` }}>
            <div className="top">
              <span className="badge">Live · S/S '26</span>
              <span>Drop 04</span>
            </div>
            <div className="bot">
              <h4>Spring, <span className="it">unbothered.</span></h4>
              <p>Twelve guides for the in-between weather, when the trench earns its keep.</p>
              <span className="cta">Open the drop →</span>
            </div>
          </a>
          <a className="season-card" style={{ backgroundImage: `url(${W_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 coat. Filed in September.</p>
              <span className="cta">Notify me →</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}
window.L2Seasonal = L2Seasonal;

/* ============================================================
   ESSENTIALS — the starter five capsule
   ============================================================ */
const STARTER = [
  { ic: "①", nm: "Navy", it: "blazer", m: "Build · 01" },
  { ic: "②", nm: "White", it: "shirt", m: "Build · 02" },
  { ic: "③", nm: "Dark", it: "denim", m: "Build · 03" },
  { ic: "④", nm: "Trench", it: "coat", m: "Build · 04" },
  { ic: "⑤", nm: "Loafer", it: "or flat", m: "Build · 05" },
];

function Essentials() {
  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">infinite outfits.</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">
            {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.Essentials = Essentials;

/* ============================================================
   QUESTIONS — the everyday questions
   ============================================================ */
const QS = [
  { n: "01", q: "Can I wear a navy blazer in summer?", a: "Yes — in tropical wool or cotton-linen. The trick is fabric, not season." },
  { n: "02", q: "Do I need a tailor?", a: "For one piece a year, yes. The blazer first, the trousers second." },
  { n: "03", q: "Are white sneakers still acceptable?", a: "Always, with the right pair. We update the list every spring." },
  { n: "04", q: "How many pairs of jeans do I really need?", a: "Two: a dark wash and a lighter one. Maybe a third in white for summer." },
  { n: "05", q: "What's the case for cashmere over merino?", a: "Hand-feel and longevity. Pay for cashmere once, wear it for ten years." },
  { n: "06", q: "Loafer or flat?", a: "Loafer for tailoring, flat for denim. Buy both in the same brown leather." },
];

function Questions() {
  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)" }}>everyday</span> questions.
          </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">
          {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.Questions = Questions;

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