/* global React */

const WFSL3_IMG = {
  skin: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=2400&q=80",
  lip: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?w=2400&q=80",
  nails: "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=2400&q=80",
  fragrance: "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=2400&q=80",
  hair: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=2400&q=80",
  jewelry: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=2400&q=80",
  bags: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=2400&q=80",
  bridges: "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=2400&q=80",
  spring: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=2400&q=80",
  summer: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=2400&q=80",
  fall: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=2400&q=80",
  winter: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=2400&q=80",
  transitional: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=2400&q=80",
};

const WFSL3_DATA = {
  "finish-skin-outfit-pairings": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/skin-outfit-pairings/",
    section: "Skin Outfit Pairings",
    number: "01",
    type: "pairing matrix",
    image: "skin",
    title: "Skin finish,",
    italic: "by fabric.",
    deck: "Dew, satin, soft matte, powder, bronze, and bare skin decisions matched to wool, silk, linen, denim, leather, and evening black.",
    intro: "The right skin finish makes clothes look more expensive because it repeats the same visual language. Wool likes softness, satin can hold shine, denim wants skin that looks alive, and linen looks wrong when the face is too worked.",
    diagnosticsTitle: "Fabric to skin map",
    diagnostics: [
      ["Wool tailoring", "Soft matte skin, controlled glow on cheekbone, no heavy shimmer.", "/en/women/finish/skin-outfit-pairings/wool-tailoring-skin-finish/"],
      ["Silk or satin", "Satin skin or one glossy point so the face answers the fabric.", "/en/women/finish/skin-outfit-pairings/silk-satin-skin-finish/"],
      ["Linen separates", "Sheer base, visible skin, cream blush, and nothing too lacquered.", "/en/women/finish/skin-outfit-pairings/linen-outfit-finish/"],
      ["Blue denim", "Fresh skin, balm texture, lifted brow, little to no powder.", "/en/women/finish/skin-outfit-pairings/denim-beauty-finish/"],
      ["Leather jacket", "Clean skin, blurred shine, neutral lip so the leather stays sharp.", "/en/women/finish/skin-outfit-pairings/leather-jacket-makeup/"],
      ["Black evening", "Polished base, deliberate highlight, one strong feature only.", "/en/women/finish/skin-outfit-pairings/black-evening-skin/"],
    ],
    systemTitle: "Finish controls",
    system: [
      ["Coverage", "Sheer coverage reads relaxed; medium coverage reads polished; full coverage needs a stronger outfit to avoid feeling separate."],
      ["Shine", "Place glow where fabric already reflects light. Avoid shine across the center when the outfit is structured."],
      ["Color", "Warm blush works with camel, cream, brown, olive, and gold. Cooler rose sits better with black, grey, navy, white, and silver."],
      ["Edges", "The more tailored the outfit, the cleaner the brow, hairline, and lip edge should be."],
    ],
    leaves: [
      ["Dewy skin with wool trousers", "/en/women/finish/skin-outfit-pairings/dewy-skin-wool-trousers/"],
      ["Soft matte makeup with a blazer", "/en/women/finish/skin-outfit-pairings/soft-matte-makeup-blazer/"],
      ["Makeup for a silk slip dress", "/en/women/finish/skin-outfit-pairings/silk-slip-dress-makeup/"],
      ["Fresh skin with jeans and a white shirt", "/en/women/finish/skin-outfit-pairings/fresh-skin-jeans-white-shirt/"],
      ["Bronzer with cream and camel outfits", "/en/women/finish/skin-outfit-pairings/bronzer-cream-camel-outfits/"],
      ["No makeup makeup for linen", "/en/women/finish/skin-outfit-pairings/no-makeup-linen-outfits/"],
      ["Evening skin without looking heavy", "/en/women/finish/skin-outfit-pairings/evening-skin-without-heavy-makeup/"],
      ["How to match blush to outfit color", "/en/women/finish/skin-outfit-pairings/match-blush-to-outfit-color/"],
    ],
    faq: [
      ["Should makeup match clothes?", "It should relate, not match. Repeat temperature, shine, or softness rather than copying the exact clothing color."],
      ["What skin finish works with tailoring?", "Soft matte skin with one controlled highlight keeps tailoring crisp and avoids competing shine."],
    ],
  },
  "finish-lip-and-look": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/lip-and-look/",
    section: "Lip and Look",
    number: "02",
    type: "color signal",
    image: "lip",
    title: "Lip color,",
    italic: "as styling.",
    deck: "Red, berry, brown, nude, balm, stain, gloss, and matte lip choices that change the meaning of tailoring, denim, knitwear, dresses, and evening clothes.",
    intro: "A lip is the fastest way to move an outfit from casual to intentional. The mistake is choosing the lipstick in isolation. The useful question is what the outfit already says, then whether the mouth should sharpen it, warm it, soften it, or disappear.",
    diagnosticsTitle: "Lip to outfit map",
    diagnostics: [
      ["Red lip + black", "Classic only works when the rest is spare: clean skin, simple hair, minimal jewelry.", "/en/women/finish/lip-and-look/red-lip-black-dress/"],
      ["Brown lip + cream", "Rose-brown or cocoa warms ivory knitwear without turning sweet.", "/en/women/finish/lip-and-look/brown-lip-cream-knitwear/"],
      ["Berry + grey", "Berry brings blood back to grey tailoring and charcoal knits.", "/en/women/finish/lip-and-look/berry-lip-grey-outfit/"],
      ["Balm + denim", "Clear balm keeps denim, tee, trench, and sneakers looking easy.", "/en/women/finish/lip-and-look/balm-lip-denim-outfit/"],
      ["Nude + shine", "A satin skirt or metallic shoe often needs a quieter mouth.", "/en/women/finish/lip-and-look/nude-lip-shiny-outfit/"],
      ["Gloss + white", "Gloss gives a white shirt or tank a clean, modern finish.", "/en/women/finish/lip-and-look/gloss-white-shirt/"],
    ],
    systemTitle: "Lip controls",
    system: [
      ["Undertone", "Blue-red cools black and white; brick-red warms camel, olive, and brown."],
      ["Texture", "Matte reads graphic, satin reads dressed, gloss reads fresh, stain reads undone."],
      ["Balance", "A strong lip can replace a necklace, earring, or heavy eye."],
      ["Occasion", "Work lips should survive coffee; evening lips should survive low light."],
    ],
    leaves: [
      ["Red lip with a black dress", "/en/women/finish/lip-and-look/red-lip-black-dress/"],
      ["Brown lip with cream knitwear", "/en/women/finish/lip-and-look/brown-lip-cream-knitwear/"],
      ["Best lip color for navy outfits", "/en/women/finish/lip-and-look/best-lip-color-navy-outfits/"],
      ["Lipstick with a white shirt", "/en/women/finish/lip-and-look/lipstick-with-white-shirt/"],
      ["Balm lip outfits that still look polished", "/en/women/finish/lip-and-look/balm-lip-polished-outfits/"],
      ["Berry lipstick with grey tailoring", "/en/women/finish/lip-and-look/berry-lip-grey-tailoring/"],
      ["Nude lipstick without washing out outfit", "/en/women/finish/lip-and-look/nude-lip-without-washing-out/"],
      ["Lip gloss with minimalist outfits", "/en/women/finish/lip-and-look/lip-gloss-minimalist-outfits/"],
    ],
    faq: [
      ["What lip color goes with a black outfit?", "Red, berry, nude, or clear gloss can all work. Choose red for graphic polish, berry for depth, nude for restraint, and gloss for freshness."],
      ["Can lipstick be the only accessory?", "Yes. A deliberate lip can replace jewelry when the outfit already has a clean line."],
    ],
  },
  "finish-nails-and-palette": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/nails-and-palette/",
    section: "Nails and Palette",
    number: "03",
    type: "mini swatch",
    image: "nails",
    title: "Nails,",
    italic: "the smallest color.",
    deck: "Sheer, milk, oxblood, black, red, chrome, navy, brown, and bare manicures mapped against outfit palettes and jewelry metal.",
    intro: "Nails sit next to bags, coats, phones, cups, rings, and steering wheels. They are not background. The best manicure either disappears beautifully or acts like a small, controlled swatch in the outfit palette.",
    diagnosticsTitle: "Manicure palette map",
    diagnostics: [
      ["Sheer pink", "Best for office outfits, busy prints, delicate jewelry, and soft tailoring.", "/en/women/finish/nails-and-palette/sheer-manicure-office-outfits/"],
      ["Milk white", "Softens black, denim, tan, and summer whites without adding color.", "/en/women/finish/nails-and-palette/milk-white-nails-outfits/"],
      ["Oxblood", "Works with navy, camel, grey, cream, leopard, and gold.", "/en/women/finish/nails-and-palette/oxblood-nails-navy-camel/"],
      ["Black", "Best with short nails, silver jewelry, black shoes, and clean clothes.", "/en/women/finish/nails-and-palette/black-nails-minimal-outfits/"],
      ["Chrome", "Needs restraint: plain knit, column dress, white shirt, or tonal outfit.", "/en/women/finish/nails-and-palette/chrome-nails-outfit-ideas/"],
      ["Bare buff", "The quiet luxury option when texture is already doing the talking.", "/en/women/finish/nails-and-palette/bare-buffed-nails-outfits/"],
    ],
    systemTitle: "Nail controls",
    system: [
      ["Length", "Short reads modern and practical; long reads styled and needs cleaner clothes."],
      ["Contrast", "High contrast nails should repeat one other dark or bright point."],
      ["Metal", "Chrome and jewelry should agree unless the outfit already mixes metals."],
      ["Maintenance", "A perfect sheer nail beats a chipped statement color every time."],
    ],
    leaves: [
      ["Oxblood nails with navy and camel", "/en/women/finish/nails-and-palette/oxblood-nails-navy-camel/"],
      ["Sheer manicure for office outfits", "/en/women/finish/nails-and-palette/sheer-manicure-office-outfits/"],
      ["Black nails with minimalist outfits", "/en/women/finish/nails-and-palette/black-nails-minimalist-outfits/"],
      ["Milk white nails outfit ideas", "/en/women/finish/nails-and-palette/milk-white-nails-outfit-ideas/"],
      ["Nail colors that go with gold jewelry", "/en/women/finish/nails-and-palette/nail-colors-gold-jewelry/"],
      ["Nail colors that go with silver jewelry", "/en/women/finish/nails-and-palette/nail-colors-silver-jewelry/"],
      ["Chrome nails without looking costume", "/en/women/finish/nails-and-palette/chrome-nails-without-costume/"],
      ["Best nail color for a capsule wardrobe", "/en/women/finish/nails-and-palette/best-nail-color-capsule-wardrobe/"],
    ],
    faq: [
      ["Do nails need to match outfits?", "No. They should either repeat a temperature, echo a color family, or stay sheer enough to disappear."],
      ["What nail color is most versatile?", "Sheer pink, milky nude, and buffed bare nails work across the widest range of clothes."],
    ],
  },
  "finish-fragrance-by-mood": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/fragrance-by-mood/",
    section: "Fragrance by Mood",
    number: "04",
    type: "scent wardrobe",
    image: "fragrance",
    title: "Fragrance,",
    italic: "by room.",
    deck: "Clean musks, green citrus, warm woods, soft florals, smoky resins, and skin scents matched to outfit mood and occasion.",
    intro: "Fragrance is invisible styling. A clean musk changes a white shirt. Fig leaf changes linen. Incense changes black satin. The scent should agree with the room, the fabric, and how close people will stand.",
    diagnosticsTitle: "Mood to scent map",
    diagnostics: [
      ["Clean", "Musk, iris, tea, cotton, and soap notes for shirts, trench coats, denim, and work mornings.", "/en/women/finish/fragrance-by-mood/clean-white-shirt-scents/"],
      ["Green", "Fig leaf, basil, vetiver, citrus rind, and tomato leaf for linen and warm daylight.", "/en/women/finish/fragrance-by-mood/green-linen-scents/"],
      ["Warm", "Sandalwood, amber, soft vanilla, tonka, and suede for knitwear and close rooms.", "/en/women/finish/fragrance-by-mood/warm-knitwear-scents/"],
      ["Floral", "Rose, orange blossom, violet, and iris when the outfit is structured enough to hold romance.", "/en/women/finish/fragrance-by-mood/floral-scents-with-tailoring/"],
      ["Smoky", "Incense, pepper, leather, tobacco leaf, and rosewood for black, satin, and metal.", "/en/women/finish/fragrance-by-mood/smoky-evening-scents/"],
      ["Skin", "Low projection scents for office, travel, minimal outfits, and shared spaces.", "/en/women/finish/fragrance-by-mood/skin-scents-for-work/"],
    ],
    systemTitle: "Scent controls",
    system: [
      ["Projection", "Quiet for work and travel; moderate for dinner; strong only when the room can handle it."],
      ["Texture", "Powdery scents soften tailoring; dry woods sharpen knits; citrus cuts through heat."],
      ["Weather", "Humidity amplifies sweetness. Cold air mutes citrus and makes woods useful."],
      ["Fabric", "Spray fabric only when safe; delicate silk and pale clothes can mark."],
    ],
    leaves: [
      ["Clean fragrance for business casual", "/en/women/finish/fragrance-by-mood/business-casual-clean-scents/"],
      ["Warm scents with cashmere sweaters", "/en/women/finish/fragrance-by-mood/warm-knitwear-scents/"],
      ["Green fragrances for summer linen", "/en/women/finish/fragrance-by-mood/green-linen-scents/"],
      ["Smoky evening scents for black outfits", "/en/women/finish/fragrance-by-mood/smoky-evening-scents/"],
      ["Skin scents for office outfits", "/en/women/finish/fragrance-by-mood/skin-scents-office-outfits/"],
      ["Floral perfume with tailoring", "/en/women/finish/fragrance-by-mood/floral-perfume-tailoring/"],
      ["Best fragrance for a white shirt", "/en/women/finish/fragrance-by-mood/best-fragrance-white-shirt/"],
      ["How to choose perfume by outfit", "/en/women/finish/fragrance-by-mood/choose-perfume-by-outfit/"],
    ],
    faq: [
      ["How do you match perfume to an outfit?", "Match mood and texture first. Clean clothes like clean musks, linen likes green or citrus, knitwear likes warm woods, and evening black can hold smoke or amber."],
      ["What fragrance is best for work?", "A quiet musk, tea, iris, or skin scent is safest because it stays close and does not dominate shared rooms."],
    ],
  },
  "finish-hair-and-texture": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/hair-and-texture/",
    section: "Hair and Texture",
    number: "05",
    type: "texture bridge",
    image: "hair",
    title: "Hair shape,",
    italic: "fabric answer.",
    deck: "Slick buns, air-dried waves, blowouts, natural texture, ponytails, clips, and part lines matched to neckline, fabric, and outfit sharpness.",
    intro: "Hair changes the line of the outfit before makeup or jewelry can. A slick bun makes a blazer stricter. Air-dried waves soften a trench. Natural texture can make eveningwear modern when the neckline gives it space.",
    diagnosticsTitle: "Hair to outfit map",
    diagnostics: [
      ["Slick bun + blazer", "Sharpens shoulders, exposes earrings, and works best with clean necklines.", "/en/women/finish/hair-and-texture/slick-bun-blazer/"],
      ["Loose waves + tailoring", "Softens a suit or trouser outfit without making it casual.", "/en/women/finish/hair-and-texture/waves-with-tailoring/"],
      ["Natural texture + evening", "Needs neckline clearance and one strong earring or bare collarbone.", "/en/women/finish/hair-and-texture/natural-texture-eveningwear/"],
      ["Low ponytail + column", "Keeps a long dress, coat, or tonal outfit vertical.", "/en/women/finish/hair-and-texture/low-ponytail-column-outfit/"],
      ["Clip or barrette + knit", "Adds control to soft clothes without over-styling.", "/en/women/finish/hair-and-texture/hair-clips-knitwear/"],
      ["Blowout + denim", "Makes casual pieces feel intentional when shoes and bag are simple.", "/en/women/finish/hair-and-texture/blowout-denim-outfit/"],
    ],
    systemTitle: "Texture controls",
    system: [
      ["Neckline", "High necklines often need hair up or back. Open necklines can hold more volume."],
      ["Fabric", "Shiny fabric can take softer hair; brushed wool often needs a cleaner edge."],
      ["Scale", "Big hair needs simpler jewelry. Tiny hair needs a stronger earring or lip."],
      ["Weather", "Humidity plans should be honest: texture, pin, braid, or glossed control."],
    ],
    leaves: [
      ["Slick hair with a column outfit", "/en/women/finish/hair-and-texture/slick-hair-column-outfit/"],
      ["Ponytail height by neckline", "/en/women/finish/hair-and-texture/ponytail-height-neckline/"],
      ["Weekend hair that still looks done", "/en/women/finish/hair-and-texture/weekend-hair-looks-done/"],
      ["Natural texture with eveningwear", "/en/women/finish/hair-and-texture/natural-texture-eveningwear/"],
      ["Hair clips with minimalist outfits", "/en/women/finish/hair-and-texture/hair-clips-minimalist-outfits/"],
      ["How to wear hair with a blazer", "/en/women/finish/hair-and-texture/how-to-wear-hair-with-blazer/"],
      ["Rainy day hair and outfit ideas", "/en/women/finish/hair-and-texture/rainy-day-hair-outfit-ideas/"],
      ["Best hairstyles for high neck tops", "/en/women/finish/hair-and-texture/hairstyles-high-neck-tops/"],
    ],
    faq: [
      ["How should hair relate to an outfit?", "Use hair to control softness, sharpness, and neckline space. The cleaner the outfit, the more deliberate the hair shape should be."],
      ["What hair works with a blazer?", "A slick bun, low ponytail, tucked bob, or controlled wave works because the shoulder line stays visible."],
    ],
  },
  "finish-jewelry-and-metal": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/jewelry-and-metal/",
    section: "Jewelry and Metal",
    number: "06",
    type: "metal diagnostic",
    image: "jewelry",
    title: "Metal,",
    italic: "as color.",
    deck: "Gold, silver, mixed metal, pearls, watches, hoops, rings, chains, and hardware decisions matched to outfit color and neckline.",
    intro: "Jewelry is not decoration after the outfit. It is a color temperature decision. Gold warms cream and brown. Silver cools black and denim. Pearls add light. Mixed metal works when the outfit already has contrast.",
    diagnosticsTitle: "Metal to palette map",
    diagnostics: [
      ["Gold + cream", "Warm, expensive, soft. Best with camel, chocolate, olive, ivory, and oxblood.", "/en/women/finish/jewelry-and-metal/gold-jewelry-cream-outfits/"],
      ["Silver + black", "Sharper and cleaner than gold when the outfit is graphic.", "/en/women/finish/jewelry-and-metal/silver-jewelry-black-outfits/"],
      ["Pearls + denim", "Modern when paired with simple denim, white shirts, and flat shoes.", "/en/women/finish/jewelry-and-metal/pearls-with-modern-outfits/"],
      ["Mixed metal", "Works when hardware, watch, or shoe detail already mixes tones.", "/en/women/finish/jewelry-and-metal/how-to-mix-metals/"],
      ["Hoops + neckline", "Small hoops for high necks, larger hoops for open collars and bare shoulders.", "/en/women/finish/jewelry-and-metal/earrings-by-neckline/"],
      ["Watch + bag hardware", "The most visible metal relationship is often wrist to bag clasp.", "/en/women/finish/jewelry-and-metal/watch-bag-hardware-match/"],
    ],
    systemTitle: "Metal controls",
    system: [
      ["Temperature", "Gold warms; silver cools; rose gold softens but can look dated if everything else is sharp."],
      ["Scale", "Big earrings need less necklace. Stacked rings need simpler nails."],
      ["Hardware", "Bag, belt, shoe buckle, watch, and jewelry should feel considered."],
      ["Neckline", "Crew necks like earrings. Open necklines can carry chain, pendant, or bare skin."],
    ],
    leaves: [
      ["Gold vs silver with outfit colors", "/en/women/finish/jewelry-and-metal/gold-vs-silver-outfit-colors/"],
      ["Silver jewelry with black denim", "/en/women/finish/jewelry-and-metal/silver-jewelry-black-denim/"],
      ["Everyday earrings by neckline", "/en/women/finish/jewelry-and-metal/earrings-by-neckline/"],
      ["How to mix metals cleanly", "/en/women/finish/jewelry-and-metal/how-to-mix-metals/"],
      ["Pearls without looking formal", "/en/women/finish/jewelry-and-metal/pearls-with-modern-outfits/"],
      ["Jewelry for a white shirt", "/en/women/finish/jewelry-and-metal/jewelry-for-white-shirt/"],
      ["What jewelry to wear with a turtleneck", "/en/women/finish/jewelry-and-metal/jewelry-with-turtleneck/"],
      ["Matching jewelry to bag hardware", "/en/women/finish/jewelry-and-metal/matching-jewelry-to-bag-hardware/"],
    ],
    faq: [
      ["Should jewelry match bag hardware?", "It does not have to match exactly, but the mix should look intentional. Repeating one metal twice usually makes the decision feel clean."],
      ["Is gold or silver more versatile?", "Silver is cleaner with black, grey, denim, and white. Gold is warmer with cream, camel, olive, brown, and oxblood."],
    ],
  },
  "finish-bags-and-shoes": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/bags-and-shoes/",
    section: "Bags and Shoes",
    number: "07",
    type: "edge styling",
    image: "bags",
    title: "Bag and shoe,",
    italic: "the frame.",
    deck: "Ballet flats, loafers, boots, sandals, slingbacks, sneakers, totes, clutches, shoulder bags, and crossbodies as the final outfit edit.",
    intro: "The outfit ends at the hand and foot. A structured bag can make denim look deliberate. A soft tote can relax tailoring. Shoes decide whether the same dress reads office, dinner, errand, or weekend.",
    diagnosticsTitle: "Bag and shoe map",
    diagnostics: [
      ["Loafer + shoulder bag", "The easiest polish formula for trousers, denim, skirts, and trench coats.", "/en/women/finish/bags-and-shoes/loafer-shoulder-bag-outfits/"],
      ["Ballet flat + tote", "Softens straight denim, cropped trousers, and easy dresses.", "/en/women/finish/bags-and-shoes/ballet-flat-tote-outfits/"],
      ["Boot + structured bag", "Keeps fall and winter outfits from collapsing into bulk.", "/en/women/finish/bags-and-shoes/boot-structured-bag-outfits/"],
      ["Sandal + clutch", "Useful for summer evening when jewelry stays minimal.", "/en/women/finish/bags-and-shoes/sandal-clutch-summer-evening/"],
      ["Sneaker + top handle", "High-low only works when both pieces are clean.", "/en/women/finish/bags-and-shoes/sneaker-top-handle-bag/"],
      ["Black shoe + brown bag", "Works when one piece repeats another warm or dark tone.", "/en/women/finish/bags-and-shoes/black-shoes-brown-bag/"],
    ],
    systemTitle: "Edge controls",
    system: [
      ["Structure", "Structured bag raises polish; soft bag lowers formality."],
      ["Weight", "Heavy boots need heavier fabric or a visible vertical line."],
      ["Color", "Shoes can disappear into the trouser, contrast the hem, or repeat the bag."],
      ["Occasion", "The shoe should solve the room before it solves the photograph."],
    ],
    leaves: [
      ["Shoe choice changes outfit", "/en/women/finish/bags-and-shoes/shoe-choice-changes-outfit/"],
      ["Black shoes with a brown bag", "/en/women/finish/bags-and-shoes/black-shoes-brown-bag/"],
      ["Best bag shape for work outfits", "/en/women/finish/bags-and-shoes/best-bag-shape-work-outfits/"],
      ["Loafers with dresses and skirts", "/en/women/finish/bags-and-shoes/loafers-dresses-skirts/"],
      ["Ballet flat outfit formulas", "/en/women/finish/bags-and-shoes/ballet-flat-outfit-formulas/"],
      ["Boots that work with wide-leg trousers", "/en/women/finish/bags-and-shoes/boots-wide-leg-trousers/"],
      ["Sneakers with tailored outfits", "/en/women/finish/bags-and-shoes/sneakers-tailored-outfits/"],
      ["How to match bag and shoe color", "/en/women/finish/bags-and-shoes/match-bag-shoe-color/"],
    ],
    faq: [
      ["Do bags and shoes have to match?", "No. They need a relationship: shared temperature, repeated color depth, similar polish, or one intentional contrast."],
      ["What shoes make outfits look polished?", "Loafers, slingbacks, clean boots, and simple flats usually add polish because their shape is defined."],
    ],
  },
  "finish-beauty-bridges": {
    lane: "Finish",
    parentHref: "/en/women/finish/",
    pageHref: "/en/women/finish/beauty-bridges/",
    section: "Beauty Bridges",
    number: "08",
    type: "outfit bridge",
    image: "bridges",
    title: "Beauty bridges,",
    italic: "outfit first.",
    deck: "Makeup, hair, nail, scent, jewelry, bag, and shoe choices joined into complete finish systems for work, weekend, date night, travel, and evening.",
    intro: "Beauty bridges are for the moment when single choices start fighting each other. The lip, nail, scent, hair, metal, bag, and shoe should not all speak at once. One leads, two support, the rest stay quiet.",
    diagnosticsTitle: "Occasion bridge map",
    diagnostics: [
      ["Office polish", "Soft matte skin, sheer nail, skin scent, small metal, structured bag.", "/en/women/finish/beauty-bridges/office-polish-finish-system/"],
      ["Weekend done", "Fresh skin, balm lip, easy hair, clean sneaker or flat, relaxed bag.", "/en/women/finish/beauty-bridges/weekend-hair-looks-done/"],
      ["Date night", "One of lip, eye, scent, or earring gets the main role.", "/en/women/finish/beauty-bridges/date-night-beauty-outfit-finish/"],
      ["Evening minimal", "Gloss or red lip, clean hair, one metal, small bag, quiet nail.", "/en/women/finish/beauty-bridges/evening-makeup-without-heavy-eye/"],
      ["Travel", "Skin scent, slick hair option, balm, flat shoe, soft bag.", "/en/women/finish/beauty-bridges/travel-beauty-outfit-system/"],
      ["Color map", "Lip, nail, bag, shoe, and metal plotted so one accent carries.", "/en/women/finish/beauty-bridges/lip-nail-bag-color-map/"],
    ],
    systemTitle: "Bridge controls",
    system: [
      ["Lead", "Choose the feature with the most visual force: lip, hair, earring, shoe, or bag."],
      ["Support", "Two smaller choices should repeat the lead through color, shine, or texture."],
      ["Silence", "Everything else should be quieter so the outfit looks styled, not crowded."],
      ["Context", "Work, travel, heat, rain, and evening light all change how much finish is enough."],
    ],
    leaves: [
      ["Evening makeup without heavy eye", "/en/women/finish/beauty-bridges/evening-makeup-without-heavy-eye/"],
      ["Weekend hair that still looks done", "/en/women/finish/beauty-bridges/weekend-hair-looks-done/"],
      ["Lip, nail, and bag color map", "/en/women/finish/beauty-bridges/lip-nail-bag-color-map/"],
      ["Date night outfit finish guide", "/en/women/finish/beauty-bridges/date-night-outfit-finish-guide/"],
      ["Office beauty and outfit bridge", "/en/women/finish/beauty-bridges/office-beauty-outfit-bridge/"],
      ["Travel makeup hair and outfit system", "/en/women/finish/beauty-bridges/travel-makeup-hair-outfit-system/"],
      ["Minimalist outfit beauty finish", "/en/women/finish/beauty-bridges/minimalist-outfit-beauty-finish/"],
      ["How to look finished without more accessories", "/en/women/finish/beauty-bridges/look-finished-without-more-accessories/"],
    ],
    faq: [
      ["How do you make an outfit look finished?", "Pick one clear finish signal, support it with two smaller choices, and remove anything that competes."],
      ["Can beauty choices replace accessories?", "Yes. A lip, hair shape, nail color, or scent mood can do the work of jewelry when the outfit is already strong."],
    ],
  },
  "seasonal-spring": {
    lane: "Seasonal",
    parentHref: "/en/women/seasonal/",
    pageHref: "/en/women/seasonal/spring/",
    section: "Spring",
    number: "01",
    type: "weather reset",
    image: "spring",
    title: "Spring,",
    italic: "the reset.",
    deck: "Trench coats, poplin shirts, light knits, wet pavement shoes, color lifts, and 45 F to 68 F outfit systems.",
    intro: "Spring dressing is the art of looking lighter before the weather is fully warm. The strongest outfits use a real outer layer, one breathable base, shoes that can handle damp streets, and a color lift that does not pretend it is July.",
    diagnosticsTitle: "Spring condition map",
    diagnostics: [
      ["45 F morning", "Trench, fine knit, straight denim or trouser, sock, loafer or ankle boot.", "/en/women/seasonal/spring/45-degree-morning-outfits/"],
      ["Rain possible", "Water-ready trench, compact umbrella, leather loafer, darker hem.", "/en/women/seasonal/spring/rainy-spring-outfits/"],
      ["Warm afternoon", "Poplin shirt, cardigan carried or tied, breathable trouser, flat.", "/en/women/seasonal/spring/warm-afternoon-layering/"],
      ["Spring office", "Light blazer, shell or shirt, trouser, closed shoe, quiet color.", "/en/women/seasonal/spring/work-outfits/"],
      ["Weekend market", "Denim, tee, trench, basket or tote, sneaker that stays clean.", "/en/women/seasonal/spring/weekend-market-outfits/"],
      ["Dinner after work", "Slip skirt, knit, trench, slingback or boot, small jewelry.", "/en/women/seasonal/spring/spring-dinner-outfits/"],
    ],
    systemTitle: "Spring controls",
    system: [
      ["Layer", "Outerwear still matters. Remove weight through fabric, not by skipping the top layer."],
      ["Fabric", "Cotton poplin, fine merino, denim, gabardine, and light leather bridge the season."],
      ["Color", "Butter, sky, tomato, ivory, and soft green work best against trench, denim, navy, and cream."],
      ["Shoe", "Spring shoes need pavement logic: damp, cold, and walkable before delicate."],
    ],
    leaves: [
      ["Spring outfits for unpredictable weather", "/en/women/seasonal/spring/unpredictable-weather-outfits/"],
      ["How to wear a trench coat in spring", "/en/women/seasonal/spring/trench-coat-outfits/"],
      ["Spring work outfits for women", "/en/women/seasonal/spring/work-outfits/"],
      ["Spring capsule wardrobe for women", "/en/women/seasonal/spring/capsule-wardrobe/"],
      ["Rainy spring outfit ideas", "/en/women/seasonal/spring/rainy-spring-outfits/"],
      ["Spring dresses with jackets", "/en/women/seasonal/spring/dresses-with-jackets/"],
      ["What shoes to wear in spring", "/en/women/seasonal/spring/what-shoes-to-wear/"],
      ["Spring color outfits that are not pastel", "/en/women/seasonal/spring/color-outfits-not-pastel/"],
    ],
    faq: [
      ["What should women wear in spring?", "Start with a light outer layer, breathable base, practical shoe, and one fresh color or texture."],
      ["How do you dress for unpredictable spring weather?", "Use removable layers and weather-ready shoes. A trench, fine knit, shirt, and straight denim solve most spring days."],
    ],
  },
  "seasonal-summer": {
    lane: "Seasonal",
    parentHref: "/en/women/seasonal/",
    pageHref: "/en/women/seasonal/summer/",
    section: "Summer",
    number: "02",
    type: "heat system",
    image: "summer",
    title: "Summer,",
    italic: "with structure.",
    deck: "Linen, cotton voile, silk, open weave, sandals, dresses, humid weather, and polished outfits for 75 F and up.",
    intro: "Summer dressing fails when loose becomes shapeless. The goal is air with a line: collar, strap, waist, hem, shoe, or bag structure keeping the outfit intentional while the fabric does the cooling.",
    diagnosticsTitle: "Heat condition map",
    diagnostics: [
      ["Dry heat", "Linen shirt, wide trouser, leather sandal, straw or structured tote.", "/en/women/seasonal/summer/dry-heat-outfits/"],
      ["Humidity", "Cotton poplin, open neckline, skirt or dress, hair off neck, minimal metal.", "/en/women/seasonal/summer/humid-weather-outfits/"],
      ["Summer office", "Sleeveless shell, light trouser, blazer carried, closed flat or slingback.", "/en/women/seasonal/summer/work-outfits/"],
      ["City weekend", "Tank, crisp skirt or shorts, flat sandal, sunglasses, clean bag.", "/en/women/seasonal/summer/city-weekend-outfits/"],
      ["Vacation dinner", "Slip dress or linen set, low sandal, one earring, skin scent.", "/en/women/seasonal/summer/vacation-dinner-outfits/"],
      ["Cold interiors", "Light cardigan, scarf, or shirt layer over a breathable base.", "/en/women/seasonal/summer/office-air-conditioning-outfits/"],
    ],
    systemTitle: "Summer controls",
    system: [
      ["Fabric", "Linen, cotton, silk, ramie, and open weave matter more than color."],
      ["Shape", "Keep one defined edge: collar, waist, hem, shoe, or bag."],
      ["Skin", "Show skin where it cools, not randomly. Neck, wrist, ankle, and back change temperature."],
      ["Color", "White, black, tobacco, citrus, navy, and metal are stronger than a full pastel wash."],
    ],
    leaves: [
      ["Summer outfits that still look polished", "/en/women/seasonal/summer/polished-outfits/"],
      ["What to wear in humid weather", "/en/women/seasonal/summer/humid-weather-outfits/"],
      ["Summer dresses for work and weekends", "/en/women/seasonal/summer/dresses-for-work-weekend/"],
      ["Linen outfits for women", "/en/women/seasonal/summer/linen-outfits/"],
      ["Summer work outfits for hot weather", "/en/women/seasonal/summer/hot-weather-work-outfits/"],
      ["Minimal summer capsule wardrobe", "/en/women/seasonal/summer/minimal-capsule-wardrobe/"],
      ["What to wear with flat sandals", "/en/women/seasonal/summer/flat-sandal-outfits/"],
      ["How to layer for air conditioning", "/en/women/seasonal/summer/layering-for-air-conditioning/"],
    ],
    faq: [
      ["How do you look polished in summer?", "Use breathable fabric and keep one structured point: a collar, tailored short, clean sandal, defined bag, or simple jewelry."],
      ["What fabrics are best for summer outfits?", "Linen, cotton poplin, cotton voile, silk, ramie, and open weaves are the most useful."],
    ],
  },
  "seasonal-fall": {
    lane: "Seasonal",
    parentHref: "/en/women/seasonal/",
    pageHref: "/en/women/seasonal/fall/",
    section: "Fall",
    number: "03",
    type: "layer math",
    image: "fall",
    title: "Fall,",
    italic: "the richest layer.",
    deck: "Wool, suede, denim, leather, boots, jackets, warm color, and 50 F to 65 F layering systems.",
    intro: "Fall is the best season for outfit math because the layers can still be visible. A jacket, knit, trouser, boot, and one warm texture can make a simple outfit feel complete without piling on accessories.",
    diagnosticsTitle: "Fall condition map",
    diagnostics: [
      ["First cool day", "Crewneck knit, straight denim, loafer, light jacket over arm.", "/en/women/seasonal/fall/first-cool-day-outfits/"],
      ["Office fall", "Blazer, fine knit, wool trouser, loafer or ankle boot.", "/en/women/seasonal/fall/work-outfits/"],
      ["Rainy fall", "Waxed jacket or trench, dark denim, boot, compact bag.", "/en/women/seasonal/fall/rainy-fall-outfits/"],
      ["Weekend layers", "Suede or leather jacket, tee, jeans, boot, warm scarf.", "/en/women/seasonal/fall/weekend-layering-outfits/"],
      ["Dinner", "Knit dress, tall boot, coat, gold or silver decision.", "/en/women/seasonal/fall/fall-dinner-outfits/"],
      ["Cold snap", "Coat over knit and shirt, sock, boot, heavier bag.", "/en/women/seasonal/fall/cold-snap-outfits/"],
    ],
    systemTitle: "Fall controls",
    system: [
      ["Texture", "Suede, wool, leather, denim, brushed cotton, and cashmere make neutral outfits feel seasonal."],
      ["Layer", "Each visible layer should have a job: warmth, line, color, or texture."],
      ["Boot", "Shaft height matters more than trend. It must meet the hem cleanly."],
      ["Color", "Camel, chocolate, oxblood, olive, navy, grey, and cream do most of the work."],
    ],
    leaves: [
      ["Fall capsule wardrobe for women", "/en/women/seasonal/fall/capsule-wardrobe/"],
      ["Fall layering without bulk", "/en/women/seasonal/fall/layering-without-bulk/"],
      ["Ankle boot outfits for fall", "/en/women/seasonal/fall/ankle-boot-outfits/"],
      ["Fall work outfits for women", "/en/women/seasonal/fall/work-outfits/"],
      ["How to wear suede in fall", "/en/women/seasonal/fall/how-to-wear-suede/"],
      ["Fall outfits with wide-leg trousers", "/en/women/seasonal/fall/wide-leg-trouser-outfits/"],
      ["What jacket to wear in fall", "/en/women/seasonal/fall/what-jacket-to-wear/"],
      ["Fall color palette outfit ideas", "/en/women/seasonal/fall/color-palette-outfit-ideas/"],
    ],
    faq: [
      ["How do you layer in fall without bulk?", "Use thin warm layers close to the body, then add structure through jacket, coat, trouser crease, or boot."],
      ["What colors work best for fall outfits?", "Camel, chocolate, oxblood, olive, navy, grey, cream, and black are the most useful fall base colors."],
    ],
  },
  "seasonal-winter": {
    lane: "Seasonal",
    parentHref: "/en/women/seasonal/",
    pageHref: "/en/women/seasonal/winter/",
    section: "Winter",
    number: "04",
    type: "cold armor",
    image: "winter",
    title: "Winter,",
    italic: "with a line.",
    deck: "Base layers, coats, wool, cashmere, scarves, boots, black texture, and cold-weather outfit systems for 45 F and down.",
    intro: "Winter outfits need warmth, but they also need a line. The coat edge, scarf drop, trouser crease, tonal column, or boot shaft has to tell the eye where to go when every layer wants to add volume.",
    diagnosticsTitle: "Cold condition map",
    diagnostics: [
      ["Mild winter", "Long wool coat, knit, trouser, loafer or ankle boot, scarf carried.", "/en/women/seasonal/winter/mild-winter-outfits/"],
      ["Freezing commute", "Base layer, knit, long coat, wool sock, weather boot, hat.", "/en/women/seasonal/winter/freezing-commute-outfits/"],
      ["Winter office", "Thermal base hidden under shirt or knit, trouser, long coat, clean boot.", "/en/women/seasonal/winter/cold-weather-work-outfits/"],
      ["Snow day", "Puffer or insulated coat, lug boot, water-ready hem, warm accessories.", "/en/women/seasonal/winter/snow-day-outfits/"],
      ["Evening cold", "Column base, long coat, heeled boot, one visible metal or lip.", "/en/women/seasonal/winter/winter-evening-outfits/"],
      ["All black", "Mix wool, leather, rib knit, denim, and shine so black has depth.", "/en/women/seasonal/winter/all-black-winter-outfits/"],
    ],
    systemTitle: "Winter controls",
    system: [
      ["Base", "A thin thermal layer can save the outfit because it adds warmth without visual bulk."],
      ["Coat", "Long coats keep polish. Puffers need clean pants, boots, and a strong vertical line."],
      ["Boot", "The boot must solve weather first, then silhouette. Slush ruins delicate styling."],
      ["Texture", "Black needs texture: wool, rib, leather, suede, satin, or metal."],
    ],
    leaves: [
      ["Winter outfits that keep their shape", "/en/women/seasonal/winter/outfits-that-keep-shape/"],
      ["How to style a wool coat for women", "/en/women/seasonal/winter/wool-coat-outfits/"],
      ["Cold weather work outfits", "/en/women/seasonal/winter/cold-weather-work-outfits/"],
      ["Winter capsule wardrobe for women", "/en/women/seasonal/winter/capsule-wardrobe/"],
      ["Best boots for winter outfits", "/en/women/seasonal/winter/best-boots-for-outfits/"],
      ["All black winter outfit ideas", "/en/women/seasonal/winter/all-black-outfit-ideas/"],
      ["How to layer under a coat", "/en/women/seasonal/winter/layer-under-coat/"],
      ["Winter outfits for dinner", "/en/women/seasonal/winter/dinner-outfits/"],
    ],
    faq: [
      ["How do winter outfits keep shape?", "Build one visible vertical line with a long coat edge, scarf, trouser crease, tonal base, or boot shaft."],
      ["What coat is most useful for winter style?", "A long wool coat is the most polished; an insulated coat is best for real cold. Many wardrobes need both."],
    ],
  },
  "seasonal-transitional": {
    lane: "Seasonal",
    parentHref: "/en/women/seasonal/",
    pageHref: "/en/women/seasonal/transitional/",
    section: "Transitional",
    number: "05",
    type: "in-between system",
    image: "transitional",
    title: "Transitional,",
    italic: "weather proof.",
    deck: "Cold mornings, warm afternoons, office air conditioning, shoulder-season rain, travel layers, and outfits between seasons.",
    intro: "Transitional dressing is not a season. It is a set of problems: cold morning, warm afternoon, rain at six, office air conditioning, and the bag that has to carry the layer you remove.",
    diagnosticsTitle: "In-between condition map",
    diagnostics: [
      ["Cold morning, warm afternoon", "Fine knit over tee, light jacket, straight trouser, shoe with coverage.", "/en/women/seasonal/transitional/cold-morning-warm-afternoon/"],
      ["Rain by evening", "Trench or shell, darker hem, leather shoe, compact bag.", "/en/women/seasonal/transitional/rain-by-evening-outfits/"],
      ["Office air conditioning", "Sleeveless base, cardigan or blazer, closed shoe, scarf if needed.", "/en/women/seasonal/transitional/office-air-conditioning-outfits/"],
      ["Travel climates", "Soft trouser, tee, overshirt, scarf, packable jacket.", "/en/women/seasonal/transitional/travel-between-climates/"],
      ["Spring to summer", "Poplin, light denim, flat sandal with jacket, fresh color.", "/en/women/seasonal/transitional/spring-to-summer-outfits/"],
      ["Fall to winter", "Base layer, knit, coat, sock, boot, deeper texture.", "/en/women/seasonal/transitional/fall-to-winter-outfits/"],
    ],
    systemTitle: "Transitional controls",
    system: [
      ["Removable", "The best layer is easy to remove and still looks intentional when carried."],
      ["Breathable", "The base should survive the warmest part of the day."],
      ["Weather", "Shoes and hems should answer the wettest forecast, not the prettiest hour."],
      ["Bag", "A transitional outfit often needs a bag that can hold a scarf, knit, or umbrella."],
    ],
    leaves: [
      ["Transitional outfits for women", "/en/women/seasonal/transitional/outfits-for-women/"],
      ["What to wear between seasons", "/en/women/seasonal/transitional/between-seasons/"],
      ["Light jackets for transitional weather", "/en/women/seasonal/transitional/light-jackets/"],
      ["How to layer for cold mornings and warm afternoons", "/en/women/seasonal/transitional/cold-morning-warm-afternoon/"],
      ["What to wear when it rains later", "/en/women/seasonal/transitional/rain-later-outfits/"],
      ["Office air conditioning outfit ideas", "/en/women/seasonal/transitional/office-air-conditioning-outfits/"],
      ["Travel outfits between climates", "/en/women/seasonal/transitional/travel-between-climates/"],
      ["Shoulder season capsule wardrobe", "/en/women/seasonal/transitional/shoulder-season-capsule-wardrobe/"],
    ],
    faq: [
      ["What is transitional dressing?", "It is dressing for in-between conditions: temperature swings, rain, travel, and indoor climate changes."],
      ["What is the best transitional layer?", "A trench, light jacket, overshirt, cardigan, or fine knit works best because it can be removed cleanly."],
    ],
  },
};

const WFSL3_ALIASES = {
  skin: "finish-skin-outfit-pairings",
  lip: "finish-lip-and-look",
  nails: "finish-nails-and-palette",
  fragrance: "finish-fragrance-by-mood",
  hair: "finish-hair-and-texture",
  jewelry: "finish-jewelry-and-metal",
  bags: "finish-bags-and-shoes",
  bridges: "finish-beauty-bridges",
  spring: "seasonal-spring",
  summer: "seasonal-summer",
  fall: "seasonal-fall",
  winter: "seasonal-winter",
  transitional: "seasonal-transitional",
};

function WFSL3Hero({ data }) {
  return (
    <section className={`wfsl3-hero wfsl3-${data.lane.toLowerCase()}`} data-screen-label="01 Hero">
      <div className="wfsl3-hero-img" style={{ backgroundImage: `url(${WFSL3_IMG[data.image]})` }} />
      <div className="frame">
        <div className="wfsl3-crumb">
          <a href="/en/women/">Women</a><span>/</span><a href={data.parentHref}>{data.lane}</a><span>/</span><span>{data.section}</span>
        </div>
        <div className="wfsl3-hero-copy">
          <span className="wfsl3-kicker">{data.lane} / {data.number} - {data.type}</span>
          <h1>{data.title} <span>{data.italic}</span></h1>
          <p>{data.deck}</p>
        </div>
        <div className="wfsl3-signal-strip">
          {data.diagnostics.slice(0, 6).map((item, i) => (
            <a href={item[2]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b></a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFSL3Nav({ data }) {
  return (
    <nav className="wfsl3-nav">
      <div className="frame">
        <span className="label">{data.section} Index</span>
        <div className="links">
          <a href="#diagnostics"><span>01</span>Diagnostics</a>
          <a href="#system"><span>02</span>System</a>
          <a href="#guides"><span>03</span>Guides</a>
          <a href="#faq"><span>04</span>FAQ</a>
        </div>
      </div>
    </nav>
  );
}

function WFSL3Intro({ data }) {
  return (
    <section className="section wfsl3-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>{data.lane} / {data.number}</b></div>
          <div><span>Page</span><b>{data.section}</b></div>
          <div><span>System</span><b>{data.type}</b></div>
          <div><span>Status</span><b>L3 route</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">{data.intro}</p>
          <p>Use this page as a practical diagnostic before the article layer arrives. The links below are visible, crawlable route hints for the deeper guides under this section.</p>
        </div>
      </div>
    </section>
  );
}

function WFSL3Diagnostics({ data }) {
  return (
    <section id="diagnostics" className="wfsl3-sec" data-screen-label="03 Diagnostics">
      <div className="frame">
        <div className="wfsl3-head">
          <div className="num">01</div>
          <div><span>{data.diagnosticsTitle}</span><h2>Start with <em>the condition.</em></h2></div>
          <p>Concrete pairing logic for the moments where a finished outfit depends on one small decision.</p>
        </div>
        <div className={`wfsl3-diagnostics ${data.lane.toLowerCase()}`}>
          {data.diagnostics.map((item, i) => (
            <a href={item[2]} key={item[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFSL3System({ data }) {
  return (
    <section id="system" className="wfsl3-sec wfsl3-system-sec" data-screen-label="04 System">
      <div className="frame">
        <div className="wfsl3-system">
          <div className="wfsl3-system-title">
            <span>Operating System</span>
            <h2>{data.systemTitle}</h2>
            <p>Four controls to check before the final mirror pass.</p>
          </div>
          <div className="wfsl3-system-grid">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WFSL3Guides({ data }) {
  return (
    <section id="guides" className="wfsl3-sec" data-screen-label="05 Guides">
      <div className="frame">
        <div className="wfsl3-head">
          <div className="num">03</div>
          <div><span>Article Slots</span><h2>Leaf pages, <em>already linked.</em></h2></div>
          <p>Search-ready article paths for the static exporter and the next editorial pass.</p>
        </div>
        <div className="wfsl3-leaf-list">
          {data.leaves.map((leaf, i) => (
            <a className="leaf-row" href={leaf[1]} key={leaf[0]}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <span className="t">{leaf[0]}</span>
              <span className="read">{5 + (i % 4)} min</span>
              <span className="arr">-&gt;</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFSL3FAQ({ data }) {
  return (
    <section id="faq" className="wfsl3-sec wfsl3-faq-sec" data-screen-label="06 FAQ">
      <div className="frame">
        <div className="wfsl3-head">
          <div className="num">04</div>
          <div><span>SEO Questions</span><h2>Useful answers, <em>not filler.</em></h2></div>
          <p>Short answers for the questions this L3 page is designed to catch.</p>
        </div>
        <div className="wfsl3-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 WFSL3Cross({ data }) {
  const siblingHref = data.lane === "Finish" ? "/en/women/seasonal/" : "/en/women/finish/";
  const siblingName = data.lane === "Finish" ? "Seasonal" : "Finish";
  return (
    <section className="section section-rule" data-screen-label="07 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>reading.</span></h2>
          <div className="meta" style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7 }}>Women<br />related lanes</div>
        </div>
        <div className="cross-lanes wfsl3-cross">
          <a href={data.parentHref}><span className="n">Up one level</span><h6>{data.lane}</h6><p>Return to the full {data.lane.toLowerCase()} index.</p><span className="arr">Open</span></a>
          <a href={siblingHref}><span className="n">Sister lane</span><h6>{siblingName}</h6><p>{siblingName === "Seasonal" ? "Weather, calendar, and material systems." : "Beauty, metal, scent, bag, and shoe systems."}</p><span className="arr">Open</span></a>
          <a href="/en/women/wear/"><span className="n">Lane 02</span><h6>Wear</h6><p>Occasion and outfit formula logic.</p><span className="arr">Open</span></a>
          <a href="/en/women/style/"><span className="n">Lane 03</span><h6>Style</h6><p>Color, trend, pattern, and taste decisions.</p><span className="arr">Open</span></a>
        </div>
      </div>
    </section>
  );
}

function WomenFinishSeasonalL3Page({ page }) {
  const key = WFSL3_ALIASES[page] || page;
  const data = WFSL3_DATA[key] || WFSL3_DATA["finish-skin-outfit-pairings"];
  return (
    <React.Fragment>
      <WFSL3Hero data={data} />
      <WFSL3Nav data={data} />
      <WFSL3Intro data={data} />
      <WFSL3Diagnostics data={data} />
      <WFSL3System data={data} />
      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

window.WomenFinishSeasonalL3Page = WomenFinishSeasonalL3Page;
window.WFSL3_DATA = WFSL3_DATA;