/* global React */

const BB_IMG = {
  hero1: "https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?w=1400&q=80",
  hero2: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=900&q=80",
  hero3: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80",
  feat1: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=900&q=80",
  feat2: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=900&q=80",
  feat3: "https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=900&q=80",
  feat4: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80",
};
window.BB_IMG = BB_IMG;

const BB_NAV = [
  { n: "01", id: "tee", nm: "T-shirts" },
  { n: "02", id: "anatomy", nm: "Anatomy" },
  { n: "03", id: "shirt", nm: "Dress shirts" },
  { n: "04", id: "trouser", nm: "Trousers" },
  { n: "05", id: "matrix", nm: "How many" },
  { n: "06", id: "denim", nm: "Denim" },
  { n: "07", id: "knit", nm: "Knitwear" },
  { n: "08", id: "age", nm: "After 40" },
  { n: "09", id: "color", nm: "Neutrals" },
  { n: "10", id: "build", nm: "Building" },
  { n: "11", id: "cpw", nm: "Cost-per-wear" },
  { n: "12", id: "faq", nm: "FAQ" },
];
window.BB_NAV = BB_NAV;

/* ============== HERO ============== */
function BHero() {
  return (
    <section className="bhero" data-screen-label="01 Hero">
      <div className="frame">
        <div className="copy">
          <div className="crumb">
            <a href="/en/men/">Men</a>
            <span>/</span>
            <a href="/en/men/build/">Build</a>
            <span>/</span>
            <span className="here">Basics</span>
          </div>
          <h1>The basics, <span className="it">decoded.</span></h1>
          <p className="lede">
            Twelve guides to the eight pieces every man's closet earns its way around.
            What to buy, how many of it, when to replace it, and what to skip.
          </p>
          <div className="meta">
            <span>Guides<strong>72</strong></span>
            <span>Reading<strong>6 min</strong></span>
            <span>Updated<strong>April 2026</strong></span>
            <span>Edition<strong>Vol. 03</strong></span>
          </div>
        </div>
        <div className="pics">
          <div className="pic p1" style={{ backgroundImage: `url(${BB_IMG.hero1})` }}>
            <span className="tag">Featured · OCBD</span>
          </div>
          <div className="pic p2" style={{ backgroundImage: `url(${BB_IMG.hero2})` }}>
            <span className="tag">Knitwear</span>
          </div>
          <div className="pic p3" style={{ backgroundImage: `url(${BB_IMG.hero3})` }}>
            <span className="tag">Trouser</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BHero = BHero;

/* ============== STICKY NAV ============== */
function BNav() {
  const [active, setActive] = React.useState("tee");
  React.useEffect(() => {
    const onScroll = () => {
      const ids = BB_NAV.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="basics-nav">
      <div className="inner">
        <span className="lbl">Basics Index ·</span>
        {BB_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.BNav = BNav;

/* ============== INTRO ============== */
function BIntro() {
  return (
    <section className="section" data-screen-label="02 Intro">
      <div className="frame">
        <div className="b-l4-intro">
          <div className="left">
            <div className="row"><span>Lane</span><span>Men</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>6 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>
          <div className="right">
            <p className="standfirst">A man's "basics" should do most of the work and ask for none of the credit. <em>Eight pieces.</em> Twelve answers below — read in any order, skip what you've already nailed.</p>
            <p>This is the index. Each section here points to a longer how-to guide with brand recs, fit notes, and the small print that decides whether a piece is worth your money. If you only read one section, make it the matrix — it tells you how many of each thing you actually need before the closet starts groaning.</p>
            <p>Everything here is written to last more than a season. Trends are filed under "Wear" and "Seasonal." Here, we're talking about the bones.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BIntro = BIntro;

/* ============== 01 FEATURED — t-shirts (cards) ============== */
const BB_FEAT = [
  { n: "No. 01", t: "Best white t-shirts", it: "for men", d: "Six-ounce cotton, set-in shoulder, hem at the belt buckle. The tee that doesn't apologize.", read: "8 min", img: "feat1", badge: "Iris leaf", href: "/en/men/build/basics/best-white-t-shirts/" },
  { n: "No. 02", t: "Crewneck vs.", it: "v-neck", d: "Why crewnecks have outlasted the v-neck for fifty years and counting.", read: "5 min", img: "feat2", badge: "Buyer's guide" },
  { n: "No. 03", t: "Heavyweight", it: "tee, decoded", d: "When to spend on weight, when to spend on cut. Six brands worth the price.", read: "7 min", img: "feat3", badge: "Editor's pick" },
  { n: "No. 04", t: "How to fold", it: "a t-shirt", d: "The Marie Kondo fold for men who hate Marie Kondo. Stack of ten in a drawer.", read: "3 min", img: "feat4", badge: "How-to" },
];
function BFeatured() {
  return (
    <section id="tee" className="l4-sec" data-screen-label="03 Tees featured">
      <div className="frame">
        <header className="l4-head">
          <div className="num">01</div>
          <div className="titles">
            <span className="eyebrow">Section 01 · The Cotton Foundation</span>
            <h2>Best white t-shirts <span className="it">for men.</span></h2>
          </div>
          <div className="meta">4 guides<br />Most-read this quarter</div>
        </header>
        <p className="l4-blurb">Half of menswear sits underneath the rest of menswear, and the white tee does most of that lifting. Start here — every other section in this page assumes you've solved this one first.</p>
        <div className="feature-cards">
          {BB_FEAT.map((f, i) => (
            <a key={i} className="feat-card" href={f.href || "#tee"}>
              <div className="img" style={{ backgroundImage: `url(${BB_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.BFeatured = BFeatured;

/* ============== ANATOMY ============== */
const ANATOMY_PINS = [
  { p: "I", nm: "Collar", ds: "Button-down points sit between 7 and 8.5 cm. Anything shorter is a dress shirt; anything longer is the seventies.", x: "30%", y: "12%", side: "left" },
  { p: "II", nm: "Yoke", ds: "Should sit at the seam where your shoulder ends — not on your back, not on your sleeve.", x: "55%", y: "20%", side: "right" },
  { p: "III", nm: "Chest", ds: "Two fingers of room when buttoned. Three is loose, one is a problem.", x: "48%", y: "38%", side: "right" },
  { p: "IV", nm: "Sleeve", ds: "Ends at the wrist bone untucked, exactly. Half an inch of jacket cuff if you're suiting.", x: "20%", y: "52%", side: "left" },
  { p: "V", nm: "Hem", ds: "Should reach the third belt loop minimum if you ever plan to tuck it.", x: "50%", y: "82%", side: "right" },
];
function BAnatomy() {
  return (
    <section id="anatomy" className="l4-sec" data-screen-label="04 Anatomy">
      <div className="frame">
        <header className="l4-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="l4-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="anatomy">
          <div className="stage">
            <div className="placeholder">[ Photograph · Oxford cloth shirt, front view ]</div>
            {ANATOMY_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: "translate(-50%, -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>
            {ANATOMY_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.BAnatomy = BAnatomy;

/* ============== BUCKET BLOCKS ============== */
function Bucket({ id, num, eyebrow, title, italic, blurb, count, q, qDesc, tags, leaves }) {
  return (
    <section id={id} className="l4-sec">
      <div className="frame">
        <header className="l4-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="l4-blurb">{blurb}</p>
        <div className="bucket-block">
          <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="leaf-list">
            {leaves.map((l, i) => (
              <a key={i} className="leaf-row">
                <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>
  );
}

/* ============== 02 — BUCKETS GROUP 1 (shirts, trousers) ============== */
function BBuckets1() {
  return (
    <React.Fragment>
      <Bucket
        id="shirt" num="03"
        eyebrow="Section 03 · The Workhorse"
        title="How many dress shirts" italic="should a man own?"
        blurb="The short answer is seven if you wear them daily, four if you don't. The long answer accounts for laundry rotation, oxford vs. poplin, and how often you sweat through them in summer."
        count="6 guides"
        q="Seven shirts, three colors, two collars."
        qDesc="A working dress-shirt rotation is white × 3, blue × 2, pinpoint × 2. The math accounts for one in the wash, one drying, and five in service."
        tags={["Oxford", "Poplin", "Pinpoint", "Spread", "Point", "OCBD"]}
        leaves={[
          { t: "How many dress shirts should a man own", read: "7 min" },
          { t: "Best", it: "white dress shirts for men", read: "9 min" },
          { t: "Oxford vs. poplin: which", it: "to buy first", read: "5 min" },
          { t: "Spread collar vs. point collar", it: "(when each one wins)", read: "6 min" },
          { t: "Tucked vs. untucked: shirt", it: "lengths that work both ways", read: "4 min" },
          { t: "How to wash a dress shirt", it: "without ruining it", read: "5 min" },
          { t: "When to retire", it: "a dress shirt", read: "3 min" },
        ]}
      />
      <Bucket
        id="trouser" num="04"
        eyebrow="Section 04 · The Bottom Half"
        title="The right" italic="trousers."
        blurb="Trousers are a fit problem first and a fabric problem second. Get the rise right, get the break right, the rest is a hemmer's job."
        count="8 guides"
        q="Find the rise. Cut the break. Hem once."
        qDesc="The two numbers that matter for trousers are the rise (how high the waistband sits) and the break (how the hem meets the shoe). Get these right and the price tag stops mattering."
        tags={["Worsted", "Flannel", "Cotton", "Linen", "Pleated", "Plain front"]}
        leaves={[
          { t: "Best wool trousers", it: "for men", read: "8 min" },
          { t: "How trousers should fit", it: "(the eight rules)", read: "9 min" },
          { t: "Pleated vs. plain front: who", it: "wears each well", read: "6 min" },
          { t: "Trouser rise: low,", it: "mid, high — explained", read: "5 min" },
          { t: "What is the right", it: "trouser break?", read: "4 min" },
          { t: "Linen trousers", it: "without looking like a tourist", read: "7 min" },
          { t: "Best chinos for men", it: "under $200", read: "6 min" },
          { t: "How to hem", it: "your own trousers", read: "8 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.BBuckets1 = BBuckets1;

/* ============== MATRIX ============== */
function BMatrix() {
  return (
    <section id="matrix" className="l4-sec" data-screen-label="07 Matrix">
      <div className="frame">
        <header className="l4-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 />8 categories</div>
        </header>
        <p className="l4-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="matrix-wrap">
          <table className="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 tees", it: "(crew)", a: "8", b: "6", c: "5" },
                { nm: "Dress shirts", it: "(white + blue)", a: "10", b: "6", c: "3" },
                { nm: "Wool trousers", it: "(plain front)", a: "5", b: "3", c: "1" },
                { nm: "Chinos", it: "(stone, navy)", a: "2", b: "3", c: "4" },
                { nm: "Denim", it: "(raw, dark)", a: "1", b: "2", c: "3" },
                { nm: "Knits", it: "(crew, vee)", a: "3", b: "4", c: "5" },
                { nm: "Suits", it: "(navy, charcoal)", a: "2", b: "1", c: "1" },
                { nm: "Pairs of shoes", it: "(across categories)", a: "6", b: "5", c: "4" },
              ].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="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.BMatrix = BMatrix;

/* ============== BUCKETS GROUP 2 (denim, knit) ============== */
function BBuckets2() {
  return (
    <React.Fragment>
      <Bucket
        id="denim" num="06"
        eyebrow="Section 06 · The Five Pocket"
        title="Denim," italic="done right."
        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 six months."
        count="6 guides"
        q="Raw denim. Mid-rise. Six months unwashed."
        qDesc="Selvedge denim earns its character through wear, not chemistry. The fades you'll have at year five are the ones you put there yourself."
        tags={["Selvedge", "14oz", "Mid-rise", "Straight", "Slim", "Tapered"]}
        leaves={[
          { t: "Best raw denim", it: "for men 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 vs. straight vs. tapered", it: "(the cut question)", read: "6 min" },
          { t: "Dark wash vs. light wash", it: "for grown men", read: "4 min" },
          { t: "Selvedge denim explained", it: "(without the lecture)", read: "7 min" },
        ]}
      />
      <Bucket
        id="knit" num="07"
        eyebrow="Section 07 · The Layer"
        title="Knitwear" italic="essentials."
        blurb="A man should own four knits and only four. A merino crew, a heavier cable, a fine-gauge half-zip, and the cardigan you reach for on Sunday."
        count="5 guides"
        q="Four knits, three weights."
        qDesc="A merino crew handles three seasons; a heavyweight cable owns winter; a half-zip is the smartest layer your office wardrobe owns; the cardigan is for everything else."
        tags={["Merino", "Cashmere", "Lambswool", "Cable", "Crew", "Cardigan"]}
        leaves={[
          { t: "Best merino sweaters", it: "for men", read: "8 min" },
          { t: "Cashmere: when it's worth it,", it: "when it's not", read: "6 min" },
          { t: "How to wash a wool sweater", it: "(without shrinking it)", read: "5 min" },
          { t: "Crewneck vs. v-neck", it: "knits, settled", read: "4 min" },
          { t: "The case for", it: "the cardigan", read: "5 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.BBuckets2 = BBuckets2;

/* ============== AGE SHIFT ============== */
function BAge() {
  return (
    <section id="age" className="l4-sec" data-screen-label="10 Age">
      <div className="frame">
        <header className="l4-head">
          <div className="num">08</div>
          <div className="titles">
            <span className="eyebrow">Editorial · The Shift</span>
            <h2>Wardrobe essentials for men <span className="it">over 40.</span></h2>
          </div>
          <div className="meta">12 swaps<br />Tailoring counts more</div>
        </header>
        <p className="l4-blurb">The closet doesn't change at 40 so much as the math does. Things you got away with at 28 stop earning their place. Tailoring stops being optional.</p>
        <div className="age-shift">
          <div className="col under">
            <span className="sub">Under 40</span>
            <h3>What you got <span className="it">away with.</span></h3>
            <p className="lede">Cheap tees that lasted a season. Whatever fit. The hoodie collection. Sneakers as a personality.</p>
            <ul>
              <li>Three-pack tees<small>Bought every six months</small></li>
              <li>Skinny denim<small>Felt thin, looked thinner</small></li>
              <li>Logo crewnecks<small>One brand per chest</small></li>
              <li>The black t-shirt phase<small>Statistically inevitable</small></li>
              <li>Athletic shoes off the court<small>Court not actually involved</small></li>
              <li>Buying suits "for the wedding"<small>Then never again</small></li>
            </ul>
          </div>
          <div style={{ background: "var(--rule)" }} />
          <div className="col over">
            <span className="sub">Over 40</span>
            <h3>What earns <span className="it">its keep.</span></h3>
            <p className="lede">Heavier weights. Better fits. Tailoring on the receipt. Shoes that take polish, knits that take drycleaning, suits that take a second life.</p>
            <ul>
              <li>Heavyweight tees, replaced yearly<small>Six-ounce minimum</small></li>
              <li>Mid-rise straight denim<small>Raw, dark, hemmed</small></li>
              <li>Merino crews in three colors<small>Never bulky, always layered</small></li>
              <li>Two suits, properly tailored<small>Navy worsted, charcoal flannel</small></li>
              <li>Leather shoes that take polish<small>Loafers, derbies, boots</small></li>
              <li>One quiet watch<small>38–40mm, leather strap</small></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BAge = BAge;

/* ============== BUCKETS GROUP 3 (color, build) ============== */
function BBuckets3() {
  return (
    <React.Fragment>
      <Bucket
        id="color" num="09"
        eyebrow="Section 09 · The Palette"
        title="Best neutral colors" italic="for a men's capsule."
        blurb="The capsule wardrobe lives or dies on its palette. Five neutrals, no exceptions, and a single accent color that you swap out by season."
        count="5 guides"
        q="Navy, charcoal, brown, white, stone."
        qDesc="Five neutrals get you through every meeting, dinner, and weekend you're likely to attend. One accent (oxblood, olive, Carolina blue) keeps it from reading like a uniform."
        tags={["Navy", "Charcoal", "Brown", "White", "Stone", "Oxblood"]}
        leaves={[
          { t: "Best neutral colors for a", it: "men's capsule wardrobe", read: "9 min" },
          { t: "Why navy beats", it: "black, every time", read: "5 min" },
          { t: "The case for tobacco brown", it: "(and how to wear it)", read: "7 min" },
          { t: "Off-white vs. pure white", it: "in tailoring", read: "4 min" },
          { t: "One accent color, picked correctly", it: "(by skin tone)", read: "6 min" },
        ]}
      />
      <Bucket
        id="build" num="10"
        eyebrow="Section 10 · The Sequence"
        title="Building a wardrobe" italic="from zero."
        blurb="If you started with an empty closet today, this is the order. Twelve months, a piece a month, finished by your next birthday."
        count="5 guides"
        q="A piece a month. Twelve months. Done."
        qDesc="The sequence matters. Buy the suit before you buy the cardigan; buy the shoes before the watch. There's a logic to it that has more to do with fit appointments than with money."
        tags={["Sequence", "Budgeting", "Tailoring", "Replacement", "Investment"]}
        leaves={[
          { t: "How to build a wardrobe", it: "from scratch (in 12 months)", read: "11 min" },
          { t: "Wardrobe essentials checklist", it: "for men, by season", read: "8 min" },
          { t: "When to spend, when to save", it: "(category by category)", read: "9 min" },
          { t: "How to find a tailor", it: "you'll keep for life", read: "6 min" },
          { t: "What to skip:", it: "the eight things you don't need", read: "7 min" },
        ]}
      />
    </React.Fragment>
  );
}
window.BBuckets3 = BBuckets3;

/* ============== COST PER WEAR CARD ============== */
function BCostCard() {
  return (
    <section id="cpw" className="l4-sec" data-screen-label="13 Cost-per-wear">
      <div className="frame">
        <header className="l4-head">
          <div className="num">11</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="l4-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 man owns.</p>
        <div className="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 $20 tee lasts a year (50 wears) it costs $0.40 a wear. A $90 tee that lasts five years (250 wears) costs $0.36. The expensive one is cheaper. Fight us in the comments.</p>
          </div>
          <div className="right">
            <div className="item">
              <span className="nm">A · The white tee</span>
              <span className="price">$90 <span className="it">/ 5yr</span></span>
              <span className="wears">~250 wears</span>
              <span className="verdict">$0.36<span className="sub">per wear</span></span>
            </div>
            <div className="item">
              <span className="nm">B · The dress shirt</span>
              <span className="price">$160 <span className="it">/ 4yr</span></span>
              <span className="wears">~180 wears</span>
              <span className="verdict">$0.89<span className="sub">per wear</span></span>
            </div>
            <div className="item">
              <span className="nm">C · The wool trouser</span>
              <span className="price">$320 <span className="it">/ 8yr</span></span>
              <span className="wears">~400 wears</span>
              <span className="verdict">$0.80<span className="sub">per wear</span></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BCostCard = BCostCard;

/* ============== FAQ ============== */
const FAQ = [
  { q: "How many basics", it: "should a man actually own?", a: "Roughly 30 to 40 pieces if you count tees, shirts, knits, trousers, denim, 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 navy worsted suit. It's the most expensive thing on this page and the most-used. Tailored properly, it does formal, business, dinner, weddings, and funerals. Nothing else in a man's closet is asked to do that much." },
  { q: "Are basics for men", 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 every year (tees, shirts). A capsule is the ten or so pieces those basics get combined into. You need basics first, capsules second." },
  { q: "How often should men", it: "replace their basics?", a: "Tees: yearly. Dress shirts: 18–24 months. Knits: 3–5 years. Trousers and denim: 5–8 years with proper care. Shoes: a decade if they're resoleable. The closet is a slow-moving thing if you bought right the first time." },
  { q: "Are these basics", it: "okay for men over 50?", a: "Largely yes. The over-50 closet looks more like the over-40 closet, with a slight tilt toward heavier weights, more tailoring, and fewer experiments. Drop the white sneaker if it ever felt forced; nothing else has to change." },
  { q: "What men's basics should", it: "I avoid buying altogether?", a: "Pre-distressed denim, anything labelled 'classic fit' without a tailor's measurements, novelty socks, t-shirts with chest logos larger than a dime, and any shoe described as 'fashion sneaker.' That last one will save you about $400 a year." },
];
function BFAQ() {
  return (
    <section id="faq" className="l4-sec" data-screen-label="14 FAQ">
      <div className="frame">
        <header className="l4-head">
          <div className="num">12</div>
          <div className="titles">
            <span className="eyebrow">SEO · The Long-Tail</span>
            <h2>Questions men <span className="it">actually ask.</span></h2>
          </div>
          <div className="meta">6 answers<br />Updated quarterly</div>
        </header>
        <p className="l4-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="faq">
          {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.BFAQ = BFAQ;

/* ============== BLUE FINALE ============== */
const FINALE = [
  { r: "I", t: "Heavyweight", it: "tee", d: "Six oz, set-in shoulder.", a: "Read guide" },
  { r: "II", t: "Oxford", it: "shirt", d: "Cotton, button-down.", a: "Read guide" },
  { r: "III", t: "Wool", it: "trouser", d: "Worsted, plain front.", a: "Read guide" },
  { r: "IV", t: "Raw", it: "denim", d: "14oz, mid-rise, straight.", a: "Read guide" },
  { r: "V", t: "Merino", it: "knit", d: "Crew, charcoal first.", a: "Read guide" },
];
function BFinale() {
  return (
    <section className="section" data-screen-label="15 Finale">
      <div className="frame">
        <div className="b-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 men 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">
              {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.BFinale = BFinale;

/* ============== CROSS — back up + sister sections ============== */
function BCross() {
  const items = [
    { href: "/en/men/build/outerwear/", n: "Build · 02", t: "Outerwear", d: "Six coats. Three you actually need.", a: "Open" },
    { href: "/en/men/build/footwear/", n: "Build · 03", t: "Footwear", d: "Six shoes, one lifetime.", a: "Open" },
    { href: "/en/men/build/accessories/", n: "Build · 04", t: "Accessories", d: "The small stuff that finishes.", a: "Open" },
    { href: "/en/men/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="16 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 13</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.BCross = BCross;