/* global React */

const WB_IMAGES = {
  hero: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=2400&q=80",
  basics1: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1400&q=80",
  basics2: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=900&q=80",
  basics3: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=900&q=80",
  basics4: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=900&q=80",
  basics5: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
  outer: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1400&q=80",
  bag1: "https://images.unsplash.com/photo-1591561954557-26941169b49e?w=900&q=80",
  bag2: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=900&q=80",
  bag3: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=900&q=80",
  bag4: "https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?w=900&q=80",
  q1: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&q=80",
  q2: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=900&q=80",
  q3: "https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?w=900&q=80",
  q4: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&q=80",
};
window.WB_IMAGES = WB_IMAGES;

const WB_MENU = [
  { n: "01", id: "basics", nm: "Basics", href: "/en/women/build/basics/" },
  { n: "02", id: "outerwear", nm: "Outerwear", href: "/en/women/build/outerwear/" },
  { n: "03", id: "footwear", nm: "Footwear", href: "/en/women/build/footwear/" },
  { n: "04", id: "accessories", nm: "Accessories", href: "/en/women/build/accessories/" },
  { n: "05", id: "handbags", nm: "Handbags", href: "/en/women/build/handbags/" },
  { n: "06", id: "work", nm: "Work", href: "/en/women/build/work-wardrobe/" },
  { n: "07", id: "casual", nm: "Casual", href: "/en/women/build/casual-wardrobe/" },
  { n: "08", id: "capsule", nm: "Capsule", href: "/en/women/build/capsule-wardrobe/" },
];
window.WB_MENU = WB_MENU;

function WBHero() {
  return (
    <section className="hero-shell w-hero l3" data-screen-label="01 Hero">
      <div className="bg" style={{ backgroundImage: `url(${WB_IMAGES.hero})` }} />
      <span className="frame-tag">Build · Chapter 01</span>
      <span className="credit">Photographed in Milan · S/S '26</span>
      <div className="frame">
        <div>
          <div className="crumb">
            <a href="/en/women/">Women</a>
            <span className="sep">/</span>
            <span className="here">Build</span>
          </div>
          <div className="kicker">
            <span>Vol. 02 <span className="crest" /> Lane 01 · The Foundation</span>
          </div>
        </div>
        <div className="copy">
          <h1 className="megaword">
            Build<span className="ampersand">,</span>
            <span className="it">the foundation.</span>
          </h1>
          <p className="lede">
            The pieces every closet earns its way around. Eight chapters — buy them once,
            fit them right, wear them for a decade.
          </p>
        </div>
        <div className="hero-stats">
          <div className="stat"><div className="n"><span className="gold">08</span></div><div className="l">Chapters</div></div>
          <div className="stat"><div className="n">96</div><div className="l">Guides total</div></div>
          <div className="stat"><div className="n">6 yr</div><div className="l">Avg. wear-life</div></div>
          <div className="stat"><div className="n"><span className="gold">★</span></div><div className="l">Editor's foundation</div></div>
        </div>
      </div>
    </section>
  );
}
window.WBHero = WBHero;

function WBNav() {
  const [active, setActive] = React.useState("basics");
  React.useEffect(() => {
    const onScroll = () => {
      const ids = WB_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 }}>
      <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 Build Index</span>
        <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
          {WB_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)" }}>96 guides</span>
      </div>
    </div>
  );
}
window.WBNav = WBNav;

function BIntro() {
  return (
    <section className="section" data-screen-label="02 Intro">
      <div className="frame">
        <div className="b-intro">
          <div className="standfirst">
            <div className="sf-row"><span>Lane</span><span>Women</span></div>
            <div className="sf-row"><span>Chapter</span><span>Build</span></div>
            <div className="sf-row"><span>Edition</span><span>Vol. 02</span></div>
            <div className="sf-row"><span>Reading time</span><span>3 min</span></div>
            <div className="sf-row"><span>Filed</span><span>S/S '26</span></div>
          </div>
          <div className="body">
            <p>The closet you actually wear isn't a wishlist — it's a working tool. Eight chapters, somewhere between fifty and a hundred guides depending on the season, that you'll come back to once a year and again every time the weather turns.</p>
            <p>Read this in any order. <em>Basics</em> first if you're starting from scratch. <em>Capsule</em> last if you want the math. Skip <em>Work</em> if you don't need it; double back when you do.</p>
            <p>The pieces inside have one thing in common — they earn their place. They look right at the shoulder, age in your favor, and quietly do the work of three lesser things.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BIntro = BIntro;

const BASICS = [
  { n: "No. 01 · Featured", t: "The white shirt", it: "decoded.", d: "Poplin, oxford, twill — the case for cotton, always." },
  { n: "No. 02", t: "Tee, the right one", d: "Weight, cut, neckline. The closet's quiet workhorse." },
  { n: "No. 03", t: "Tank & camisole", d: "Layered, never alone. The under-piece worth paying for." },
  { n: "No. 04", t: "Trousers, tailored", d: "Two rises, one hemmer. Find yours once." },
  { n: "No. 05", t: "Denim that ages", d: "Three rises, three breaks. Skip the rest." },
];
function S1Basics() {
  const imgs = [WB_IMAGES.basics1, WB_IMAGES.basics2, WB_IMAGES.basics3, WB_IMAGES.basics4, WB_IMAGES.basics5];
  return (
    <section id="basics" className="l3-sec" data-screen-label="03 Basics">
      <div className="frame">
        <header className="l3-head">
          <div className="num">01</div>
          <div className="titles">
            <span className="eyebrow">Chapter 01 · Foundation</span>
            <h2 className="title">Basics<span className="it">.</span></h2>
          </div>
          <div className="meta">14 guides<br />Always in season</div>
        </header>
        <p className="l3-lede">The five pieces every closet earns its way around. The bones of every other chapter.</p>
        <div className="basics-grid">
          {BASICS.map((b, i) => (
            <a key={i} className={`b b${i+1}`} style={{ backgroundImage: `url(${imgs[i]})` }}>
              <div className="label">
                <span className="num">{b.n}</span>
                <h3 className="t">{b.t} {b.it && <span className="it">{b.it}</span>}</h3>
                {b.d && <span className="d">{b.d}</span>}
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S1Basics = S1Basics;

const OUTER = [
  { n: "01", t: "The trench", it: "coat.", sub: "Beige, knee-length. The piece that ages best of any in the closet." },
  { n: "02", t: "Wool overcoat", sub: "Single-breasted, navy or camel. Buy it long, buy it once." },
  { n: "03", t: "Leather jacket", sub: "Moto or bomber. The shoulder seam tells the story." },
  { n: "04", t: "Tailored blazer", sub: "Counted as outerwear in shoulder season. Navy first." },
  { n: "05", t: "Light parka", sub: "For the weather you can't predict. Hood, no fur." },
  { n: "06", t: "Quilted shell", sub: "The under-coat layer that lets you stop owning three jackets." },
];
function S2Outerwear() {
  return (
    <section id="outerwear" className="l3-sec" data-screen-label="04 Outerwear">
      <div className="frame">
        <header className="l3-head">
          <div className="num">02</div>
          <div className="titles">
            <span className="eyebrow">Chapter 02 · The Top Layer</span>
            <h2 className="title">Outerwear<span className="it">.</span></h2>
          </div>
          <div className="meta">12 guides<br />Updated by season</div>
        </header>
        <p className="l3-lede">Six coats that cover any weather a closet meets. Buy two now, build the rest over the decade.</p>
        <div className="split">
          <div className="split-img" style={{ backgroundImage: `url(${WB_IMAGES.outer})` }}>
            <span className="stamp">Featured · The Trench</span>
          </div>
          <div className="split-body">
            <div className="checklist">
              {OUTER.map((o) => (
                <a key={o.n} className="row">
                  <span className="n">{o.n}</span>
                  <span className="t">{o.t} <span className="it">{o.it || ""}</span><small>{o.sub}</small></span>
                  <span className="arr">→</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.S2Outerwear = S2Outerwear;

const FOOT = [
  { n: "I", t: "Loafer", it: "hours.", d: "The shoe that does the most while asking the least.", m: "Year-round" },
  { n: "II", t: "White", it: "sneaker.", d: "Canvas low-tops, replaced every other spring.", m: "All seasons" },
  { n: "III", t: "Ballet", it: "flat.", d: "The one with the elastic — comfort that doesn't show.", m: "S/S" },
  { n: "IV", t: "Ankle", it: "boot.", d: "Stacked heel, leather sole. The closet's bridge piece.", m: "A/W" },
  { n: "V", t: "Sandal,", it: "leather.", d: "Strap, not slide. Worth a hundred pairs of plastic.", m: "Summer" },
  { n: "VI", t: "Heel,", it: "low.", d: "The one you can actually walk in. Three-inch ceiling.", m: "Evening" },
];
function S3Footwear() {
  return (
    <section id="footwear" className="l3-sec" data-screen-label="05 Footwear">
      <div className="frame">
        <header className="l3-head">
          <div className="num">03</div>
          <div className="titles">
            <span className="eyebrow">Chapter 03 · From the Ground Up</span>
            <h2 className="title">Footwear<span className="it">.</span></h2>
          </div>
          <div className="meta">10 guides<br />The starter rotation</div>
        </header>
        <p className="l3-lede">Six shoes that cover a year. Most closets hold thirty pairs. Most closets are wrong.</p>
        <div className="f-index">
          {FOOT.map((f) => (
            <a key={f.n} className="f-row">
              <span className="big">{f.n}</span>
              <h4>{f.t} <span className="it">{f.it}</span></h4>
              <span className="desc">{f.d}</span>
              <span className="meta">{f.m}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S3Footwear = S3Footwear;

const ACC = [
  { n: "01", t: "Earrings,", it: "everyday.", d: "Two pairs, no more, that you'll wear until the gold wears thin.", tag: "Jewelry" },
  { n: "02", t: "The pearl,", it: "reconsidered.", d: "How to wear the most overdone jewel without looking dated.", tag: "Jewelry" },
  { n: "03", t: "A man's", it: "watch.", d: "Why oversized wears better than dainty.", tag: "Watches" },
  { n: "04", t: "Belt,", it: "narrow.", d: "Brown leather, brass buckle. Worn for ten years.", tag: "Leather" },
  { n: "05", t: "Silk", it: "scarf.", d: "Tied four ways. None of them fussy.", tag: "Silk" },
  { n: "06", t: "Wool", it: "scarf.", d: "Cashmere only when it counts.", tag: "Wool" },
  { n: "07", t: "Sunglasses,", it: "right.", d: "One frame, one lens, one decade.", tag: "Eyewear" },
  { n: "08", t: "Gloves,", it: "leather.", d: "Lined or unlined. Always brown.", tag: "Leather" },
];
function S4Accessories() {
  return (
    <section id="accessories" className="l3-sec" data-screen-label="06 Accessories">
      <div className="frame">
        <header className="l3-head">
          <div className="num">04</div>
          <div className="titles">
            <span className="eyebrow">Chapter 04 · Punctuation</span>
            <h2 className="title">Accessories<span className="it">.</span></h2>
          </div>
          <div className="meta">16 guides<br />Pick once, finish anything</div>
        </header>
        <p className="l3-lede">The small decisions that quietly do the most. Eight categories, hundreds of editions.</p>
        <div className="tile-grid">
          {ACC.map((a) => (
            <a key={a.n} className="tile">
              <span className="num">No. {a.n}</span>
              <h5>{a.t} <span className="it">{a.it}</span></h5>
              <p>{a.d}</p>
              <span className="tag">{a.tag}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S4Accessories = S4Accessories;

const BAGS = [
  { n: "01", img: "bag1", t: "The everyday", it: "tote.", d: "Soft leather, no closure, fits a laptop.", b: "Daily" },
  { n: "02", img: "bag2", t: "The shoulder", it: "bag.", d: "The one that survived four trends and counting.", b: "Editor's" },
  { n: "03", img: "bag3", t: "The cross-body", d: "Hands-free. The travel and weekend bag.", b: "Travel" },
  { n: "04", img: "bag4", t: "The clutch", it: "in black.", d: "Evening only. Owned for life.", b: "Evening" },
];
function S5Handbags() {
  return (
    <section id="handbags" className="l3-sec" data-screen-label="07 Handbags">
      <div className="frame">
        <header className="l3-head">
          <div className="num">05</div>
          <div className="titles">
            <span className="eyebrow">Chapter 05 · The Carry</span>
            <h2 className="title">Handbags<span className="it">.</span></h2>
          </div>
          <div className="meta">8 guides<br />A four-bag rotation</div>
        </header>
        <p className="l3-lede">Three bags, three uses, one rule: buy them once. The math that makes the closet make sense.</p>
        <div className="bag-row">
          {BAGS.map(b => (
            <a key={b.n} className="bag">
              <div className="img" style={{ backgroundImage: `url(${WB_IMAGES[b.img]})` }}>
                <span className="badge">{b.b}</span>
              </div>
              <span className="num">No. {b.n} · Bag</span>
              <h5>{b.t} {b.it && <span className="it">{b.it}</span>}</h5>
              <p>{b.d}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S5Handbags = S5Handbags;

const WORK = [
  { n: "01", t: "Tailored", it: "blazer", d: "Navy first, charcoal second." },
  { n: "02", t: "White poplin", it: "shirt", d: "Crisp, replaced yearly." },
  { n: "03", t: "Wool", it: "trouser", d: "One pleat, full length." },
  { n: "04", t: "Pencil", it: "skirt", d: "Knee-length, lined." },
  { n: "05", t: "Knit,", it: "fine gauge", d: "Merino, never bulky." },
  { n: "06", t: "Pump,", it: "low", d: "Two-and-a-half inches, no higher." },
  { n: "07", t: "Structured", it: "tote", d: "Holds a laptop without slouching." },
];
function S6Work() {
  return (
    <section id="work" className="l3-sec" data-screen-label="08 Work">
      <div className="frame">
        <header className="l3-head">
          <div className="num">06</div>
          <div className="titles">
            <span className="eyebrow">Chapter 06 · The Office</span>
            <h2 className="title">Work <span className="it">wardrobe.</span></h2>
          </div>
          <div className="meta">11 guides<br />Five days a week</div>
        </header>
        <div className="work-spread">
          <div className="col-left">
            <h3>Seven pieces, <span className="it">five days.</span></h3>
            <p>The office closet, reduced to the parts that earn it. No throw-away suiting, no rotation you can't memorize. Buy them right and the math gets quiet.</p>
          </div>
          <div className="work-list">
            {WORK.map((w) => (
              <a key={w.n} className="it">
                <span className="n">No. {w.n}</span>
                <h6>{w.t} <span className="it-i">{w.it}</span></h6>
                <p>{w.d}</p>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.S6Work = S6Work;

const QUART = [
  { img: "q1", t: "Off-duty", it: "denim." },
  { img: "q2", t: "Soft", it: "knits." },
  { img: "q3", t: "Easy", it: "dresses." },
  { img: "q4", t: "Layered", it: "tees." },
];
function S7Casual() {
  return (
    <section id="casual" className="l3-sec" data-screen-label="09 Casual">
      <div className="frame">
        <header className="l3-head">
          <div className="num">07</div>
          <div className="titles">
            <span className="eyebrow">Chapter 07 · The Weekend</span>
            <h2 className="title">Casual <span className="it">wardrobe.</span></h2>
          </div>
          <div className="meta">9 guides<br />Saturday energy</div>
        </header>
        <p className="l3-lede">The off-duty closet — pieces that look unplanned without trying to. Four families, infinite combinations.</p>
        <div className="quartet">
          {QUART.map((q, i) => (
            <a key={i} className="q" style={{ backgroundImage: `url(${WB_IMAGES[q.img]})` }}>
              <div className="body">
                <span className="num">No. {String(i+1).padStart(2,"0")} · Casual</span>
                <h5>{q.t} <span className="it">{q.it}</span></h5>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.S7Casual = S7Casual;

const FIVE = [
  { r: "I", t: "Navy", it: "blazer", d: "Tropical wool. Three seasons.", tag: "Build · 01" },
  { r: "II", t: "White", it: "shirt", d: "Poplin. Replaced yearly.", tag: "Build · 02" },
  { r: "III", t: "Dark", it: "denim", d: "Mid-rise, straight, raw.", tag: "Build · 03" },
  { r: "IV", t: "Trench", it: "coat", d: "Beige. Knee-length.", tag: "Build · 04" },
  { r: "V", t: "Loafer", it: "or flat", d: "Leather, brown.", tag: "Build · 05" },
];
function S8Capsule() {
  return (
    <section id="capsule" className="l3-sec" data-screen-label="10 Capsule">
      <div className="frame">
        <div className="capsule">
          <div className="frame">
            <div className="capsule-head">
              <div className="lede-block">
                <div className="eyebrow">Chapter 08 · The Math</div>
                <h3>Five pieces, <span className="it">infinite outfits.</span></h3>
              </div>
              <p className="desc">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="capsule-five">
              {FIVE.map((p) => (
                <a key={p.r} className="pc">
                  <span className="roman">{p.r}</span>
                  <h6>{p.t} <span className="it">{p.it}</span></h6>
                  <p>{p.d}</p>
                  <span className="tag">{p.tag}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.S8Capsule = S8Capsule;

function CrossLanes() {
  const items = [
    { href: "/en/women/wear/", n: "Lane 02", t: "Wear", d: "How to put it on without trying.", a: "Open Wear" },
    { href: "/en/women/style/", n: "Lane 03", t: "Style", d: "The small decisions that make it yours.", a: "Open Style" },
    { href: "/en/women/finish/", n: "Lane 04", t: "Finish", d: "The accessories that quietly do the most.", a: "Open Finish" },
    { href: "/en/women/seasonal/", n: "Lane 05", t: "Seasonal", d: "Drops keyed to the weather you're in.", a: "Open Seasonal" },
  ];
  return (
    <section className="section section-rule" data-screen-label="11 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 09</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>reading.</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 }}>
            Four sister chapters<br />in the women's lane
          </div>
        </div>
        <div className="cross-lanes">
          {items.map((c, i) => (
            <a key={i} href={c.href}>
              <span className="n">{c.n}</span>
              <h6>{c.t}</h6>
              <p>{c.d}</p>
              <span className="arr">{c.a}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CrossLanes = CrossLanes;
