/* 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>Read</span><b>Field guide</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">{data.intro}</p>
          <p>Use this page as a practical diagnostic before the final mirror pass. The links below keep the next decisions close, specific, and easy to follow.</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>Reading Path</span><h2>Detailed guides, <em>already connected.</em></h2></div>
          <p>Specific guide paths for the choices that deserve a closer look.</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>Common 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 WFSL3SkinPage({ data }) {
  const featured = data.diagnostics.slice(0, 3);
  const lower = data.diagnostics.slice(3);
  const controlImages = [WFSL3_IMG.skin, WFSL3_IMG.fragrance, WFSL3_IMG.lip, WFSL3_IMG.hair];
  return (
    <React.Fragment>
      <section className="wfskin-hero" data-screen-label="01 Skin Outfit Pairings">
        <div className="wfskin-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.skin})` }} />
        <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="wfskin-hero-grid">
            <div className="wfskin-title">
              <span className="wfsl3-kicker">Finish / 01 - fabric light test</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
              <p>{data.deck}</p>
            </div>
            <aside className="wfskin-test-card">
              <span>Remember</span>
              <p>Skin finish should answer the fabric surface before it answers the makeup trend.</p>
            </aside>
          </div>
          <div className="wfskin-hero-strip">
            {featured.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </a>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfskin-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#surface"><span>01</span>Surface</a>
            <a href="#fabric"><span>02</span>Fabric Map</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#guides"><span>04</span>Guides</a>
            <a href="#faq"><span>05</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="surface" className="section wfskin-surface" data-screen-label="02 Surface Rule">
        <div className="frame">
          <aside className="wfskin-sidebar">
            <div><span>Page</span><b>{data.section}</b></div>
            <div><span>Source</span><b>fabric first</b></div>
            <div><span>Outcome</span><b>skin finish</b></div>
          </aside>
          <div className="wfskin-surface-copy">
            <p className="standfirst">{data.intro}</p>
            <div className="wfskin-ruleline">
              <span>Mirror rule</span>
              <p>Do not choose "glow" or "matte" in isolation. Look at the fabric: does it absorb light, throw light, soften the face, or need the face to stay quiet?</p>
            </div>
          </div>
          <figure className="wfskin-surface-photo" style={{ backgroundImage: `url(${WFSL3_IMG.lip})` }}>
            <span>cheek / lip / cloth</span>
          </figure>
        </div>
      </section>

      <section id="fabric" className="wfskin-fabric" data-screen-label="03 Fabric Map">
        <div className="frame">
          <div className="wfskin-fabric-head">
            <span>Fabric to Skin Map</span>
            <h2>Let the surface choose <em>the face.</em></h2>
          </div>
          <div className="wfskin-fabric-board">
            <figure className="wfskin-board-photo" style={{ backgroundImage: `url(${WFSL3_IMG.skin})` }}>
              <span>surface study</span>
            </figure>
            <div className="wfskin-fabric-rows">
              {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>
        </div>
      </section>

      <section id="controls" className="wfskin-controls" data-screen-label="04 Finish Controls">
        <div className="frame">
          <div className="wfskin-controls-title">
            <span>{data.systemTitle}</span>
            <h2>Four levers, one finished read.</h2>
          </div>
          <div className="wfskin-control-grid">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
          <div className="wfskin-lower-notes">
            {lower.map((item) => (
              <a href={item[2]} key={item[0]}><span>{item[0]}</span><p>{item[1]}</p></a>
            ))}
          </div>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3LipPage({ data }) {
  const lipSwatches = [
    ["red", "#9d1118"],
    ["brown", "#7b3b2f"],
    ["berry", "#7b1f49"],
    ["balm", "#d8a58f"],
    ["nude", "#b98268"],
    ["gloss", "#f2d6c8"],
  ];
  const controlImages = [WFSL3_IMG.lip, WFSL3_IMG.skin, WFSL3_IMG.jewelry, WFSL3_IMG.fragrance];
  return (
    <React.Fragment>
      <section className="wflip-hero" data-screen-label="01 Lip and Look">
        <div className="wflip-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.lip})` }} />
        <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="wflip-hero-grid">
            <div className="wflip-title">
              <span className="wfsl3-kicker">Finish / 02 - color signal</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
              <p>{data.deck}</p>
            </div>
            <aside className="wflip-accessory-note">
              <span>Styling rule</span>
              <p>A deliberate lip can replace the accessory stack when the outfit already has a clean line.</p>
            </aside>
          </div>
          <div className="wflip-swatch-rail" aria-label="Lip color swatches">
            {lipSwatches.map(([name, color]) => (
              <span key={name} style={{ background: color }}><b>{name}</b></span>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wflip-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#signal"><span>01</span>Signal</a>
            <a href="#map"><span>02</span>Color Map</a>
            <a href="#texture"><span>03</span>Texture</a>
            <a href="#guides"><span>04</span>Guides</a>
            <a href="#faq"><span>05</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="signal" className="section wflip-signal" data-screen-label="02 Lip Signal">
        <div className="frame">
          <figure className="wflip-signal-photo" style={{ backgroundImage: `url(${WFSL3_IMG.lip})` }}>
            <span>mouth / color / outfit</span>
          </figure>
          <div className="wflip-signal-copy">
            <span>Signal before shade</span>
            <p className="standfirst">{data.intro}</p>
            <p>The job is not to match the outfit. The job is to decide whether the mouth sharpens it, warms it, softens it, or steps back.</p>
          </div>
          <aside className="wflip-signal-jobs">
            {["sharpen", "warm", "soften", "disappear"].map((job, i) => (
              <div key={job}><span>{String(i + 1).padStart(2, "0")}</span><b>{job}</b></div>
            ))}
          </aside>
        </div>
      </section>

      <section id="map" className="wflip-map" data-screen-label="03 Lip to Outfit Map">
        <div className="frame">
          <div className="wflip-map-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Choose the mouth by <em>the outfit's temperature.</em></h2>
          </div>
          <div className="wflip-map-grid">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]} style={{ "--lip-color": lipSwatches[i][1] }}>
                <span className="swatch" />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="texture" className="wflip-texture" data-screen-label="04 Lip Controls">
        <div className="frame">
          <div className="wflip-texture-title">
            <span>{data.systemTitle}</span>
            <h2>Texture decides whether color feels graphic, fresh, dressed, or undone.</h2>
          </div>
          <div className="wflip-texture-board">
            <figure className="wflip-texture-photo" style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}>
              <span>lip as accessory</span>
            </figure>
            <div className="wflip-texture-controls">
              {data.system.map((item, i) => (
                <article key={item[0]}>
                  <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <h3>{item[0]}</h3>
                  <p>{item[1]}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3NailsPage({ data }) {
  const nailSwatches = [
    ["sheer", "#e7b7ad"],
    ["milk", "#f4eadf"],
    ["oxblood", "#531018"],
    ["black", "#141010"],
    ["chrome", "#b6b3aa"],
    ["buff", "#c99a7e"],
  ];
  const proximity = data.diagnostics.slice(0, 3);
  const controlImages = [WFSL3_IMG.nails, WFSL3_IMG.jewelry, WFSL3_IMG.bags, WFSL3_IMG.skin];
  return (
    <React.Fragment>
      <section className="wfnail-hero" data-screen-label="01 Nails and Palette">
        <div className="wfnail-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.nails})` }} />
        <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="wfnail-hero-copy">
            <span className="wfsl3-kicker">Finish / 03 - smallest color</span>
            <h1>{data.title} <span>{data.italic}</span></h1>
            <p>{data.deck}</p>
          </div>
          <div className="wfnail-swatch-stack" aria-label="Manicure color swatches">
            {nailSwatches.map(([name, color]) => (
              <span key={name} style={{ background: color }}><b>{name}</b></span>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfnail-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#proximity"><span>01</span>Proximity</a>
            <a href="#palette"><span>02</span>Palette Map</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#guides"><span>04</span>Guides</a>
            <a href="#faq"><span>05</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="proximity" className="section wfnail-proximity" data-screen-label="02 Proximity">
        <div className="frame">
          <div className="wfnail-proximity-copy">
            <span>Hand distance</span>
            <p className="standfirst">{data.intro}</p>
            <p>Nails are read at the edge of the outfit: beside a ring, around a bag handle, against a sleeve, and next to the metal on a phone, watch, or zipper.</p>
          </div>
          <div className="wfnail-proximity-board">
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.nails})` }}><span>hand</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>metal</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>bag</span></figure>
          </div>
          <aside className="wfnail-proximity-notes">
            {proximity.map((item, i) => (
              <a href={item[2]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><p>{item[1]}</p></a>
            ))}
          </aside>
        </div>
      </section>

      <section id="palette" className="wfnail-palette" data-screen-label="03 Manicure Palette Map">
        <div className="frame">
          <div className="wfnail-palette-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>The smallest color still has to answer <em>the whole outfit.</em></h2>
          </div>
          <div className="wfnail-palette-table">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]} style={{ "--nail-color": nailSwatches[i][1] }}>
                <span className="chip" />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfnail-controls" data-screen-label="04 Nail Controls">
        <div className="frame">
          <figure className="wfnail-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.nails})` }}>
            <span>polish / hand / hardware</span>
          </figure>
          <div className="wfnail-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Scale, contrast, metal, and maintenance decide whether polish reads expensive or distracting.</h2>
          </div>
          <div className="wfnail-control-list">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3FragrancePage({ data }) {
  const scentTones = [
    ["clean", "#d8d4c8"],
    ["green", "#6f7c50"],
    ["warm", "#a2633d"],
    ["floral", "#b46c7e"],
    ["smoky", "#332522"],
    ["skin", "#c9a387"],
  ];
  const controlImages = [WFSL3_IMG.fragrance, WFSL3_IMG.hair, WFSL3_IMG.summer, WFSL3_IMG.skin];
  return (
    <React.Fragment>
      <section className="wfscent-hero" data-screen-label="01 Fragrance by Mood">
        <div className="wfscent-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fragrance})` }} />
        <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="wfscent-hero-copy">
            <span className="wfsl3-kicker">Finish / 04 - atmosphere</span>
            <h1>{data.title} <span>{data.italic}</span></h1>
            <p>{data.deck}</p>
          </div>
          <div className="wfscent-distance">
            <span>skin</span>
            <span>conversation</span>
            <span>room</span>
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfscent-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#atmosphere"><span>01</span>Atmosphere</a>
            <a href="#mood"><span>02</span>Mood Map</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#guides"><span>04</span>Guides</a>
            <a href="#faq"><span>05</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="atmosphere" className="section wfscent-atmosphere" data-screen-label="02 Atmosphere">
        <div className="frame">
          <div className="wfscent-atmosphere-copy">
            <span>Invisible styling</span>
            <p className="standfirst">{data.intro}</p>
            <p>Start with how close people will stand, then choose whether the scent should feel clean, green, warm, floral, smoky, or barely there.</p>
          </div>
          <figure className="wfscent-bottle" style={{ backgroundImage: `url(${WFSL3_IMG.fragrance})` }}>
            <span>spray / air / fabric</span>
          </figure>
          <aside className="wfscent-projection">
            <div><span>01</span><b>Skin</b><p>For office, travel, shared rooms, and clothes that are already visually loud.</p></div>
            <div><span>02</span><b>Conversation</b><p>For dinner, close events, knits, shirts, and scent that appears only nearby.</p></div>
            <div><span>03</span><b>Room</b><p>For evening spaces that can handle smoke, amber, woods, or heavy floral notes.</p></div>
          </aside>
        </div>
      </section>

      <section id="mood" className="wfscent-mood" data-screen-label="03 Mood to Scent Map">
        <div className="frame">
          <div className="wfscent-mood-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Match the scent to <em>the room and the fabric.</em></h2>
          </div>
          <div className="wfscent-mood-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]} style={{ "--scent-tone": scentTones[i][1] }}>
                <span className="tone" />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfscent-controls" data-screen-label="04 Scent Controls">
        <div className="frame">
          <figure className="wfscent-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fragrance})` }}>
            <span>scent wardrobe</span>
          </figure>
          <div className="wfscent-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>The scent has to respect distance, weather, fabric, and texture.</h2>
          </div>
          <div className="wfscent-control-list">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3HairPage({ data }) {
  const shapeImages = [WFSL3_IMG.hair, WFSL3_IMG.jewelry, WFSL3_IMG.skin, WFSL3_IMG.fall, WFSL3_IMG.nails, WFSL3_IMG.bags];
  const controlImages = [WFSL3_IMG.hair, WFSL3_IMG.spring, WFSL3_IMG.jewelry, WFSL3_IMG.summer];
  const weatherRows = [
    ["Humidity", "Let texture, pinning, braid, glossed control, or a shorter silhouette do the work."],
    ["Rain", "Choose a style that can collapse gracefully instead of fighting water all day."],
    ["Heat", "Expose neck and shoulder line before adding more product."],
    ["Cold", "Account for collars, scarves, coat friction, and static before leaving."],
  ];
  return (
    <React.Fragment>
      <section className="wfhair-hero" data-screen-label="01 Hair and Texture">
        <div className="wfhair-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.hair})` }} />
        <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="wfhair-hero-grid">
            <div className="wfhair-hero-copy">
              <span className="wfsl3-kicker">Finish / 05 - silhouette and texture</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
              <p>{data.deck}</p>
            </div>
            <aside className="wfhair-hero-note">
              <span>Styling rule</span>
              <p>Hair decides neckline space before jewelry, makeup, or bag can finish the outfit.</p>
            </aside>
          </div>
          <div className="wfhair-line-rail">
            <span>neckline</span>
            <span>volume</span>
            <span>edge</span>
            <span>weather</span>
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfhair-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#neckline"><span>01</span>Neckline</a>
            <a href="#shape"><span>02</span>Shape Map</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#weather"><span>04</span>Weather</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="neckline" className="section wfhair-neckline" data-screen-label="02 Neckline Studio">
        <div className="frame">
          <div className="wfhair-neckline-copy">
            <span>Neckline first</span>
            <p className="standfirst">{data.intro}</p>
            <p>Before choosing product, decide what the outfit needs to reveal: shoulder line, earrings, collarbone, coat collar, or the vertical line of a column.</p>
          </div>
          <div className="wfhair-neckline-gallery">
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.hair})` }}><span>texture</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>earring</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.skin})` }}><span>skin line</span></figure>
          </div>
          <aside className="wfhair-neckline-checks">
            <div><span>01</span><b>High neck</b><p>Pull hair up, back, or contained so fabric and jawline do not compete.</p></div>
            <div><span>02</span><b>Open collar</b><p>Let more volume live around the face if the neckline gives it air.</p></div>
            <div><span>03</span><b>Strong shoulder</b><p>Keep hair deliberate enough that the shoulder line still reads.</p></div>
          </aside>
        </div>
      </section>

      <section id="shape" className="wfhair-shape" data-screen-label="03 Hair to Outfit Map">
        <div className="frame">
          <div className="wfhair-shape-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Choose the hair by <em>the line it creates.</em></h2>
          </div>
          <div className="wfhair-shape-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${shapeImages[i]})` }} />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfhair-controls" data-screen-label="04 Texture Controls">
        <div className="frame">
          <figure className="wfhair-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.hair})` }}>
            <span>texture bridge</span>
          </figure>
          <div className="wfhair-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Neckline, fabric, scale, and weather decide whether hair finishes the outfit or fights it.</h2>
          </div>
          <div className="wfhair-control-list">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="weather" className="wfhair-weather" data-screen-label="05 Weather Honesty">
        <div className="frame">
          <div className="wfhair-weather-title">
            <span>Weather honesty</span>
            <h2>A good hair plan survives the room, the coat, and the forecast.</h2>
          </div>
          <figure className="wfhair-weather-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }}>
            <span>forecast / collar / texture</span>
          </figure>
          <div className="wfhair-weather-list">
            {weatherRows.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3JewelryPage({ data }) {
  const metalTones = [
    ["gold", "#c4984a"],
    ["silver", "#bfc4c2"],
    ["pearl", "#eee0c8"],
    ["mixed", "#a78d6b"],
    ["hoop", "#d8b36c"],
    ["hardware", "#8f8578"],
  ];
  const controlImages = [WFSL3_IMG.jewelry, WFSL3_IMG.nails, WFSL3_IMG.bags, WFSL3_IMG.hair];
  return (
    <React.Fragment>
      <section className="wfjewel-hero" data-screen-label="01 Jewelry and Metal">
        <div className="wfjewel-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }} />
        <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="wfjewel-hero-grid">
            <div className="wfjewel-hero-copy">
              <span className="wfsl3-kicker">Finish / 06 - metal temperature</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
              <p>{data.deck}</p>
            </div>
            <aside className="wfjewel-hero-note">
              <span>Styling rule</span>
              <p>Metal is a color decision first, a decoration decision second.</p>
            </aside>
          </div>
          <div className="wfjewel-metal-rail" aria-label="Metal temperature samples">
            {metalTones.map(([name, color]) => <span key={name} style={{ background: color }}><b>{name}</b></span>)}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfjewel-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#temperature"><span>01</span>Temperature</a>
            <a href="#map"><span>02</span>Metal Map</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#hardware"><span>04</span>Hardware</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="temperature" className="section wfjewel-temp" data-screen-label="02 Temperature Study">
        <div className="frame">
          <div className="wfjewel-temp-copy">
            <span>Temperature before sparkle</span>
            <p className="standfirst">{data.intro}</p>
            <p>Read the outfit palette first: cream, camel, chocolate, olive, black, grey, denim, white, and hardware all push the metal choice before trend does.</p>
          </div>
          <div className="wfjewel-tray">
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>metal tray</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.nails})` }}><span>rings / nails</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>bag hardware</span></figure>
          </div>
          <aside className="wfjewel-temp-notes">
            <div><span>Gold</span><p>Warms cream, camel, olive, brown, ivory, and oxblood.</p></div>
            <div><span>Silver</span><p>Cools black, grey, white, denim, navy, and graphic outfits.</p></div>
            <div><span>Pearl</span><p>Adds light when denim, white shirts, flats, or simple knits need lift.</p></div>
          </aside>
        </div>
      </section>

      <section id="map" className="wfjewel-map" data-screen-label="03 Metal to Palette Map">
        <div className="frame">
          <div className="wfjewel-map-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Let color temperature choose <em>the shine.</em></h2>
          </div>
          <div className="wfjewel-map-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]} style={{ "--metal-tone": metalTones[i][1] }}>
                <span className="metal" />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfjewel-controls" data-screen-label="04 Metal Controls">
        <div className="frame">
          <figure className="wfjewel-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}>
            <span>scale / shine / skin</span>
          </figure>
          <div className="wfjewel-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Temperature, scale, hardware, and neckline decide whether jewelry looks styled or simply added.</h2>
          </div>
          <div className="wfjewel-control-list">
            {data.system.map((item, i) => (
              <article key={item[0]}>
                <figure style={{ backgroundImage: `url(${controlImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section id="hardware" className="wfjewel-hardware" data-screen-label="05 Hardware Relationship">
        <div className="frame">
          <div className="wfjewel-hardware-title">
            <span>Visible relationships</span>
            <h2>The most obvious metal choice is often wrist to bag clasp, not necklace to earring.</h2>
          </div>
          <figure className="wfjewel-hardware-photo" style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}>
            <span>bag clasp / watch / ring</span>
          </figure>
          <div className="wfjewel-hardware-list">
            <article><span>01</span><h3>Repeat once</h3><p>One repeated metal usually looks deliberate without requiring everything to match.</p></article>
            <article><span>02</span><h3>Mix with reason</h3><p>Mixed metal works best when the outfit already has contrast in hardware, shoe, watch, or bag.</p></article>
            <article><span>03</span><h3>Scale down</h3><p>If the earring is big, reduce necklace, rings, or hair decoration.</p></article>
            <article><span>04</span><h3>Use bare skin</h3><p>Sometimes the best neckline finish is no necklace and stronger earrings.</p></article>
          </div>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3BagsPage({ data }) {
  const pairImages = [WFSL3_IMG.bags, WFSL3_IMG.spring, WFSL3_IMG.fall, WFSL3_IMG.summer, WFSL3_IMG.transitional, WFSL3_IMG.bags];
  const edgeMarks = [
    ["hand", "bag shape"],
    ["hem", "shoe line"],
    ["room", "occasion"],
    ["motion", "walk test"],
  ];
  const roomTests = [
    ["The doorway", "Would this shoe make sense before anyone sees the full outfit?"],
    ["The chair", "Does the bag still look intentional when held, set down, or worn crossbody?"],
    ["The pavement", "Can the shoe survive the actual walk without changing your posture?"],
    ["The last mirror", "Do bag, shoe, hem, and jewelry share one level of polish?"],
  ];
  return (
    <React.Fragment>
      <section className="wfbag-hero" data-screen-label="01 Bags and Shoes">
        <div className="wfbag-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }} />
        <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="wfbag-hero-grid">
            <div className="wfbag-title">
              <span className="wfsl3-kicker">Finish / 07 - edge styling</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wfbag-edge-rail">
            {edgeMarks.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfbag-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#pairing"><span>01</span>Hand / Foot</a>
            <a href="#map"><span>02</span>Pairing Map</a>
            <a href="#controls"><span>03</span>Edge Controls</a>
            <a href="#movement"><span>04</span>Movement</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="pairing" className="section wfbag-pairing" data-screen-label="02 Hand and Foot">
        <div className="frame">
          <div className="wfbag-pairing-copy">
            <span>Hand and foot read first</span>
            <p className="standfirst">{data.intro}</p>
            <p>A bag is architecture. A shoe is movement. When those two disagree, the outfit feels accidental even when the clothes are good.</p>
          </div>
          <div className="wfbag-collage">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>structured hand</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }}><span>soft day edge</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }}><span>boot weight</span></figure>
          </div>
          <aside className="wfbag-pairing-notes">
            <div><span>01</span><p>Repeat polish before matching color.</p></div>
            <div><span>02</span><p>Let heavy shoes answer heavier fabric.</p></div>
            <div><span>03</span><p>Use the bag to relax or sharpen the whole silhouette.</p></div>
          </aside>
        </div>
      </section>

      <section id="map" className="wfbag-map" data-screen-label="03 Bag and Shoe Map">
        <div className="frame">
          <div className="wfbag-map-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Six pairings that change the <em>whole read.</em></h2>
          </div>
          <div className="wfbag-map-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${pairImages[i]})` }} />
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfbag-controls" data-screen-label="04 Edge Controls">
        <div className="frame">
          <div className="wfbag-controls-head">
            <span>{data.systemTitle}</span>
            <h2>Structure, weight, color, and occasion decide whether the edges feel finished.</h2>
          </div>
          <figure className="wfbag-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }}>
            <span>hem / bag / city line</span>
          </figure>
          <div className="wfbag-control-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>
      </section>

      <section id="movement" className="wfbag-movement" data-screen-label="05 Movement Test">
        <div className="frame">
          <figure className="wfbag-movement-photo" style={{ backgroundImage: `url(${WFSL3_IMG.summer})` }}>
            <span>room test</span>
          </figure>
          <div className="wfbag-movement-copy">
            <span>Before you leave</span>
            <h2>The last edit is not a match. It is a walk-through.</h2>
          </div>
          <div className="wfbag-test-list">
            {roomTests.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3BeautyBridgesPage({ data }) {
  const bridgeImages = [WFSL3_IMG.skin, WFSL3_IMG.hair, WFSL3_IMG.fragrance, WFSL3_IMG.lip, WFSL3_IMG.bags, WFSL3_IMG.nails];
  const bridgeScale = [
    ["lead", "one visible signal"],
    ["support", "two quiet repeats"],
    ["silence", "everything else recedes"],
  ];
  const finishSystems = [
    ["Work", "soft skin", "sheer nail", "structured bag"],
    ["Weekend", "easy hair", "balm lip", "clean flat"],
    ["Date", "one feature", "warm scent", "small shine"],
    ["Travel", "slick option", "skin scent", "walkable shoe"],
  ];
  return (
    <React.Fragment>
      <section className="wfbridge-hero" data-screen-label="01 Beauty Bridges">
        <div className="wfbridge-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.bridges})` }} />
        <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="wfbridge-hero-grid">
            <div className="wfbridge-title">
              <span className="wfsl3-kicker">Finish / 08 - outfit bridge</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <aside className="wfbridge-rule-card">
              <span>Bridge rule</span>
              <p>One leads. Two support. The rest stay quiet.</p>
            </aside>
          </div>
          <div className="wfbridge-hero-strip">
            {bridgeScale.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfbridge-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#bridge"><span>01</span>Bridge Rule</a>
            <a href="#map"><span>02</span>Occasions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#systems"><span>04</span>Systems</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="bridge" className="section wfbridge-rule" data-screen-label="02 Bridge Rule">
        <div className="frame">
          <div className="wfbridge-rule-copy">
            <span>When the finish gets crowded</span>
            <p className="standfirst">{data.intro}</p>
            <p>The bridge is the relationship between face, hand, hair, scent, metal, bag, and shoe. The point is not more finish. The point is fewer competing signals.</p>
          </div>
          <div className="wfbridge-image-stack">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.bridges})` }}><span>face to outfit</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.lip})` }}><span>lip signal</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>metal repeat</span></figure>
          </div>
          <div className="wfbridge-equation" aria-label="Beauty bridge equation">
            <span>lead</span>
            <b>+</b>
            <span>support</span>
            <b>+</b>
            <span>silence</span>
            <em>= finished</em>
          </div>
        </div>
      </section>

      <section id="map" className="wfbridge-map" data-screen-label="03 Occasion Bridge Map">
        <div className="frame">
          <div className="wfbridge-map-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Each room needs a different <em>lead signal.</em></h2>
          </div>
          <div className="wfbridge-map-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <figure style={{ backgroundImage: `url(${bridgeImages[i]})` }} />
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfbridge-controls" data-screen-label="04 Bridge Controls">
        <div className="frame">
          <figure className="wfbridge-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fragrance})` }}>
            <span>signal / support / silence</span>
          </figure>
          <div className="wfbridge-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>The strongest bridge is usually subtraction, not addition.</h2>
          </div>
          <div className="wfbridge-control-lines">
            {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>
      </section>

      <section id="systems" className="wfbridge-systems" data-screen-label="05 Complete Finish Systems">
        <div className="frame">
          <div className="wfbridge-systems-head">
            <span>Complete finish systems</span>
            <h2>Build the whole read before adding another accessory.</h2>
          </div>
          <div className="wfbridge-system-board">
            {finishSystems.map((item, i) => (
              <article key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
                <p>{item[2]}</p>
                <p>{item[3]}</p>
              </article>
            ))}
          </div>
          <figure className="wfbridge-systems-photo" style={{ backgroundImage: `url(${WFSL3_IMG.hair})` }}>
            <span>hair / face / clothing line</span>
          </figure>
        </div>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3SpringPage({ data }) {
  const conditionImages = [WFSL3_IMG.spring, WFSL3_IMG.transitional, WFSL3_IMG.summer, WFSL3_IMG.bags, WFSL3_IMG.fall, WFSL3_IMG.jewelry];
  const forecast = [
    ["45 F", "trench over knit"],
    ["rain", "closed shoe"],
    ["68 F", "layer comes off"],
    ["after 6", "small polish"],
  ];
  const pavementTests = [
    ["Morning cold", "Keep a real outer layer and remove weight underneath."],
    ["Wet pavement", "Choose the shoe before the skirt, trouser, or dress hem."],
    ["Warm afternoon", "A shirt, cardigan, or trench must still look good carried."],
    ["Color lift", "One fresh color is enough against trench, denim, navy, or cream."],
  ];
  return (
    <React.Fragment>
      <section className="wfspring-hero" data-screen-label="01 Spring">
        <div className="wfspring-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }} />
        <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="wfspring-hero-grid">
            <div className="wfspring-title">
              <span className="wfsl3-kicker">Seasonal / 01 - weather reset</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wfspring-forecast">
            {forecast.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfspring-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#reset"><span>01</span>Reset</a>
            <a href="#conditions"><span>02</span>Conditions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#pavement"><span>04</span>Pavement</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="reset" className="section wfspring-reset" data-screen-label="02 Spring Reset">
        <div className="frame">
          <div className="wfspring-reset-copy">
            <span>Lightness with a real layer</span>
            <p className="standfirst">Spring is a weather reset: trench first, lighter base second, pavement-safe shoes always.</p>
            <p>The outfit should handle a cold morning, damp street, warm afternoon, and dinner without becoming a costume change.</p>
          </div>
          <div className="wfspring-collage">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }}><span>trench / street / layer</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }}><span>color lift</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>closed shoe logic</span></figure>
          </div>
        </div>
      </section>

      <section id="conditions" className="wfspring-conditions" data-screen-label="03 Spring Condition Map">
        <div className="frame">
          <div className="wfspring-condition-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Dress for the day that changes <em>while you are in it.</em></h2>
          </div>
          <div className="wfspring-condition-grid">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${conditionImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfspring-controls" data-screen-label="04 Spring Controls">
        <div className="frame">
          <figure className="wfspring-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }}>
            <span>cotton / trench / fresh color</span>
          </figure>
          <div className="wfspring-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Layer, fabric, color, and shoe have to agree with the forecast.</h2>
          </div>
          <div className="wfspring-control-list">
            {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>
      </section>

      <section id="pavement" className="wfspring-pavement" data-screen-label="05 Pavement Test">
        <div className="frame">
          <div className="wfspring-pavement-title">
            <span>Pavement before prettiness</span>
            <h2>Spring fails from the ground up.</h2>
          </div>
          <figure className="wfspring-pavement-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }}>
            <span>weather / hem / shoe</span>
          </figure>
          <div className="wfspring-pavement-list">
            {pavementTests.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3SummerPage({ data }) {
  const heatImages = [WFSL3_IMG.summer, WFSL3_IMG.skin, WFSL3_IMG.bags, WFSL3_IMG.spring, WFSL3_IMG.fragrance, WFSL3_IMG.hair];
  const heatStrip = [
    ["75 F", "linen starts"],
    ["humid", "open neckline"],
    ["office", "layer carried"],
    ["night", "one clean shine"],
  ];
  const coolingNotes = [
    ["Air", "Choose fabric before color."],
    ["Line", "Keep one defined edge."],
    ["Skin", "Cool the neck, wrist, ankle, or back."],
    ["Room", "Plan for heat outside and cold interiors."],
  ];
  return (
    <React.Fragment>
      <section className="wfsummer-hero" data-screen-label="01 Summer">
        <div className="wfsummer-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.summer})` }} />
        <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="wfsummer-hero-grid">
            <div className="wfsummer-title">
              <span className="wfsl3-kicker">Seasonal / 02 - heat system</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wfsummer-heat-strip">
            {heatStrip.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfsummer-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#heat"><span>01</span>Heat</a>
            <a href="#conditions"><span>02</span>Conditions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#cooling"><span>04</span>Cooling</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="heat" className="section wfsummer-heat" data-screen-label="02 Heat System">
        <div className="frame">
          <div className="wfsummer-heat-copy">
            <span>Air with a line</span>
            <p className="standfirst">Summer needs fabric that breathes and one edge that keeps the outfit sharp.</p>
            <p>Collar, strap, waist, hem, sandal, or bag. Pick the structure first, then let the fabric cool.</p>
          </div>
          <div className="wfsummer-gallery">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.summer})` }}><span>linen / sun / line</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.skin})` }}><span>skin cooling</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>clean bag edge</span></figure>
          </div>
        </div>
      </section>

      <section id="conditions" className="wfsummer-conditions" data-screen-label="03 Heat Condition Map">
        <div className="frame">
          <div className="wfsummer-condition-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Heat changes the outfit before trend does.</h2>
          </div>
          <div className="wfsummer-condition-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${heatImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfsummer-controls" data-screen-label="04 Summer Controls">
        <div className="frame">
          <figure className="wfsummer-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.summer})` }}>
            <span>fabric / shape / skin</span>
          </figure>
          <div className="wfsummer-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Fabric does the cooling. Shape keeps it dressed.</h2>
          </div>
          <div className="wfsummer-control-list">
            {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>
      </section>

      <section id="cooling" className="wfsummer-cooling" data-screen-label="05 Cooling Notes">
        <div className="frame">
          <div className="wfsummer-cooling-title">
            <span>Cooling notes</span>
            <h2>Loose is not the same as shapeless.</h2>
          </div>
          <figure className="wfsummer-cooling-photo" style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }}>
            <span>shade / layer / skin</span>
          </figure>
          <div className="wfsummer-cooling-list">
            {coolingNotes.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3FallPage({ data }) {
  const fallImages = [WFSL3_IMG.fall, WFSL3_IMG.jewelry, WFSL3_IMG.transitional, WFSL3_IMG.bags, WFSL3_IMG.winter, WFSL3_IMG.fragrance];
  const layerStrip = [
    ["50 F", "jacket starts"],
    ["wool", "texture shows"],
    ["boot", "hem meets shaft"],
    ["dinner", "one warm shine"],
  ];
  const layerNotes = [
    ["Texture", "Let suede, wool, leather, or denim do the seasonal work."],
    ["Layer", "Every visible layer needs a job."],
    ["Boot", "Match shaft height to the hem."],
    ["Color", "Camel, chocolate, oxblood, navy, grey, and cream carry the palette."],
  ];
  return (
    <React.Fragment>
      <section className="wffall-hero" data-screen-label="01 Fall">
        <div className="wffall-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }} />
        <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="wffall-hero-grid">
            <div className="wffall-title">
              <span className="wfsl3-kicker">Seasonal / 03 - layer math</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wffall-layer-strip">
            {layerStrip.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wffall-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#layer"><span>01</span>Layer</a>
            <a href="#conditions"><span>02</span>Conditions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#texture"><span>04</span>Texture</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="layer" className="section wffall-layer" data-screen-label="02 Layer Math">
        <div className="frame">
          <div className="wffall-layer-copy">
            <span>Visible layer math</span>
            <p className="standfirst">Fall works when jacket, knit, trouser, boot, and texture can all be seen.</p>
            <p>Keep the outfit simple. Let one warm texture and one clean layer line make it feel complete.</p>
          </div>
          <div className="wffall-gallery">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }}><span>jacket / knit / boot</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>structured bag</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>warm shine</span></figure>
          </div>
        </div>
      </section>

      <section id="conditions" className="wffall-conditions" data-screen-label="03 Fall Condition Map">
        <div className="frame">
          <div className="wffall-condition-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Layer for the temperature, then finish the line.</h2>
          </div>
          <div className="wffall-condition-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${fallImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wffall-controls" data-screen-label="04 Fall Controls">
        <div className="frame">
          <figure className="wffall-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }}>
            <span>wool / suede / denim</span>
          </figure>
          <div className="wffall-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>Texture gives fall depth. The boot and hem keep it clean.</h2>
          </div>
          <div className="wffall-control-list">
            {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>
      </section>

      <section id="texture" className="wffall-texture" data-screen-label="05 Texture Notes">
        <div className="frame">
          <div className="wffall-texture-title">
            <span>Texture notes</span>
            <h2>Fall does not need more pieces. It needs better surfaces.</h2>
          </div>
          <figure className="wffall-texture-photo" style={{ backgroundImage: `url(${WFSL3_IMG.winter})` }}>
            <span>coat / knit / boot</span>
          </figure>
          <div className="wffall-texture-list">
            {layerNotes.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3WinterPage({ data }) {
  const winterImages = [WFSL3_IMG.winter, WFSL3_IMG.fall, WFSL3_IMG.transitional, WFSL3_IMG.bags, WFSL3_IMG.jewelry, WFSL3_IMG.hair];
  const coldStrip = [
    ["45 F", "coat edge"],
    ["freeze", "base layer"],
    ["snow", "weather boot"],
    ["black", "mixed texture"],
  ];
  const lineNotes = [
    ["Base", "Warmth close to the body."],
    ["Coat", "The outer line carries the outfit."],
    ["Boot", "Weather first, silhouette second."],
    ["Texture", "Black needs wool, rib, leather, suede, satin, or metal."],
  ];
  return (
    <React.Fragment>
      <section className="wfwinter-hero" data-screen-label="01 Winter">
        <div className="wfwinter-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.winter})` }} />
        <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="wfwinter-hero-grid">
            <div className="wfwinter-title">
              <span className="wfsl3-kicker">Seasonal / 04 - cold armor</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wfwinter-cold-strip">
            {coldStrip.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wfwinter-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#line"><span>01</span>Line</a>
            <a href="#conditions"><span>02</span>Conditions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#texture"><span>04</span>Texture</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="line" className="section wfwinter-line" data-screen-label="02 Winter Line">
        <div className="frame">
          <div className="wfwinter-line-copy">
            <span>Warmth with a line</span>
            <p className="standfirst">Winter needs one visible vertical line so the layers do not swallow the outfit.</p>
            <p>Use the coat edge, scarf drop, trouser crease, tonal column, or boot shaft.</p>
          </div>
          <div className="wfwinter-gallery">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.winter})` }}><span>coat / column / boot</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.fall})` }}><span>wool layer</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.jewelry})` }}><span>visible shine</span></figure>
          </div>
        </div>
      </section>

      <section id="conditions" className="wfwinter-conditions" data-screen-label="03 Cold Condition Map">
        <div className="frame">
          <div className="wfwinter-condition-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>Cold weather needs shape before decoration.</h2>
          </div>
          <div className="wfwinter-condition-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${winterImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wfwinter-controls" data-screen-label="04 Winter Controls">
        <div className="frame">
          <figure className="wfwinter-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.winter})` }}>
            <span>coat / boot / black texture</span>
          </figure>
          <div className="wfwinter-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>The coat carries the polish. The boot solves the ground.</h2>
          </div>
          <div className="wfwinter-control-list">
            {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>
      </section>

      <section id="texture" className="wfwinter-texture" data-screen-label="05 Winter Texture">
        <div className="frame">
          <div className="wfwinter-texture-title">
            <span>Winter texture</span>
            <h2>All black only works when the surfaces are different.</h2>
          </div>
          <figure className="wfwinter-texture-photo" style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}>
            <span>leather / wool / shine</span>
          </figure>
          <div className="wfwinter-texture-list">
            {lineNotes.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

function WFSL3TransitionalPage({ data }) {
  const transImages = [WFSL3_IMG.transitional, WFSL3_IMG.spring, WFSL3_IMG.summer, WFSL3_IMG.bags, WFSL3_IMG.fall, WFSL3_IMG.winter];
  const swingStrip = [
    ["morning", "covered shoe"],
    ["noon", "base survives"],
    ["rain", "darker hem"],
    ["bag", "layer carried"],
  ];
  const carryNotes = [
    ["Remove", "The layer has to look good off the body."],
    ["Breathe", "The base handles the warmest hour."],
    ["Weather", "Shoes answer the wettest forecast."],
    ["Carry", "The bag holds the scarf, knit, or umbrella."],
  ];
  return (
    <React.Fragment>
      <section className="wftrans-hero" data-screen-label="01 Transitional">
        <div className="wftrans-hero-photo" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }} />
        <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="wftrans-hero-grid">
            <div className="wftrans-title">
              <span className="wfsl3-kicker">Seasonal / 05 - in-between system</span>
              <h1>{data.title} <span>{data.italic}</span></h1>
            </div>
            <p>{data.deck}</p>
          </div>
          <div className="wftrans-swing-strip">
            {swingStrip.map((item, i) => (
              <div key={item[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <b>{item[0]}</b>
                <small>{item[1]}</small>
              </div>
            ))}
          </div>
        </div>
      </section>

      <nav className="wfsl3-nav wftrans-nav">
        <div className="frame">
          <span className="label">{data.section}</span>
          <div className="links">
            <a href="#swing"><span>01</span>Swing</a>
            <a href="#conditions"><span>02</span>Conditions</a>
            <a href="#controls"><span>03</span>Controls</a>
            <a href="#carry"><span>04</span>Carry</a>
            <a href="#guides"><span>05</span>Guides</a>
            <a href="#faq"><span>06</span>Questions</a>
          </div>
        </div>
      </nav>

      <section id="swing" className="section wftrans-swing" data-screen-label="02 Temperature Swing">
        <div className="frame">
          <div className="wftrans-swing-copy">
            <span>Cold morning, warm afternoon</span>
            <p className="standfirst">Transitional dressing is built around the layer you remove.</p>
            <p>The base, shoe, hem, and bag have to keep working after the weather changes.</p>
          </div>
          <div className="wftrans-gallery">
            <figure className="main" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }}><span>jacket / base / bag</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.spring})` }}><span>light layer</span></figure>
            <figure style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}><span>carry system</span></figure>
          </div>
        </div>
      </section>

      <section id="conditions" className="wftrans-conditions" data-screen-label="03 In-between Condition Map">
        <div className="frame">
          <div className="wftrans-condition-head">
            <span>{data.diagnosticsTitle}</span>
            <h2>The day changes. The outfit should not collapse.</h2>
          </div>
          <div className="wftrans-condition-list">
            {data.diagnostics.map((item, i) => (
              <a href={item[2]} key={item[0]}>
                <figure style={{ backgroundImage: `url(${transImages[i]})` }} />
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{item[0]}</h3>
                <p>{item[1]}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section id="controls" className="wftrans-controls" data-screen-label="04 Transitional Controls">
        <div className="frame">
          <figure className="wftrans-controls-photo" style={{ backgroundImage: `url(${WFSL3_IMG.transitional})` }}>
            <span>layer / shoe / weather</span>
          </figure>
          <div className="wftrans-controls-copy">
            <span>{data.systemTitle}</span>
            <h2>The removable layer is the whole system.</h2>
          </div>
          <div className="wftrans-control-list">
            {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>
      </section>

      <section id="carry" className="wftrans-carry" data-screen-label="05 Carry Test">
        <div className="frame">
          <div className="wftrans-carry-title">
            <span>Carry test</span>
            <h2>If the layer comes off, the outfit still has to look finished.</h2>
          </div>
          <figure className="wftrans-carry-photo" style={{ backgroundImage: `url(${WFSL3_IMG.bags})` }}>
            <span>bag / scarf / jacket</span>
          </figure>
          <div className="wftrans-carry-list">
            {carryNotes.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>
      </section>

      <WFSL3Guides data={data} />
      <WFSL3FAQ data={data} />
      <WFSL3Cross data={data} />
    </React.Fragment>
  );
}

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"];
  const fallback = () => (
    <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>
  );
  if (key === "finish-skin-outfit-pairings") return <WFSL3SkinPage data={data} />;
  if (key === "finish-lip-and-look") return <WFSL3LipPage data={data} />;
  if (key === "finish-nails-and-palette") return <WFSL3NailsPage data={data} />;
  if (key === "finish-fragrance-by-mood") return <WFSL3FragrancePage data={data} />;
  if (key === "finish-hair-and-texture") return <WFSL3HairPage data={data} />;
  if (key === "finish-jewelry-and-metal") return <WFSL3JewelryPage data={data} />;
  if (key === "finish-bags-and-shoes") return <WFSL3BagsPage data={data} />;
  if (key === "finish-beauty-bridges") {
    try {
      return WFSL3BeautyBridgesPage({ data });
    } catch (error) {
      console.error("Beauty Bridges render failed", error);
      return fallback();
    }
  }
  if (key === "seasonal-spring") return <WFSL3SpringPage data={data} />;
  if (key === "seasonal-summer") return <WFSL3SummerPage data={data} />;
  if (key === "seasonal-fall") return <WFSL3FallPage data={data} />;
  if (key === "seasonal-winter") return <WFSL3WinterPage data={data} />;
  if (key === "seasonal-transitional") return <WFSL3TransitionalPage data={data} />;
  return fallback();
}

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