/* global React */

const WBB_IMG = {
  hero1: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1400&q=80",
  hero2: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80",
  hero3: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=900&q=80",
  feat1: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=900&q=80",
  feat2: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&q=80",
  feat3: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=900&q=80",
  feat4: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
  anatomy: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=1200&q=80",
};

const WBB_NAV = [
  { n: "01", id: "shirt", nm: "White shirt" },
  { n: "02", id: "anatomy", nm: "Anatomy" },
  { n: "03", id: "tee", nm: "T-shirts" },
  { n: "04", id: "knit", nm: "Knitwear" },
  { n: "05", id: "matrix", nm: "How many" },
  { n: "06", id: "trouser", nm: "Trousers" },
  { n: "07", id: "skirt", nm: "Skirts" },
  { n: "08", id: "lengths", nm: "Lengths" },
  { n: "09", id: "denim", nm: "Denim" },
  { n: "10", id: "dress", nm: "Dresses" },
  { n: "11", id: "fabric", nm: "Fabric" },
  { n: "12", id: "decades", nm: "By decade" },
  { n: "13", id: "color", nm: "Palette" },
  { n: "14", id: "cpw", nm: "Cost-per-wear" },
  { n: "15", id: "faq", nm: "FAQ" },
];

/* ============== HERO ============== */
function WBBHero() {
  return (
    <section className="wb-hero" data-screen-label="01 Hero">
      <div className="frame">
        <div className="copy">
          <div className="crumb">
            <a href="/en/women/">Women</a>
            <span>/</span>
            <a href="/en/women/build/">Build</a>
            <span>/</span>
            <span className="here">Basics</span>
          </div>
          <h1>The basics, <span className="it">decoded.</span></h1>
          <p className="lede">
            Fifteen guides to the eight pieces every woman's closet earns its way around.
            What to buy, how many of it, when to retire it, and the small print that
            decides whether a piece is worth the receipt.
          </p>
          <div className="meta">
            <span>Guides<strong>96</strong></span>
            <span>Reading<strong>9 min</strong></span>
            <span>Updated<strong>April 2026</strong></span>
            <span>Edition<strong>Vol. 02</strong></span>
          </div>
        </div>
        <div className="pics">
          <div className="pic p1" style={{ backgroundImage: `url(${WBB_IMG.hero1})` }}>
            <span className="tag">Featured · The white shirt</span>
          </div>
          <div className="pic p2" style={{ backgroundImage: `url(${WBB_IMG.hero2})` }}>
            <span className="tag">Knitwear</span>
          </div>
          <div className="pic p3" style={{ backgroundImage: `url(${WBB_IMG.hero3})` }}>
            <span className="tag">Tailored</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBHero = WBBHero;

/* ============== STICKY NAV ============== */
function WBBNav() {
  const [active, setActive] = React.useState("shirt");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = WBB_NAV[0].id;
      for (const m of WBB_NAV) {
        const el = document.getElementById(m.id); if (!el) continue;
        if (el.getBoundingClientRect().top < 200) cur = m.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="wb-nav">
      <div className="inner">
        <span className="lbl">Basics Index ·</span>
        {WBB_NAV.map(m => (
          <a key={m.id} href={`#${m.id}`} className={active === m.id ? "on" : ""}>
            <span className="n">{m.n}</span>{m.nm}
          </a>
        ))}
      </div>
    </div>
  );
}
window.WBBNav = WBBNav;

/* ============== INTRO ============== */
function WBBIntro() {
  return (
    <section className="section" data-screen-label="02 Intro">
      <div className="frame">
        <div className="wb-intro">
          <div className="left">
            <div className="row"><span>Lane</span><span>Women</span></div>
            <div className="row"><span>Chapter</span><span>Build / 01</span></div>
            <div className="row"><span>Section</span><span>Basics</span></div>
            <div className="row"><span>Reading time</span><span>9 min</span></div>
            <div className="row"><span>Filed</span><span>April 2026</span></div>
            <div className="row"><span>Updated</span><span>Quarterly</span></div>
            <div className="row"><span>Edited by</span><span>The desk</span></div>
          </div>
          <div className="right">
            <p className="standfirst">A woman's basics are the pieces that quietly do the work of three lesser things. <em>Eight pieces.</em> Fifteen answers below — read in any order, skip what you've already nailed.</p>
            <p>The closet you actually wear isn't a wishlist; it's a working tool. We've sequenced this page the way most people use it — start with the white shirt (every other section assumes you've solved this one), end at cost-per-wear (most people are shocked by the math). The matrix in the middle tells you how many of each thing you actually need.</p>
            <p>Everything here is written to last more than a season. Trends are filed under <em>Wear</em> and <em>Seasonal.</em> Here, we're talking about the bones — the pieces that age in your favor and quietly outlive the things they were bought next to.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBIntro = WBBIntro;

/* ============== 01 FEATURED — white shirts ============== */
const WBB_FEAT = [
  { n: "No. 01", t: "Best wool trousers", it: "for women", d: "Pleat, rise, drape, hem — the case for wool, the case for tailoring, and the trouser worth building around.", read: "11 min", img: "feat1", badge: "Iris leaf", href: "/en/women/build/basics/best-wool-trousers/" },
  { n: "No. 02", t: "Poplin vs.", it: "oxford", d: "Why poplin is the dressier sister and oxford is the one you'll wear on Saturdays. The two-shirt rule that solves both.", read: "6 min", img: "feat2", badge: "Buyer's guide" },
  { n: "No. 03", t: "The boyfriend", it: "shirt", d: "Borrowed from menswear, recut for women. The four labels worth owning.", read: "8 min", img: "feat3", badge: "Editor's pick" },
  { n: "No. 04", t: "How to iron", it: "a cotton shirt", d: "Five minutes, three creases, no scorch. The one skill that makes everything else look more expensive.", read: "4 min", img: "feat4", badge: "How-to" },
];
function WBBFeatured() {
  return (
    <section id="shirt" className="wb-sec" data-screen-label="03 Shirts featured">
      <div className="frame">
        <header className="wb-head">
          <div className="num">01</div>
          <div className="titles">
            <span className="eyebrow">Section 01 · The Cotton Foundation</span>
            <h2>Best white shirts <span className="it">for women.</span></h2>
          </div>
          <div className="meta">4 guides<br />Most-read this quarter</div>
        </header>
        <p className="wb-blurb">Half of a working closet sits underneath the rest of the closet, and the white shirt does most of that lifting. Start here — every other section in this page assumes you've solved this one first.</p>
        <div className="wb-feature-cards">
          {WBB_FEAT.map((f, i) => (
            <a key={i} className="wb-feat-card" href={f.href || "#shirt"}>
              <div className="img" style={{ backgroundImage: `url(${WBB_IMG[f.img]})` }}>
                <span className="badge">{f.badge}</span>
                <span className="read">{f.read}</span>
              </div>
              <span className="num">{f.n}</span>
              <h4>{f.t} <span className="it">{f.it}</span></h4>
              <p>{f.d}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WBBFeatured = WBBFeatured;

/* ============== ANATOMY ============== */
const WBB_PINS = [
  { p: "I", nm: "Collar", ds: "A camp collar sits flat, a point collar stands. The shirt that does both at once usually does neither well.", x: "44%", y: "13%", side: "right" },
  { p: "II", nm: "Yoke", ds: "Should sit at the seam where your shoulder ends. A dropped shoulder is a stylistic choice — make sure it's a choice.", x: "30%", y: "20%", side: "left" },
  { p: "III", nm: "Bust dart", ds: "Ends one to two inches from the apex. Closer means strain; farther means a bag.", x: "55%", y: "34%", side: "right" },
  { p: "IV", nm: "Cuff", ds: "A single button cuff is dressier than a turn-back. Both should clear the wrist bone with no help from a roll.", x: "20%", y: "55%", side: "left" },
  { p: "V", nm: "Hem", ds: "Tuckable shirts end three inches below the natural waist. Untucked, you want it to clear the hip.", x: "52%", y: "84%", side: "right" },
];
function WBBAnatomy() {
  return (
    <section id="anatomy" className="wb-sec" data-screen-label="04 Anatomy">
      <div className="frame">
        <header className="wb-head">
          <div className="num">02</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Diagram</span>
            <h2>Anatomy of a <span className="it">white shirt.</span></h2>
          </div>
          <div className="meta">5 measurements<br />The fit index</div>
        </header>
        <p className="wb-blurb">A shirt has six places it can fail. Most off-the-rack ones fail at three. Know what the right one looks like before the tape measure comes out.</p>
        <div className="wb-anatomy">
          <div className="stage" style={{ backgroundImage: `url(${WBB_IMG.anatomy})` }}>
            {WBB_PINS.map(p => (
              <React.Fragment key={p.p}>
                <span className="dot" style={{ left: p.x, top: p.y }} />
                <span className={`callout ${p.side}`} style={{ left: p.x, top: p.y, transform: p.side === "left" ? "translate(calc(-100% - 18px), -50%)" : "translate(18px, -50%)" }}>
                  {p.side === "right" && <span className="line" />}
                  <strong>{p.p}</strong><span>{p.nm}</span>
                  {p.side === "left" && <span className="line" />}
                </span>
              </React.Fragment>
            ))}
          </div>
          <div className="key">
            <h3>Five places it <span className="it">can fail.</span></h3>
            {WBB_PINS.map(p => (
              <div key={p.p} className="row">
                <span className="pin">{p.p}</span>
                <span className="nm">{p.nm}</span>
                <span className="ds">{p.ds}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBAnatomy = WBBAnatomy;

/* ============== BUCKET BLOCK ============== */
function WBBucket({ id, num, eyebrow, title, italic, blurb, count, q, qDesc, tags, leaves, label }) {
  return (
    <section id={id} className="wb-sec" data-screen-label={label}>
      <div className="frame">
        <header className="wb-head">
          <div className="num">{num}</div>
          <div className="titles">
            <span className="eyebrow">{eyebrow}</span>
            <h2>{title} <span className="it">{italic}</span></h2>
          </div>
          <div className="meta">{count}<br />Guides + how-tos</div>
        </header>
        <p className="wb-blurb">{blurb}</p>
        <div className="wb-bucket">
          <div className="spine">
            <p className="qstr">{q}</p>
            <p>{qDesc}</p>
            <div className="tags">
              {tags.map((t, i) => <span key={i}>{t}</span>)}
            </div>
          </div>
          <div className="wb-leaves">
            {leaves.map((l, i) => (
              <a key={i} className="wb-leaf">
                <span className="n">{String(i+1).padStart(2,"0")}</span>
                <span className="t">{l.t} {l.it && <span className="it">{l.it}</span>}</span>
                <span className="read">{l.read}</span>
                <span className="arr">→</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBucket = WBBucket;

/* ============== BUCKETS GROUP 1 (tee, knit) ============== */
function WBBuckets1() {
  return (
    <React.Fragment>
      <WBBucket
        id="tee" num="03" label="05 Tees"
        eyebrow="Section 03 · The Workhorse"
        title="The tee," italic="re-considered."
        blurb="The plain tee is the closet's quiet engine — under a blazer, under a cardigan, alone with denim. Get the weight and neckline right and the rest is shopping."
        count="7 guides"
        q="Five tees, two weights, three colors."
        qDesc="A working tee rotation is white × 2 (one heavy, one fine), black × 2, navy or stripe × 1. Rotated weekly, replaced yearly. Anything you keep beyond a year is keeping you company, not earning it."
        tags={["Cotton", "Pima", "Heavyweight", "Crew", "V-neck", "Boatneck"]}
        leaves={[
          { t: "Best white tees", it: "for women", read: "9 min" },
          { t: "Heavyweight vs. fine-gauge", it: "(when each one wins)", read: "6 min" },
          { t: "How to find a tee", it: "that doesn't go translucent", read: "4 min" },
          { t: "The boatneck case,", it: "made carefully", read: "5 min" },
          { t: "Tucking the tee", it: "without looking like you tried", read: "3 min" },
          { t: "How to wash a cotton tee", it: "(and keep the shoulder)", read: "4 min" },
          { t: "When to retire", it: "a t-shirt", read: "3 min" },
        ]}
      />
      <WBBucket
        id="knit" num="04" label="06 Knits"
        eyebrow="Section 04 · The Layer"
        title="Knitwear" italic="essentials."
        blurb="A woman should own six knits in three weights. Anything more is a drawer problem; anything less is a winter problem."
        count="9 guides"
        q="Six knits, three weights, two necklines."
        qDesc="A fine merino crew handles three seasons; a heavier cable owns winter; the cardigan covers everything else. The sixth one is whatever you bought in Italy that you can't bring yourself to retire."
        tags={["Merino", "Cashmere", "Lambswool", "Cable", "Crew", "Vee", "Cardigan"]}
        leaves={[
          { t: "Best merino sweaters", it: "for women", read: "9 min" },
          { t: "Cashmere: when it's worth it,", it: "when it's a tax", read: "7 min" },
          { t: "The case for", it: "the boatneck knit", read: "5 min" },
          { t: "How to wash a wool sweater", it: "(without shrinking it)", read: "5 min" },
          { t: "The grandfather cardigan,", it: "borrowed back", read: "6 min" },
          { t: "Crewneck vs. v-neck", it: "knits, settled", read: "4 min" },
          { t: "How to layer a knit", it: "over a button-down", read: "5 min" },
          { t: "Pilling: prevent,", it: "remove, accept", read: "4 min" },
          { t: "When to retire", it: "a sweater", read: "3 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.WBBuckets1 = WBBuckets1;

/* ============== MATRIX ============== */
function WBBMatrix() {
  return (
    <section id="matrix" className="wb-sec" data-screen-label="07 Matrix">
      <div className="frame">
        <header className="wb-head">
          <div className="num">05</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Math</span>
            <h2>How many of each, <span className="it">by lifestyle.</span></h2>
          </div>
          <div className="meta">3 lifestyles<br />10 categories</div>
        </header>
        <p className="wb-blurb">A working closet is a question of math, not taste. Here's roughly what each kind of week needs. Adjust by 20% in either direction; do not adjust by 200%.</p>
        <div className="wb-matrix-wrap">
          <table className="wb-matrix">
            <thead>
              <tr>
                <th></th>
                <th>Office, 5 days</th>
                <th className="hi">Hybrid, 2–3 days</th>
                <th>Mostly remote</th>
              </tr>
            </thead>
            <tbody>
              {[
                { nm: "White shirts", it: "(poplin + oxford)", a: "5", b: "3", c: "2" },
                { nm: "Tees", it: "(white, black, stripe)", a: "8", b: "7", c: "6" },
                { nm: "Knits", it: "(crew, cardigan)", a: "5", b: "5", c: "6" },
                { nm: "Trousers", it: "(wool + cotton)", a: "5", b: "3", c: "2" },
                { nm: "Skirts", it: "(pencil, midi)", a: "3", b: "2", c: "1" },
                { nm: "Denim", it: "(straight + slim)", a: "2", b: "3", c: "4" },
                { nm: "Dresses", it: "(work, occasion)", a: "4", b: "3", c: "2" },
                { nm: "Blazers", it: "(navy + black)", a: "3", b: "2", c: "1" },
                { nm: "Pairs of shoes", it: "(across categories)", a: "8", b: "7", c: "6" },
                { nm: "Handbags", it: "(rotation)", a: "4", b: "4", c: "3" },
              ].map((r, i) => (
                <tr key={i}>
                  <th>{r.nm} <span className="it">{r.it}</span></th>
                  <td><span className="num">{r.a}</span><span className="lbl">in rotation</span></td>
                  <td className="hi"><span className="num">{r.b}</span><span className="lbl">in rotation</span></td>
                  <td><span className="num">{r.c}</span><span className="lbl">in rotation</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="wb-matrix-foot">"In rotation" means in regular service. Add one piece per category for laundry slack and you're roughly right.</p>
      </div>
    </section>
  );
}
window.WBBMatrix = WBBMatrix;

/* ============== BUCKETS GROUP 2 (trousers, skirts) ============== */
function WBBuckets2() {
  return (
    <React.Fragment>
      <WBBucket
        id="trouser" num="06" label="08 Trousers"
        eyebrow="Section 06 · The Tailored Half"
        title="Trousers," italic="properly."
        blurb="Trousers are a fit problem first and a fabric problem second. Find the rise that flatters yours, find a hemmer who knows what they're doing, and the price tag stops mattering."
        count="8 guides"
        q="Find the rise. Cut the break. Hem once."
        qDesc="The two numbers that matter are the rise (where the waistband sits — high, mid, low) and the break (how the hem meets the shoe). Get these right and the cheaper trousers start looking like the expensive ones."
        tags={["Worsted", "Flannel", "Cotton", "Linen", "High-rise", "Mid-rise", "Wide", "Tapered"]}
        leaves={[
          { t: "Best wool trousers", it: "for women", read: "10 min" },
          { t: "How trousers should fit", it: "(the eight rules)", read: "9 min" },
          { t: "High-rise vs. mid-rise", it: "(by torso, not by trend)", read: "6 min" },
          { t: "Wide-leg trousers", it: "without drowning in fabric", read: "5 min" },
          { t: "Tapered trousers", it: "for petite frames", read: "5 min" },
          { t: "Linen trousers", it: "without looking like a tourist", read: "7 min" },
          { t: "Best chinos for women", it: "under $200", read: "6 min" },
          { t: "How to hem", it: "your own trousers", read: "8 min" },
        ]}
      />
      <WBBucket
        id="skirt" num="07" label="09 Skirts"
        eyebrow="Section 07 · The Other Half"
        title="Skirts," italic="three ways."
        blurb="A pencil for the office, a midi for everything else, an A-line for the Saturdays you don't want to think. Three skirts, three lengths, the rest is fabric."
        count="6 guides"
        q="Pencil, midi, A-line. Done."
        qDesc="Most closets own twelve skirts and wear three. Cut to those three, in colors that work with the rest of the closet, and the drawer gets quieter."
        tags={["Pencil", "Midi", "A-line", "Wool", "Cotton", "Lined"]}
        leaves={[
          { t: "Best pencil skirts", it: "for the office", read: "8 min" },
          { t: "The midi skirt,", it: "decoded by length", read: "6 min" },
          { t: "A-line skirts", it: "without going country", read: "5 min" },
          { t: "How a skirt should fit", it: "at the waist", read: "5 min" },
          { t: "Lined vs. unlined", it: "(why it matters more than you think)", read: "4 min" },
          { t: "How to alter a skirt", it: "(the four small jobs)", read: "6 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.WBBuckets2 = WBBuckets2;

/* ============== LENGTHS ============== */
const WBB_LENGTHS = [
  { y: "10%", nm: "Mini", it: "30–35cm", where: "Above the knee", ds: "Wear with opaque tights or don't wear at all. The riskiest length to get right." },
  { y: "27%", nm: "Above-knee", it: "40–45cm", where: "1–3cm above kneecap", ds: "The pencil-skirt zone. Most flattering when paired with a low-stacked heel." },
  { y: "44%", nm: "On-the-knee", it: "55–60cm", where: "Hits the kneecap", ds: "The hardest length on most legs. Best on women under 5'5\" with strong calves." },
  { y: "61%", nm: "Below-knee", it: "65–70cm", where: "3–5cm below kneecap", ds: "The 1950s length. Beautiful with a flat or low heel; never with a sneaker." },
  { y: "78%", nm: "Midi", it: "80–90cm", where: "Mid-calf", ds: "The most-worn length of the last decade. Goes with everything you already own." },
  { y: "92%", nm: "Maxi", it: "100cm+", where: "Ankle or floor", ds: "An evening length, dressed down. Don't sweep the floor unless you're being photographed." },
];
function WBBLengths() {
  return (
    <section id="lengths" className="wb-sec" data-screen-label="10 Lengths">
      <div className="frame">
        <header className="wb-head">
          <div className="num">08</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Ruler</span>
            <h2>Lengths, <span className="it">measured.</span></h2>
          </div>
          <div className="meta">6 lengths<br />By the tape, not the trend</div>
        </header>
        <p className="wb-blurb">Six lengths cover every skirt, dress, and trouser-crop a closet meets. Pick two; rotate them. The third length is for the wedding you're invited to next year.</p>
        <div className="wb-lengths">
          <div className="ruler">
            {WBB_LENGTHS.map((l, i) => (
              <React.Fragment key={i}>
                <span className="tick" style={{ top: l.y }} />
                <div className="row" style={{ top: l.y }}>
                  <span className="nm">{l.nm} <span className="it">{l.it}</span></span>
                  <span className="where">{l.where}</span>
                  <span className="ds">{l.ds}</span>
                </div>
              </React.Fragment>
            ))}
          </div>
          <div className="key">
            <h3>The two-length <span className="it">rule.</span></h3>
            <p>Most women look best at two of these six and forgettable at three. Photograph yourself in the ones you own — be unkind in the assessment — and edit the rest out.</p>
            <p className="pq">If a length doesn't earn its place by the third wearing, the length isn't the problem. The piece is.</p>
            <p>The exceptions to the rule: an evening dress can break it (you'll wear it twice a year, the length doesn't have to flatter), and a slip skirt can break it (the way it moves does the work the length usually does).</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBLengths = WBBLengths;

/* ============== BUCKETS GROUP 3 (denim, dresses) ============== */
function WBBuckets3() {
  return (
    <React.Fragment>
      <WBBucket
        id="denim" num="09" label="11 Denim"
        eyebrow="Section 09 · The Five Pocket"
        title="Denim," italic="that ages."
        blurb="The right pair of jeans takes a year to get right and ten years to give up. Buy raw, buy mid-rise, and resist the urge to wash them for at least three months."
        count="8 guides"
        q="Three rises. Three breaks. The rest is laundry."
        qDesc="Denim is geometry, not fashion. Get the rise right for your torso, the break right for your shoe, and the brand stops mattering as much as the fit."
        tags={["Selvedge", "14oz", "High-rise", "Mid-rise", "Straight", "Slim", "Wide", "Crop"]}
        leaves={[
          { t: "Best raw denim", it: "for women under $300", read: "10 min" },
          { t: "How to break in", it: "a pair of raw jeans", read: "8 min" },
          { t: "How often should you", it: "wash raw denim", read: "5 min" },
          { t: "Slim, straight, wide,", it: "(the cut question, settled)", read: "7 min" },
          { t: "Mom jeans without", it: "the costume", read: "5 min" },
          { t: "Dark wash vs. light wash", it: "for grown women", read: "4 min" },
          { t: "How to hem jeans", it: "(and keep the original cuff)", read: "6 min" },
          { t: "Selvedge denim explained", it: "(without the lecture)", read: "7 min" },
        ]}
      />
      <WBBucket
        id="dress" num="10" label="12 Dresses"
        eyebrow="Section 10 · The Single Garment"
        title="Dresses, four" italic="that earn their hangers."
        blurb="The shift, the wrap, the slip, the shirtdress. A closet that owns these four can attend any meeting, dinner, or wedding it's invited to. The rest is rotation."
        count="7 guides"
        q="Four dresses, four uses, one decade."
        qDesc="A working dress closet doesn't grow — it edits. Four shapes cover work, evening, weekends, and the wedding. Anything beyond is a hobby."
        tags={["Shift", "Wrap", "Slip", "Shirtdress", "Lined", "Bias-cut"]}
        leaves={[
          { t: "Best little black dress", it: "(at every price)", read: "11 min" },
          { t: "The shift dress,", it: "from desk to dinner", read: "6 min" },
          { t: "Wrap dresses", it: "that actually fit", read: "5 min" },
          { t: "The slip dress,", it: "worn into your forties", read: "7 min" },
          { t: "Shirtdresses", it: "for the in-between", read: "6 min" },
          { t: "Wedding-guest dresses,", it: "the rules", read: "8 min" },
          { t: "How a dress should fit", it: "(seven places to check)", read: "9 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.WBBuckets3 = WBBuckets3;

/* ============== FABRIC LADDER ============== */
const WBB_FABRIC = [
  { o: "I", t: "Cotton,", it: "long-staple", d: "Pima, Egyptian, Supima. Softer hand, longer life, fewer pills.", v: "Always", isHi: true },
  { o: "II", t: "Wool,", it: "merino", d: "Fine-gauge merino is the closet's most-wearable fiber. Three seasons, no scratch.", v: "Always", isHi: true },
  { o: "III", t: "Silk,", it: "sand-washed", d: "Heavier than charmeuse, doesn't catch every nail. The blouse fabric.", v: "Sparingly" },
  { o: "IV", t: "Linen,", it: "Belgian", d: "Wrinkles are part of the design. Heavier weights wrinkle more graciously.", v: "Summer" },
  { o: "V", t: "Cashmere,", it: "two-ply minimum", d: "Single-ply is a lie. Two-ply is the floor; four-ply is for the coat.", v: "When it counts" },
  { o: "VI", t: "Viscose,", it: "the right kind", d: "Lenzing or Cupro, never the cheap stuff. It's the fabric most people get wrong.", v: "Carefully" },
  { o: "VII", t: "Polyester,", it: "structured only", d: "Acceptable in a tailored coat shell. Unacceptable next to skin.", v: "Rarely" },
  { o: "VIII", t: "Acrylic", d: "We can't recommend this. It pills, sweats, and won't take a stitch.", v: "Skip" },
];
function WBBFabric() {
  return (
    <section id="fabric" className="wb-sec" data-screen-label="13 Fabric">
      <div className="frame">
        <header className="wb-head">
          <div className="num">11</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Ladder</span>
            <h2>Fabric, <span className="it">ranked.</span></h2>
          </div>
          <div className="meta">8 fibers<br />The closet's chemistry</div>
        </header>
        <p className="wb-blurb">Most of what makes a piece worth keeping happens at the fiber level. The label tells you most of what you need to know — read it before you read the price.</p>
        <div className="wb-fabric">
          {WBB_FABRIC.slice(0, 5).map((f) => (
            <a key={f.o} className="rung">
              <span className="ord">{f.o}</span>
              <h4>{f.t} <span className="it">{f.it}</span></h4>
              <p>{f.d}</p>
              <span className="verdict">Verdict · <b>{f.v}</b></span>
            </a>
          ))}
        </div>
        <div className="wb-fabric" style={{ marginTop: 12 }}>
          {WBB_FABRIC.slice(5).map((f) => (
            <a key={f.o} className="rung">
              <span className="ord">{f.o}</span>
              <h4>{f.t} <span className="it">{f.it || ""}</span></h4>
              <p>{f.d}</p>
              <span className="verdict">Verdict · <b>{f.v}</b></span>
            </a>
          ))}
          <a className="rung" style={{ background: "color-mix(in oklab, var(--bg) 80%, var(--gold) 8%)" }}>
            <span className="ord" style={{ fontSize: 22 }}>★</span>
            <h4>The cheat sheet</h4>
            <p>If a piece is going to touch skin all day, demand a natural fiber. If a piece is structural — a coat, a blazer — a small percentage of synthetic is fine.</p>
            <span className="verdict">Print this · <b>Fold by drawer</b></span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.WBBFabric = WBBFabric;

/* ============== DECADE SHIFT (20s/30s/40s/50s) ============== */
const WBB_DECADES = [
  {
    age: "20s", sub: "Under 30",
    h: "What you got <i>away with.</i>",
    lede: "Cheap tees that lasted a season. Three-pack denim. Whatever fit. Heels you couldn't walk in. Trends as currency.",
    items: [
      ["Three-pack tees", "Bought every six months"],
      ["Skinny denim", "Felt thin, looked thinner"],
      ["Logo crewnecks", "One brand per chest"],
      ["Heels you couldn't walk in", "Photographed once, retired"],
      ["Bag a year", "Trend-driven, replaced quickly"],
    ],
  },
  {
    age: "30s", sub: "30–40", isHi: true,
    h: "What starts to <i>earn its place.</i>",
    lede: "The first real coat. The first tailor visit. The first cashmere that's actually two-ply. The first time you don't replace something.",
    items: [
      ["A real wool coat", "Camel or navy, knee-length"],
      ["The white shirt rotation", "Two poplins, replaced yearly"],
      ["Mid-rise straight denim", "Hemmed properly, kept for years"],
      ["A leather bag", "One, kept for the decade"],
      ["A flat shoe you love", "Loafer or ballet"],
    ],
  },
  {
    age: "40s", sub: "40–50", isHi: true,
    h: "What earns <i>its keep.</i>",
    lede: "Heavier weights. Better fits. Tailoring on the receipt. Less of everything, but each piece doing more of the work.",
    items: [
      ["Cashmere knits in three colors", "Never bulky, always layered"],
      ["A tailored blazer", "Navy worsted, dressmaker's hand"],
      ["A trench, perfectly broken in", "Beige, knee-length"],
      ["Two pairs of leather shoes", "Polish, resole, repeat"],
      ["The watch you'll keep", "38mm, leather strap"],
    ],
  },
  {
    age: "50s+", sub: "50 and beyond",
    h: "What <i>stays.</i>",
    lede: "The closet stops growing. The pieces that are here have earned their hangers ten times over. The math gets quiet.",
    items: [
      ["The dressmaker, on first-name terms", "The relationship is the asset"],
      ["Heavier silks, looser cuts", "The body changes, the fabric flatters"],
      ["A coat for forty more winters", "Wool or cashmere, lined twice"],
      ["Costume jewelry, kept simple", "One pair of pearls, one of gold"],
      ["A handbag with a service history", "Conditioned yearly, repaired once"],
    ],
  },
];
function WBBDecades() {
  return (
    <section id="decades" className="wb-sec" data-screen-label="14 Decades">
      <div className="frame">
        <header className="wb-head">
          <div className="num">12</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Shift</span>
            <h2>Wardrobe essentials, <span className="it">by decade.</span></h2>
          </div>
          <div className="meta">4 decades<br />Tailoring counts more</div>
        </header>
        <p className="wb-blurb">The closet doesn't change at thirty so much as the math does. Things you got away with at twenty stop earning their place. Tailoring stops being optional.</p>
        <div className="wb-decades">
          {WBB_DECADES.map((d, i) => (
            <div key={i} className={`col ${d.isHi ? "hi" : ""}`}>
              <span className="age">{d.age}</span>
              <span className="sub">{d.sub}</span>
              <h3 dangerouslySetInnerHTML={{ __html: d.h.replace("<i>", '<span class="it">').replace("</i>", "</span>") }} />
              <p className="lede">{d.lede}</p>
              <ul>
                {d.items.map((it, j) => (
                  <li key={j}><span>{it[0]}<small>{it[1]}</small></span></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WBBDecades = WBBDecades;

/* ============== PALETTE ============== */
const WBB_PAL = [
  { hex: "#0e1a2b", nm: "Navy", role: "Replaces black eight times out of ten." },
  { hex: "#3a3531", nm: "Espresso", role: "The brown that does the most work." },
  { hex: "#a99373", nm: "Camel", role: "The coat color, the bag color, the trench." },
  { hex: "#ede4d2", nm: "Cream", role: "Off-white. Warmer than ivory, kinder than white." },
  { hex: "#9c5346", nm: "Oxblood", role: "The accent. One piece per outfit." },
  { hex: "#6e6f5b", nm: "Sage", role: "The soft green that reads as a neutral." },
];
function WBBPalette() {
  return (
    <section id="color" className="wb-sec" data-screen-label="15 Palette">
      <div className="frame">
        <header className="wb-head">
          <div className="num">13</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Palette</span>
            <h2>Best neutrals <span className="it">for a women's capsule.</span></h2>
          </div>
          <div className="meta">5 neutrals + 1 accent<br />The capsule rule</div>
        </header>
        <div className="wb-palette">
          <div className="lede-col">
            <h3>Five neutrals, <span className="it">one accent.</span></h3>
            <p>The capsule wardrobe lives or dies on its palette. Five neutrals get you through every meeting, dinner, and weekend you're likely to attend.</p>
            <p>Add one accent — oxblood, sage, dusty rose — and the rotation stops feeling like a uniform. The accent is the only color that's allowed to be on trend; the neutrals are forever.</p>
            <p>If you're starting from zero, build navy first. It's the most-used color in any working closet, and it replaces black in roughly eight out of every ten places you'd reach for it.</p>
          </div>
          <div className="swatches">
            {WBB_PAL.map((p, i) => (
              <a key={i} className="sw">
                <div className="chip" style={{ background: p.hex }} />
                <div className="body">
                  <span className="nm">{p.nm}</span>
                  <span className="hex">{p.hex}</span>
                  <span className="role">{p.role}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBPalette = WBBPalette;

/* ============== COST PER WEAR ============== */
function WBBCpw() {
  return (
    <section id="cpw" className="wb-sec" data-screen-label="16 Cost-per-wear">
      <div className="frame">
        <header className="wb-head">
          <div className="num">14</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Math, Continued</span>
            <h2>Cost per wear, <span className="it">honestly counted.</span></h2>
          </div>
          <div className="meta">3 examples<br />The pricing rule</div>
        </header>
        <p className="wb-blurb">The most useful number for a basics closet isn't the receipt. It's the receipt divided by the wears. Here's the math on three things every woman owns.</p>
        <div className="wb-cpw">
          <div className="left">
            <span className="lbl">The rule</span>
            <h3>Buy the boring thing <span className="it">expensive.</span></h3>
            <p className="formula">cpw = <b>price</b> ÷ <b>(wears × years)</b><br />
            If a $30 tee lasts a year (60 wears) it costs $0.50 a wear. A $120 heavyweight tee that lasts six years (360 wears) costs $0.33. The expensive one is cheaper. Fight us in the comments.</p>
          </div>
          <div className="right">
            <div className="item">
              <span className="nm">A · The white shirt</span>
              <span className="price">$220 <span className="it">/ 4yr</span></span>
              <span className="wears">~200 wears</span>
              <span className="verdict">$1.10<span className="sub">per wear</span></span>
            </div>
            <div className="item">
              <span className="nm">B · The wool trouser</span>
              <span className="price">$340 <span className="it">/ 8yr</span></span>
              <span className="wears">~400 wears</span>
              <span className="verdict">$0.85<span className="sub">per wear</span></span>
            </div>
            <div className="item">
              <span className="nm">C · The cashmere knit</span>
              <span className="price">$420 <span className="it">/ 6yr</span></span>
              <span className="wears">~300 wears</span>
              <span className="verdict">$1.40<span className="sub">per wear</span></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBCpw = WBBCpw;

/* ============== FAQ ============== */
const WBB_FAQ = [
  { q: "How many basics", it: "should a woman actually own?", a: "Roughly 40 to 55 pieces if you count tees, shirts, knits, trousers, skirts, denim, dresses, and outerwear together. Less if you're remote, more if you suit up daily. The honest answer is the matrix above — adjust by lifestyle, not by season." },
  { q: "What's the single best", it: "wardrobe basic to invest in?", a: "A tailored navy blazer in tropical wool. It's the most used piece in a working closet and the one that benefits most from real tailoring. Spend on this before you spend on anything else." },
  { q: "Are basics for women", it: "the same as a capsule wardrobe?", a: "No. Basics are the building blocks; a capsule is a finished, edited rotation. Basics include things you replace yearly (tees, shirts). A capsule is the ten or so pieces those basics get combined into. Basics first, capsules second." },
  { q: "How often should women", it: "replace their basics?", a: "Tees: yearly. Shirts: 18–24 months. Knits: 3–5 years (longer for cashmere, with care). Trousers and denim: 5–8 years with proper care. Shoes: a decade if they're resoleable. Bags: a lifetime, with one professional cleaning every five years." },
  { q: "Are these basics", it: "okay for women over 50?", a: "Largely yes. The over-50 closet looks more like the over-40 closet, with a tilt toward heavier weights, more tailoring, looser cuts, and fewer experiments. Drop the things that ever felt forced; nothing else has to change." },
  { q: "What women's basics should", it: "I avoid buying altogether?", a: "Pre-distressed denim, anything labelled 'one-size-fits-all,' bodycon dresses with no give, polyester shirts marketed as silk, and any shoe described as 'fashion sneaker.' That last one will save you about $400 a year." },
  { q: "How do I", it: "build basics on a budget?", a: "Start with the white shirt (one good poplin, $90–$150 at honest brands), then the dark denim (one pair, raw, $120–$180), then a wool trouser (charity shops carry these for $30 if you have a tailor). Three pieces, three weekends of work, a closet that already does most of what you need." },
];
function WBBFaq() {
  return (
    <section id="faq" className="wb-sec" data-screen-label="17 FAQ">
      <div className="frame">
        <header className="wb-head">
          <div className="num">15</div>
          <div className="titles">
            <span className="eyebrow">SEO · The Long-Tail</span>
            <h2>Questions women <span className="it">actually ask.</span></h2>
          </div>
          <div className="meta">7 answers<br />Updated quarterly</div>
        </header>
        <p className="wb-blurb">Tap a question to read the short version. Each one links out to a longer guide if you'd like the receipts.</p>
        <div className="wb-faq">
          {WBB_FAQ.map((f, i) => (
            <details key={i}>
              <summary>
                <span className="n">Q.{String(i+1).padStart(2,"0")}</span>
                <span className="q">{f.q} <span className="it">{f.it}</span></span>
                <span className="plus">+</span>
              </summary>
              <div className="ans">
                <p>{f.a}</p>
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WBBFaq = WBBFaq;

/* ============== FINALE ============== */
const WBB_FINALE = [
  { r: "I", t: "White", it: "shirt", d: "Poplin, replaced yearly.", a: "Read guide" },
  { r: "II", t: "Heavy", it: "tee", d: "Six oz, set-in shoulder.", a: "Read guide" },
  { r: "III", t: "Wool", it: "trouser", d: "Worsted, mid-rise.", a: "Read guide" },
  { r: "IV", t: "Straight", it: "denim", d: "Raw, dark, hemmed.", a: "Read guide" },
  { r: "V", t: "Merino", it: "knit", d: "Crew, charcoal first.", a: "Read guide" },
];
function WBBFinale() {
  return (
    <section className="section" data-screen-label="18 Finale">
      <div className="frame">
        <div className="wb-finale">
          <div className="frame">
            <div className="head">
              <div>
                <div className="eyebrow">The Recap · Five out of eight</div>
                <h3>If you read nothing else, <span className="it">read these.</span></h3>
              </div>
              <p className="desc">The five basics most women get wrong, ranked by how often we get asked about them. Click through to the guide; we'll see you on the other side.</p>
            </div>
            <div className="recap">
              {WBB_FINALE.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="arr">{p.a} →</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBBFinale = WBBFinale;

/* ============== CROSS — back up + sister sections ============== */
function WBBCross() {
  const items = [
    { href: "/en/women/build/outerwear/", n: "Build · 02", t: "Outerwear", d: "Six coats. Three you actually need.", a: "Open" },
    { href: "/en/women/build/footwear/", n: "Build · 03", t: "Footwear", d: "Six shoes, one lifetime.", a: "Open" },
    { href: "/en/women/build/handbags/", n: "Build · 05", t: "Handbags", d: "Four bags, four uses.", a: "Open" },
    { href: "/en/women/build/", n: "Up a level", t: "Build", d: "All eight chapters of the foundation.", a: "Back up", bridge: true },
  ];
  return (
    <section className="section section-rule" data-screen-label="19 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 16</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>building.</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 }}>
            Three sister sections<br />or a level up
          </div>
        </div>
        <div className="cross-lanes">
          {items.map((c, i) => (
            <a key={i} href={c.href} className={c.bridge ? "bridge-card" : ""}>
              <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.WBBCross = WBBCross;
