/* global React */

const MBSL3_DATA = {
  fabric: {
    lane: "Build",
    up: "/en/men/build/",
    number: "02",
    title: "Fabric",
    italic: "before fit.",
    deck: "Tropical wool, poplin, oxford cloth, twill cotton, selvedge denim, flannel, tweed, and the fabric weights that decide how clothes behave.",
    mode: "material ledger",
    intro: "Fabric is the hidden architecture of a men's wardrobe. The same shirt cut can feel sharp in poplin, casual in oxford, and sloppy in the wrong thin cotton.",
    principles: [["Weight", "Choose cloth for weather and drape, not just color."], ["Texture", "Use texture when the outfit is simple."], ["Recovery", "Wrinkle behavior matters more on travel and work pieces."], ["Care", "A great fabric that you hate maintaining will not stay in rotation."]],
    matrixTitle: "Cloth Decisions",
    matrix: [["Oxford", "Shirts", "Forgiving, casual, useful under knitwear"], ["Poplin", "Dress shirts", "Crisp, cleaner, less forgiving"], ["Tropical wool", "Trousers and suits", "Best warm-weather polish"], ["Flannel", "Fall and winter", "Soft texture with weight"]],
    leaves: [["Fabric weights explained", "/en/men/build/fabric/fabric-weights-explained/"], ["Oxford vs poplin shirts", "/en/men/build/fabric/oxford-vs-poplin-shirts/"], ["Tropical wool guide", "/en/men/build/fabric/tropical-wool-guide/"], ["Best fabrics for hot weather", "/en/men/build/fabric/best-fabrics-for-hot-weather/"], ["Winter fabric guide", "/en/men/build/fabric/winter-fabric-guide/"], ["How to read fabric texture", "/en/men/build/fabric/how-to-read-fabric-texture/"]],
  },
  footwear: {
    lane: "Build",
    up: "/en/men/build/",
    number: "03",
    title: "Footwear",
    italic: "sets the floor.",
    deck: "Black oxfords, brown derbies, penny loafers, Chelsea boots, white sneakers, service boots, and shoe care.",
    mode: "rotation map",
    intro: "Shoes decide the polish level before the jacket does. Build the rotation by use case: one formal, one soft-tailored, one casual leather, one weather option, one clean sneaker.",
    principles: [["Formality", "Oxfords are sharper; derbies and loafers are easier."], ["Shape", "Toe shape should match the width of the trouser."], ["Color", "Dark brown carries more outfits than most men expect."], ["Care", "Shoe trees and brushing are wardrobe infrastructure."]],
    matrixTitle: "Starter Rotation",
    matrix: [["Black oxford", "Formal", "Suits, weddings, serious office"], ["Brown derby", "Flexible", "Wool trousers, chinos, denim"], ["Penny loafer", "Smart casual", "Warm weather, soft tailoring"], ["Chelsea boot", "Weather polish", "Fall, winter, dark denim"]],
    leaves: [["First five men's shoes", "/en/men/build/footwear/first-five-mens-shoes/"], ["Oxford vs derby shoes", "/en/men/build/footwear/oxford-vs-derby-shoes/"], ["Best loafers for men", "/en/men/build/footwear/best-loafers-for-men/"], ["Chelsea boot guide", "/en/men/build/footwear/chelsea-boot-guide/"], ["White sneakers with tailoring", "/en/men/build/footwear/white-sneakers-with-tailoring/"], ["Men's shoe care kit", "/en/men/build/footwear/mens-shoe-care-kit/"]],
  },
  accessories: {
    lane: "Build",
    up: "/en/men/build/",
    number: "04",
    title: "Accessories",
    italic: "with restraint.",
    deck: "Leather belts, mechanical watches, grenadine ties, pocket squares, sunglasses, wallets, scarves, and cufflinks.",
    mode: "finish drawer",
    intro: "Accessories should not rescue an outfit. They should confirm it. The best men's accessories are quiet, useful, and repeated often enough to become part of the uniform.",
    principles: [["Leather", "Match formality before matching exact color."], ["Metal", "One visible metal story usually looks cleaner."], ["Scale", "Small frames, ties, and watches should suit body scale."], ["Edit", "Remove one accessory when the outfit already has texture."]],
    matrixTitle: "Accessory Roles",
    matrix: [["Belt", "Structure", "Connects shoe and trouser formality"], ["Watch", "Signal", "Metal, strap, and scale matter"], ["Tie", "Direction", "Texture beats loud novelty"], ["Scarf", "Season", "Warmth plus vertical line"]],
    leaves: [["Men's accessory starter kit", "/en/men/build/accessories/mens-accessory-starter-kit/"], ["How to match belts and shoes", "/en/men/build/accessories/how-to-match-belts-and-shoes/"], ["Best watches for simple outfits", "/en/men/build/accessories/best-watches-for-simple-outfits/"], ["Pocket square rules", "/en/men/build/accessories/pocket-square-rules/"], ["How to wear scarves men", "/en/men/build/accessories/how-to-wear-scarves-men/"], ["Tie texture guide", "/en/men/build/accessories/tie-texture-guide/"]],
  },
  color: {
    lane: "Build",
    up: "/en/men/build/",
    number: "05",
    title: "Color",
    italic: "that holds.",
    deck: "Navy, charcoal, brown, white, stone, oxblood, olive, blue, and the color logic behind a men's capsule wardrobe.",
    mode: "palette system",
    intro: "Men's color works best when the base is boring and the relationships are not. Navy, charcoal, stone, brown, white, denim blue, olive, and oxblood can cover nearly everything.",
    principles: [["Base", "Navy and charcoal carry the most formal range."], ["Warmth", "Brown, stone, and olive soften dark clothes."], ["Contrast", "White and blue control brightness."], ["Accent", "Oxblood works because it behaves like a dark neutral."]],
    matrixTitle: "Color Pairs",
    matrix: [["Navy + grey", "Work", "Most reliable tailored base"], ["Brown + denim", "Casual", "Warm, easy, adult"], ["Olive + white", "Weekend", "Clean utility"], ["Oxblood + charcoal", "Accent", "Quiet but memorable"]],
    leaves: [["Men's neutral color palette", "/en/men/build/color/mens-neutral-color-palette/"], ["Colors that go with navy", "/en/men/build/color/colors-that-go-with-navy/"], ["How to wear brown men", "/en/men/build/color/how-to-wear-brown-men/"], ["Oxblood shoes outfits", "/en/men/build/color/oxblood-shoes-outfits/"], ["Olive jacket color guide", "/en/men/build/color/olive-jacket-color-guide/"], ["Black vs navy outfits men", "/en/men/build/color/black-vs-navy-outfits-men/"]],
  },
  "work-wardrobe": {
    lane: "Build",
    up: "/en/men/build/",
    number: "06",
    title: "Work Wardrobe",
    italic: "without drift.",
    deck: "Worsted suits, oxford shirts, wool trousers, ties, dress shoes, belts, briefcases, and office rotation.",
    mode: "weekday architecture",
    intro: "A work wardrobe needs repeatable authority. Build it from trousers, shirts, knit layers, shoes, and one or two jackets before chasing office variety.",
    principles: [["Rotation", "Two trousers do more work than a fourth shirt."], ["Laundry", "White and blue shirts need a realistic care rhythm."], ["Shoes", "Rotate leather shoes so they recover."], ["Weather", "A proper coat protects the entire weekday system."]],
    matrixTitle: "Office Core",
    matrix: [["Navy suit", "Formal anchor", "Splits into jacket and trouser if cut right"], ["Grey wool trouser", "Daily base", "Works with nearly every shirt"], ["Oxford shirt", "Reliable", "Less fragile than poplin"], ["Brown derby", "Flexible", "Office to dinner"]],
    leaves: [["Men's work wardrobe checklist", "/en/men/build/work-wardrobe/mens-work-wardrobe-checklist/"], ["Office capsule wardrobe men", "/en/men/build/work-wardrobe/office-capsule-wardrobe-men/"], ["Best trousers for work men", "/en/men/build/work-wardrobe/best-trousers-for-work-men/"], ["How many dress shirts men need", "/en/men/build/work-wardrobe/how-many-dress-shirts-men-need/"], ["Business casual work wardrobe", "/en/men/build/work-wardrobe/business-casual-work-wardrobe/"], ["Work shoes for men", "/en/men/build/work-wardrobe/work-shoes-for-men/"]],
  },
  "casual-wardrobe": {
    lane: "Build",
    up: "/en/men/build/",
    number: "07",
    title: "Casual Wardrobe",
    italic: "with a spine.",
    deck: "Raw denim, heavy knits, field jackets, layered tees, casual trousers, and off-duty pieces.",
    mode: "off-duty base",
    intro: "Casual clothes need structure or they collapse into laundry. Denim, chinos, tees, knits, overshirts, and casual jackets should still create shape.",
    principles: [["Shape", "Use jackets and overshirts to keep a casual silhouette."], ["Weight", "Heavier tees and knits read cleaner."], ["Shoes", "Sneakers should be clean enough to look chosen."], ["Repeat", "A casual uniform is a strength, not a failure."]],
    matrixTitle: "Casual Anchors",
    matrix: [["Raw denim", "Base", "Dark, repeatable, aging well"], ["Heavy tee", "Layer", "Better collar and opacity"], ["Field jacket", "Shape", "Pockets, structure, weather"], ["Clean sneaker", "Ease", "Low friction without looking careless"]],
    leaves: [["Men's casual wardrobe checklist", "/en/men/build/casual-wardrobe/mens-casual-wardrobe-checklist/"], ["Best casual jackets men", "/en/men/build/casual-wardrobe/best-casual-jackets-men/"], ["Heavyweight t-shirt guide", "/en/men/build/casual-wardrobe/heavyweight-t-shirt-guide/"], ["Raw denim starter guide", "/en/men/build/casual-wardrobe/raw-denim-starter-guide/"], ["Casual trousers men", "/en/men/build/casual-wardrobe/casual-trousers-men/"], ["How to dress casual after 40 men", "/en/men/build/casual-wardrobe/how-to-dress-casual-after-40-men/"]],
  },
  "weekend-wardrobe": {
    lane: "Build",
    up: "/en/men/build/",
    number: "08",
    title: "Weekend Wardrobe",
    italic: "still dressed.",
    deck: "Plain sweatshirts, chinos, white sneakers, polos, loafers, cardigans, denim blazers, and lazy-weekend standards.",
    mode: "two-day rotation",
    intro: "Weekend clothes should be easier, not worse. The goal is a closet that can handle errands, lunch, travel, dinner, and doing nothing without changing identity.",
    principles: [["Comfort", "Soft pieces need clean shape."], ["Range", "One jacket should move from errands to dinner."], ["Footwear", "Loafers or clean sneakers change the whole read."], ["Color", "Keep the palette calm so repeats feel intentional."]],
    matrixTitle: "Weekend Uses",
    matrix: [["Errands", "Tee, overshirt, denim", "Easy but built"], ["Lunch", "Knit polo, chinos", "Clean without office energy"], ["Dinner", "Jacket, dark denim", "One step sharper"], ["Travel", "Crewneck, field jacket", "Comfort with pockets"]],
    leaves: [["Men's weekend wardrobe checklist", "/en/men/build/weekend-wardrobe/mens-weekend-wardrobe-checklist/"], ["Weekend outfits men", "/en/men/build/weekend-wardrobe/weekend-outfits-men/"], ["Best weekend jackets men", "/en/men/build/weekend-wardrobe/best-weekend-jackets-men/"], ["Chinos vs jeans weekend", "/en/men/build/weekend-wardrobe/chinos-vs-jeans-weekend/"], ["Weekend shoes for men", "/en/men/build/weekend-wardrobe/weekend-shoes-for-men/"], ["Casual dinner outfits men", "/en/men/build/weekend-wardrobe/casual-dinner-outfits-men/"]],
  },
  "capsule-wardrobe": {
    lane: "Build",
    up: "/en/men/build/",
    number: "09",
    title: "Capsule Wardrobe",
    italic: "with math.",
    deck: "Navy suits, charcoal trousers, white OCBDs, raw denim, merino knits, field jackets, Chelsea boots, and capsule math.",
    mode: "small closet system",
    intro: "A capsule wardrobe is not minimalism for its own sake. It is a small set of clothes with enough range that the same pieces keep solving new situations.",
    principles: [["Coverage", "Every piece should cover at least three situations."], ["Palette", "Limit color so texture can do more work."], ["Replacement", "Know what wears out first before buying more."], ["Fit", "Small closets expose bad fit quickly."]],
    matrixTitle: "Capsule Jobs",
    matrix: [["Navy jacket", "Polish", "Work, dinner, travel"], ["White oxford", "Base", "Casual to office"], ["Raw denim", "Casual anchor", "Ages into the wardrobe"], ["Chelsea boot", "Weather", "Sharp but practical"]],
    leaves: [["Men's capsule wardrobe checklist", "/en/men/build/capsule-wardrobe/mens-capsule-wardrobe-checklist/"], ["Seven piece wardrobe men", "/en/men/build/capsule-wardrobe/seven-piece-wardrobe-men/"], ["Capsule wardrobe colors men", "/en/men/build/capsule-wardrobe/capsule-wardrobe-colors-men/"], ["Minimal wardrobe men", "/en/men/build/capsule-wardrobe/minimal-wardrobe-men/"], ["Travel capsule wardrobe men", "/en/men/build/capsule-wardrobe/travel-capsule-wardrobe-men/"], ["What to replace first", "/en/men/build/capsule-wardrobe/what-to-replace-first/"]],
  },
  style: {
    lane: "Style",
    up: "/en/men/",
    number: "00",
    title: "Style",
    italic: "as a system.",
    deck: "Classic, minimalism, off duty, workwear, smart casual, personal style, color for men, and pattern basics.",
    mode: "style index",
    intro: "Style is where the wardrobe stops being a list and starts becoming a point of view. The same navy jacket can read classic, minimal, workwear-adjacent, or smart casual depending on the system around it.",
    principles: [["Reference", "Know what world the outfit belongs to."], ["Restraint", "One visible idea is usually stronger than three."], ["Silhouette", "Shape is remembered before brand."], ["Repeat", "Personal style is built by repeating choices on purpose."]],
    matrixTitle: "Style Families",
    matrix: [["Classic", "Heritage polish", "Blazers, loafers, oxford shirts"], ["Minimalism", "Quiet shape", "Texture, proportion, negative space"], ["Workwear", "Utility cleaned up", "Canvas, denim, boots, field jackets"], ["Smart casual", "Soft polish", "Relaxed but still exact"]],
    leaves: [["Men's style basics", "/en/men/style/mens-style-basics/"], ["How to find personal style men", "/en/men/style/how-to-find-personal-style-men/"], ["Classic style men", "/en/men/style/classic-style-men/"], ["Minimal style men", "/en/men/style/minimal-style-men/"], ["Workwear style guide men", "/en/men/style/workwear-style-guide-men/"], ["Pattern and color basics", "/en/men/style/pattern-and-color-basics/"]],
  },
  classic: {
    lane: "Style",
    up: "/en/men/style/",
    number: "01",
    title: "Classic",
    italic: "not costume.",
    deck: "Navy blazers, oxford shirts, loafers, grey trousers, trench coats, restraint, and classic dressing without nostalgia.",
    mode: "heritage edit",
    intro: "Classic dressing works when the pieces are current in fit and restrained in styling. The danger is not age; the danger is costume.",
    principles: [["Fit", "Classic pieces need modern proportions."], ["Patina", "Wear is good; neglect is not."], ["Restraint", "Avoid stacking every heritage signal at once."], ["Shoes", "Loafers and derbies keep classic clothes useful."]],
    matrixTitle: "Classic Signals",
    matrix: [["Navy blazer", "Anchor", "Dress it down before dressing it up"], ["Grey trouser", "Base", "More useful than most suit pants"], ["Oxford shirt", "Texture", "Softens tailoring"], ["Loafer", "Ease", "Prevents stiffness"]],
    leaves: [["Classic men's style guide", "/en/men/style/classic/classic-mens-style-guide/"], ["How to wear a navy blazer", "/en/men/style/classic/how-to-wear-a-navy-blazer/"], ["Loafers with trousers", "/en/men/style/classic/loafers-with-trousers/"], ["Classic outfits without looking old", "/en/men/style/classic/classic-outfits-without-looking-old/"], ["Oxford shirt outfits men", "/en/men/style/classic/oxford-shirt-outfits-men/"], ["Trench coat classic style", "/en/men/style/classic/trench-coat-classic-style/"]],
  },
  minimalism: {
    lane: "Style",
    up: "/en/men/style/",
    number: "02",
    title: "Minimalism",
    italic: "with texture.",
    deck: "Quiet outfits, texture, proportion, black, navy, grey, white, negative space, and simple clothes with enough charge.",
    mode: "restraint grid",
    intro: "Minimalism fails when it becomes plain. It works when the fit, fabric, silhouette, and small contrast decisions carry the outfit.",
    principles: [["Texture", "Replace loud color with cloth interest."], ["Shape", "Simple pieces need exact proportions."], ["Contrast", "Low contrast feels quieter; high contrast feels sharper."], ["Care", "Minimal clothes show wear immediately."]],
    matrixTitle: "Quiet Levers",
    matrix: [["Black knit", "Depth", "Works when texture is visible"], ["Grey trouser", "Line", "Keeps the outfit adult"], ["White tee", "Contrast", "Must be opaque"], ["Leather shoe", "Finish", "Makes simple intentional"]],
    leaves: [["Minimal style men", "/en/men/style/minimalism/minimal-style-men/"], ["All black outfits men", "/en/men/style/minimalism/all-black-outfits-men/"], ["Minimal wardrobe men", "/en/men/style/minimalism/minimal-wardrobe-men/"], ["Simple outfits that are not boring", "/en/men/style/minimalism/simple-outfits-not-boring/"], ["Texture in minimal outfits", "/en/men/style/minimalism/texture-in-minimal-outfits/"], ["Quiet luxury men", "/en/men/style/minimalism/quiet-luxury-men/"]],
  },
  "off-duty": {
    lane: "Style",
    up: "/en/men/style/",
    number: "03",
    title: "Off Duty",
    italic: "not off.",
    deck: "Weekend polish, denim, knits, chore jackets, sneakers, overshirts, and casual clothes that still have shape.",
    mode: "casual discipline",
    intro: "Off duty style is casual clothing with standards. The outfit can be soft, but it still needs proportion, surface, and shoes that look chosen.",
    principles: [["Jacket", "One top layer gives the whole outfit a frame."], ["Denim", "Dark or faded, but not exhausted."], ["Sneakers", "Clean enough to be a decision."], ["Knitwear", "A crewneck beats a tired hoodie most days."]],
    matrixTitle: "Off-Duty Formulas",
    matrix: [["Crewneck + denim", "Default", "Simple, solid, repeatable"], ["Overshirt + tee", "Layer", "Shape without formality"], ["Chore coat + chinos", "Utility", "Casual but built"], ["Loafer + knit", "Lift", "Weekend lunch to dinner"]],
    leaves: [["Off duty style men", "/en/men/style/off-duty/off-duty-style-men/"], ["Weekend style men", "/en/men/style/off-duty/weekend-style-men/"], ["How to dress casual but sharp", "/en/men/style/off-duty/how-to-dress-casual-but-sharp/"], ["Best casual jackets men", "/en/men/style/off-duty/best-casual-jackets-men/"], ["Sneakers with adult outfits", "/en/men/style/off-duty/sneakers-with-adult-outfits/"], ["Knitwear casual outfits", "/en/men/style/off-duty/knitwear-casual-outfits/"]],
  },
  workwear: {
    lane: "Style",
    up: "/en/men/style/",
    number: "04",
    title: "Workwear",
    italic: "cleaned up.",
    deck: "Chore coats, field jackets, denim, boots, flannel, canvas, utility pockets, and rugged pieces worn cleanly.",
    mode: "utility edit",
    intro: "Workwear style is strongest when the pieces are rugged but the styling is disciplined. Too much distress, too many pockets, and too many heavy pieces make it costume.",
    principles: [["One utility piece", "Let one garment carry the workwear signal."], ["Clean denim", "Rugged does not mean dirty."], ["Boots", "Match boot weight to trouser width."], ["Soft layer", "Knitwear keeps utility from going hard."]],
    matrixTitle: "Utility Balance",
    matrix: [["Chore coat", "Frame", "Best with simple layers"], ["Field jacket", "Weather", "Works with denim and trousers"], ["Service boot", "Weight", "Needs enough leg opening"], ["Flannel", "Texture", "Keep color quiet"]],
    leaves: [["Men's workwear style guide", "/en/men/style/workwear/mens-workwear-style-guide/"], ["How to wear chore coats", "/en/men/style/workwear/how-to-wear-chore-coats/"], ["Field jacket outfits men", "/en/men/style/workwear/field-jacket-outfits-men/"], ["Boots with jeans men", "/en/men/style/workwear/boots-with-jeans-men/"], ["Canvas jacket guide", "/en/men/style/workwear/canvas-jacket-guide/"], ["Workwear without costume", "/en/men/style/workwear/workwear-without-costume/"]],
  },
  "smart-casual": {
    lane: "Style",
    up: "/en/men/style/",
    number: "05",
    title: "Smart Casual",
    italic: "with standards.",
    deck: "Soft jackets, loafers, knit polos, clean denim, trousers, daytime dinners, relaxed offices, and polished casual balance.",
    mode: "dress-code bridge",
    intro: "Smart casual is not a vague middle. It is a controlled mix: one tailored idea, one relaxed idea, clean shoes, and enough texture to make the outfit feel natural.",
    principles: [["One tailored piece", "Jacket or trouser, not always both."], ["Clean denim", "Dark denim can work when everything else is calm."], ["Soft collar", "Knit polos and oxford collars reduce stiffness."], ["Shoes", "Loafers, derbies, or minimal sneakers set the level."]],
    matrixTitle: "Smart Casual Mixes",
    matrix: [["Jacket + denim", "Dinner", "Classic bridge"], ["Knit polo + trouser", "Office", "Soft but clean"], ["Oxford + loafer", "Daytime", "Easy polish"], ["Crewneck + coat", "Cold weather", "Texture carries the formality"]],
    leaves: [["Smart casual style men", "/en/men/style/smart-casual/smart-casual-style-men/"], ["Smart casual vs business casual", "/en/men/style/smart-casual/smart-casual-vs-business-casual/"], ["Jeans smart casual men", "/en/men/style/smart-casual/jeans-smart-casual-men/"], ["Best smart casual shoes", "/en/men/style/smart-casual/best-smart-casual-shoes/"], ["Knit polo outfits men", "/en/men/style/smart-casual/knit-polo-outfits-men/"], ["Smart casual winter men", "/en/men/style/smart-casual/smart-casual-winter-men/"]],
  },
  "personal-style": {
    lane: "Style",
    up: "/en/men/style/",
    number: "06",
    title: "Personal Style",
    italic: "by repetition.",
    deck: "Repeat pieces, reference points, taste diagnosis, color comfort, silhouette memory, and rules that actually fit a man.",
    mode: "taste audit",
    intro: "Personal style is less about novelty than pattern recognition. The pieces you repeat, save, repair, and reach for are already telling you the rules.",
    principles: [["Repeats", "Track what you wear twice in one week."], ["Discomfort", "Notice what never leaves the hanger."], ["References", "Use references for direction, not imitation."], ["Rules", "Write rules that help you buy less."]],
    matrixTitle: "Style Evidence",
    matrix: [["Most worn jacket", "Shape", "Your preferred frame"], ["Most worn shoe", "Formality", "Your real life"], ["Avoided color", "Boundary", "Do not force it"], ["Repeated fabric", "Texture", "Your comfort zone"]],
    leaves: [["How to find personal style men", "/en/men/style/personal-style/how-to-find-personal-style-men/"], ["Men's style audit", "/en/men/style/personal-style/mens-style-audit/"], ["How to build a uniform men", "/en/men/style/personal-style/how-to-build-a-uniform-men/"], ["Style rules for men", "/en/men/style/personal-style/style-rules-for-men/"], ["How to use outfit references", "/en/men/style/personal-style/how-to-use-outfit-references/"], ["What your closet says", "/en/men/style/personal-style/what-your-closet-says/"]],
  },
  "color-for-men": {
    lane: "Style",
    up: "/en/men/style/",
    number: "07",
    title: "Color for Men",
    italic: "without noise.",
    deck: "Navy, charcoal, white, stone, brown, olive, oxblood, black, denim blue, and color combinations that hold up.",
    mode: "color discipline",
    intro: "Color for men gets easier when you stop treating it like decoration. Use color to control contrast, temperature, and formality.",
    principles: [["Contrast", "Match contrast to the room and your coloring."], ["Temperature", "Warm browns and stones soften navy and grey."], ["Accent", "Use oxblood, green, or blue as a small repeat."], ["Limit", "Two neutrals and one accent is enough."]],
    matrixTitle: "Color Uses",
    matrix: [["Navy", "Base", "Most useful dark color"], ["Stone", "Lift", "Warm-weather brightness"], ["Olive", "Casual", "Utility without loudness"], ["Oxblood", "Accent", "Shoes, knitwear, scarf"]],
    leaves: [["Men's color combinations", "/en/men/style/color-for-men/mens-color-combinations/"], ["How to wear navy men", "/en/men/style/color-for-men/how-to-wear-navy-men/"], ["Olive outfits men", "/en/men/style/color-for-men/olive-outfits-men/"], ["Brown and navy outfits", "/en/men/style/color-for-men/brown-and-navy-outfits/"], ["Oxblood color guide men", "/en/men/style/color-for-men/oxblood-color-guide-men/"], ["How to wear black and navy", "/en/men/style/color-for-men/how-to-wear-black-and-navy/"]],
  },
  "pattern-basics": {
    lane: "Style",
    up: "/en/men/style/",
    number: "08",
    title: "Pattern Basics",
    italic: "by scale.",
    deck: "Stripes, checks, herringbone, houndstooth, scale, spacing, shirt patterns, tie patterns, and quiet pattern mixing.",
    mode: "scale rules",
    intro: "Pattern is mostly scale and spacing. A striped shirt, textured tie, and herringbone coat can work together when each pattern has a different size and job.",
    principles: [["Scale", "Do not stack patterns of the same size."], ["Distance", "Small patterns read as texture from far away."], ["Color", "Keep pattern colors tied to the outfit palette."], ["One loud piece", "Let one pattern lead, then calm the rest."]],
    matrixTitle: "Pattern Jobs",
    matrix: [["Stripe shirt", "Vertical line", "Safe under jackets"], ["Check jacket", "Lead", "Needs quiet trousers"], ["Herringbone", "Texture", "Pattern that behaves like solid"], ["Grenadine tie", "Surface", "Adds depth without print"]],
    leaves: [["Pattern mixing for men", "/en/men/style/pattern-basics/pattern-mixing-for-men/"], ["Stripes and checks men", "/en/men/style/pattern-basics/stripes-and-checks-men/"], ["Herringbone guide men", "/en/men/style/pattern-basics/herringbone-guide-men/"], ["How to wear checked jackets", "/en/men/style/pattern-basics/how-to-wear-checked-jackets/"], ["Tie patterns guide", "/en/men/style/pattern-basics/tie-patterns-guide/"], ["Pattern scale explained", "/en/men/style/pattern-basics/pattern-scale-explained/"]],
  },
};

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

function MenBuildStyleL3Page({ page }) {
  const data = MBSL3_DATA[page] || MBSL3_DATA[MBSL3Slug(page || "")] || MBSL3_DATA.style;
  const root = data.up.includes("/style/") ? `/en/men/style/${MBSL3Slug(data.title)}/` : data.up.includes("/build/") ? `/en/men/build/${MBSL3Slug(data.title)}/` : "/en/men/style/";
  return (
    <React.Fragment>
      <section className="mbsl3-hero" data-screen-label="01 Hero">
        <div className="mbsl3-field">
          <span></span><span></span><span></span><span></span>
        </div>
        <div className="frame">
          <div className="mbsl3-crumb"><a href="/en/men/">Men</a><span>/</span><a href={data.up}>{data.lane}</a><span>/</span><span>{data.title}</span></div>
          <div className="mbsl3-hero-grid">
            <div>
              <span className="mbsl3-kicker">{data.lane} / {data.number} - {data.mode}</span>
              <h1>{data.title}, <em>{data.italic}</em></h1>
              <p>{data.deck}</p>
            </div>
            <aside>
              {data.principles.map((item, i) => <a href={data.leaves[i % data.leaves.length][1]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><p>{item[1]}</p></a>)}
            </aside>
          </div>
        </div>
      </section>
      <nav className="mbsl3-nav"><div className="frame"><span>{data.title} Index</span><a href="#principles">Principles</a><a href="#matrix">Matrix</a><a href="#guides">Guides</a></div></nav>
      <section className="mbsl3-intro" data-screen-label="02 Intro">
        <div className="frame">
          <p>{data.intro}</p>
          <div><span>Mode</span><b>{data.mode}</b><span>Lane</span><b>{data.lane}</b><span>Status</span><b>L3 static hub</b></div>
        </div>
      </section>
      <section id="principles" className="mbsl3-sec" data-screen-label="03 Principles">
        <div className="frame">
          <div className="mbsl3-head"><span>01</span><h2>The decisions that <em>carry the page.</em></h2><p>Each section is written as a future guide lane, not just a decorative card.</p></div>
          <div className="mbsl3-principles">
            {data.principles.map((item, i) => <a href={data.leaves[i % data.leaves.length][1]} key={item[0]}><h3>{item[0]}</h3><p>{item[1]}</p></a>)}
          </div>
        </div>
      </section>
      <section id="matrix" className="mbsl3-sec mbsl3-matrix-sec" data-screen-label="04 Matrix">
        <div className="frame">
          <div className="mbsl3-head"><span>02</span><h2>{data.matrixTitle} <em>in practice.</em></h2><p>A compact decision table gives each topic a different crawlable body shape.</p></div>
          <div className="mbsl3-matrix">
            {data.matrix.map((row, i) => <a href={data.leaves[(i + 2) % data.leaves.length][1]} key={row[0]}><span>{row[0]}</span><b>{row[1]}</b><p>{row[2]}</p></a>)}
          </div>
        </div>
      </section>
      <section id="guides" className="mbsl3-sec" data-screen-label="05 Guides">
        <div className="frame">
          <div className="mbsl3-head"><span>03</span><h2>Route-ready <em>article slots.</em></h2><p>Visible internal links map the next editorial layer before the full articles are written.</p></div>
          <div className="mbsl3-guides">
            {data.leaves.map((item, i) => <a href={item[1]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><em>-&gt;</em></a>)}
          </div>
        </div>
      </section>
      <section className="section section-rule" data-screen-label="06 Crosslinks">
        <div className="frame">
          <div className="cross-lanes">
            <a href="/en/men/build/"><span className="n">Build</span><h6>Wardrobe architecture</h6><p>The pieces before the outfit.</p><span className="arr">Open</span></a>
            <a href="/en/men/style/"><span className="n">Style</span><h6>Point of view</h6><p>How the pieces start to say something.</p><span className="arr">Open</span></a>
            <a href="/en/men/wear/"><span className="n">Wear</span><h6>Outfit formulas</h6><p>Occasions, weather, and real-world use.</p><span className="arr">Open</span></a>
            <a href="/en/men/fit/"><span className="n">Fit</span><h6>Proportion</h6><p>The physical test underneath the look.</p><span className="arr">Open</span></a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.MenBuildStyleL3Page = MenBuildStyleL3Page;
window.MBSL3_DATA = MBSL3_DATA;