/* global React */

const MWL3_IMG = {
  formulas: "https://images.unsplash.com/photo-1516826957135-700dedea698c?w=2400&q=80",
  business: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=2400&q=80",
  date: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=2400&q=80",
  weekend: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=2400&q=80",
  travel: "https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=2400&q=80",
  warm: "https://images.unsplash.com/photo-1520975954732-35dd22299614?w=2400&q=80",
  cold: "https://images.unsplash.com/photo-1516826957135-700dedea698c?w=2400&q=80",
  blazer: "https://images.unsplash.com/photo-1593032465175-481ac7f401a0?w=1200&q=80",
  denim: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=1200&q=80",
  shoes: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=1200&q=80",
  knit: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=1200&q=80",
  coat: "https://images.unsplash.com/photo-1611312449412-6cefac5dc3e4?w=1200&q=80",
};

const MWL3_NAV = [
  { n: "01", id: "formula", nm: "Formula" },
  { n: "02", id: "kit", nm: "Kit" },
  { n: "03", id: "situations", nm: "Situations" },
  { n: "04", id: "rules", nm: "Rules" },
  { n: "05", id: "guides", nm: "Guides" },
  { n: "06", id: "faq", nm: "FAQ" },
];

const MWL3_DATA = {
  "outfit-formulas": {
    section: "Outfit Formulas",
    number: "01",
    register: "The Repeatable System",
    hero: "formulas",
    title: "Outfit formulas,",
    italic: "not outfits.",
    deck: "The goal is not copying a look. The goal is knowing which pieces create the same result again tomorrow.",
    stats: [["09", "core formulas"], ["36", "article slots"], ["3", "dress levels"], ["1", "closet"]],
    intro: "A formula is what stays after the exact shirt changes. Jacket plus knit plus trouser. Oxford plus denim plus loafer. Coat plus crewneck plus boot. Once the formula works, color and weather can move around it.",
    formulas: [
      ["Jacket + knit + trouser", "Office, dinner, travel", "The safest grown-up uniform: soft structure above, clean line below, nothing trying too hard."],
      ["Oxford + denim + loafer", "Weekend plans, casual drinks", "The shirt does the smart work. The denim keeps it usable. The loafer finishes it."],
      ["Crewneck + coat + boot", "Cold casual, errands, lunch", "Simple enough for daily wear, strong enough to look intentional."],
      ["Overshirt + tee + chino", "Warm days, informal office", "A middle layer with shape solves the tee without becoming a blazer."],
      ["Polo + trouser + suede", "Summer dinner, travel", "The collar matters. The trouser matters more. The shoe keeps it adult."],
      ["Cardigan + shirt + jean", "Home hosting, gallery, cafe", "Soft, readable, and quietly dressed without needing a jacket."],
    ],
    kit: [
      ["Soft navy jacket", "Structure", "blazer", "One unstructured jacket makes half the formulas believable."],
      ["Dark straight denim", "Ground", "denim", "The jean that behaves like a trouser when the shoe is right."],
      ["Brown loafer", "Finish", "shoes", "A better answer than sneakers whenever the room is unclear."],
      ["Grey crewneck", "Texture", "knit", "A quiet layer that works under coats, jackets, and overshirts."],
    ],
    situations: [
      ["Level one", "Tee, overshirt, denim, sneaker", "Casual but organized. This is the floor, not the whole wardrobe."],
      ["Level two", "Oxford, denim, loafer, jacket", "The most useful middle register for real life."],
      ["Level three", "Knit, trouser, soft blazer, derby", "Dressy enough for dinner, still short of formal."],
      ["Weather move", "Same formula, different outer layer", "Change warmth before changing the entire outfit."],
    ],
    rules: [
      ["Do", "Build from silhouette first, then fabric, then color."],
      ["Do", "Keep one piece smarter than the rest of the outfit."],
      ["Do", "Repeat a good formula until it becomes automatic."],
      ["Do not", "Treat every event as a chance to invent a new personality."],
      ["Do not", "Use loud color to fix weak proportion."],
      ["Do not", "Let sneakers be the default answer for every casual setting."],
    ],
    leaves: [
      ["Best outfit formulas for men", "10 min", "/en/men/wear/outfit-formulas/best-outfit-formulas-for-men/"],
      ["How to build a weekday uniform", "8 min", "/en/men/wear/outfit-formulas/weekday-uniform/"],
      ["Men's outfit formulas after 40", "9 min", "/en/men/wear/outfit-formulas/after-40/"],
      ["Jacket and denim formulas", "7 min", "/en/men/wear/outfit-formulas/jacket-and-denim/"],
      ["Trouser and knit formulas", "6 min", "/en/men/wear/outfit-formulas/trouser-and-knit/"],
      ["Travel outfit formulas", "7 min", "/en/men/wear/outfit-formulas/travel-formulas/"],
      ["Warm weather formulas", "6 min", "/en/men/wear/outfit-formulas/warm-weather/"],
      ["Cold weather formulas", "6 min", "/en/men/wear/outfit-formulas/cold-weather/"],
    ],
    faq: [
      ["What is an outfit formula?", "An outfit formula is a repeatable structure, like jacket plus knit plus trouser, that works even when the exact pieces change."],
      ["How many outfit formulas does a man need?", "Most men need five: work, smart casual, weekend, travel, and cold weather."],
      ["Are formulas boring?", "No. A good formula creates consistency. Fabric, color, shoe, and outerwear still give it range."],
      ["What formula should I start with?", "Start with an oxford, dark denim, and loafers. Add a soft jacket when the room needs polish."],
      ["How do I make formulas seasonal?", "Keep the shape and change the weight: linen for summer, wool for winter, cotton and suede between."],
    ],
  },
  "business-casual": {
    section: "Business Casual",
    number: "03",
    register: "The Soft Office",
    hero: "business",
    title: "Business casual,",
    italic: "with a spine.",
    deck: "Office clothes without the full suit: trousers, shirts, knit layers, dress shoes, and enough authority to avoid looking unfinished.",
    stats: [["07", "office formulas"], ["32", "article slots"], ["5", "workdays"], ["0", "fleece vests"]],
    intro: "Business casual is where men lose the plot because the suit no longer tells them what to do. The answer is not novelty. It is a cleaner trouser, a better shirt, a quieter shoe, and one layer with shape.",
    formulas: [
      ["Oxford + wool trouser + loafer", "Standard office", "The baseline. Works in almost every business casual room."],
      ["Knit polo + pleated trouser", "Warm office", "Soft collar, clean line, no undershirt showing."],
      ["Blazer + chambray + chino", "Creative office", "Texture relaxes the jacket without giving up structure."],
      ["Cardigan + shirt + derby", "Cold office", "A cardigan can replace a jacket when the shirt and shoe stay sharp."],
      ["Turtleneck + sport coat", "Winter meeting", "Quiet, direct, and best in navy, charcoal, brown, or black."],
      ["Poplin shirt + overshirt", "Casual office", "The overshirt has to fit like a layer, not workwear costume."],
    ],
    kit: [
      ["Wool trousers", "Foundation", "blazer", "The office pant that makes everything else cleaner."],
      ["Oxford shirts", "Repeat", "knit", "Blue, white, stripe. Pressed enough, not precious."],
      ["Loafers and derbies", "Footing", "shoes", "The shoes that keep the outfit from drifting weekend."],
      ["Fine gauge knit", "Layer", "coat", "Warmth without hoodie energy."],
    ],
    situations: [
      ["Client day", "Jacket, shirt, trouser, leather shoe", "One notch below a suit, not three notches below effort."],
      ["Internal day", "Knit, oxford, chino, loafer", "Soft but still visibly work-ready."],
      ["Travel meeting", "Cardigan, poplin, wool trouser", "Resists wrinkles and survives the airport."],
      ["Friday", "Chambray, jacket, dark denim", "Only if the denim is clean and the shoe is better than casual."],
    ],
    rules: [
      ["Do", "Keep trousers sharper than the top layer."],
      ["Do", "Use leather shoes when the office dress code is unclear."],
      ["Do", "Let knitwear replace a jacket only when the shirt is crisp."],
      ["Do not", "Confuse untucked with relaxed if the shirt is too long."],
      ["Do not", "Wear gym fleece as an office layer."],
      ["Do not", "Let chinos be the only pant in the rotation."],
    ],
    leaves: [
      ["Business casual outfits for men", "10 min", "/en/men/wear/business-casual/business-casual-outfits-for-men/"],
      ["Best business casual shoes", "8 min", "/en/men/wear/business-casual/best-shoes/"],
      ["Business casual pants for men", "8 min", "/en/men/wear/business-casual/pants/"],
      ["Can jeans be business casual?", "6 min", "/en/men/wear/business-casual/jeans/"],
      ["Business casual in summer", "7 min", "/en/men/wear/business-casual/summer/"],
      ["Business casual in winter", "7 min", "/en/men/wear/business-casual/winter/"],
      ["Business casual after 40", "8 min", "/en/men/wear/business-casual/after-40/"],
      ["Business casual travel outfits", "7 min", "/en/men/wear/business-casual/travel/"],
    ],
    faq: [
      ["What is business casual for men?", "Business casual is office dressing without a full suit: trousers, shirts, knitwear, jackets, and leather shoes arranged with polish."],
      ["Are jeans business casual?", "Sometimes, if the office allows it and the jeans are dark, clean, straight, and worn with a smart shoe or jacket."],
      ["Do men need a blazer for business casual?", "Not every day, but one soft navy or brown jacket makes the whole office rotation easier."],
      ["Are sneakers business casual?", "Rarely. Clean minimal sneakers can work in casual offices, but loafers and derbies are safer."],
      ["What colors work best?", "Navy, charcoal, grey, white, blue, brown, olive, and stone make the most repeatable office palette."],
    ],
  },
  "date-night": {
    section: "Date Night",
    number: "04",
    register: "The Evening Edit",
    hero: "date",
    title: "Date night,",
    italic: "less performance.",
    deck: "Texture, dark color, better shoes, and low-effort polish. The outfit should look considered without looking rehearsed.",
    stats: [["05", "evening formulas"], ["28", "article slots"], ["2", "shoe lanes"], ["1", "quiet jacket"]],
    intro: "Date night dressing works when the clothes carry a little more texture than daytime, a little less stiffness than work, and no visible panic. The best version is simple: darker palette, better shoe, clean neckline, one interesting surface.",
    formulas: [
      ["Soft blazer + dark tee", "Dinner, drinks", "Only works when the tee is clean and the shoe is not an afterthought."],
      ["Knit polo + wool trouser", "Warm dinner", "Collar, drape, and polish without a jacket."],
      ["Suede jacket + oxford", "Bar, gallery, casual dinner", "Texture does the evening work."],
      ["Crewneck + topcoat + denim", "Cold night", "Simple enough to feel natural, sharp enough to leave the house."],
      ["Black knit + charcoal trouser", "Late dinner", "Quiet, dark, and cleaner than a button-up trying too hard."],
      ["Cardigan + tee + loafer", "Home hosting", "Soft but still dressed."],
    ],
    kit: [
      ["Dark knit", "Mood", "knit", "The easiest evening layer."],
      ["Suede shoe", "Finish", "shoes", "Adds texture without shine."],
      ["Soft jacket", "Shape", "blazer", "Structure without office energy."],
      ["Dark denim", "Ground", "denim", "Casual, but still clean enough for dinner."],
    ],
    situations: [
      ["First date", "Soft jacket, tee, trouser, loafer", "Better to look calm than decorated."],
      ["Anniversary", "Knit, wool trouser, suede shoe", "Quiet fabric and a cleaner silhouette."],
      ["Drinks", "Dark denim, jacket, boot", "Casual edge, controlled fit."],
      ["Dinner at home", "Cardigan, tee, relaxed trouser", "Comfort with visible intent."],
    ],
    rules: [
      ["Do", "Choose texture before color."],
      ["Do", "Wear the best shoes in the outfit."],
      ["Do", "Keep fragrance and jewelry restrained."],
      ["Do not", "Dress like you are trying to be noticed by the room."],
      ["Do not", "Wear a work shirt straight into dinner if it looks tired."],
      ["Do not", "Let a graphic tee carry the outfit."],
    ],
    leaves: [
      ["Date night outfits for men", "9 min", "/en/men/wear/date-night/date-night-outfits-for-men/"],
      ["First date outfits for men", "8 min", "/en/men/wear/date-night/first-date-outfits/"],
      ["Dinner outfits for men", "8 min", "/en/men/wear/date-night/dinner-outfits/"],
      ["Casual date outfits for men", "7 min", "/en/men/wear/date-night/casual-date-outfits/"],
      ["Winter date outfits for men", "7 min", "/en/men/wear/date-night/winter/"],
      ["Summer date outfits for men", "7 min", "/en/men/wear/date-night/summer/"],
      ["Best date night shoes", "6 min", "/en/men/wear/date-night/best-shoes/"],
      ["What not to wear on a date", "6 min", "/en/men/wear/date-night/what-not-to-wear/"],
    ],
    faq: [
      ["What should a man wear on a date night?", "A clean dark outfit with one structured piece, a good shoe, and restrained texture usually works better than anything loud."],
      ["Can jeans work for date night?", "Yes, if they are dark, fitted cleanly, and paired with a better shoe and top layer."],
      ["Should I wear a blazer on a date?", "A soft blazer can work, but it should not look like office clothing. Keep the shirt or knit relaxed."],
      ["What shoes are best?", "Loafers, suede derbies, Chelsea boots, and clean leather sneakers in very casual rooms."],
      ["What colors work best at night?", "Navy, charcoal, black, brown, white, deep green, and oxblood in small amounts."],
    ],
  },
  weekend: {
    section: "Weekend",
    number: "05",
    register: "The Off-Duty Standard",
    hero: "weekend",
    title: "Weekend,",
    italic: "with shape.",
    deck: "Chinos, denim, tees, crews, field jackets, sneakers, and off-duty clothes that still know where the door is.",
    stats: [["06", "weekend formulas"], ["30", "article slots"], ["2", "shoe speeds"], ["48", "hours"]],
    intro: "Weekend dressing collapses when comfort is the only standard. The better version keeps comfort, then adds shape: a straight jean, a knit with weight, an overshirt, a field jacket, a clean sneaker, a loafer if the day turns into dinner.",
    formulas: [
      ["Tee + overshirt + denim", "Errands, coffee, daytime", "The easiest off-duty uniform with real shape."],
      ["Crewneck + chino + sneaker", "Saturday lunch", "Clean, soft, and repeatable."],
      ["Field jacket + oxford + jean", "Day into evening", "The jacket carries the outfit when plans change."],
      ["Polo + cotton trouser", "Warm weekend", "Sharper than a tee, less stiff than a shirt."],
      ["Cardigan + tee + loafer", "Dinner at home, casual drinks", "Soft but edited."],
      ["Sweatshirt + wool coat", "Cold errands", "The coat upgrades the comfort layer."],
    ],
    kit: [
      ["Straight denim", "Base", "denim", "Weekend starts here."],
      ["Field jacket", "Layer", "coat", "Structure without formality."],
      ["Plain crewneck", "Comfort", "knit", "Better than a hoodie in most places."],
      ["Clean sneaker", "Ease", "shoes", "Keep one pair that does not look like gym equipment."],
    ],
    situations: [
      ["Errands", "Tee, overshirt, denim, sneaker", "Comfort that still looks like clothes."],
      ["Lunch", "Knit, chino, loafer", "A small upgrade that costs no comfort."],
      ["Casual dinner", "Field jacket, oxford, dark denim", "Enough shape for a restaurant."],
      ["Travel weekend", "Cardigan, tee, straight jean", "Soft layers, simple palette, useful pockets."],
    ],
    rules: [
      ["Do", "Keep the silhouette clean even when the fabric is casual."],
      ["Do", "Use one good layer to organize the outfit."],
      ["Do", "Own casual shoes that are not workout shoes."],
      ["Do not", "Let comfort excuse bad proportions."],
      ["Do not", "Make the whole weekend a hoodie rotation."],
      ["Do not", "Wear distressed denim when clean denim would do more."],
    ],
    leaves: [
      ["Weekend outfits for men", "9 min", "/en/men/wear/weekend/weekend-outfits-for-men/"],
      ["Casual weekend outfits after 40", "8 min", "/en/men/wear/weekend/after-40/"],
      ["Best weekend shoes for men", "7 min", "/en/men/wear/weekend/best-shoes/"],
      ["How to wear a field jacket", "8 min", "/en/men/wear/weekend/field-jacket/"],
      ["Weekend dinner outfits", "7 min", "/en/men/wear/weekend/dinner-outfits/"],
      ["Saturday errand outfits", "6 min", "/en/men/wear/weekend/errand-outfits/"],
      ["Casual outfits without hoodies", "7 min", "/en/men/wear/weekend/no-hoodie-outfits/"],
      ["Weekend travel capsule", "8 min", "/en/men/wear/weekend/travel-capsule/"],
    ],
    faq: [
      ["How should men dress on weekends?", "Comfortably, but with shape: clean denim, plain knits, overshirts, field jackets, and shoes that are not only for the gym."],
      ["Are hoodies okay?", "Yes, but they should not be the entire plan. A crewneck, cardigan, or field jacket often does the same job with more polish."],
      ["What shoes work best?", "Clean sneakers, loafers, desert boots, and service boots cover most weekend settings."],
      ["Can weekend clothes work for dinner?", "Yes, if the denim is dark, the shoe is better, and the top layer has structure."],
      ["What colors are easiest?", "Navy, grey, white, olive, brown, black, and stone."],
    ],
  },
  travel: {
    section: "Travel",
    number: "06",
    register: "The Moving Closet",
    hero: "travel",
    title: "Travel,",
    italic: "without surrender.",
    deck: "Airport layers, wrinkle-tolerant cloth, one-shoe trips, carry-on capsules, and clothes that survive the delayed dinner.",
    stats: [["05", "trip formulas"], ["26", "article slots"], ["1", "main shoe"], ["72", "hours"]],
    intro: "Travel dressing needs to handle motion, temperature, waiting, sitting, walking, and arrival. The mistake is dressing only for the plane. The better system dresses for the first thing that happens after the plane.",
    formulas: [
      ["Cardigan + tee + trouser", "Airport to dinner", "Soft on the flight, presentable at arrival."],
      ["Overshirt + oxford + denim", "City weekend", "Layered enough for weather, clean enough for restaurants."],
      ["Navy jacket + knit polo", "Work trip", "Packable polish without suit stiffness."],
      ["Crewneck + field jacket", "Long travel day", "Warm, useful, and less sloppy than a hoodie."],
      ["Linen shirt + cotton trouser", "Warm destination", "Breathable without going resort costume."],
      ["Topcoat + merino + jean", "Cold destination", "One outer layer that makes every packed piece better."],
    ],
    kit: [
      ["Travel trouser", "Base", "blazer", "Wrinkle-tolerant, clean, and comfortable sitting."],
      ["Cardigan", "Layer", "knit", "The flight layer that still works at dinner."],
      ["Dark denim", "Repeat", "denim", "One pair can cover most off-duty travel."],
      ["Loafer or boot", "Shoe", "shoes", "Pick one main shoe and build around it."],
    ],
    situations: [
      ["Airport", "Soft layer, clean pant, easy shoe", "Comfort without pajamas."],
      ["Work arrival", "Jacket, knit polo, trouser", "No ironing crisis before the meeting."],
      ["City walk", "Overshirt, denim, boot", "Useful pockets, good shape, stable shoes."],
      ["Hotel dinner", "Cardigan, oxford, loafer", "Simple enough to pack, polished enough to stay out."],
    ],
    rules: [
      ["Do", "Dress for arrival, not just transit."],
      ["Do", "Pack around one main shoe whenever possible."],
      ["Do", "Use knits and overshirts instead of fragile dress shirts."],
      ["Do not", "Fly in anything that cannot leave the airport."],
      ["Do not", "Pack novelty pieces that only make one outfit."],
      ["Do not", "Ignore temperature changes between plane and street."],
    ],
    leaves: [
      ["Men's travel outfits", "10 min", "/en/men/wear/travel/travel-outfits-for-men/"],
      ["Airport outfits for men", "8 min", "/en/men/wear/travel/airport-outfits/"],
      ["Business travel outfits", "8 min", "/en/men/wear/travel/business-travel/"],
      ["Weekend travel capsule", "8 min", "/en/men/wear/travel/weekend-capsule/"],
      ["Best travel shoes for men", "7 min", "/en/men/wear/travel/best-shoes/"],
      ["What to wear on a long flight", "7 min", "/en/men/wear/travel/long-flight/"],
      ["Warm weather travel outfits", "7 min", "/en/men/wear/travel/warm-weather/"],
      ["Cold weather travel outfits", "7 min", "/en/men/wear/travel/cold-weather/"],
    ],
    faq: [
      ["What should men wear when traveling?", "A soft layer, clean pant, and easy shoe that still works after arrival."],
      ["Are sweatpants okay for flights?", "They are comfortable, but a travel trouser or soft chino usually gives the same comfort with more range."],
      ["What is the best travel shoe?", "A loafer, desert boot, or clean sneaker depending on the trip. The best one works with every packed outfit."],
      ["How many outfits should I pack for a weekend?", "Two base outfits, one smarter layer, one casual layer, and one main shoe usually covers it."],
      ["How do I avoid wrinkles?", "Use knitwear, oxford cloth, denim, wool trousers, and layers that recover better than thin poplin."],
    ],
  },
  "warm-weather": {
    section: "Warm Weather",
    number: "07",
    register: "The Heat Plan",
    hero: "warm",
    title: "Warm weather,",
    italic: "still dressed.",
    deck: "Linen, cotton, open weaves, lighter shoes, summer work outfits, hot nights, and breathable polish.",
    stats: [["06", "heat formulas"], ["30", "article slots"], ["3", "cloth weights"], ["90F", "still possible"]],
    intro: "Warm weather dressing is mostly fabric honesty. You cannot style your way out of bad cloth in July. The useful summer closet starts with open weaves, lighter colors, better collars, and shoes that breathe without looking like surrender.",
    formulas: [
      ["Linen shirt + cotton trouser", "Dinner outside", "Breathable, clean, and better than a short-sleeve panic buy."],
      ["Knit polo + pleated chino", "Warm office", "A collar without stiffness and a trouser with airflow."],
      ["Oxford + linen jacket", "Summer meeting", "Only if the jacket is genuinely light."],
      ["Camp collar + straight denim", "Casual night", "Works when the print is quiet and the shoe is adult."],
      ["Tee + overshirt + fatigue pant", "Weekend heat", "Keep the layer light and the palette dry."],
      ["Polo + loafer + cotton suit", "Summer event", "Soft tailoring with no tie and no apology."],
    ],
    kit: [
      ["Linen shirt", "Air", "blazer", "Wrinkles are part of the contract."],
      ["Knit polo", "Collar", "knit", "The summer shirt that can go to dinner."],
      ["Cotton trouser", "Base", "denim", "Cleaner than shorts, cooler than denim."],
      ["Loafer", "Shoe", "shoes", "The warm weather dress shoe."],
    ],
    situations: [
      ["Hot office", "Knit polo, cotton trouser, loafer", "Business casual without overheating."],
      ["Outdoor dinner", "Linen shirt, relaxed trouser, suede shoe", "Texture and air."],
      ["Weekend day", "Tee, light overshirt, fatigue pant", "Sun coverage without bulk."],
      ["Summer event", "Cotton suit, open collar, loafer", "Soft and formal enough."],
    ],
    rules: [
      ["Do", "Choose fabric before silhouette."],
      ["Do", "Wear lighter colors when the sun is the problem."],
      ["Do", "Let linen wrinkle instead of pretending it will not."],
      ["Do not", "Use performance polos as dinner shirts."],
      ["Do not", "Wear heavy denim in heat if a cotton trouser would work."],
      ["Do not", "Confuse short sleeves with automatic coolness."],
    ],
    leaves: [
      ["Warm weather outfits for men", "9 min", "/en/men/wear/warm-weather/warm-weather-outfits-for-men/"],
      ["Summer business casual for men", "8 min", "/en/men/wear/warm-weather/summer-business-casual/"],
      ["Best linen shirts for men", "8 min", "/en/men/wear/warm-weather/best-linen-shirts/"],
      ["What to wear in hot weather", "7 min", "/en/men/wear/warm-weather/hot-weather/"],
      ["Summer date night outfits", "7 min", "/en/men/wear/warm-weather/date-night/"],
      ["Best summer shoes for men", "7 min", "/en/men/wear/warm-weather/best-shoes/"],
      ["Cotton suits in summer", "8 min", "/en/men/wear/warm-weather/cotton-suits/"],
      ["How to dress well without a jacket", "7 min", "/en/men/wear/warm-weather/no-jacket/"],
    ],
    faq: [
      ["How can men dress well in hot weather?", "Use breathable cloth, lighter colors, relaxed but clean fits, and shoes that breathe without looking too casual."],
      ["Is linen too wrinkly?", "No. Linen wrinkles are expected. Bad fit and bad shoes are bigger problems."],
      ["Can shorts be smart casual?", "Rarely. Tailored shorts can work in resort or casual settings, but trousers are usually more useful."],
      ["What shirts work best?", "Linen shirts, oxford cloth, knit polos, camp collars, and lightweight cotton shirts."],
      ["What shoes work in summer?", "Loafers, espadrilles in casual places, suede derbies, minimal sneakers, and sandals only in clearly casual settings."],
    ],
  },
  "cold-weather": {
    section: "Cold Weather",
    number: "08",
    register: "The Layer System",
    hero: "cold",
    title: "Cold weather,",
    italic: "with proportion.",
    deck: "Overcoats, boots, scarves, base layers, heavy knits, winter trousers, and keeping shape under warmth.",
    stats: [["06", "layer formulas"], ["32", "article slots"], ["3", "warmth levels"], ["1", "good coat"]],
    intro: "Cold weather dressing fails when warmth adds bulk without order. The better system builds from inside out: base layer, knit, trouser, coat, boot. Each layer has a job, and the outermost layer has to make the whole thing look intentional.",
    formulas: [
      ["Merino base + crewneck + overcoat", "Daily cold", "Warm without looking technical."],
      ["Turtleneck + wool trouser + topcoat", "Dinner, meeting", "Cleanest cold weather smart casual formula."],
      ["Flannel shirt + field jacket + boot", "Weekend cold", "Texture, pockets, and movement."],
      ["Cardigan + oxford + parka", "Travel cold", "Soft inside, serious outside."],
      ["Sweatshirt + wool coat + denim", "Errands", "Comfort layer upgraded by the coat."],
      ["Rollneck + suede jacket + scarf", "Mild winter", "Texture-heavy, warm enough, not bulky."],
    ],
    kit: [
      ["Wool overcoat", "Top layer", "coat", "The piece that makes winter outfits look dressed."],
      ["Merino knit", "Warmth", "knit", "Thin warmth beats bulky cotton."],
      ["Winter trouser", "Base", "blazer", "Flannel, corduroy, or heavier wool."],
      ["Leather boot", "Ground", "shoes", "Weather, weight, and shape in one move."],
    ],
    situations: [
      ["Commute", "Overcoat, knit, wool trouser, boot", "Warm, clean, office-ready."],
      ["Weekend", "Field jacket, flannel, denim, service boot", "Cold casual with texture."],
      ["Dinner", "Topcoat, rollneck, trouser, loafer", "Sharp without needing a suit."],
      ["Travel", "Parka, cardigan, oxford, boot", "Layered enough for bad weather and indoor heat."],
    ],
    rules: [
      ["Do", "Layer thin warmth before adding bulk."],
      ["Do", "Let the coat be long enough to cover the outfit."],
      ["Do", "Use texture so dark winter clothes do not go flat."],
      ["Do not", "Wear a technical shell over everything by default."],
      ["Do not", "Let scarves and hats become the loudest part of the outfit."],
      ["Do not", "Forget that indoor heat is part of winter dressing."],
    ],
    leaves: [
      ["Cold weather outfits for men", "10 min", "/en/men/wear/cold-weather/cold-weather-outfits-for-men/"],
      ["Winter business casual for men", "8 min", "/en/men/wear/cold-weather/winter-business-casual/"],
      ["Best winter coats for men", "9 min", "/en/men/wear/cold-weather/best-winter-coats/"],
      ["How to layer clothes for men", "8 min", "/en/men/wear/cold-weather/how-to-layer/"],
      ["Winter date night outfits", "7 min", "/en/men/wear/cold-weather/date-night/"],
      ["Best winter boots for men", "8 min", "/en/men/wear/cold-weather/best-boots/"],
      ["How to wear scarves", "6 min", "/en/men/wear/cold-weather/scarves/"],
      ["Warm outfits without a parka", "7 min", "/en/men/wear/cold-weather/no-parka/"],
    ],
    faq: [
      ["How should men dress in cold weather?", "Use thin warm layers, heavier trousers, proper boots, and a coat long enough to cover the outfit."],
      ["What is the best winter coat?", "For most men, a wool overcoat or warm parka solves the most days. The right answer depends on commute, weather, and dress code."],
      ["How do I layer without looking bulky?", "Use merino or thin wool close to the body, then add one substantial outer layer instead of several thick middle layers."],
      ["Are boots necessary?", "In real winter, yes. Boots give traction, warmth, and proportion under heavier coats."],
      ["What colors work in winter?", "Charcoal, navy, brown, black, olive, cream, grey, camel, and oxblood in small doses."],
    ],
  },
};

function MenWearL3Page({ page }) {
  const data = MWL3_DATA[page];
  const slug = page;
  return (
    <React.Fragment>
      <section className="mwl3-hero" data-screen-label="01 Hero">
        <div className="mwl3-hero-img" style={{ backgroundImage: `url(${MWL3_IMG[data.hero]})` }} />
        <div className="frame">
          <div className="mwl3-crumb">
            <a href="/en/men/">Men</a><span>/</span>
            <a href="/en/men/wear/">Wear</a><span>/</span>
            <span>{data.section}</span>
          </div>
          <div className="mwl3-hero-copy">
            <span className="mwl3-kicker">Wear / {data.number} - {data.register}</span>
            <h1>{data.title} <span>{data.italic}</span></h1>
            <p>{data.deck}</p>
          </div>
          <div className="mwl3-hero-stats">
            {data.stats.map(([n, label]) => <div key={label}><span>{n}</span><small>{label}</small></div>)}
          </div>
        </div>
      </section>

      <nav className="mwl3-nav">
        <div className="frame">
          <span className="label">{data.section} Index</span>
          <div className="links">
            {MWL3_NAV.map((item) => (
              <a key={item.id} href={`#${item.id}`}><span>{item.n}</span>{item.nm}</a>
            ))}
          </div>
        </div>
      </nav>

      <section className="section mwl3-intro" data-screen-label="02 Intro">
        <div className="frame">
          <aside>
            <div><span>Lane</span><b>Men</b></div>
            <div><span>Chapter</span><b>Wear / {data.number}</b></div>
            <div><span>Section</span><b>{data.section}</b></div>
            <div><span>Updated</span><b>April 2026</b></div>
            <div><span>Status</span><b>L3 batch</b></div>
          </aside>
          <div className="body">
            <p className="standfirst">{data.intro}</p>
            <p>
              This is a static section hub with route-ready article inventory, crawlable body copy, internal links, and enough editorial direction to guide the later leaf pages.
            </p>
            <p>
              The page is built for the English launch now and for the seven language passes later: stable hierarchy first, richer article copy next.
            </p>
          </div>
        </div>
      </section>

      <section id="formula" className="mwl3-sec" data-screen-label="03 Formula">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">01</div>
            <div><span>The Formula</span><h2>Repeatable moves, <em>not one-off looks.</em></h2></div>
            <p>Each row is a future article lane and a usable dressing rule now.</p>
          </div>
          <div className="mwl3-formulas">
            {data.formulas.map((row, i) => (
              <a href={`/en/men/wear/${slug}/${row[0].toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}/`} key={row[0]}>
                <span className="rank">{String(i + 1).padStart(2, "0")}</span>
                <h3>{row[0]}</h3>
                <span>{row[1]}</span>
                <p>{row[2]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="kit" className="mwl3-sec" data-screen-label="04 Kit">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">02</div>
            <div><span>The Kit</span><h2>The pieces that <em>carry the section.</em></h2></div>
            <p>These are the starter pieces that make the section easier to fill with real articles later.</p>
          </div>
          <div className="mwl3-cards">
            {data.kit.map((card, i) => (
              <a className="mwl3-card" href={`/en/men/wear/${slug}/${card[0].toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}/`} key={card[0]}>
                <div className="img" style={{ backgroundImage: `url(${MWL3_IMG[card[2]]})` }}><span>{card[1]}</span></div>
                <small>No. {String(i + 1).padStart(2, "0")} / {data.section}</small>
                <h3>{card[0]}</h3>
                <p>{card[3]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="situations" className="mwl3-sec mwl3-situations" data-screen-label="05 Situations">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">03</div>
            <div><span>Situation Map</span><h2>Where the section <em>has to work.</em></h2></div>
            <p>The page should answer real use cases before the article layer exists.</p>
          </div>
          <div className="mwl3-situation-grid">
            {data.situations.map((item) => (
              <article key={item[0]}><span>{item[1]}</span><h3>{item[0]}</h3><p>{item[2]}</p></article>
            ))}
          </div>
        </div>
      </section>

      <section id="rules" className="mwl3-sec" data-screen-label="06 Rules">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">04</div>
            <div><span>Rules</span><h2>What to keep, <em>what to cut.</em></h2></div>
            <p>A practical do/don't ledger gives each page quick value even before the deeper leaf work starts.</p>
          </div>
          <div className="mwl3-rule-list">
            {data.rules.map((item, i) => (
              <div key={`${item[0]}-${i}`} className={item[0] === "Do" ? "good" : "bad"}>
                <span>{String(i + 1).padStart(2, "0")}</span><h3>{item[0]}</h3><p>{item[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="guides" className="mwl3-sec" data-screen-label="07 Guide index">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">05</div>
            <div><span>Article Slots</span><h2>The pages this section <em>will feed.</em></h2></div>
            <p>Route-ready placeholders give the L3 body depth now and a clean fill-in list later.</p>
          </div>
          <div className="mwl3-leaf-list">
            {data.leaves.map((item, i) => (
              <a className="leaf-row" href={item[2]} key={item[0]}>
                <span className="n">{String(i + 1).padStart(2, "0")}</span><span className="t">{item[0]}</span><span className="read">{item[1]}</span><span className="arr">-&gt;</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="faq" className="mwl3-sec" data-screen-label="08 FAQ">
        <div className="frame">
          <div className="mwl3-head">
            <div className="num">06</div>
            <div><span>SEO Questions</span><h2>{data.section} questions <em>men actually ask.</em></h2></div>
            <p>Sample FAQ copy for the first static pass.</p>
          </div>
          <div className="mwl3-faq">
            {data.faq.map((item, i) => (
              <details key={item[0]}>
                <summary><span className="n">Q.{String(i + 1).padStart(2, "0")}</span><span className="q">{item[0]}</span><span className="plus">+</span></summary>
                <div className="ans"><p>{item[1]}</p></div>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-rule" data-screen-label="09 Cross">
        <div className="frame">
          <div className="sec-head">
            <div className="num">No. 07</div>
            <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>wearing.</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 }}>
              Sister sections<br />and one level up
            </div>
          </div>
          <div className="cross-lanes">
            <a href="/en/men/wear/smart-casual/"><span className="n">Wear / 02</span><h6>Smart Casual</h6><p>The approved first model for this L3 family.</p><span className="arr">Open</span></a>
            <a href="/en/men/fit/trousers/"><span className="n">Fit</span><h6>Trousers</h6><p>The fit choice underneath most wear pages.</p><span className="arr">Open</span></a>
            <a href="/en/men/build/outerwear/"><span className="n">Build</span><h6>Outerwear</h6><p>The top layer that changes the register.</p><span className="arr">Open</span></a>
            <a href="/en/men/wear/" className="bridge-card"><span className="n">Up a level</span><h6>Wear</h6><p>All men's wear chapters.</p><span className="arr">Open</span></a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.MenWearL3Page = MenWearL3Page;
