/* global React */

const MFL3_IMG = {
  shirts: "https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=2400&q=80",
  trousers: "https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=2400&q=80",
  suits: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=2400&q=80",
  denim: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=2400&q=80",
  outerwear: "https://images.unsplash.com/photo-1611312449412-6cefac5dc3e4?w=2400&q=80",
  shoes: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=2400&q=80",
  alterations: "https://images.unsplash.com/photo-1506629905607-d405d7d3b0d2?w=2400&q=80",
};

const MFL3_DATA = {
  shirts: {
    section: "Shirts",
    number: "01",
    layout: "checkpoints",
    hero: "shirts",
    title: "Shirts,",
    italic: "at the seams.",
    deck: "Collar, chest, yoke, cuff, sleeve pitch, hem length, oxford cloth, poplin, and the difference between a shirt that fits and a shirt that only buttons.",
    intro: "A shirt fit is mostly decided across the upper body. The collar has to close without choking, the yoke has to sit at the shoulder, and the chest needs enough room to move without ballooning under a jacket.",
    checkpoints: [
      ["Collar", "One finger of room, no pulling when buttoned, no collapse under a jacket."],
      ["Yoke", "Shoulder seam lands at the shoulder bone or just past it, not down the arm."],
      ["Chest", "Buttons lie flat when seated. If the placket bows, the shirt is too small."],
      ["Sleeve", "Cuff reaches the wrist bone and shows slightly under tailoring."],
      ["Hem", "Long enough to tuck, short enough to wear open only if designed that way."],
    ],
    matrixTitle: "Shirt Types",
    matrix: [
      ["Oxford", "Casual to smart", "Forgiving cloth, best first shirt"],
      ["Poplin", "Dressier", "Cleaner but shows fit issues faster"],
      ["Chambray", "Casual", "Useful with tailoring if the collar holds"],
      ["Linen", "Warm weather", "Accept wrinkles, demand room"],
    ],
    symptoms: [
      ["Buttons pulling", "Chest is too tight or armhole is too low."],
      ["Sleeve twist", "Sleeve pitch does not match your posture."],
      ["Collar gap", "Neck size, posture, or jacket collar relationship is off."],
      ["Untucked billow", "Body is too full or hem is too long for casual wear."],
    ],
    leaves: ["Best oxford shirts for men", "How a dress shirt should fit", "Oxford vs poplin shirts", "Best white shirts for men", "How to measure shirt sleeve length", "Shirts for broad shoulders", "Untucked shirts that fit", "How to tailor a shirt"],
  },
  trousers: {
    section: "Trousers",
    number: "02",
    layout: "measurement",
    hero: "trousers",
    title: "Trousers,",
    italic: "from rise to break.",
    deck: "Rise, waist, seat, thigh, taper, hem, break, pleats, and the line between modern and skinny.",
    intro: "Trouser fit is a chain reaction. The rise decides where the waist sits, the seat decides whether the fabric pulls, and the hem decides how the whole outfit lands on the shoe.",
    checkpoints: [
      ["Rise", "Higher rise lengthens the leg and works better with tucked shirts and tailoring."],
      ["Seat", "Flat without pulling. Horizontal strain means size or cut is wrong."],
      ["Thigh", "Enough room to sit without the pocket opening."],
      ["Taper", "Shape below the knee, but no clinging at the calf."],
      ["Break", "No break for sharp, half break for safe, full break only with intent."],
    ],
    matrixTitle: "Break Guide",
    matrix: [
      ["No break", "Cleanest", "Best with loafers, narrower openings"],
      ["Slight break", "Most useful", "Works with derbies, boots, tailoring"],
      ["Half break", "Classic", "Good with fuller trousers"],
      ["Full break", "Risky", "Needs drape and confidence"],
    ],
    symptoms: [
      ["Pockets flare", "Waist, seat, or thigh is too tight."],
      ["Fabric pools", "Hem is too long or opening is too wide."],
      ["Seat wrinkles", "Back rise or seat shape is wrong."],
      ["Calf catches", "Taper is too aggressive for your leg."],
    ],
    leaves: ["How trousers should fit", "Trouser rise explained", "No break vs half break", "Best wool trousers for men", "Pleated trousers guide", "How to hem trousers", "Trousers for athletic legs", "Chinos vs wool trousers"],
  },
  suits: {
    section: "Suits",
    number: "03",
    layout: "split",
    hero: "suits",
    title: "Suits,",
    italic: "jacket first.",
    deck: "Shoulder line, lapel width, jacket length, button stance, trouser balance, vents, sleeves, and the first navy suit worth altering.",
    intro: "A suit is two garments pretending to be one decision. Fit the jacket first because the shoulder is the hardest thing to change. Then make the trouser balance the jacket instead of fighting it.",
    checkpoints: [
      ["Shoulder", "Clean line, no divots, no collapse. This is the purchase decision."],
      ["Chest", "Button closes without strain and lapels sit against the body."],
      ["Length", "Jacket covers the seat and balances your leg line."],
      ["Sleeve", "Shows a little shirt cuff, ends near wrist bone."],
      ["Trouser", "Rise high enough to meet the jacket visually."],
    ],
    matrixTitle: "Alteration Priority",
    matrix: [
      ["Sleeves", "Easy", "Most suits need this"],
      ["Trouser hem", "Easy", "Do immediately"],
      ["Waist suppression", "Moderate", "Useful if done gently"],
      ["Shoulders", "Avoid", "Usually not worth it"],
    ],
    symptoms: [
      ["X pull at button", "Jacket waist or chest is too tight."],
      ["Collar roll", "Posture or collar fit issue."],
      ["Sleeve divots", "Shoulder and sleeve pitch mismatch."],
      ["Low trouser rise", "Suit looks split in half."],
    ],
    leaves: ["How a suit should fit", "First navy suit guide", "Suit alterations guide", "Suit jacket length explained", "How suit trousers should fit", "Best suits for men", "Lapel width guide", "Off the rack suit fit"],
  },
  denim: {
    section: "Denim",
    number: "04",
    layout: "timeline",
    hero: "denim",
    title: "Denim,",
    italic: "after the mirror.",
    deck: "Waist stretch, rise, thigh room, leg opening, inseam, stacking, raw break-in, and when jeans should be hemmed.",
    intro: "Jeans are bought in the fitting room but judged after thirty wears. The waist gives, the thigh should not fight you, and the leg opening has to make sense with the shoe you actually wear.",
    checkpoints: [
      ["Waist", "Snug at first if raw, comfortable immediately if washed."],
      ["Rise", "Mid or higher works better for grown men than low-rise cuts."],
      ["Thigh", "Room to sit and walk without pulling the fly."],
      ["Leg", "Straight or slim-straight is the safest long-term shape."],
      ["Hem", "One clean cuff or a small stack, not fabric collapse."],
    ],
    matrixTitle: "Break-In Timeline",
    matrix: [
      ["Day 1", "Snug waist", "Do not buy pain."],
      ["Week 2", "Waist relaxes", "Thigh should already be right."],
      ["Month 3", "Knees and seat shape", "Wash if needed."],
      ["Year 1", "Fades appear", "Repair before holes spread."],
    ],
    symptoms: [
      ["Fly pulls", "Rise or thigh is too tight."],
      ["Knee bags", "Fabric recovery or fit is wrong."],
      ["Huge stacks", "Inseam is too long."],
      ["Seat sag", "Too much stretch or wrong size."],
    ],
    leaves: ["How jeans should fit men", "Raw denim fit guide", "Best jeans for men", "Straight vs slim jeans", "How to hem jeans", "Jeans for athletic thighs", "Dark denim outfits", "When to wash raw denim"],
  },
  outerwear: {
    section: "Outerwear",
    number: "05",
    layout: "clearance",
    hero: "outerwear",
    title: "Outerwear,",
    italic: "with room.",
    deck: "Coat length, sleeve room, shoulder allowance, layering space, collar height, and the top layer that does not swallow the outfit.",
    intro: "Outerwear fit has to solve two bodies: yours and the outfit underneath. A coat that fits over a tee but fails over knitwear is not outerwear. It is a photograph.",
    checkpoints: [
      ["Shoulder", "Can sit slightly wider than a jacket without collapsing."],
      ["Chest", "Closes over the intended layer."],
      ["Sleeve", "Covers jacket sleeve when worn as a topcoat."],
      ["Length", "Covers the jacket for dress coats, hits hip for casual jackets."],
      ["Collar", "Sits against the neck and frames the face."],
    ],
    matrixTitle: "Layer Clearance",
    matrix: [
      ["Trench", "Shirt + knit", "Room without bulk"],
      ["Overcoat", "Suit or heavy knit", "Must cover jacket"],
      ["Field jacket", "Tee to crewneck", "Casual ease"],
      ["Leather jacket", "Tee or thin knit", "Exact fit matters"],
    ],
    symptoms: [
      ["Cannot close", "Wrong size or wrong coat type."],
      ["Sleeves too short", "Layering makes the coat look borrowed."],
      ["Collar floats", "Bad neck/shoulder relationship."],
      ["Body balloons", "Too much width without enough length."],
    ],
    leaves: ["How a coat should fit", "Overcoat fit guide", "Trench coat fit guide", "Leather jacket fit guide", "Field jacket fit guide", "Coat sleeve length", "Coat length explained", "Layering under outerwear"],
  },
  shoes: {
    section: "Shoes",
    number: "06",
    layout: "diagnostic",
    hero: "shoes",
    title: "Shoes,",
    italic: "by symptom.",
    deck: "Last shape, toe room, heel slip, width, arch, break-in, loafers, lace-ups, and when pain means wrong size.",
    intro: "Shoe fit is not just length. Width, instep, heel shape, toe box, arch, and leather behavior all matter. Pain is information, but not all discomfort means the same thing.",
    checkpoints: [
      ["Toe", "Room at the front without sliding."],
      ["Width", "Ball of foot sits at widest part of shoe."],
      ["Heel", "Minor slip can settle, major slip rarely does."],
      ["Instep", "Laces should close with a clean gap, not touch completely."],
      ["Break", "Leather creases across the ball, not into the toe cap."],
    ],
    matrixTitle: "Fit Symptoms",
    matrix: [
      ["Heel slip", "Heel shape or size", "May improve slightly"],
      ["Toe pressure", "Too short or low toe box", "Do not expect miracles"],
      ["Side squeeze", "Too narrow", "Try width, not length"],
      ["Arch pain", "Support mismatch", "Insole may help"],
    ],
    symptoms: [
      ["Blisters on heel", "Heel counter or slip problem."],
      ["Numb toes", "Toe box or width issue."],
      ["Lace gap huge", "Instep too high for the shoe."],
      ["Creasing badly", "Wrong size or wrong last shape."],
    ],
    leaves: ["How dress shoes should fit", "Loafer fit guide", "Boot fit guide", "Shoe width explained", "Heel slip in loafers", "Breaking in leather shoes", "Best shoes for wide feet", "When shoes are too small"],
  },
  alterations: {
    section: "Alterations",
    number: "07",
    layout: "tailor-table",
    hero: "alterations",
    title: "Alterations,",
    italic: "worth paying for.",
    deck: "What to tailor, what to leave, what to pay, what to ask, and when the garment is not worth saving.",
    intro: "Alterations are where good buying becomes good dressing. The trick is knowing which problems are normal, which are expensive, and which mean you should have left the garment on the rack.",
    checkpoints: [
      ["Hem", "Usually worth it, especially trousers and jeans."],
      ["Sleeves", "Worth it on jackets, shirts, and coats when the rest fits."],
      ["Waist", "Useful on trousers and jackets if the change is small."],
      ["Seat", "Possible, but limited by fabric and construction."],
      ["Shoulders", "Usually a no. Buy them right."],
    ],
    matrixTitle: "Tailor Value Table",
    matrix: [
      ["Trouser hem", "Low cost", "Do it often"],
      ["Jacket sleeves", "Moderate", "Worth it if shoulders fit"],
      ["Waist suppression", "Moderate", "Small changes only"],
      ["Shoulder rebuild", "High cost", "Usually walk away"],
    ],
    symptoms: [
      ["Cheap garment, big fix", "Skip it unless sentimental."],
      ["Good jacket, long sleeves", "Alter it."],
      ["Bad shoulders", "Return it."],
      ["Trousers close but pool", "Hem before judging."],
    ],
    leaves: ["Men's alterations guide", "What can a tailor fix", "How much alterations cost", "Trouser alterations", "Suit alterations", "Shirt alterations", "Jeans alterations", "When not to tailor clothes"],
  },
};

// Literal route hints for the static exporter. Visible links are data-driven below.
const MFL3_ROUTE_HINTS = [
  "/en/men/fit/alterations/hem/",
  "/en/men/fit/alterations/how-much-alterations-cost/",
  "/en/men/fit/alterations/jacket-sleeves/",
  "/en/men/fit/alterations/jeans-alterations/",
  "/en/men/fit/alterations/men-s-alterations-guide/",
  "/en/men/fit/alterations/seat/",
  "/en/men/fit/alterations/shirt-alterations/",
  "/en/men/fit/alterations/shoulder-rebuild/",
  "/en/men/fit/alterations/shoulders/",
  "/en/men/fit/alterations/sleeves/",
  "/en/men/fit/alterations/suit-alterations/",
  "/en/men/fit/alterations/trouser-alterations/",
  "/en/men/fit/alterations/trouser-hem/",
  "/en/men/fit/alterations/waist-suppression/",
  "/en/men/fit/alterations/waist/",
  "/en/men/fit/alterations/what-can-a-tailor-fix/",
  "/en/men/fit/alterations/when-not-to-tailor-clothes/",
  "/en/men/fit/denim/best-jeans-for-men/",
  "/en/men/fit/denim/dark-denim-outfits/",
  "/en/men/fit/denim/day-1/",
  "/en/men/fit/denim/hem/",
  "/en/men/fit/denim/how-jeans-should-fit-men/",
  "/en/men/fit/denim/how-to-hem-jeans/",
  "/en/men/fit/denim/jeans-for-athletic-thighs/",
  "/en/men/fit/denim/leg/",
  "/en/men/fit/denim/month-3/",
  "/en/men/fit/denim/raw-denim-fit-guide/",
  "/en/men/fit/denim/rise/",
  "/en/men/fit/denim/straight-vs-slim-jeans/",
  "/en/men/fit/denim/thigh/",
  "/en/men/fit/denim/waist/",
  "/en/men/fit/denim/week-2/",
  "/en/men/fit/denim/when-to-wash-raw-denim/",
  "/en/men/fit/denim/year-1/",
  "/en/men/fit/outerwear/chest/",
  "/en/men/fit/outerwear/coat-length-explained/",
  "/en/men/fit/outerwear/coat-sleeve-length/",
  "/en/men/fit/outerwear/collar/",
  "/en/men/fit/outerwear/field-jacket-fit-guide/",
  "/en/men/fit/outerwear/field-jacket/",
  "/en/men/fit/outerwear/how-a-coat-should-fit/",
  "/en/men/fit/outerwear/layering-under-outerwear/",
  "/en/men/fit/outerwear/leather-jacket-fit-guide/",
  "/en/men/fit/outerwear/leather-jacket/",
  "/en/men/fit/outerwear/length/",
  "/en/men/fit/outerwear/overcoat-fit-guide/",
  "/en/men/fit/outerwear/overcoat/",
  "/en/men/fit/outerwear/shoulder/",
  "/en/men/fit/outerwear/sleeve/",
  "/en/men/fit/outerwear/trench-coat-fit-guide/",
  "/en/men/fit/outerwear/trench/",
  "/en/men/fit/shirts/best-oxford-shirts-for-men/",
  "/en/men/fit/shirts/best-white-shirts-for-men/",
  "/en/men/fit/shirts/chambray/",
  "/en/men/fit/shirts/chest/",
  "/en/men/fit/shirts/collar/",
  "/en/men/fit/shirts/hem/",
  "/en/men/fit/shirts/how-a-dress-shirt-should-fit/",
  "/en/men/fit/shirts/how-to-measure-shirt-sleeve-length/",
  "/en/men/fit/shirts/how-to-tailor-a-shirt/",
  "/en/men/fit/shirts/linen/",
  "/en/men/fit/shirts/oxford-vs-poplin-shirts/",
  "/en/men/fit/shirts/oxford/",
  "/en/men/fit/shirts/poplin/",
  "/en/men/fit/shirts/shirts-for-broad-shoulders/",
  "/en/men/fit/shirts/sleeve/",
  "/en/men/fit/shirts/untucked-shirts-that-fit/",
  "/en/men/fit/shirts/yoke/",
  "/en/men/fit/shoes/arch-pain/",
  "/en/men/fit/shoes/best-shoes-for-wide-feet/",
  "/en/men/fit/shoes/boot-fit-guide/",
  "/en/men/fit/shoes/break/",
  "/en/men/fit/shoes/breaking-in-leather-shoes/",
  "/en/men/fit/shoes/heel-slip-in-loafers/",
  "/en/men/fit/shoes/heel-slip/",
  "/en/men/fit/shoes/heel/",
  "/en/men/fit/shoes/how-dress-shoes-should-fit/",
  "/en/men/fit/shoes/instep/",
  "/en/men/fit/shoes/loafer-fit-guide/",
  "/en/men/fit/shoes/shoe-width-explained/",
  "/en/men/fit/shoes/side-squeeze/",
  "/en/men/fit/shoes/toe-pressure/",
  "/en/men/fit/shoes/toe/",
  "/en/men/fit/shoes/when-shoes-are-too-small/",
  "/en/men/fit/shoes/width/",
  "/en/men/fit/suits/best-suits-for-men/",
  "/en/men/fit/suits/chest/",
  "/en/men/fit/suits/first-navy-suit-guide/",
  "/en/men/fit/suits/how-a-suit-should-fit/",
  "/en/men/fit/suits/how-suit-trousers-should-fit/",
  "/en/men/fit/suits/lapel-width-guide/",
  "/en/men/fit/suits/length/",
  "/en/men/fit/suits/off-the-rack-suit-fit/",
  "/en/men/fit/suits/shoulder/",
  "/en/men/fit/suits/shoulders/",
  "/en/men/fit/suits/sleeve/",
  "/en/men/fit/suits/sleeves/",
  "/en/men/fit/suits/suit-alterations-guide/",
  "/en/men/fit/suits/suit-jacket-length-explained/",
  "/en/men/fit/suits/trouser-hem/",
  "/en/men/fit/suits/trouser/",
  "/en/men/fit/suits/waist-suppression/",
  "/en/men/fit/trousers/best-wool-trousers-for-men/",
  "/en/men/fit/trousers/break/",
  "/en/men/fit/trousers/chinos-vs-wool-trousers/",
  "/en/men/fit/trousers/full-break/",
  "/en/men/fit/trousers/half-break/",
  "/en/men/fit/trousers/how-to-hem-trousers/",
  "/en/men/fit/trousers/how-trousers-should-fit/",
  "/en/men/fit/trousers/no-break-vs-half-break/",
  "/en/men/fit/trousers/no-break/",
  "/en/men/fit/trousers/pleated-trousers-guide/",
  "/en/men/fit/trousers/rise/",
  "/en/men/fit/trousers/seat/",
  "/en/men/fit/trousers/slight-break/",
  "/en/men/fit/trousers/taper/",
  "/en/men/fit/trousers/thigh/",
  "/en/men/fit/trousers/trouser-rise-explained/",
  "/en/men/fit/trousers/trousers-for-athletic-legs/",
];

function slugifyFit(text) {
  return text.toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
}

function MFitHero({ data }) {
  return (
    <section className={`mfl3-hero mfl3-${data.layout}`} data-screen-label="01 Hero">
      <div className="mfl3-hero-img" style={{ backgroundImage: `url(${MFL3_IMG[data.hero]})` }} />
      <div className="frame">
        <div className="mfl3-crumb">
          <a href="/en/men/">Men</a><span>/</span><a href="/en/men/fit/">Fit</a><span>/</span><span>{data.section}</span>
        </div>
        <div className="mfl3-hero-copy">
          <span className="mfl3-kicker">Fit / {data.number} - {data.layout.replace("-", " ")}</span>
          <h1>{data.title} <span>{data.italic}</span></h1>
          <p>{data.deck}</p>
        </div>
        <div className="mfl3-fit-strip">
          {data.checkpoints.slice(0, 5).map((item, i) => <div key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b></div>)}
        </div>
      </div>
    </section>
  );
}

function MFitIntro({ data }) {
  return (
    <section className="section mfl3-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Men</b></div>
          <div><span>Chapter</span><b>Fit / {data.number}</b></div>
          <div><span>Section</span><b>{data.section}</b></div>
          <div><span>Layout</span><b>{data.layout}</b></div>
          <div><span>Status</span><b>L3 batch</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">{data.intro}</p>
          <p>This page is built around fit diagnosis, not outfit styling. It gives the crawler a different structure and gives the reader a practical mirror test before the deeper article layer arrives.</p>
        </div>
      </div>
    </section>
  );
}

function MFitCheckpoints({ data }) {
  return (
    <section id="checkpoints" className="mfl3-sec" data-screen-label="03 Checkpoints">
      <div className="frame">
        <div className="mfl3-head">
          <div className="num">01</div>
          <div><span>Mirror Check</span><h2>The points that <em>decide fit.</em></h2></div>
          <p>Each checkpoint is a future article lane and a practical test now.</p>
        </div>
        <div className={`mfl3-checks ${data.layout}`}>
          {data.checkpoints.map((item, i) => (
            <a href={`/en/men/fit/${slugifyFit(data.section)}/${slugifyFit(item[0])}/`} key={item[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFitMatrix({ data }) {
  const tableClass = data.layout === "tailor-table" ? "price" : data.layout === "timeline" ? "timeline" : data.layout === "diagnostic" ? "diagnostic" : "standard";
  return (
    <section id="matrix" className={`mfl3-sec mfl3-matrix-sec ${tableClass}`} data-screen-label="04 Matrix">
      <div className="frame">
        <div className="mfl3-head">
          <div className="num">02</div>
          <div><span>{data.matrixTitle}</span><h2>Read the garment <em>like a system.</em></h2></div>
          <p>This section changes shape by topic: timeline, price/value table, symptom diagnostic, or fit matrix.</p>
        </div>
        <div className={`mfl3-matrix ${tableClass}`}>
          {data.matrix.map((row) => (
            <a href={`/en/men/fit/${slugifyFit(data.section)}/${slugifyFit(row[0])}/`} key={row[0]}>
              <span>{row[0]}</span><b>{row[1]}</b><p>{row[2]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFitSymptoms({ data }) {
  return (
    <section id="symptoms" className="mfl3-sec" data-screen-label="05 Symptoms">
      <div className="frame">
        <div className="mfl3-head">
          <div className="num">03</div>
          <div><span>Diagnosis</span><h2>What the bad fit <em>is telling you.</em></h2></div>
          <p>Fit pages should answer the exact problems people search before they know the terminology.</p>
        </div>
        <div className="mfl3-symptoms">
          {data.symptoms.map((item, i) => (
            <article key={item[0]}>
              <span>Symptom {String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFitGuides({ data }) {
  return (
    <section id="guides" className="mfl3-sec" data-screen-label="06 Guide index">
      <div className="frame">
        <div className="mfl3-head">
          <div className="num">04</div>
          <div><span>Article Slots</span><h2>The pages this fit hub <em>will feed.</em></h2></div>
          <p>Route-ready placeholders make the section navigable now and easy to fill later.</p>
        </div>
        <div className="mfl3-leaf-list">
          {data.leaves.map((title, i) => (
            <a className="leaf-row" href={`/en/men/fit/${slugifyFit(data.section)}/${slugifyFit(title)}/`} key={title}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span><span className="t">{title}</span><span className="read">{6 + (i % 4)} min</span><span className="arr">-&gt;</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFitCross({ data }) {
  return (
    <section className="section section-rule" data-screen-label="07 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>fitting.</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 }}>Related fit<br />and wear paths</div>
        </div>
        <div className="cross-lanes">
          <a href="/en/men/fit/trousers/"><span className="n">Fit / 02</span><h6>Trousers</h6><p>The fit section that changes most outfits.</p><span className="arr">Open</span></a>
          <a href="/en/men/fit/alterations/"><span className="n">Fit / 07</span><h6>Alterations</h6><p>What a tailor can and cannot save.</p><span className="arr">Open</span></a>
          <a href="/en/men/wear/smart-casual/"><span className="n">Wear / 02</span><h6>Smart Casual</h6><p>Where fit decisions show up in the room.</p><span className="arr">Open</span></a>
          <a href="/en/men/fit/" className="bridge-card"><span className="n">Up a level</span><h6>Fit</h6><p>All men's fit chapters.</p><span className="arr">Open</span></a>
        </div>
      </div>
    </section>
  );
}

function MenFitL3Page({ page }) {
  const data = MFL3_DATA[page];
  return (
    <React.Fragment>
      <MFitHero data={data} />
      <nav className="mfl3-nav">
        <div className="frame">
          <span className="label">{data.section} Index</span>
          <div className="links">
            <a href="#checkpoints"><span>01</span>Checkpoints</a>
            <a href="#matrix"><span>02</span>Matrix</a>
            <a href="#symptoms"><span>03</span>Symptoms</a>
            <a href="#guides"><span>04</span>Guides</a>
          </div>
        </div>
      </nav>
      <MFitIntro data={data} />
      <MFitCheckpoints data={data} />
      <MFitMatrix data={data} />
      <MFitSymptoms data={data} />
      <MFitGuides data={data} />
      <MFitCross data={data} />
    </React.Fragment>
  );
}

window.MenFitL3Page = MenFitL3Page;