/* global React */

const WBFL3_IMAGES = {
  buildOuterwear: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=2400&q=80",
  buildFootwear: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=2400&q=80",
  buildAccessories: "https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?w=2400&q=80",
  buildHandbags: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=2400&q=80",
  buildWork: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=2400&q=80",
  buildCasual: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=2400&q=80",
  buildCapsule: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=2400&q=80",
  fitHero: "https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=2400&q=80",
  fitShirts: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=2400&q=80",
  fitTrousers: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=2400&q=80",
  fitDenim: "https://images.unsplash.com/photo-1541099649105-f69ad21f3246?w=2400&q=80",
  fitOuterwear: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=2400&q=80",
  fitShoes: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=2400&q=80",
  fitAlterations: "https://images.unsplash.com/photo-1506629905607-d405d7d3b0d2?w=2400&q=80",
  fitPetite: "https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=2400&q=80",
  fitTall: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=2400&q=80",
};

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

const WBFL3_BUILD = {
  "build-outerwear": {
    number: "02",
    section: "Outerwear",
    title: "Outerwear,",
    italic: "the weather edit.",
    hero: "buildOuterwear",
    href: "/en/women/build/outerwear/",
    deck: "Trench coats, wool overcoats, leather jackets, rain shells, blazers, and the top layers that make a wardrobe work in real weather.",
    intro: "Outerwear is the most visible thing in the closet and the least forgiving place to buy badly. Start with climate, then length, then the layer you need underneath.",
    system: [
      ["Trench coat", "Knee-length cotton gabardine, belt that ties cleanly, sleeve long enough over a knit.", "/en/women/build/outerwear/trench-coat/"],
      ["Wool overcoat", "Camel, navy, or charcoal; long enough to cover tailoring and heavy enough to hang straight.", "/en/women/build/outerwear/wool-overcoat/"],
      ["Leather jacket", "Shoulder exact, sleeve slim, body short enough to keep the waist visible.", "/en/women/build/outerwear/leather-jacket/"],
      ["Rain shell", "Matte, packable, hooded; sized for a sweater without turning into camping gear.", "/en/women/build/outerwear/rain-jacket/"],
      ["Tailored blazer", "The indoor coat. Navy first, black second, linen only after the wool is solved.", "/en/women/build/outerwear/tailored-blazer/"],
      ["Quilted liner", "The quiet insulation layer that extends a trench or overcoat by six weeks.", "/en/women/build/outerwear/quilted-jacket/"],
    ],
    shop: [["Climate", "Buy for the weather you have 80 days a year, not the trip you take once."], ["Length", "Mid-thigh is casual; knee-length is versatile; calf-length needs height or heels."], ["Layer", "Try it over the thickest knit you actually wear."], ["Hardware", "Dark horn, brass, or covered snaps age better than shiny silver zips."]],
    leaves: ["Best trench coats for women", "How a wool coat should fit", "Women leather jacket guide", "Best raincoats for women", "How to choose coat length", "Winter coats that work over tailoring", "Blazer as outerwear", "How to store wool coats"],
  },
  "build-footwear": {
    number: "03",
    section: "Footwear",
    title: "Footwear,",
    italic: "the six-pair rotation.",
    hero: "buildFootwear",
    href: "/en/women/build/footwear/",
    deck: "Loafers, ballet flats, white sneakers, ankle boots, leather sandals, and low heels that cover the year without turning the closet into storage.",
    intro: "Shoes decide posture before they decide style. Build a rotation around walking distance, weather, and the hem shapes you wear most.",
    system: [
      ["Loafer", "The weekday flat: almond toe, leather sole, enough vamp to hold the foot.", "/en/women/build/footwear/loafers/"],
      ["Ballet flat", "Soft but structured, with a toe box that does not collapse after three wears.", "/en/women/build/footwear/ballet-flats/"],
      ["White sneaker", "Low-profile leather or canvas, no platform, no trend outsole.", "/en/women/build/footwear/white-sneakers/"],
      ["Ankle boot", "Slim shaft, stacked heel, opening that clears straight denim.", "/en/women/build/footwear/ankle-boots/"],
      ["Leather sandal", "Strap sandal with an actual sole; black or tan before metallic.", "/en/women/build/footwear/leather-sandals/"],
      ["Low heel", "Two inches is enough. The pair you can cross the room in twice.", "/en/women/build/footwear/low-heels/"],
    ],
    shop: [["Toe shape", "Almond and soft square outlast sharp points."], ["Sole", "Leather dresses up; rubber saves wet commutes."], ["Heel", "Block heels age better than stilettos for daily wear."], ["Color", "Black, brown, cream, and one evening finish are plenty."]],
    leaves: ["Best loafers for women", "Ballet flats that do not hurt", "Best white sneakers for women", "Ankle boots with straight jeans", "Leather sandal guide", "Comfortable low heels", "How many shoes should women own", "Shoe care basics for women"],
  },
  "build-accessories": {
    number: "04",
    section: "Accessories",
    title: "Accessories,",
    italic: "the finishing system.",
    hero: "buildAccessories",
    href: "/en/women/build/accessories/",
    deck: "Belts, scarves, jewelry, watches, sunglasses, hosiery, gloves, and the small pieces that make basic clothes look intentional.",
    intro: "Accessories are punctuation. They should clarify the outfit, not explain it. Build a tight edit in good materials and repeat it without apology.",
    system: [
      ["Leather belt", "Narrow brown, black second, brass buckle before logos.", "/en/women/build/accessories/leather-belts/"],
      ["Silk scarf", "One square, one long. Wear at the neck, wrist, bag handle, or hair.", "/en/women/build/accessories/silk-scarves/"],
      ["Everyday jewelry", "Small hoops, a chain, a ring you do not remove for typing.", "/en/women/build/accessories/everyday-jewelry/"],
      ["Watch", "A 28-36mm face reads cleaner than trend jewelry pretending to tell time.", "/en/women/build/accessories/watches/"],
      ["Sunglasses", "One frame that suits your face, one lens color that suits your life.", "/en/women/build/accessories/sunglasses/"],
      ["Cold-weather extras", "Cashmere scarf, leather gloves, opaque tights in black and espresso.", "/en/women/build/accessories/winter-accessories/"],
    ],
    shop: [["Metal", "Choose gold or silver as a default; mix only with intent."], ["Scale", "Small frame, smaller jewelry; oversized pieces need quieter clothes."], ["Texture", "Silk, leather, and wool make simple outfits look finished."], ["Repeat", "Signature accessories work because they repeat."]],
    leaves: ["Best belts for women", "How to wear a silk scarf", "Everyday jewelry capsule", "Best watches for women", "Sunglasses for face shape", "Leather gloves guide", "Black tights vs sheer tights", "How to store jewelry"],
  },
  "build-handbags": {
    number: "05",
    section: "Handbags",
    title: "Handbags,",
    italic: "four jobs only.",
    hero: "buildHandbags",
    href: "/en/women/build/handbags/",
    deck: "Tote, shoulder bag, crossbody, evening clutch, leather care, size rules, hardware, and the bag rotation that earns its shelf.",
    intro: "A good bag rotation is based on use, not mood. One carries a laptop, one carries the day, one travels hands-free, one goes out at night.",
    system: [
      ["Work tote", "Structured enough for a laptop, soft enough not to look like luggage.", "/en/women/build/handbags/work-tote/"],
      ["Shoulder bag", "Medium scale, close to the body, hardware that does not shout.", "/en/women/build/handbags/shoulder-bag/"],
      ["Crossbody", "Travel and weekend utility; strap length matters more than logo.", "/en/women/build/handbags/crossbody-bag/"],
      ["Evening clutch", "Small black leather or satin, fits phone, card, key, lipstick.", "/en/women/build/handbags/evening-clutch/"],
      ["Canvas tote", "Errands, groceries, beach. Not a substitute for a real work bag.", "/en/women/build/handbags/canvas-tote/"],
      ["Care kit", "Conditioner, dust bag, stuffing paper, and a repair shop before damage spreads.", "/en/women/build/handbags/leather-bag-care/"],
    ],
    shop: [["Capacity", "Measure your laptop and water bottle before falling in love."], ["Drop", "A shoulder bag should clear the coat you wear most."], ["Hardware", "The quieter the metal, the longer the bag lasts visually."], ["Finish", "Pebbled leather hides life better than smooth calf."]],
    leaves: ["Best work totes for women", "Shoulder bag size guide", "Best crossbody bags for travel", "Evening clutch essentials", "How to care for leather bags", "Handbag hardware guide", "How many handbags do you need", "Designer bags worth repairing"],
  },
  "build-work": {
    number: "06",
    section: "Work Wardrobe",
    title: "Work wardrobe,",
    italic: "without costume.",
    hero: "buildWork",
    href: "/en/women/build/work-wardrobe/",
    deck: "Office capsules, hybrid schedules, suiting, dresses, trousers, knits, shoes, and the pieces that look competent without looking corporate.",
    intro: "A work wardrobe should remove morning negotiation. Build around the dress code you actually have, then add polish in fabric, fit, and shoes.",
    system: [
      ["Blazer", "Navy tropical wool, soft shoulder, sleeve altered to show the wrist.", "/en/women/build/work-wardrobe/blazer/"],
      ["Trouser", "Wool or cotton twill; one straight, one wide, both hemmed to real shoes.", "/en/women/build/work-wardrobe/trousers/"],
      ["Shirt", "White poplin, blue oxford, silk blouse only if care is realistic.", "/en/women/build/work-wardrobe/shirts/"],
      ["Dress", "Shift or wrap, lined, knee to midi, works with a flat and a jacket.", "/en/women/build/work-wardrobe/work-dresses/"],
      ["Knit", "Fine-gauge merino that layers under tailoring without bulk.", "/en/women/build/work-wardrobe/work-knitwear/"],
      ["Shoe", "Loafer, low pump, ankle boot: three shoes can cover most offices.", "/en/women/build/work-wardrobe/work-shoes/"],
    ],
    shop: [["Dress code", "Mirror the room, then improve the fabric."], ["Laundry", "If it needs dry cleaning weekly, it is not a weekday piece."], ["Color", "Navy, black, charcoal, cream, oxblood accent."], ["Repeat", "A weekly uniform is a feature, not a failure."]],
    leaves: ["Women's office capsule wardrobe", "Business casual women guide", "Best work trousers for women", "Office dresses that fit", "Work shoes for women", "How to build a hybrid work wardrobe", "What to wear to a first day at work", "How many work outfits do you need"],
  },
  "build-casual": {
    number: "07",
    section: "Casual Wardrobe",
    title: "Casual wardrobe,",
    italic: "with shape.",
    hero: "buildCasual",
    href: "/en/women/build/casual-wardrobe/",
    deck: "Denim, tees, knits, easy dresses, sneakers, flats, weekend jackets, and the off-duty clothes that still look edited.",
    intro: "Casual does not mean shapeless. The best weekend clothes have one relaxed element and one controlled line: soft knit with straight denim, easy dress with clean shoes.",
    system: [
      ["Straight denim", "Dark and medium wash, hemmed for sneakers and flats.", "/en/women/build/casual-wardrobe/straight-denim/"],
      ["Heavy tee", "White, black, stripe; thick enough to wear alone.", "/en/women/build/casual-wardrobe/t-shirts/"],
      ["Soft knit", "Crew, cardigan, or polo knit that gives structure without stiffness.", "/en/women/build/casual-wardrobe/knitwear/"],
      ["Easy dress", "Cotton poplin, jersey, or linen with a real waist decision.", "/en/women/build/casual-wardrobe/casual-dresses/"],
      ["Weekend jacket", "Chore jacket, denim jacket, or cropped trench depending on climate.", "/en/women/build/casual-wardrobe/weekend-jackets/"],
      ["Flat shoe", "Sneaker, loafer, sandal: walkable, simple, replaceable when tired.", "/en/women/build/casual-wardrobe/casual-shoes/"],
    ],
    shop: [["Proportion", "If the top is oversized, keep the leg clean."], ["Fabric", "Cotton, denim, linen, merino. Casual synthetic often looks tired fastest."], ["Color", "Build around denim, cream, black, navy, olive."], ["Ease", "Comfort should come from cut, not just stretch."]],
    leaves: ["Casual wardrobe essentials for women", "How to dress casual but polished", "Best straight jeans for women", "Weekend outfit formulas", "Best casual dresses for women", "How to style sneakers with dresses", "Denim jacket vs chore jacket", "Casual capsule wardrobe women"],
  },
  "build-capsule": {
    number: "08",
    section: "Capsule Wardrobe",
    title: "Capsule wardrobe,",
    italic: "the edit that works.",
    hero: "buildCapsule",
    href: "/en/women/build/capsule-wardrobe/",
    deck: "Capsule math, color palettes, outfit formulas, seasonal swaps, work-week rotations, travel edits, and the pieces that make getting dressed automatic.",
    intro: "A capsule is not a tiny closet. It is a closet with a point of view. The goal is fewer bad decisions, not fewer clothes as a moral project.",
    system: [
      ["Core palette", "Two dark neutrals, two light neutrals, one accent that repeats.", "/en/women/build/capsule-wardrobe/color-palette/"],
      ["Hero pieces", "Blazer, trouser, denim, trench, knit: five pieces that carry the rest.", "/en/women/build/capsule-wardrobe/hero-pieces/"],
      ["Outfit formulas", "Repeatable pairings: blazer plus denim, knit plus trouser, dress plus flat.", "/en/women/build/capsule-wardrobe/outfit-formulas/"],
      ["Seasonal swaps", "Change weight, not identity. Linen for wool, sandal for loafer.", "/en/women/build/capsule-wardrobe/seasonal-swaps/"],
      ["Travel capsule", "Ten pieces, three shoes maximum, one palette, no maybes.", "/en/women/build/capsule-wardrobe/travel-capsule/"],
      ["Audit rhythm", "Edit quarterly: repair, retire, replace, repeat.", "/en/women/build/capsule-wardrobe/wardrobe-audit/"],
    ],
    shop: [["Palette", "If a new piece does not work with three existing pieces, it is an orphan."], ["Lifestyle", "Capsules should follow the calendar, not fantasy."], ["Repeats", "Two white tees are smarter than one novelty blouse."], ["Exit rule", "Nothing new enters until one weak piece leaves."]],
    leaves: ["How to build a capsule wardrobe for women", "Capsule wardrobe checklist", "Best capsule colors for women", "Work capsule wardrobe women", "Travel capsule wardrobe women", "Minimalist wardrobe vs capsule wardrobe", "How many clothes should be in a capsule", "Seasonal capsule wardrobe guide"],
  },
};

const WBFL3_FIT_SECTIONS = [
  ["fit-shirts", "Shirts", "/en/women/fit/shirts/", "Bust, shoulder, yoke, cuff, and button placement."],
  ["fit-trousers", "Trousers", "/en/women/fit/trousers/", "Rise, seat, thigh, drape, pocket flare, and hem."],
  ["fit-denim", "Denim", "/en/women/fit/denim/", "Waist stretch, hip curve, thigh room, leg shape, inseam."],
  ["fit-outerwear", "Outerwear", "/en/women/fit/outerwear/", "Coat length, layering room, shoulder ease, sleeve coverage."],
  ["fit-shoes", "Shoes", "/en/women/fit/shoes/", "Toe box, width, heel slip, arch, break-in signs."],
  ["fit-alterations", "Alterations", "/en/women/fit/alterations/", "What a tailor can fix, what to skip, what to pay."],
  ["fit-petite", "Petite", "/en/women/fit/petite/", "Scale, rise, sleeve, crop, and vertical proportion."],
  ["fit-tall", "Tall", "/en/women/fit/tall/", "Sleeve, inseam, rise, coat length, and where to add ease."],
];

const WBFL3_FIT = {
  "fit-shirts": {
    number: "01",
    section: "Shirts",
    hero: "fitShirts",
    title: "Shirts,",
    italic: "button by button.",
    deck: "Bust gape, shoulder seams, darts, sleeve length, cuff width, collar stance, and the difference between ease and excess.",
    intro: "A shirt fit is decided before it is styled. The placket should lie flat, the shoulder should know where the arm begins, and the hem should match the way you actually wear it.",
    checks: [["Bust", "No pulling across the placket when seated or reaching."], ["Shoulder", "Seam lands at the shoulder point unless the cut is intentionally dropped."], ["Dart", "Ends short of the bust point, shaping without pointing."], ["Sleeve", "Cuff clears the wrist bone and does not swallow the hand."], ["Hem", "Tuckable means long enough to stay put; untucked means shaped, not chopped."]],
    matrixTitle: "Shirt Fit Matrix",
    matrix: [["Poplin", "Clean, crisp, shows strain quickly"], ["Oxford", "More forgiving, casual, better with denim"], ["Silk blouse", "Needs shoulder precision and enough bust ease"], ["Linen shirt", "Buy room for wrinkles and movement"]],
    symptoms: [["Button gape", "Size up, choose a different bust cut, or add hidden snaps."], ["Shoulder drag", "Armhole or sleeve pitch is fighting your posture."], ["Boxy body", "Too much width without shaping through waist or hem."], ["Cuff collapse", "Sleeve is too long or cuff is too wide."]],
    leaves: ["How a women's shirt should fit", "Best white shirts for women", "How to fix shirt button gape", "Shirts for large busts", "Petite shirt fit guide", "How to tailor a button down shirt", "Oxford vs poplin for women", "How to tuck a shirt cleanly"],
  },
  "fit-trousers": {
    number: "02",
    section: "Trousers",
    hero: "fitTrousers",
    title: "Trousers,",
    italic: "rise to hem.",
    deck: "Waist, rise, seat, thigh, pocket flare, drape, pleats, hems, and the trouser fit checks that make tailoring look expensive.",
    intro: "Women tend to judge trousers at the waist. The better test is the seat, thigh, and fall of the fabric. A good trouser hangs from the waistband without fighting the body underneath.",
    checks: [["Waist", "Sits without pinching and does not gap when you sit."], ["Rise", "Matches torso length; high rise is not automatically better."], ["Seat", "Smooth across the back with no horizontal strain."], ["Pocket", "Pocket lies flat. Flaring means the cut is too tight or the rise is wrong."], ["Hem", "Chosen for the shoe: loafer, boot, heel, or sneaker."]],
    matrixTitle: "Rise + Leg Shape",
    matrix: [["High rise", "Lengthens leg, can crowd short torsos"], ["Mid rise", "Most versatile, easiest for tucked tops"], ["Wide leg", "Needs drape and a decisive hem"], ["Tapered", "Useful petite option when calf room is respected"]],
    symptoms: [["Pocket flare", "Seat, hip, or thigh is too tight."], ["Camel fold", "Rise shape does not match the body."], ["Pooling hem", "Inseam too long or leg opening too wide."], ["Seat wrinkles", "Back rise or seat curve needs a different block."]],
    leaves: ["How women's trousers should fit", "Trouser rise explained for women", "Best wool trousers for women", "How to stop trouser pocket flare", "Wide leg trousers fit guide", "Petite trouser fit guide", "How to hem women's trousers", "Pleated trousers for women"],
  },
  "fit-denim": {
    number: "03",
    section: "Denim",
    hero: "fitDenim",
    title: "Denim,",
    italic: "after the first wear.",
    deck: "Waist stretch, hip curve, thigh room, inseam, leg opening, pocket placement, straight jeans, wide jeans, and the fit signs that survive a full day.",
    intro: "Jeans should be judged twice: in the fitting room and after they have warmed up on the body. Stretch changes the waist; it does not fix a bad rise or a tight thigh.",
    checks: [["Waist", "Snug is fine; pain is not. Stretch should relax, not rescue."], ["Hip", "Pocket placement should lift, not widen or flatten."], ["Thigh", "Enough room to sit without pulling the fly."], ["Leg", "Straight, slim, barrel, or wide should match shoe and proportion."], ["Inseam", "Cuff, crop, stack, or hem. Pick one on purpose."]],
    matrixTitle: "Denim Shape Guide",
    matrix: [["Straight", "Safest long-term cut, easiest to hem"], ["Slim straight", "Clean with boots and flats, avoid calf cling"], ["Wide leg", "Needs higher rise and clean break"], ["Barrel", "Trend shape; best when the ankle is visible"]],
    symptoms: [["Waist gap", "Curve mismatch; tailor or choose contoured waistband."], ["Fly pulls", "Rise or thigh is too small."], ["Knee bags", "Fabric recovery is poor or leg is too tight."], ["Back pockets low", "Seat reads dragged down even when size is right."]],
    leaves: ["How jeans should fit women", "Best straight jeans for women", "Jeans for curvy women fit guide", "How to fix waist gap in jeans", "Wide leg jeans fit guide", "Petite denim fit guide", "Tall denim inseam guide", "When to hem jeans"],
  },
  "fit-outerwear": {
    number: "04",
    section: "Outerwear",
    hero: "fitOuterwear",
    title: "Outerwear,",
    italic: "with clearance.",
    deck: "Shoulder allowance, sleeve length, coat length, closure, belt placement, layering room, and the fit checks that keep outerwear from swallowing the outfit.",
    intro: "A coat has to fit the body and the clothes underneath. The best outerwear gives enough room for the layer it was bought for and enough shape to stay elegant once it is closed.",
    checks: [["Shoulder", "Can sit a touch wider than tailoring, but should not collapse."], ["Chest", "Closes over the intended layer without pulling."], ["Sleeve", "Covers the wrist and any jacket sleeve underneath."], ["Length", "Hits at a proportion point: high hip, mid-thigh, knee, or calf."], ["Belt", "Meets the natural waist or intentionally sits lower."]],
    matrixTitle: "Layer Clearance",
    matrix: [["Trench", "Shirt plus knit, belt defines waist"], ["Overcoat", "Blazer or heavy sweater underneath"], ["Leather jacket", "Exact shoulder, thinner layer only"], ["Puffer", "Room for air without ballooning through the torso"]],
    symptoms: [["Cannot close", "Wrong size, wrong layer, or coat cut too narrow."], ["Sleeves short", "The fastest way a coat looks borrowed."], ["Belt too high", "Petite proportion or torso mismatch."], ["Collar floats", "Neck and shoulder relationship is off."]],
    leaves: ["How a women's coat should fit", "Trench coat fit guide women", "Wool coat length guide", "Leather jacket fit women", "How to layer under a coat", "Petite coat fit guide", "Tall coat fit guide", "How coat sleeves should fit"],
  },
  "fit-shoes": {
    number: "05",
    section: "Shoes",
    hero: "fitShoes",
    title: "Shoes,",
    italic: "by symptom.",
    deck: "Toe room, width, heel slip, arch support, instep, break-in, bunion pressure, loafers, flats, boots, and heels that do not punish the foot.",
    intro: "Shoe fit is not a number. Length, width, toe shape, heel shape, and arch support each tell a different story. Pain is useful information, but it needs translation.",
    checks: [["Toe box", "Toes can spread without pressure on the nail or joint."], ["Width", "Ball of foot sits at the widest part of the shoe."], ["Heel", "Minor slip may settle; repeated lifting usually will not."], ["Instep", "No vamp pressure across the top of the foot."], ["Arch", "Support meets the foot instead of forcing it upward."]],
    matrixTitle: "Shoe Symptoms",
    matrix: [["Heel slip", "Heel shape or length issue"], ["Toe pressure", "Too short or toe box too low"], ["Side squeeze", "Width problem, not always length"], ["Arch ache", "Support mismatch or heel pitch"]],
    symptoms: [["Blisters", "Friction from heel slip, stiff counter, or wrong socks."], ["Numb toes", "Toe box or width is too tight."], ["Bunion pressure", "Toe shape is wrong; stretching has limits."], ["Ball pain in heels", "Pitch too steep or sole too thin."]],
    leaves: ["How women's shoes should fit", "Loafer fit guide women", "Ballet flat fit guide", "How heels should fit", "Shoe width explained women", "Best shoes for wide feet women", "Heel slip in loafers women", "How to break in leather shoes"],
  },
  "fit-alterations": {
    number: "06",
    section: "Alterations",
    hero: "fitAlterations",
    title: "Alterations,",
    italic: "worth the receipt.",
    deck: "Hems, waist tweaks, sleeve shortening, dart shaping, seat adjustments, coat sleeves, dress straps, and the fixes a tailor can actually make.",
    intro: "Alterations are not magic; they are strategy. Buy the hard parts right, then pay a tailor to finish the easy parts. The shoulder, rise, and fabric limit are the guardrails.",
    checks: [["Hem", "The highest-value alteration on trousers, jeans, dresses, and coats."], ["Waist", "Small adjustments work; rebuilding a waistband can ruin drape."], ["Sleeve", "Easy on shirts and coats unless buttons or vents complicate it."], ["Dart", "Useful for shirts and dresses when bust and waist need different sizes."], ["Shoulder", "Usually not worth it. Buy this right."]],
    matrixTitle: "Tailor Value Table",
    matrix: [["Trouser hem", "Low cost, high impact"], ["Waist nip", "Good when the change is small"], ["Sleeve shorten", "Worth it on coats and blazers"], ["Shoulder rebuild", "Expensive and rarely clean"]],
    symptoms: [["Almost perfect", "Alter it if the fabric and construction are good."], ["Cheap fabric", "Do not spend tailor money on a piece that will not last."], ["Bad shoulder", "Return it unless sentimental."], ["Long hem", "Fix before deciding the whole garment is wrong."]],
    leaves: ["Women's alterations guide", "What can a tailor fix for women", "How much alterations cost", "Trouser alterations women", "Dress alterations guide", "Blazer alterations women", "Jeans alterations women", "When not to tailor clothes"],
  },
  "fit-petite": {
    number: "07",
    section: "Petite",
    hero: "fitPetite",
    title: "Petite fit,",
    italic: "scaled not shrunken.",
    deck: "Rise, sleeve, shoulder, crop length, coat length, print scale, shoe line, and the proportion adjustments that make petite clothes look intentional.",
    intro: "Petite fit is not just shorter hems. It is vertical scale: where the waist sits, where the shoulder lands, where the coat ends, and how much visual space each garment takes.",
    checks: [["Shoulder", "A too-wide shoulder drags the whole outfit downward."], ["Rise", "High rise can lengthen legs, but only if it leaves torso room."], ["Sleeve", "Bracelet length can be intentional; swallowed hands are not."], ["Crop", "Cropped jackets should hit above the hip bone, not at the widest point."], ["Coat", "Knee length is usually easier than calf length unless the line is very clean."]],
    matrixTitle: "Petite Adjustment Map",
    matrix: [["Top", "Shorten body, narrow shoulder"], ["Trouser", "Hem and sometimes taper below knee"], ["Dress", "Raise waist point, check strap length"], ["Coat", "Shorten sleeve, watch belt height"]],
    symptoms: [["Everything looks oversized", "Scale and shoulder width are wrong, not your body."], ["Legs look shortened", "Rise, hem, or shoe contrast is cutting the line."], ["Coat overwhelms", "Length and sleeve volume are too heavy."], ["Dress waist sits low", "Regular sizing is dropping the intended waist."]],
    leaves: ["Petite fit guide for women", "Best petite trousers", "Petite jeans fit guide", "How petite coats should fit", "Petite blazer alterations", "How to dress petite proportions", "Petite dress fit guide", "Petite capsule wardrobe"],
  },
  "fit-tall": {
    number: "08",
    section: "Tall",
    hero: "fitTall",
    title: "Tall fit,",
    italic: "with enough line.",
    deck: "Sleeve length, inseam, rise, torso length, coat length, dress waist placement, tall sizing, and the adjustments that stop clothes from looking borrowed.",
    intro: "Tall fit is about enough fabric in the right places. The sleeve, rise, inseam, and waist placement need to acknowledge height instead of simply sizing everything wider.",
    checks: [["Sleeve", "Full wrist coverage without pulling across the shoulder."], ["Inseam", "Long enough for chosen break, not just barely full-length."], ["Rise", "A longer rise often solves both comfort and proportion."], ["Torso", "Shirts and dresses need body length, not just larger size."], ["Coat", "Use length as an advantage: knee and calf coats can look deliberate."]],
    matrixTitle: "Tall Adjustment Map",
    matrix: [["Shirt", "Longer body and sleeve"], ["Trouser", "Long inseam plus rise check"], ["Dress", "Waist point must hit the body, not ribs"], ["Coat", "Sleeve and belt placement matter most"]],
    symptoms: [["Sleeves ride up", "Arm length or shoulder width is underbuilt."], ["Cropped by accident", "Inseam is too short for the intended shoe."], ["Waist too high", "Regular dress block is too short through torso."], ["Sizing up looks sloppy", "Width increased, length did not."]],
    leaves: ["Tall fit guide for women", "Best tall trousers for women", "Tall jeans inseam guide", "Tall blazer fit guide", "How coat sleeves should fit tall women", "Tall dress fit guide", "Where to buy tall women's clothes", "Tall capsule wardrobe"],
  },
};

const WBFL3_PAGE_ALIASES = {
  outerwear: "build-outerwear",
  footwear: "build-footwear",
  accessories: "build-accessories",
  handbags: "build-handbags",
  "work-wardrobe": "build-work",
  work: "build-work",
  "casual-wardrobe": "build-casual",
  casual: "build-casual",
  "capsule-wardrobe": "build-capsule",
  capsule: "build-capsule",
  shirts: "fit-shirts",
  trousers: "fit-trousers",
  denim: "fit-denim",
  shoes: "fit-shoes",
  alterations: "fit-alterations",
  petite: "fit-petite",
  tall: "fit-tall",
};

function WBFHero({ data, mode }) {
  return (
    <section className={`wbfl3-hero ${mode}`} data-screen-label="01 Hero">
      <div className="wbfl3-bg" style={{ backgroundImage: `url(${WBFL3_IMAGES[data.hero]})` }} />
      <div className="frame">
        <div className="wbfl3-crumb">
          <a href="/en/women/">Women</a><span>/</span>
          <a href={mode === "fit" ? "/en/women/fit/" : "/en/women/build/"}>{mode === "fit" ? "Fit" : "Build"}</a><span>/</span>
          <span>{data.section}</span>
        </div>
        <span className="wbfl3-kicker">Women / {mode === "fit" ? "Fit" : "Build"} / {data.number}</span>
        <h1>{data.title} <em>{data.italic}</em></h1>
        <p>{data.deck}</p>
      </div>
    </section>
  );
}

function WBFIntro({ data, mode }) {
  return (
    <section className="section wbfl3-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>{mode === "fit" ? "Fit" : "Build"} / {data.number}</b></div>
          <div><span>Section</span><b>{data.section}</b></div>
          <div><span>Updated</span><b>April 2026</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">{data.intro}</p>
          <p>{mode === "fit" ? "Use this as a mirror checklist before you buy, tailor, or return. The article links below become the deeper diagnostic layer." : "Use this as a shopping and rotation map. The pieces below are not decorative slots; they are the garments most likely to decide whether the wardrobe works."}</p>
        </div>
      </div>
    </section>
  );
}

function WBuildSystem({ data }) {
  return (
    <section id="system" className="wbfl3-sec" data-screen-label="03 Wardrobe system">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">01</div><div><span>Wardrobe System</span><h2>The pieces that <em>do the work.</em></h2></div><p>Each row is a live route and a practical buying brief.</p></div>
        <div className="wbfl3-system">
          {data.system.map((item, i) => (
            <a href={item[2]} key={item[0]}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
              <span className="arr">Read</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WBuildShop({ data }) {
  return (
    <section id="shop" className="wbfl3-sec wbfl3-shop-sec" data-screen-label="04 Shop rules">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">02</div><div><span>Shop Rules</span><h2>Buy by <em>constraint.</em></h2></div><p>These are the filters that keep the page from becoming a wishlist.</p></div>
        <div className="wbfl3-shop">
          {data.shop.map((item) => <article key={item[0]}><span>{item[0]}</span><p>{item[1]}</p></article>)}
        </div>
      </div>
    </section>
  );
}

function WFitIndex() {
  return (
    <React.Fragment>
      <WBFHero data={{ section: "Fit", number: "00", hero: "fitHero", title: "Fit,", italic: "the diagnostic lane.", deck: "Shirts, trousers, denim, outerwear, shoes, alterations, petite, and tall fit checks for women who want the garment to work before the outfit does.", intro: "Fit is the chapter that turns taste into clothes that actually behave. Read it by garment, symptom, or body proportion." }} mode="fit" />
      <section className="section wbfl3-intro" data-screen-label="02 Intro">
        <div className="frame">
          <aside>
            <div><span>Lane</span><b>Women</b></div>
            <div><span>Chapter</span><b>Fit</b></div>
            <div><span>Sections</span><b>8 diagnostics</b></div>
            <div><span>Updated</span><b>April 2026</b></div>
          </aside>
          <div className="body">
            <p className="standfirst">Fit pages are not about rules for bodies. They are about reading garments: where fabric pulls, where hems land, where proportions need length, ease, or tailoring.</p>
            <p>Start with the garment that fails most often, then move to alterations if the piece is close. Petite and tall sections translate the same checks into scale and proportion.</p>
          </div>
        </div>
      </section>
      <section className="wbfl3-sec" data-screen-label="03 Fit sections">
        <div className="frame">
          <div className="wbfl3-head"><div className="num">01</div><div><span>Fit Index</span><h2>Choose the <em>diagnostic.</em></h2></div><p>Eight L3 hubs with visible routes for article expansion.</p></div>
          <div className="wbfl3-system fit-index">
            {WBFL3_FIT_SECTIONS.map((item, i) => (
              <a href={item[2]} key={item[0]}><span className="n">{String(i + 1).padStart(2, "0")}</span><h3>{item[1]}</h3><p>{item[3]}</p><span className="arr">Open</span></a>
            ))}
          </div>
        </div>
      </section>
      <WBFCross mode="fit" />
    </React.Fragment>
  );
}

function WFitChecks({ data }) {
  return (
    <section id="checks" className="wbfl3-sec" data-screen-label="03 Fit checks">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">01</div><div><span>Mirror Check</span><h2>The points that <em>decide fit.</em></h2></div><p>Each checkpoint is a future article route and a practical test now.</p></div>
        <div className="wbfl3-system diagnostics">
          {data.checks.map((item, i) => (
            <a href={`/en/women/fit/${wbfl3Slug(data.section)}/${wbfl3Slug(item[0])}/`} key={item[0]}><span className="n">{String(i + 1).padStart(2, "0")}</span><h3>{item[0]}</h3><p>{item[1]}</p><span className="arr">Check</span></a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFitMatrix({ data }) {
  return (
    <section id="matrix" className="wbfl3-sec wbfl3-shop-sec" data-screen-label="04 Fit matrix">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">02</div><div><span>{data.matrixTitle}</span><h2>Read the garment <em>like evidence.</em></h2></div><p>Fit search starts with symptoms; this gives each symptom a name.</p></div>
        <div className="wbfl3-matrix">
          {data.matrix.map((item) => <a href={`/en/women/fit/${wbfl3Slug(data.section)}/${wbfl3Slug(item[0])}/`} key={item[0]}><span>{item[0]}</span><b>{item[1]}</b></a>)}
        </div>
      </div>
    </section>
  );
}

function WFitSymptoms({ data }) {
  return (
    <section id="symptoms" className="wbfl3-sec" data-screen-label="05 Symptoms">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">03</div><div><span>Diagnosis</span><h2>What the bad fit <em>is telling you.</em></h2></div><p>Concrete searches, translated into action.</p></div>
        <div className="wbfl3-shop symptoms">
          {data.symptoms.map((item, i) => <article key={item[0]}><span>Symptom {String(i + 1).padStart(2, "0")}</span><h3>{item[0]}</h3><p>{item[1]}</p></article>)}
        </div>
      </div>
    </section>
  );
}

function WBFLeafList({ data, mode }) {
  const base = mode === "fit" ? `/en/women/fit/${wbfl3Slug(data.section)}/` : data.href;
  return (
    <section id="guides" className="wbfl3-sec" data-screen-label="06 Article index">
      <div className="frame">
        <div className="wbfl3-head"><div className="num">{mode === "fit" ? "04" : "03"}</div><div><span>Article Slots</span><h2>Route-ready <em>leaf guides.</em></h2></div><p>Visible hrefs for the next article layer, written as search-useful guide titles.</p></div>
        <div className="wbfl3-leaves">
          {data.leaves.map((title, i) => (
            <a href={`${base}${wbfl3Slug(title)}/`} key={title}><span className="n">{String(i + 1).padStart(2, "0")}</span><span className="t">{title}</span><span className="read">{5 + (i % 5)} min</span><span className="arr">-&gt;</span></a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WBFCross({ mode, data }) {
  const items = mode === "fit" ? [
    ["/en/women/fit/trousers/", "Fit / 02", "Trousers", "The fastest place fit shows up."],
    ["/en/women/fit/alterations/", "Fit / 06", "Alterations", "What a tailor can save."],
    ["/en/women/build/capsule-wardrobe/", "Build / 08", "Capsule", "Make proportion repeatable."],
    ["/en/women/build/", "Build", "Wardrobe Build", "The pieces before the diagnosis."],
  ] : [
    ["/en/women/build/basics/", "Build / 01", "Basics", "The foundation chapter."],
    ["/en/women/fit/", "Fit", "Fit", "Diagnose the pieces after buying."],
    ["/en/women/wear/", "Wear", "Wear", "Put the system into outfits."],
    ["/en/women/build/", "Up a level", "Build", "All wardrobe build chapters."],
  ];
  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)" }}>{mode === "fit" ? "fitting." : "building."}</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 }}>{data ? data.section : "Women"}<br />related paths</div>
        </div>
        <div className="cross-lanes">
          {items.map((item, i) => <a href={item[0]} key={item[0]} className={i === 3 ? "bridge-card" : ""}><span className="n">{item[1]}</span><h6>{item[2]}</h6><p>{item[3]}</p><span className="arr">Open</span></a>)}
        </div>
      </div>
    </section>
  );
}

function WomenBuildFitL3Page({ page }) {
  const key = WBFL3_PAGE_ALIASES[page] || page;
  if (key === "fit") return <WFitIndex />;
  const buildData = WBFL3_BUILD[key];
  if (buildData) {
    return (
      <React.Fragment>
        <WBFHero data={buildData} mode="build" />
        <nav className="wbfl3-nav"><div className="frame"><span>{buildData.section} Index</span><a href="#system">System</a><a href="#shop">Shop rules</a><a href="#guides">Guides</a></div></nav>
        <WBFIntro data={buildData} mode="build" />
        <WBuildSystem data={buildData} />
        <WBuildShop data={buildData} />
        <WBFLeafList data={buildData} mode="build" />
        <WBFCross mode="build" data={buildData} />
      </React.Fragment>
    );
  }
  const fitData = WBFL3_FIT[key];
  return (
    <React.Fragment>
      <WBFHero data={fitData} mode="fit" />
      <nav className="wbfl3-nav"><div className="frame"><span>{fitData.section} Index</span><a href="#checks">Checks</a><a href="#matrix">Matrix</a><a href="#symptoms">Symptoms</a><a href="#guides">Guides</a></div></nav>
      <WBFIntro data={fitData} mode="fit" />
      <WFitChecks data={fitData} />
      <WFitMatrix data={fitData} />
      <WFitSymptoms data={fitData} />
      <WBFLeafList data={fitData} mode="fit" />
      <WBFCross mode="fit" data={fitData} />
    </React.Fragment>
  );
}

window.WomenBuildFitL3Page = WomenBuildFitL3Page;
