/* global React, M_IMAGES */

const MB_IMAGES = {
  hero: "https://images.unsplash.com/photo-1593032465175-481ac7f401a0?w=2400&q=80",
  basics1: "https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?w=1400&q=80",
  basics2: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=900&q=80",
  basics3: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=900&q=80",
  basics4: "https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=900&q=80",
  basics5: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80",
  outer: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1400&q=80",
  q1: "https://images.unsplash.com/photo-1516826957135-700dedea698c?w=900&q=80",
  q2: "https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=900&q=80",
  q3: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&q=80",
  q4: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80",
};
window.MB_IMAGES = MB_IMAGES;

const MB_MENU = [
  { n: "01", id: "basics", nm: "Basics", href: "/en/men/build/basics/" },
  { n: "02", id: "outerwear", nm: "Outerwear", href: "/en/men/build/outerwear/" },
  { n: "03", id: "fabric", nm: "Fabric", href: "/en/men/build/fabric/" },
  { n: "04", id: "footwear", nm: "Footwear", href: "/en/men/build/footwear/" },
  { n: "05", id: "accessories", nm: "Accessories", href: "/en/men/build/accessories/" },
  { n: "06", id: "color", nm: "Color", href: "/en/men/build/color/" },
  { n: "07", id: "work", nm: "Work", href: "/en/men/build/work-wardrobe/" },
  { n: "08", id: "casual", nm: "Casual", href: "/en/men/build/casual-wardrobe/" },
  { n: "09", id: "weekend", nm: "Weekend", href: "/en/men/build/weekend-wardrobe/" },
  { n: "10", id: "capsule", nm: "Capsule", href: "/en/men/build/capsule-wardrobe/" },
];
window.MB_MENU = MB_MENU;

/* =============== HERO =============== */
function MBHero() {
  return (
    <section className="hero-shell w-hero l3" data-screen-label="01 Hero">
      <div className="bg" style={{ backgroundImage: `url(${MB_IMAGES.hero})` }} />
      <span className="frame-tag">Build · Chapter 01</span>
      <span className="credit">Photographed in Naples · A/W '26</span>
      <div className="frame">
        <div>
          <div className="crumb">
            <a href="/en/men/">Men</a>
            <span className="sep">/</span>
            <span className="here">Build</span>
          </div>
          <div className="kicker">
            <span>Vol. 03 <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 menswear math.</span>
          </h1>
          <p className="lede">
            Eight chapters. The closet you'll still be wearing in a decade.
            No trend pieces, no clearance regret — just the bones.
          </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">72</div><div className="l">Guides total</div></div>
          <div className="stat"><div className="n">10 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.MBHero = MBHero;

/* =============== STICKY NAV =============== */
function MBNav() {
  const [active, setActive] = React.useState("basics");
  React.useEffect(() => {
    const onScroll = () => {
      const ids = MB_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="mb-nav-bar" style={{ position: "sticky", top: 70, zIndex: 40 }}>
      <div className="mb-nav-inner">
        <span className="label">The Build Index</span>
        <div className="mb-nav-list">
          {MB_MENU.map(m => (
            <a key={m.id} href={m.href} className={active === m.id ? "on" : ""}>
              <span className="n">{m.n}</span><span className="nm">{m.nm}</span>
            </a>
          ))}
        </div>
        <span className="label">72 guides</span>
      </div>
    </div>
  );
}
window.MBNav = MBNav;

/* =============== INTRO =============== */
function MBIntro() {
  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>Men</span></div>
            <div className="sf-row"><span>Chapter</span><span>Build</span></div>
            <div className="sf-row"><span>Edition</span><span>Vol. 03</span></div>
            <div className="sf-row"><span>Reading time</span><span>4 min</span></div>
            <div className="sf-row"><span>Filed</span><span>A/W '26</span></div>
          </div>
          <div className="body">
            <p>Most men's closets contain about forty things. Most men wear about twelve of them. The other twenty-eight cost money, take up rail space, and apologize for themselves every morning.</p>
            <p>This is the twelve. <em>Buy slowly.</em> Buy once. Hem once. Then quit.</p>
            <p>The pieces here aren't fashionable. That's the point — they were here before the trend, they'll be here after, and in between they do the work of three things you'd otherwise own.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.MBIntro = MBIntro;

/* =============== 01 BASICS =============== */
const MB_BASICS = [
  { n: "No. 01 · Featured", t: "The white", it: "OCBD.", d: "Oxford cloth, button-down. Wears tucked, untucked, and with everything else on this list." },
  { n: "No. 02", t: "Crewneck tee, heavyweight", d: "Six ounces minimum. Shoulder seam where the shoulder ends." },
  { n: "No. 03", t: "Henley, three-button", d: "The under-layer that doesn't apologize for being seen." },
  { n: "No. 04", t: "Wool trouser", d: "Tropical wool, plain front, full break. The grown-up pant." },
  { n: "No. 05", t: "Five-pocket selvedge", d: "14oz, raw, mid-rise. Bought once, worn forever, washed reluctantly." },
];
function MB1Basics() {
  const imgs = [MB_IMAGES.basics1, MB_IMAGES.basics2, MB_IMAGES.basics3, MB_IMAGES.basics4, MB_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">12 guides<br />Always in season</div>
        </header>
        <p className="l3-lede">Five things every closet needs before it earns the right to a sixth. Get these right and the rest is shopping.</p>
        <div className="basics-grid">
          {MB_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.MB1Basics = MB1Basics;

/* =============== 02 OUTERWEAR =============== */
const MB_OUTER = [
  { n: "01", t: "The trench", it: "coat.", sub: "Khaki, single-breasted, hemmed at the knee. Earns its keep in shoulder season." },
  { n: "02", t: "Wool overcoat", sub: "Charcoal or camel. Below the knee or not at all." },
  { n: "03", t: "Field jacket", sub: "Olive, four pockets, waxed cotton. The only casual coat you'll ever need." },
  { n: "04", t: "Leather jacket", sub: "Café racer or A-2. Black or brown — pick one and commit." },
  { n: "05", t: "Tailored topcoat", sub: "The unofficial third piece of the suit. Pairs with denim, pairs with worsted." },
  { n: "06", t: "Down liner", sub: "Quiet, packable, and never visible from the outside." },
];
function MB2Outerwear() {
  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">10 guides<br />Updated by season</div>
        </header>
        <p className="l3-lede">Six coats cover any weather a man meets in this country. You probably need three of them. You definitely don't need eleven.</p>
        <div className="split">
          <div className="split-img" style={{ backgroundImage: `url(${MB_IMAGES.outer})` }}>
            <span className="stamp">Featured · The Trench</span>
          </div>
          <div className="split-body">
            <div className="checklist">
              {MB_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.MB2Outerwear = MB2Outerwear;

/* =============== FABRIC LADDER (novel) =============== */
const MB_FABRIC = [
  { oz: "3", lbl: "summer", t: "Tropical wool", it: "(the suit you can sit in)", v: "Open weave. Breathes. The only wool worth wearing in July.", w: 16, when: "May–Aug" },
  { oz: "5", lbl: "shoulder", t: "Poplin", it: "(the shirt)", v: "Smooth, dressy, doesn't crumple by lunch.", w: 25, when: "S/S · A/W" },
  { oz: "6", lbl: "shoulder", t: "Oxford cloth", it: "(the OCBD)", v: "Basket weave, slight texture. Tucked or out, dressed up or down.", w: 32, when: "Year-round" },
  { oz: "9", lbl: "all-season", t: "Worsted wool", it: "(the suit)", v: "The 9-month suit. If you own one suit, this is it.", w: 50, when: "Sep–May" },
  { oz: "11", lbl: "autumn", t: "Twill cotton", it: "(the chino)", v: "Diagonal weave. Holds a crease. Ages with character.", w: 62, when: "A/W transition" },
  { oz: "14", lbl: "winter", t: "Selvedge denim", it: "(the jean)", v: "Raw, loomstate, dyed twice. Earns its fades.", w: 76, when: "Y/R, mostly cool" },
  { oz: "16", lbl: "winter", t: "Flannel", it: "(the trouser)", v: "Brushed worsted. Soft hand. The wool you can pet.", w: 86, when: "Nov–Feb" },
  { oz: "20+", lbl: "deep winter", t: "Tweed", it: "(the jacket)", v: "Donegal, harris, shetland. Looks better with rain on it.", w: 100, when: "Dec–Feb" },
];
function MBFabric() {
  return (
    <section id="fabric" className="l3-sec" data-screen-label="05 Fabric">
      <div className="frame">
        <header className="l3-head">
          <div className="num">03</div>
          <div className="titles">
            <span className="eyebrow">Chapter 03 · The Cloth</span>
            <h2 className="title">Fabric, <span className="it">by weight.</span></h2>
          </div>
          <div className="meta">Ladder · ounces<br />Cold to warm</div>
        </header>
        <p className="l3-lede">The most useful number in menswear isn't on the price tag. It's on the cloth ticket. Here's the ladder.</p>
        <div className="fabric-ladder">
          {MB_FABRIC.map((f, i) => (
            <a key={i} className="fabric-row">
              <span className="oz">{f.oz}<small>oz · {f.lbl}</small></span>
              <div className="body">
                <h5>{f.t} <span className="it">{f.it}</span></h5>
                <span className="verdict">{f.v}</span>
              </div>
              <span className="when">{f.when}</span>
              <div className="fabric-bar"><span className="fill" style={{ width: `${f.w}%` }} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MBFabric = MBFabric;

/* =============== 03 FOOTWEAR =============== */
const MB_FOOT = [
  { n: "I", t: "Black", it: "oxford.", d: "Cap-toe, calf, leather sole. The only dress shoe you actually need.", m: "Black tie · suit" },
  { n: "II", t: "Brown", it: "derby.", d: "Slightly less formal than the oxford. Wears with everything but a tux.", m: "Suit · trouser" },
  { n: "III", t: "Penny", it: "loafer.", d: "Brown calf, beef-roll if you're a romantic. Sockless from May.", m: "Spring–Fall" },
  { n: "IV", t: "Chelsea", it: "boot.", d: "Suede or leather. Black is dressier, brown is more useful.", m: "A/W" },
  { n: "V", t: "White", it: "sneaker.", d: "Low-top, leather, no logo bigger than a pinhead.", m: "Year-round" },
  { n: "VI", t: "Service", it: "boot.", d: "Cap-toe or moc-toe. The shoe that lasts longer than you do.", m: "Winter · weekend" },
];
function MB3Footwear() {
  return (
    <section id="footwear" className="l3-sec" data-screen-label="06 Footwear">
      <div className="frame">
        <header className="l3-head">
          <div className="num">04</div>
          <div className="titles">
            <span className="eyebrow">Chapter 04 · From the Ground Up</span>
            <h2 className="title">Footwear<span className="it">.</span></h2>
          </div>
          <div className="meta">8 guides<br />Six-pair rotation</div>
        </header>
        <p className="l3-lede">Six shoes. A lifetime if you bother to polish them. Skip the running shoes for street wear — you're not running.</p>
        <div className="f-index">
          {MB_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.MB3Footwear = MB3Footwear;

/* =============== 04 ACCESSORIES =============== */
const MB_ACC = [
  { n: "01", t: "Belt,", it: "leather.", d: "Brown one, black one. Match the shoe, full stop.", tag: "Leather" },
  { n: "02", t: "Watch,", it: "mechanical.", d: "Steel case, leather strap, 38–40mm. Inherit eventually.", tag: "Watches" },
  { n: "03", t: "Tie,", it: "navy grenadine.", d: "If you own one tie, own this one. It works at every funeral and most weddings.", tag: "Neckwear" },
  { n: "04", t: "Pocket", it: "square.", d: "White linen. Folded flat. Never matches the tie.", tag: "Furnishings" },
  { n: "05", t: "Sunglasses,", it: "single frame.", d: "Aviator or wayfarer. Pick one shape, own it for the decade.", tag: "Eyewear" },
  { n: "06", t: "Wallet,", it: "bifold.", d: "Calf leather, six card slots, no chain.", tag: "Leather" },
  { n: "07", t: "Wool", it: "scarf.", d: "Cashmere only when it counts. Charcoal does the most work.", tag: "Wool" },
  { n: "08", t: "Cufflinks,", it: "silent.", d: "Silver bar or knot. If they make a sound, they're wrong.", tag: "Furnishings" },
];
function MB4Accessories() {
  return (
    <section id="accessories" className="l3-sec" data-screen-label="07 Accessories">
      <div className="frame">
        <header className="l3-head">
          <div className="num">05</div>
          <div className="titles">
            <span className="eyebrow">Chapter 05 · Punctuation</span>
            <h2 className="title">Accessories<span className="it">.</span></h2>
          </div>
          <div className="meta">14 guides<br />Pick once, finish anything</div>
        </header>
        <p className="l3-lede">A man's outfit is mostly composed of three things and finished by one of these. Get the small stuff right; the rest stops trying so hard.</p>
        <div className="tile-grid">
          {MB_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.MB4Accessories = MB4Accessories;

/* =============== COLOR THEORY (novel) =============== */
const MB_COLOR = [
  {
    name: "Navy", it: "first.", hex: "#1c2540", swatch: "#1c2540",
    lede: "If you're allowed only one suit, only one blazer, only one knit — make it navy. The closet's chief executive.",
    rules: [
      { ok: true, t: "Wears with grey, charcoal, brown, white, blue, beige." },
      { ok: true, t: "Reads dressy in worsted, casual in cotton." },
      { ok: false, t: "Don't pair with black tailoring — it'll look like you missed." },
    ],
    pairs: [
      { c: "#3a3a3a", n: "Charcoal" },
      { c: "#6b4a2a", n: "Tobacco" },
      { c: "#f4ead7", n: "Cream" },
      { c: "#a8a8a8", n: "Grey" },
    ],
  },
  {
    name: "Charcoal", it: "for work.", hex: "#3a3a3a", swatch: "#3a3a3a",
    lede: "Black is for waiters and mourners. Charcoal is for everyone else who works for a living. Including, eventually, both of those.",
    rules: [
      { ok: true, t: "Reads more authoritative than navy after dark." },
      { ok: true, t: "The only suit colour that flatters every shirt you own." },
      { ok: false, t: "Avoid jet black except in tie or shoe — kills depth." },
    ],
    pairs: [
      { c: "#1c2540", n: "Navy" },
      { c: "#ffffff", n: "White" },
      { c: "#7fb3d5", n: "Carolina" },
      { c: "#7d2929", n: "Oxblood" },
    ],
  },
  {
    name: "Brown,", it: "always.", hex: "#6b4a2a", swatch: "#6b4a2a",
    lede: "The colour the rules used to ban. We've moved on. Brown is the warmth navy can't bring on its own.",
    rules: [
      { ok: true, t: "Wears with navy, grey, denim, cream, olive, oxblood." },
      { ok: true, t: "Tobacco suede shoes finish nine outfits in ten." },
      { ok: false, t: "No brown in town' is a rule made by someone who'd never been to Naples." },
    ],
    pairs: [
      { c: "#1c2540", n: "Navy" },
      { c: "#3e4a2c", n: "Olive" },
      { c: "#7d2929", n: "Oxblood" },
      { c: "#e7dec5", n: "Stone" },
    ],
  },
];
function MBColor() {
  return (
    <section id="color" className="l3-sec" data-screen-label="08 Color">
      <div className="frame">
        <header className="l3-head">
          <div className="num">06</div>
          <div className="titles">
            <span className="eyebrow">Chapter 06 · The Palette</span>
            <h2 className="title">Color, <span className="it">three rules.</span></h2>
          </div>
          <div className="meta">3 grounds<br />Every other one defers</div>
        </header>
        <p className="l3-lede">Most men's closets are 80% navy, charcoal, and brown by the time they're done apologizing. We say start there.</p>
        <div className="color-grid">
          {MB_COLOR.map((c) => (
            <article key={c.name} className="color-card">
              <div className="swatch" style={{ background: c.swatch }}>
                <span className="hex">{c.hex}</span>
                <h4 className="name">{c.name} <span className="it">{c.it}</span></h4>
              </div>
              <div className="body">
                <p className="lede">"{c.lede}"</p>
                <div className="rules">
                  {c.rules.map((r, i) => (
                    <div key={i} className="rule-row">
                      <span className={r.ok ? "mark" : "mark no"}>{r.ok ? "✓" : "✕"}</span>
                      <p>{r.t}</p>
                    </div>
                  ))}
                </div>
                <div className="pairs">
                  <span className="lbl">Pairs ·</span>
                  {c.pairs.map((p, i) => (
                    <span key={i} className="chip" style={{ background: p.c }} data-name={p.n} />
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MBColor = MBColor;

/* =============== 05 WORK WARDROBE =============== */
const MB_WORK = [
  { n: "01", t: "Worsted", it: "suit, navy", d: "9oz. The only suit that does five days." },
  { n: "02", t: "OCBD,", it: "white", d: "Pinpoint or oxford. Replaced annually." },
  { n: "03", t: "Wool", it: "trouser", d: "Charcoal. Mid-rise. Single pleat." },
  { n: "04", t: "Tie,", it: "navy grenadine", d: "Knot is half the outfit." },
  { n: "05", t: "Cap-toe", it: "oxford", d: "Black, calf. Polished weekly." },
  { n: "06", t: "Belt,", it: "matched", d: "Black calf, brass buckle." },
  { n: "07", t: "Briefcase,", it: "leather", d: "Brown, structured. Ages well." },
];
function MB5Work() {
  return (
    <section id="work" className="l3-sec" data-screen-label="09 Work">
      <div className="frame">
        <header className="l3-head">
          <div className="num">07</div>
          <div className="titles">
            <span className="eyebrow">Chapter 07 · The Office</span>
            <h2 className="title">Work <span className="it">wardrobe.</span></h2>
          </div>
          <div className="meta">9 guides<br />Five days, two suits</div>
        </header>
        <div className="work-spread">
          <div className="col-left">
            <h3>Seven pieces, <span className="it">five days.</span></h3>
            <p>Buy two of the suit, three of the shirt, one of everything else. The math is older than this magazine and probably older than your office.</p>
          </div>
          <div className="work-list">
            {MB_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.MB5Work = MB5Work;

/* =============== 06 CASUAL =============== */
const MB_QUART = [
  { img: "q1", t: "Raw", it: "denim." },
  { img: "q2", t: "Heavy", it: "knits." },
  { img: "q3", t: "Field", it: "jacket." },
  { img: "q4", t: "Layered", it: "tees." },
];
function MB6Casual() {
  return (
    <section id="casual" className="l3-sec" data-screen-label="10 Casual">
      <div className="frame">
        <header className="l3-head">
          <div className="num">08</div>
          <div className="titles">
            <span className="eyebrow">Chapter 08 · Off Duty</span>
            <h2 className="title">Casual <span className="it">wardrobe.</span></h2>
          </div>
          <div className="meta">7 guides<br />The rest of the week</div>
        </header>
        <p className="l3-lede">The off-duty closet is the same closet, just looser. If you're tempted to buy a hoodie with a logo, we can't help you here.</p>
        <div className="quartet">
          {MB_QUART.map((q, i) => (
            <a key={i} className="q" style={{ backgroundImage: `url(${MB_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.MB6Casual = MB6Casual;

/* =============== 07 WEEKEND VERDICTS =============== */
const MB_WEEK = [
  { lbl: "Saturday morning", t: "Sweatshirt, plain", v: "Loopback cotton, no graphics, fits at the shoulder.", verdict: "Verdict: own three." },
  { lbl: "Saturday errand", t: "Chino & sneaker", v: "Stone chinos, white sneakers. The default.", verdict: "Verdict: don't overthink." },
  { lbl: "Sunday lunch", t: "Polo & loafer", v: "Knit polo, tucked or out. Suede penny.", verdict: "Verdict: dressier than you think." },
  { lbl: "Sunday paper", t: "Cardigan, shawl", v: "Heavy gauge, brown buttons. Read in it.", verdict: "Verdict: forever piece." },
  { lbl: "Casual dinner", t: "Denim & blazer", v: "Dark denim, navy blazer, brown derby. The off-duty uniform.", verdict: "Verdict: never wrong." },
  { lbl: "Lazy weekend", t: "Sweatpant, fitted", v: "If they have to leave the house, they have to fit.", verdict: "Verdict: choose carefully." },
];
function MB7Weekend() {
  return (
    <section id="weekend" className="l3-sec" data-screen-label="11 Weekend">
      <div className="frame">
        <header className="l3-head">
          <div className="num">09</div>
          <div className="titles">
            <span className="eyebrow">Chapter 09 · The Weekend</span>
            <h2 className="title">Weekend <span className="it">verdicts.</span></h2>
          </div>
          <div className="meta">6 verdicts<br />Saturday → Sunday</div>
        </header>
        <p className="l3-lede">Six low-stakes outfits, each with a final word. None of them require a fitting room.</p>
        <div className="verdict-list">
          {MB_WEEK.map((w, i) => (
            <a key={i} className="vd">
              <span className="label">{w.lbl}</span>
              <div>
                <h6>{w.t}</h6>
                <p>{w.v}</p>
                <span className="verdict">{w.verdict}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MB7Weekend = MB7Weekend;

/* =============== 08 CAPSULE — seven pieces, blue surface =============== */
const MB_SEVEN = [
  { r: "I", t: "Navy", it: "suit", d: "Worsted, two-button, no break.", tag: "Build · 01" },
  { r: "II", t: "Charcoal", it: "trouser", d: "Wool, plain front. The orphan.", tag: "Build · 02" },
  { r: "III", t: "White", it: "OCBD", d: "Oxford cloth. Three of them.", tag: "Build · 03" },
  { r: "IV", t: "Raw", it: "denim", d: "14oz, mid-rise, straight.", tag: "Build · 04" },
  { r: "V", t: "Crew", it: "knit", d: "Merino, charcoal first.", tag: "Build · 05" },
  { r: "VI", t: "Field", it: "jacket", d: "Olive, waxed cotton.", tag: "Build · 06" },
  { r: "VII", t: "Chelsea", it: "boot", d: "Suede, dark brown.", tag: "Build · 07" },
];
function MB8Capsule() {
  return (
    <section id="capsule" className="l3-sec" data-screen-label="12 Capsule">
      <div className="frame">
        <div className="capsule blue">
          <div className="frame">
            <div className="capsule-head">
              <div className="lede-block">
                <div className="eyebrow">Chapter 10 · The Math</div>
                <h3>Seven pieces, <span className="it">a year of mornings.</span></h3>
              </div>
              <p className="desc">If you only buy seven things this year, buy these. They will make every other thing in the closet work harder, and they will quietly retire half of it.</p>
            </div>
            <div className="capsule-seven">
              {MB_SEVEN.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.MB8Capsule = MB8Capsule;

/* =============== CROSS — 3 men L2s + 1 women bridge =============== */
function MBCross() {
  const items = [
    { href: "/en/men/wear/", n: "Men · Lane 02", t: "Wear", d: "Outfit formulas, smart casual, business casual.", a: "Open Wear" },
    { href: "/en/men/fit/", n: "Men · Lane 03", t: "Fit", d: "Shirt seams, trouser breaks, the suit numbers.", a: "Open Fit" },
    { href: "/en/men/finish/", n: "Men · Lane 04", t: "Finish", d: "Skincare, fragrance, hair, the rest of grooming.", a: "Open Finish" },
    { href: "/en/women/", n: "The other lane", t: "Women", d: "If you're shopping for someone else, start here.", a: "Cross over", bridge: true },
  ];
  return (
    <section className="section section-rule" data-screen-label="13 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 11</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 }}>
            Three sister chapters<br />in the men's lane
          </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.MBCross = MBCross;

/* =============== TWEAKS PANEL =============== */
function MBTweaks() {
  const [on, setOn] = React.useState(false);
  const [blue, setBlue] = React.useState("carolina");
  const [density, setDensity] = React.useState("normal");

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === "__activate_edit_mode") setOn(true);
      if (e.data.type === "__deactivate_edit_mode") setOn(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  React.useEffect(() => {
    const html = document.documentElement;
    if (blue === "carolina") html.removeAttribute("data-blue");
    else html.setAttribute("data-blue", blue);
    if (density === "normal") html.removeAttribute("data-density");
    else html.setAttribute("data-density", density);
  }, [blue, density]);

  const close = () => {
    setOn(false);
    window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*");
  };

  if (!on) return null;
  return (
    <div className="mb-tweaks on">
      <button className="close" onClick={close}>×</button>
      <h5>Tweaks</h5>
      <div className="row">
        <label>Accent</label>
        <div className="seg">
          {["carolina","navy","petrol"].map(b => (
            <button key={b} className={blue === b ? "on" : ""} onClick={() => setBlue(b)}>{b}</button>
          ))}
        </div>
      </div>
      <div className="row">
        <label>Density</label>
        <div className="seg">
          {["tight","normal","loose"].map(d => (
            <button key={d} className={density === d ? "on" : ""} onClick={() => setDensity(d)}>{d}</button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.MBTweaks = MBTweaks;
