/* global React */

const MFSL3_IMG = {
  skincare: "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=2400&q=80",
  fragrance: "https://images.unsplash.com/photo-1541643600914-78b084683601?w=2400&q=80",
  hair: "https://images.unsplash.com/photo-1621605815971-fbc98d665033?w=2400&q=80",
  grooming: "https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=2400&q=80",
  spring: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=2400&q=80",
  summer: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2400&q=80",
  fall: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=2400&q=80",
  winter: "https://images.unsplash.com/photo-1517299321609-52687d1bc55a?w=2400&q=80",
  transitional: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=2400&q=80",
};

const MFSL3_NAV = [
  ["01", "protocol", "Protocol"],
  ["02", "system", "System"],
  ["03", "diagnosis", "Diagnosis"],
  ["04", "guides", "Guides"],
  ["05", "questions", "Questions"],
];

const MFSL3_DATA = {
  "skincare-for-men": {
    chapter: "finish",
    chapterTitle: "Finish",
    section: "Skincare for Men",
    number: "01",
    mode: "5-minute routine",
    hero: "skincare",
    title: "Skincare,",
    italic: "kept clean.",
    deck: "Cleanser, moisturizer, sunscreen, shave irritation, winter dryness, oily skin, gym bags, and a routine that works before the clothes do.",
    stats: [["03", "daily steps"], ["05", "minutes"], ["SPF", "every day"], ["01", "face"]],
    intro: "Men's skincare should be boring in the best way: wash without stripping, moisturize without shine, protect against sun, and treat irritation before it turns into texture. The goal is not a shelf. The goal is skin that does not fight the collar, shave, or camera.",
    protocolName: "Daily Routine",
    protocol: [
      ["Morning wash", "Use a gentle cleanser or just rinse if skin is dry; do not scrub the face like fabric."],
      ["Moisturizer", "Apply while skin is slightly damp so it seals comfort without leaving a film."],
      ["Sunscreen", "Use broad-spectrum SPF 30 or higher on face, neck, ears, and hairline."],
      ["Shave control", "Shave after warmth, go with the grain first, and calm the skin afterward."],
      ["Night reset", "Clean off sunscreen, sweat, city grime, and hair product before bed."],
    ],
    systemName: "Skin Type Map",
    system: [
      ["Oily", "Gel cleanser, light moisturizer", "Avoid harsh stripping; rebound oil is real."],
      ["Dry", "Cream cleanser, richer moisturizer", "Winter and hot showers usually make it worse."],
      ["Sensitive", "Fragrance-free basics", "Patch test actives and change one thing at a time."],
      ["Shave-prone", "Barrier care, gentle exfoliation", "Ingrowns need routine, not punishment."],
    ],
    diagnosis: [
      ["Tight after washing", "The cleanser is too aggressive or the water is too hot."],
      ["Shiny by lunch", "Use lighter moisturizer and do not skip hydration entirely."],
      ["Razor bumps", "Blade pressure, shaving direction, or dull cartridge is usually the issue."],
      ["Dry patches", "Add a richer night moisturizer and reduce exfoliation."],
    ],
    leaves: [
      ["Men's skincare routine for beginners", "8 min", "/en/men/finish/skincare-for-men/beginner-routine/"],
      ["Best face wash for men", "7 min", "/en/men/finish/skincare-for-men/best-face-wash/"],
      ["Best moisturizer for men", "7 min", "/en/men/finish/skincare-for-men/best-moisturizer/"],
      ["Best sunscreen for men", "8 min", "/en/men/finish/skincare-for-men/best-sunscreen/"],
      ["How to prevent razor bumps", "8 min", "/en/men/finish/skincare-for-men/razor-bumps/"],
      ["Skincare for oily skin men", "7 min", "/en/men/finish/skincare-for-men/oily-skin/"],
      ["Skincare for dry skin men", "7 min", "/en/men/finish/skincare-for-men/dry-skin/"],
      ["Post-gym skincare routine", "6 min", "/en/men/finish/skincare-for-men/post-gym/"],
    ],
    faq: [
      ["What skincare does a man actually need?", "Cleanser, moisturizer, and sunscreen cover the essentials for most men."],
      ["Should men use sunscreen daily?", "Yes. Daily SPF is the simplest anti-aging and skin-protection step."],
      ["How long should a routine take?", "A useful routine can take less than five minutes morning and night."],
      ["Do men need eye cream?", "Usually no. A good moisturizer and sunscreen matter more."],
    ],
  },
  fragrance: {
    chapter: "finish",
    chapterTitle: "Finish",
    section: "Fragrance",
    number: "02",
    mode: "scent control",
    hero: "fragrance",
    title: "Fragrance,",
    italic: "kept close.",
    deck: "Clean, woody, citrus, amber, office-safe, date-night, summer, winter, and the difference between presence and announcement.",
    stats: [["02", "sprays"], ["04", "families"], ["06", "hours"], ["0", "cloud"]],
    intro: "Fragrance is part of finish because people experience it before they understand it. The best scent reads personal at conversational distance, not across the room. Season, setting, skin, and spray count matter more than owning a crowded shelf.",
    protocolName: "Application Protocol",
    protocol: [
      ["Start clean", "Fragrance sits better on clean skin and loses the fight against stale laundry."],
      ["Spray low count", "One to three sprays is enough for most office, dinner, and daytime settings."],
      ["Hit warm points", "Chest, neck, or forearm works; do not spray every pulse point at once."],
      ["Respect fabric", "Avoid fragile knits, silk, and light cloth that may stain."],
      ["Let it settle", "Judge fragrance after thirty minutes, not from the first alcohol blast."],
    ],
    systemName: "Scent Families",
    system: [
      ["Citrus", "Day, heat, office", "Fresh and short-lived; easy to overspray less often."],
      ["Woody", "Daily, date, fall", "Cedar, sandalwood, vetiver; safest grown-up lane."],
      ["Amber", "Evening, winter", "Warm and lasting; use restraint indoors."],
      ["Clean musk", "Office, close quarters", "Quiet, laundry-adjacent, best when barely noticed."],
    ],
    diagnosis: [
      ["People smell you first", "Reduce sprays or choose a lighter concentration."],
      ["It disappears quickly", "Dry skin, citrus notes, or very light eau de toilette may be why."],
      ["It turns sweet", "Your skin chemistry may push vanilla, amber, or tonka louder."],
      ["It feels too formal", "Try vetiver, citrus, musk, or tea notes instead of heavy amber."],
    ],
    leaves: [
      ["Best fragrances for men", "9 min", "/en/men/finish/fragrance/best-fragrances-for-men/"],
      ["Office fragrances for men", "7 min", "/en/men/finish/fragrance/office-fragrances/"],
      ["Date night fragrances for men", "7 min", "/en/men/finish/fragrance/date-night/"],
      ["Summer fragrances for men", "7 min", "/en/men/finish/fragrance/summer-fragrances/"],
      ["Winter fragrances for men", "7 min", "/en/men/finish/fragrance/winter-fragrances/"],
      ["How much cologne to wear", "6 min", "/en/men/finish/fragrance/how-much-cologne/"],
      ["Woody fragrances explained", "6 min", "/en/men/finish/fragrance/woody-fragrances/"],
      ["Fragrance concentration guide", "7 min", "/en/men/finish/fragrance/concentration-guide/"],
    ],
    faq: [
      ["How much cologne should men wear?", "Most men should start with one or two sprays and add only when the setting allows it."],
      ["Where should men apply fragrance?", "Chest, neck, or forearm are enough; choose one or two areas."],
      ["What fragrance is best for work?", "Clean musk, light woods, vetiver, tea, and soft citrus are usually safest."],
      ["Should fragrance change by season?", "Yes. Lighter citrus and aquatic scents suit heat; woods, amber, and spice suit colder weather."],
    ],
  },
  hair: {
    chapter: "finish",
    chapterTitle: "Finish",
    section: "Hair",
    number: "03",
    mode: "cut cadence",
    hero: "hair",
    title: "Hair,",
    italic: "with direction.",
    deck: "Cut cadence, product weight, shine, texture, collar relationship, beard balance, and hair that matches the clothes instead of fighting them.",
    stats: [["04", "weeks"], ["03", "product weights"], ["01", "barber"], ["360", "profile"]],
    intro: "Hair is the frame. A good outfit loses authority when the haircut has no plan, too much product, or a neckline that collapses into the collar. The aim is controlled texture, regular maintenance, and a cut that still looks like you on day twenty-four.",
    protocolName: "Hair Maintenance",
    protocol: [
      ["Book by growth", "Short fades may need two to three weeks; scissor cuts can often go four to six."],
      ["Control the neckline", "The back of the neck is visible with shirts, jackets, and coats."],
      ["Match product weight", "Fine hair needs light hold; thick hair can handle cream, clay, or paste."],
      ["Reduce shine by default", "Matte or natural finish usually looks more modern than wet shine."],
      ["Balance facial hair", "Beard shape should support the haircut, not compete with it."],
    ],
    systemName: "Product Map",
    system: [
      ["Cream", "Light control", "Best for natural movement and medium-length hair."],
      ["Clay", "Matte texture", "Useful for thick hair, short cuts, and dry volume."],
      ["Paste", "Flexible hold", "Good middle ground for most everyday styles."],
      ["Pomade", "Shine and shape", "Use when the outfit and haircut can support polish."],
    ],
    diagnosis: [
      ["Hair collapses by noon", "Product may be too heavy or applied before hair is dry enough."],
      ["Looks greasy", "Use less product, switch to matte, or wash buildup out fully."],
      ["Side grows bulky", "The cut needs weight removal, not more styling."],
      ["Beard looks separate", "Ask for a blend between sideburn, beard line, and haircut."],
    ],
    leaves: [
      ["Best haircuts for men", "9 min", "/en/men/finish/hair/best-haircuts-for-men/"],
      ["How often should men get a haircut", "6 min", "/en/men/finish/hair/haircut-frequency/"],
      ["Best hair products for men", "8 min", "/en/men/finish/hair/best-hair-products/"],
      ["Clay vs paste vs pomade", "7 min", "/en/men/finish/hair/clay-vs-paste-vs-pomade/"],
      ["Haircuts for thinning hair", "8 min", "/en/men/finish/hair/thinning-hair/"],
      ["How to style thick hair", "7 min", "/en/men/finish/hair/thick-hair/"],
      ["Beard and haircut balance", "7 min", "/en/men/finish/hair/beard-balance/"],
      ["What to ask your barber", "8 min", "/en/men/finish/hair/what-to-ask-barber/"],
    ],
    faq: [
      ["How often should men cut their hair?", "Short cuts often need two to four weeks; longer scissor cuts can usually go four to six."],
      ["What hair product should men use?", "Cream for light control, clay for matte texture, paste for flexible hold, and pomade for shine."],
      ["How do I avoid greasy hair product?", "Use less, apply to drier hair, and choose matte clay or paste instead of heavy pomade."],
      ["Should beard and hair match?", "They should relate in weight and edge, even if they are not the same length."],
    ],
  },
  "grooming-basics": {
    chapter: "finish",
    chapterTitle: "Finish",
    section: "Grooming Basics",
    number: "04",
    mode: "weekly reset",
    hero: "grooming",
    title: "Grooming,",
    italic: "the quiet check.",
    deck: "Nails, collars, lint, shoe polish, shaving, beard lines, laundry smell, and the small maintenance that makes everything else work.",
    stats: [["10", "minutes"], ["07", "checks"], ["01", "kit"], ["0", "lint"]],
    intro: "Grooming basics are the unglamorous details that decide whether clothes read intentional. Trimmed nails, clean collars, fresh breath, controlled beard edges, and shoes that are not neglected make even simple outfits look more expensive.",
    protocolName: "Weekly Reset",
    protocol: [
      ["Trim nails", "Short, clean, and even; hands are visible in every interaction."],
      ["Check collars", "Sweat and sunscreen collect fastest at the neck and cuffs."],
      ["Control lint", "Dark wool, navy coats, and black knits need a brush before leaving."],
      ["Refresh shoes", "Brush suede, wipe leather, and polish when the edge goes dull."],
      ["Set beard lines", "Cheek and neck lines should look chosen, not abandoned."],
    ],
    systemName: "Essential Kit",
    system: [
      ["Nail clipper", "Hands", "Use weekly before edges split."],
      ["Clothes brush", "Fabric", "Better than sticky rollers for wool and coats."],
      ["Shoe brush", "Shoes", "Separate brushes for suede and polished leather."],
      ["Trimmer", "Beard", "Guards make maintenance repeatable."],
    ],
    diagnosis: [
      ["Outfit looks tired", "Check shoes, collar, lint, and wrinkles before blaming the clothes."],
      ["Beard looks messy", "The neck line or cheek line is probably drifting."],
      ["Shirts age quickly", "Collar buildup, deodorant marks, or poor laundering may be the cause."],
      ["Shoes look cheap", "Unbrushed leather, collapsed laces, or dirty edges are visible fast."],
    ],
    leaves: [
      ["Men's grooming checklist", "7 min", "/en/men/finish/grooming-basics/grooming-checklist/"],
      ["How to trim men's nails", "5 min", "/en/men/finish/grooming-basics/trim-nails/"],
      ["How to clean shirt collars", "7 min", "/en/men/finish/grooming-basics/clean-shirt-collars/"],
      ["How to remove lint from clothes", "6 min", "/en/men/finish/grooming-basics/remove-lint/"],
      ["How to polish men's shoes", "8 min", "/en/men/finish/grooming-basics/polish-shoes/"],
      ["How to maintain suede shoes", "7 min", "/en/men/finish/grooming-basics/suede-care/"],
      ["Beard neckline guide", "7 min", "/en/men/finish/grooming-basics/beard-neckline/"],
      ["Laundry smell and clothing care", "7 min", "/en/men/finish/grooming-basics/laundry-smell/"],
    ],
    faq: [
      ["What grooming basics matter most?", "Clean nails, clean collars, fresh shoes, controlled beard edges, and clothes free of lint matter most."],
      ["How often should men trim nails?", "Weekly works for most men."],
      ["Should men polish shoes?", "Leather shoes should be brushed often and polished whenever they look dry or dull."],
      ["What is the fastest grooming check?", "Hands, collar, shoes, scent, and beard line before leaving the house."],
    ],
  },
  spring: {
    chapter: "seasonal",
    chapterTitle: "Seasonal",
    section: "Spring",
    number: "01",
    mode: "rain and light layers",
    hero: "spring",
    title: "Spring,",
    italic: "after the coat.",
    deck: "Rain layers, light knits, suede caution, soft color, loafers, field jackets, and the first week the winter coat finally comes off.",
    stats: [["45-65F", "range"], ["02", "layers"], ["01", "rain shell"], ["04", "closet swaps"]],
    intro: "Spring dressing is a weather negotiation: cold mornings, wet sidewalks, warmer afternoons, and clothes that suddenly look too heavy. The winning move is lighter texture, weather-aware shoes, and a middle layer that can disappear by lunch.",
    protocolName: "Spring Rotation",
    protocol: [
      ["Retire heavy wool slowly", "Keep one coat available until mornings are consistently mild."],
      ["Use a light layer", "Field jackets, overshirts, cardigans, and chore jackets handle the swing."],
      ["Respect rain", "Suede and pale trousers need forecast discipline."],
      ["Lift color carefully", "Stone, olive, blue, white, and soft grey beat loud spring color."],
      ["Change shoes", "Loafers, derbies, canvas sneakers, and weather-treated suede cover most days."],
    ],
    systemName: "Temperature Map",
    system: [
      ["45-50F", "Coat or lined jacket", "Keep a knit underneath and choose real socks."],
      ["50-58F", "Field jacket or cardigan", "Best range for overshirts and light wool trousers."],
      ["58-65F", "Shirt plus light layer", "Loafers and cotton trousers start making sense."],
      ["Rain day", "Mac or shell", "Keep trouser hems clean and avoid fragile suede."],
    ],
    diagnosis: [
      ["Looks too winter", "Swap heavy texture for cotton, linen blends, lighter denim, or suede only when dry."],
      ["Too cold by evening", "The missing piece is a packable middle layer."],
      ["Shoes look wrong", "Heavy boots often need to give way before the coat does."],
      ["Outfit feels pale", "Anchor soft spring colors with navy, olive, denim, or brown."],
    ],
    leaves: [
      ["Spring outfits for men", "9 min", "/en/men/seasonal/spring/spring-outfits-for-men/"],
      ["Men's spring capsule wardrobe", "9 min", "/en/men/seasonal/spring/capsule-wardrobe/"],
      ["Best spring jackets for men", "8 min", "/en/men/seasonal/spring/best-spring-jackets/"],
      ["What to wear in spring rain", "7 min", "/en/men/seasonal/spring/rain-outfits/"],
      ["Spring business casual for men", "8 min", "/en/men/seasonal/spring/business-casual/"],
      ["Spring shoes for men", "7 min", "/en/men/seasonal/spring/shoes/"],
      ["How to wear light colors in spring", "6 min", "/en/men/seasonal/spring/light-colors/"],
      ["Spring layering guide", "7 min", "/en/men/seasonal/spring/layering/"],
    ],
    faq: [
      ["What should men wear in spring?", "Light jackets, cotton trousers, oxford shirts, knit layers, loafers, and rain-ready outerwear."],
      ["Can men wear suede in spring?", "Yes, but not on wet days unless it is treated and you accept maintenance."],
      ["What colors work in spring?", "Navy, olive, stone, white, blue, grey, brown, and muted green work well."],
      ["What jacket is best for spring?", "A field jacket, chore jacket, mac, Harrington, or light bomber covers most spring weather."],
    ],
  },
  summer: {
    chapter: "seasonal",
    chapterTitle: "Seasonal",
    section: "Summer",
    number: "02",
    mode: "heat management",
    hero: "summer",
    title: "Summer,",
    italic: "without surrender.",
    deck: "Linen, cotton, open weave shirts, lighter trousers, sandals, heat-proof work clothes, and evening outfits that still breathe.",
    stats: [["75F+", "heat"], ["03", "cloths"], ["01", "collar"], ["0", "panic"]],
    intro: "Summer dressing is not solved by wearing less. It is solved by wearing smarter cloth: linen, cotton, open weaves, looser but controlled fits, and shoes that let heat escape without dragging the outfit down.",
    protocolName: "Heat Plan",
    protocol: [
      ["Choose cloth first", "Open weave linen, cotton, seersucker, and tropical wool matter more than color alone."],
      ["Relax the fit", "A little room creates airflow; oversized still looks sloppy."],
      ["Keep a collar option", "Knit polos, camp collars, and linen shirts solve most warm evenings."],
      ["Change the shoe", "Loafers, canvas, espadrilles, and clean sandals all need the right setting."],
      ["Manage sweat", "Undershirts, antiperspirant, and breathable layers are practical, not optional."],
    ],
    systemName: "Heat Index Map",
    system: [
      ["75-82F", "Linen shirt, cotton trouser", "Still enough room for a light jacket at night."],
      ["82-90F", "Knit polo, relaxed chino", "Open collar and lighter shoes do the work."],
      ["90F+", "Camp collar, linen trouser", "Reduce layers and keep fabric honest."],
      ["Humid night", "Dark linen or knit polo", "Use texture instead of heavy tailoring."],
    ],
    diagnosis: [
      ["Everything clings", "Fabric is too synthetic, too tight, or too heavy for humidity."],
      ["Looks too beach", "Add a better collar, cleaner trouser, or leather loafer."],
      ["Office feels impossible", "Try tropical wool, knit polos, and unlined jackets."],
      ["Shorts feel sloppy", "Choose a tailored cut, proper length, and a shirt with shape."],
    ],
    leaves: [
      ["Summer outfits for men", "9 min", "/en/men/seasonal/summer/summer-outfits-for-men/"],
      ["Men's summer capsule wardrobe", "9 min", "/en/men/seasonal/summer/capsule-wardrobe/"],
      ["Best linen shirts for men", "8 min", "/en/men/seasonal/summer/best-linen-shirts/"],
      ["Summer business casual for men", "8 min", "/en/men/seasonal/summer/business-casual/"],
      ["Best summer shoes for men", "7 min", "/en/men/seasonal/summer/shoes/"],
      ["How to dress in extreme heat", "7 min", "/en/men/seasonal/summer/extreme-heat/"],
      ["Summer wedding outfits for men", "8 min", "/en/men/seasonal/summer/wedding-outfits/"],
      ["What shorts should men wear", "7 min", "/en/men/seasonal/summer/shorts-guide/"],
    ],
    faq: [
      ["How can men dress well in summer?", "Use breathable fabrics, cleaner collars, relaxed fits, and lighter shoes while keeping proportions controlled."],
      ["Is linen good for summer?", "Yes. Linen breathes well and wrinkles naturally; that is part of the look."],
      ["Can men wear sandals stylishly?", "Yes in casual or resort settings, when the rest of the outfit is clean and intentional."],
      ["What should men wear to work in summer?", "Knit polos, oxford cloth, cotton or tropical wool trousers, loafers, and unlined jackets if needed."],
    ],
  },
  fall: {
    chapter: "seasonal",
    chapterTitle: "Seasonal",
    section: "Fall",
    number: "03",
    mode: "texture season",
    hero: "fall",
    title: "Fall,",
    italic: "in texture.",
    deck: "Texture, denim, boots, overshirts, flannel, suede, wool trousers, and the month when men dress best by accident.",
    stats: [["50-68F", "range"], ["04", "textures"], ["02", "boots"], ["01", "overshirt"]],
    intro: "Fall is forgiving because the clothes gain depth: suede, denim, wool, corduroy, flannel, knitwear, and leather all make simple outfits look richer. The key is weight control before true winter bulk arrives.",
    protocolName: "Fall Rotation",
    protocol: [
      ["Add texture", "Suede, flannel, brushed cotton, denim, wool, and corduroy carry the season."],
      ["Return to boots", "Chelsea, service, chukka, and derby shoes fit the weight better than summer footwear."],
      ["Layer visibly", "Overshirts, cardigans, chore jackets, and sport coats make the outfit readable."],
      ["Darken slowly", "Move from stone and white into olive, brown, navy, charcoal, and rust carefully."],
      ["Watch overheating", "Fall sun can still punish heavy wool and lined coats."],
    ],
    systemName: "Calendar Map",
    system: [
      ["Early fall", "Overshirt, cotton trouser", "Keep summer weight but add autumn color."],
      ["Mid fall", "Knit, denim, suede", "The best range for texture and layering."],
      ["Late fall", "Wool trouser, coat, boot", "Start winter logic without maximum bulk."],
      ["Rain week", "Waxed cotton or mac", "Protect suede and keep trouser hems controlled."],
    ],
    diagnosis: [
      ["Looks flat", "Add texture before adding more color."],
      ["Too rugged", "Balance boots and flannel with a cleaner trouser or coat."],
      ["Too warm indoors", "Use removable layers instead of one heavy piece."],
      ["Colors clash", "Keep one autumn accent and let navy, grey, denim, or brown anchor it."],
    ],
    leaves: [
      ["Fall outfits for men", "9 min", "/en/men/seasonal/fall/fall-outfits-for-men/"],
      ["Men's fall capsule wardrobe", "9 min", "/en/men/seasonal/fall/capsule-wardrobe/"],
      ["Best fall jackets for men", "8 min", "/en/men/seasonal/fall/best-jackets/"],
      ["How to wear flannel", "7 min", "/en/men/seasonal/fall/flannel/"],
      ["Best fall boots for men", "8 min", "/en/men/seasonal/fall/boots/"],
      ["Fall business casual for men", "8 min", "/en/men/seasonal/fall/business-casual/"],
      ["How to wear suede in fall", "7 min", "/en/men/seasonal/fall/suede/"],
      ["Fall layering guide", "7 min", "/en/men/seasonal/fall/layering/"],
    ],
    faq: [
      ["What should men wear in fall?", "Overshirts, knitwear, denim, wool trousers, boots, suede, flannel, and medium-weight jackets."],
      ["What colors work in fall?", "Navy, olive, brown, charcoal, cream, denim blue, burgundy, and muted rust."],
      ["What shoes are best in fall?", "Chelsea boots, service boots, chukkas, derbies, loafers early in the season, and weather-ready leather."],
      ["How do men layer in fall?", "Use a shirt or tee, a knit or overshirt, and a jacket that can be removed as temperatures shift."],
    ],
  },
  winter: {
    chapter: "seasonal",
    chapterTitle: "Seasonal",
    section: "Winter",
    number: "04",
    mode: "warmth with shape",
    hero: "winter",
    title: "Winter,",
    italic: "with structure.",
    deck: "Overcoats, scarves, gloves, base layers, heavy socks, knitwear, boots, and keeping shape under actual warmth.",
    stats: [["32F-", "cold"], ["03", "layers"], ["01", "coat"], ["02", "boots"]],
    intro: "Winter dressing is a structure problem under a warmth problem. Base layers keep the body warm, knitwear creates insulation, trousers need weight, boots need grip, and the coat has to organize the whole silhouette.",
    protocolName: "Winter Layer Order",
    protocol: [
      ["Base layer", "Thin merino or thermal layers beat bulky cotton when it is genuinely cold."],
      ["Middle warmth", "Crewnecks, cardigans, rollnecks, and flannel shirts create insulation."],
      ["Heavy trouser", "Flannel, corduroy, wool, and heavier denim balance coats and boots."],
      ["Outer layer", "Overcoat, parka, peacoat, or waxed coat should cover the outfit's needs."],
      ["Accessories", "Scarf, gloves, hat, and socks should be useful first and quiet second."],
    ],
    systemName: "Cold Map",
    system: [
      ["40-32F", "Coat, knit, boot", "Enough for city winter without technical gear."],
      ["32-20F", "Base layer, overcoat or parka", "Hands, neck, and socks become part of the system."],
      ["Below 20F", "Parka, thermal base, insulated boot", "Function leads; shape still matters."],
      ["Wet snow", "Weatherproof boot and coat", "Traction and hems matter as much as warmth."],
    ],
    diagnosis: [
      ["Looks bulky", "Use thinner warm layers and one strong coat instead of many thick layers."],
      ["Feet are cold", "Boot insulation, sock fiber, and sole thickness are likely weak."],
      ["Coat feels wrong", "Length, shoulder room, or layer clearance may not match the outfit."],
      ["All black goes flat", "Add texture: wool, leather, flannel, ribbed knit, or brushed cotton."],
    ],
    leaves: [
      ["Winter outfits for men", "10 min", "/en/men/seasonal/winter/winter-outfits-for-men/"],
      ["Men's winter capsule wardrobe", "9 min", "/en/men/seasonal/winter/capsule-wardrobe/"],
      ["Best winter coats for men", "9 min", "/en/men/seasonal/winter/best-winter-coats/"],
      ["Best winter boots for men", "8 min", "/en/men/seasonal/winter/best-winter-boots/"],
      ["Winter business casual for men", "8 min", "/en/men/seasonal/winter/business-casual/"],
      ["How to layer clothes in winter", "8 min", "/en/men/seasonal/winter/layering/"],
      ["How to wear scarves men", "6 min", "/en/men/seasonal/winter/scarves/"],
      ["Warm socks and base layers", "7 min", "/en/men/seasonal/winter/base-layers/"],
    ],
    faq: [
      ["How should men dress in winter?", "Use a warm base layer, knitwear, heavier trousers, weather-ready boots, and a coat that covers the outfit."],
      ["What winter coat should men buy first?", "Most men should start with either a wool overcoat for dressed settings or a parka for severe weather."],
      ["How do men layer without bulk?", "Use merino base layers, thinner knits, and one strong outer layer instead of stacking thick cotton."],
      ["Are boots necessary in winter?", "Yes in real cold, snow, or wet weather because traction and warmth change the entire outfit."],
    ],
  },
  "transitional-dressing": {
    chapter: "seasonal",
    chapterTitle: "Seasonal",
    section: "Transitional Dressing",
    number: "05",
    mode: "weather swing",
    hero: "transitional",
    title: "Transitional,",
    italic: "in motion.",
    deck: "Forty-degree mornings, seventy-degree afternoons, packable layers, rain, wind, and pieces that work both ways.",
    stats: [["40-70F", "swing"], ["01", "middle layer"], ["02", "shoes"], ["AM/PM", "plan"]],
    intro: "Transitional dressing is the awkward art of looking right at 8 a.m. and 3 p.m. The answer is not a new closet. It is removable layers, breathable base pieces, weather-aware footwear, and colors that can sit between seasons.",
    protocolName: "Swing-Weather Protocol",
    protocol: [
      ["Start with the afternoon", "Wear a base outfit that still works when the layer comes off."],
      ["Add a middle layer", "Cardigan, overshirt, knit polo, or light jacket should carry the morning."],
      ["Choose adaptable shoes", "Loafers, derbies, chukkas, and clean sneakers handle more range than sandals or heavy boots."],
      ["Carry weather quietly", "A compact umbrella, mac, or light shell beats pretending rain is a surprise."],
      ["Use bridge colors", "Navy, olive, stone, grey, brown, cream, and denim work across months."],
    ],
    systemName: "Day-Part Map",
    system: [
      ["Cold morning", "Knit or overshirt", "The layer must come off cleanly later."],
      ["Warm afternoon", "Oxford, tee, or knit polo", "The base outfit cannot look unfinished alone."],
      ["Wind", "Mac, chore jacket, or field jacket", "Block air without adding winter bulk."],
      ["Rain", "Weather layer and safer shoes", "Avoid suede unless treated and forecast-safe."],
    ],
    diagnosis: [
      ["Too hot by noon", "The base layer is too heavy or the top layer is not removable."],
      ["Too cold in morning", "Add a middle layer instead of jumping to a winter coat."],
      ["Shoes feel seasonal", "Choose footwear with medium weight and weather tolerance."],
      ["Outfit looks confused", "Keep the palette neutral and let fabric weight create the transition."],
    ],
    leaves: [
      ["Transitional outfits for men", "9 min", "/en/men/seasonal/transitional-dressing/transitional-outfits-for-men/"],
      ["How to dress between seasons", "8 min", "/en/men/seasonal/transitional-dressing/between-seasons/"],
      ["Best transitional jackets for men", "8 min", "/en/men/seasonal/transitional-dressing/best-jackets/"],
      ["What to wear in 50 degree weather men", "7 min", "/en/men/seasonal/transitional-dressing/50-degree-weather/"],
      ["What to wear in 60 degree weather men", "7 min", "/en/men/seasonal/transitional-dressing/60-degree-weather/"],
      ["Rainy day outfits for men", "7 min", "/en/men/seasonal/transitional-dressing/rainy-day-outfits/"],
      ["Spring to summer transition outfits", "7 min", "/en/men/seasonal/transitional-dressing/spring-to-summer/"],
      ["Fall to winter transition outfits", "7 min", "/en/men/seasonal/transitional-dressing/fall-to-winter/"],
    ],
    faq: [
      ["What is transitional dressing?", "Transitional dressing is clothing for weather swings between seasons, usually built around removable layers."],
      ["What should men wear in 50 degree weather?", "A shirt or knit, medium jacket, clean trouser or denim, and leather shoes or boots usually works."],
      ["What jacket is best between seasons?", "Field jackets, chore jackets, macs, Harringtons, and light bombers are the most useful."],
      ["How do I dress for cold mornings and warm afternoons?", "Start with a complete base outfit, then add a layer that can be removed without ruining the look."],
    ],
  },
};

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

function MFSL3Hero({ data }) {
  return (
    <section className={`mfsl3-hero mfsl3-${data.chapter}`} data-screen-label="01 Hero">
      <div className="mfsl3-hero-img" style={{ backgroundImage: `url(${MFSL3_IMG[data.hero]})` }} />
      <div className="mfsl3-steel-grid" />
      <div className="frame">
        <div className="mfsl3-crumb">
          <a href="/en/men/">Men</a><span>/</span>
          <a href={`/en/men/${data.chapter}/`}>{data.chapterTitle}</a><span>/</span>
          <span>{data.section}</span>
        </div>
        <div className="mfsl3-hero-copy">
          <span className="mfsl3-kicker">{data.chapterTitle} / {data.number} - {data.mode}</span>
          <h1>{data.title} <span>{data.italic}</span></h1>
          <p>{data.deck}</p>
        </div>
        <div className="mfsl3-stats">
          {data.stats.map(([value, label]) => <div key={label}><span>{value}</span><small>{label}</small></div>)}
        </div>
      </div>
    </section>
  );
}

function MFSL3Intro({ data }) {
  return (
    <section className="section mfsl3-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Men</b></div>
          <div><span>Chapter</span><b>{data.chapterTitle} / {data.number}</b></div>
          <div><span>Section</span><b>{data.section}</b></div>
          <div><span>Mode</span><b>{data.mode}</b></div>
          <div><span>Status</span><b>L3 batch</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">{data.intro}</p>
          <p>
            This hub is built as a practical operating page: concrete checks, article-ready internal links, and a page shape that fits the subject instead of forcing every men's section into the same grid.
          </p>
        </div>
      </div>
    </section>
  );
}

function MFSL3Protocol({ data, page }) {
  return (
    <section id="protocol" className="mfsl3-sec" data-screen-label="03 Protocol">
      <div className="frame">
        <div className="mfsl3-head">
          <div className="num">01</div>
          <div><span>{data.protocolName}</span><h2>The sequence that <em>makes it work.</em></h2></div>
          <p>Every step is usable now and can become a deeper article later.</p>
        </div>
        <div className="mfsl3-protocol">
          {data.protocol.map((item, i) => (
            <a href={`/en/men/${data.chapter}/${page}/${MFSL3Slug(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 MFSL3System({ data, page }) {
  return (
    <section id="system" className="mfsl3-sec mfsl3-system-sec" data-screen-label="04 System">
      <div className="frame">
        <div className="mfsl3-head">
          <div className="num">02</div>
          <div><span>{data.systemName}</span><h2>Choose by context, <em>not impulse.</em></h2></div>
          <p>Finish pages use routines and diagnostics; seasonal pages use weather, calendar, and layer maps.</p>
        </div>
        <div className="mfsl3-system">
          {data.system.map((row) => (
            <a href={`/en/men/${data.chapter}/${page}/${MFSL3Slug(row[0])}/`} key={row[0]}>
              <span>{row[0]}</span>
              <b>{row[1]}</b>
              <p>{row[2]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFSL3Diagnosis({ data }) {
  return (
    <section id="diagnosis" className="mfsl3-sec" data-screen-label="05 Diagnosis">
      <div className="frame">
        <div className="mfsl3-head">
          <div className="num">03</div>
          <div><span>Diagnosis</span><h2>When the result <em>feels off.</em></h2></div>
          <p>Search-useful symptoms make each hub answer the questions readers bring from the mirror, office, sidewalk, or forecast.</p>
        </div>
        <div className="mfsl3-diagnosis">
          {data.diagnosis.map((item, i) => (
            <article key={item[0]}>
              <span>Check {String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFSL3Guides({ data }) {
  return (
    <section id="guides" className="mfsl3-sec" data-screen-label="06 Guide index">
      <div className="frame">
        <div className="mfsl3-head">
          <div className="num">04</div>
          <div><span>Article Slots</span><h2>Visible routes for <em>the next layer.</em></h2></div>
          <p>Each href is visible in the markup and on the page so the next article layer is already mapped.</p>
        </div>
        <div className="mfsl3-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="path">{item[2]}</span>
              <span className="read">{item[1]}</span>
              <span className="arr">-&gt;</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFSL3FAQ({ data }) {
  return (
    <section id="questions" className="mfsl3-sec" data-screen-label="07 Questions">
      <div className="frame">
        <div className="mfsl3-head">
          <div className="num">05</div>
          <div><span>SEO Questions</span><h2>{data.section} questions <em>worth answering.</em></h2></div>
          <p>Short answers give the page immediate utility and future FAQ structure.</p>
        </div>
        <div className="mfsl3-faq">
          {data.faq.map((item, i) => (
            <details key={item[0]}>
              <summary><span>Q.{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><i>+</i></summary>
              <p>{item[1]}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function MFSL3Cross({ data }) {
  const siblingHref = data.chapter === "finish" ? "/en/men/seasonal/transitional-dressing/" : "/en/men/finish/grooming-basics/";
  const siblingTitle = data.chapter === "finish" ? "Transitional Dressing" : "Grooming Basics";
  const siblingCopy = data.chapter === "finish" ? "Weather-proof the finish with layers, shoes, and daily carry." : "The maintenance layer that keeps seasonal clothes looking intentional.";
  return (
    <section className="section section-rule" data-screen-label="08 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 06</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>refining.</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 men<br />sections</div>
        </div>
        <div className="cross-lanes">
          <a href={`/en/men/${data.chapter}/`} className="bridge-card"><span className="n">Up a level</span><h6>{data.chapterTitle}</h6><p>All men's {data.chapterTitle.toLowerCase()} chapters.</p><span className="arr">Open</span></a>
          <a href={siblingHref}><span className="n">Related</span><h6>{siblingTitle}</h6><p>{siblingCopy}</p><span className="arr">Open</span></a>
          <a href="/en/men/fit/outerwear/"><span className="n">Fit</span><h6>Outerwear</h6><p>Layer clearance, coat length, and top-layer proportion.</p><span className="arr">Open</span></a>
          <a href="/en/men/wear/business-casual/"><span className="n">Wear</span><h6>Business Casual</h6><p>Where finish and weather decisions show up every weekday.</p><span className="arr">Open</span></a>
        </div>
      </div>
    </section>
  );
}

function MenFinishSeasonalL3Page({ page }) {
  const data = MFSL3_DATA[page];
  return (
    <React.Fragment>
      <MFSL3Hero data={data} />
      <nav className="mfsl3-nav">
        <div className="frame">
          <span className="label">{data.section} Index</span>
          <div className="links">
            {MFSL3_NAV.map(([n, id, label]) => <a key={id} href={`#${id}`}><span>{n}</span>{label}</a>)}
          </div>
        </div>
      </nav>
      <MFSL3Intro data={data} />
      <MFSL3Protocol data={data} page={page} />
      <MFSL3System data={data} page={page} />
      <MFSL3Diagnosis data={data} />
      <MFSL3Guides data={data} />
      <MFSL3FAQ data={data} />
      <MFSL3Cross data={data} />
    </React.Fragment>
  );
}

window.MenFinishSeasonalL3Page = MenFinishSeasonalL3Page;