/* global React */

const WF_IMG = {
  hero: "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?w=2400&q=80",
  skin: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=1300&q=80",
  lip: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?w=1200&q=80",
  nails: "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1200&q=80",
  fragrance: "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=1200&q=80",
  hair: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1300&q=80",
  jewelry: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=1200&q=80",
  bags: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=1200&q=80",
  shoes: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=1200&q=80",
  bridge: "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=1500&q=80",
};

const WF_NAV = [
  { n: "01", id: "skin", nm: "Skin + Outfit", href: "/en/women/finish/skin-outfit-pairings/" },
  { n: "02", id: "lip", nm: "Lip + Look", href: "/en/women/finish/lip-and-look/" },
  { n: "03", id: "nails", nm: "Nails + Palette", href: "/en/women/finish/nails-and-palette/" },
  { n: "04", id: "fragrance", nm: "Fragrance", href: "/en/women/finish/fragrance-by-mood/" },
  { n: "05", id: "hair", nm: "Hair + Texture", href: "/en/women/finish/hair-and-texture/" },
  { n: "06", id: "jewelry", nm: "Jewelry + Metal", href: "/en/women/finish/jewelry-and-metal/" },
  { n: "07", id: "bags", nm: "Bags + Shoes", href: "/en/women/finish/bags-and-shoes/" },
  { n: "08", id: "bridges", nm: "Beauty Bridges", href: "/en/women/finish/beauty-bridges/" },
];

const WF_LEADS = [
  {
    img: "skin",
    n: "01",
    title: "Skin and outfit pairings",
    italic: "by fabric and color.",
    desc: "How satin, wool, denim, linen, black, cream, and red ask for different skin finishes.",
    href: "/en/women/finish/skin-outfit-pairings/",
  },
  {
    img: "lip",
    n: "02",
    title: "Lip and look",
    italic: "without costume.",
    desc: "Red with tailoring, balm with denim, berry with knitwear, nude with shine.",
    href: "/en/women/finish/lip-and-look/",
  },
  {
    img: "nails",
    n: "03",
    title: "Nails and palette",
    italic: "as a color decision.",
    desc: "The manicure as a small swatch: sheer, oxblood, black, milk, chrome, or nothing.",
    href: "/en/women/finish/nails-and-palette/",
  },
  {
    img: "fragrance",
    n: "04",
    title: "Fragrance by mood",
    italic: "not by season alone.",
    desc: "Clean, warm, green, smoky, floral, and skin scents matched to outfit intent.",
    href: "/en/women/finish/fragrance-by-mood/",
  },
];

const WF_PAIRINGS = [
  ["Black tailoring", "Satin skin, red or bare lip, one cold metal", "/en/women/finish/skin-outfit-pairings/black-tailoring-makeup/"],
  ["Cream knitwear", "Soft matte skin, rose-brown lip, warm gold", "/en/women/finish/skin-outfit-pairings/cream-knitwear-makeup/"],
  ["Blue denim", "Fresh skin, balm lip, silver or brown leather", "/en/women/finish/skin-outfit-pairings/denim-beauty-finish/"],
  ["Silk dress", "Gloss at cheek or lip, small earrings, quiet bag", "/en/women/finish/skin-outfit-pairings/silk-dress-beauty/"],
  ["Linen separates", "Sheer skin, clear nail, citrus or green scent", "/en/women/finish/skin-outfit-pairings/linen-outfit-finish/"],
  ["Oxblood accent", "Low shine skin, brown-red lip, minimal nail", "/en/women/finish/skin-outfit-pairings/oxblood-outfit-makeup/"],
];

const WF_MOODS = [
  {
    label: "Clean",
    title: "White shirt morning",
    desc: "Musk, iris, tea, and cotton notes for poplin, trench, denim, and office light.",
    href: "/en/women/finish/fragrance-by-mood/clean-white-shirt-scents/",
  },
  {
    label: "Warm",
    title: "Knitwear close",
    desc: "Amber, sandalwood, vanilla without sugar, and skin scents for cashmere and wool.",
    href: "/en/women/finish/fragrance-by-mood/warm-knitwear-scents/",
  },
  {
    label: "Green",
    title: "Linen in heat",
    desc: "Fig leaf, vetiver, basil, citrus rind, and dry herbs for summer tailoring.",
    href: "/en/women/finish/fragrance-by-mood/green-linen-scents/",
  },
  {
    label: "Smoky",
    title: "After dark",
    desc: "Incense, leather, pepper, tobacco leaf, and rosewood for black, satin, and metal.",
    href: "/en/women/finish/fragrance-by-mood/smoky-evening-scents/",
  },
];

const WF_TEXTURE = [
  {
    id: "hair",
    img: "hair",
    n: "05",
    eyebrow: "Hair and texture",
    title: "The hair changes the fabric.",
    desc: "A slick bun sharpens a blazer. Air-dried waves soften leather. A center part makes denim cleaner. Finish is the relationship between texture on the body and texture around the face.",
    href: "/en/women/finish/hair-and-texture/",
    links: [
      ["Slick bun with a blazer", "/en/women/finish/hair-and-texture/slick-bun-blazer/"],
      ["Air-dried waves with tailoring", "/en/women/finish/hair-and-texture/waves-with-tailoring/"],
      ["Natural texture with eveningwear", "/en/women/finish/hair-and-texture/natural-texture-eveningwear/"],
      ["Ponytail height by neckline", "/en/women/finish/hair-and-texture/ponytail-height-neckline/"],
    ],
  },
  {
    id: "jewelry",
    img: "jewelry",
    n: "06",
    eyebrow: "Jewelry and metal",
    title: "Metal is color, not garnish.",
    desc: "Gold warms cream and brown. Silver cuts through black, grey, and denim. Mixed metal works when the outfit already has contrast. The watch, hoop, ring, and clasp should agree.",
    href: "/en/women/finish/jewelry-and-metal/",
    links: [
      ["Gold vs silver with outfit colors", "/en/women/finish/jewelry-and-metal/gold-vs-silver-outfit-colors/"],
      ["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/"],
    ],
  },
];

const WF_CARRY = [
  {
    n: "07A",
    img: "bags",
    title: "Bag as finish",
    desc: "Soft tote for slouch, structured shoulder bag for polish, clutch for evening, crossbody for motion.",
    href: "/en/women/finish/bags-and-shoes/",
  },
  {
    n: "07B",
    img: "shoes",
    title: "Shoe as edit",
    desc: "The same outfit changes meaning with loafer, ballet flat, sandal, boot, slingback, or sneaker.",
    href: "/en/women/finish/bags-and-shoes/shoe-choice-changes-outfit/",
  },
  {
    n: "08",
    img: "bridge",
    title: "Beauty Edition bridges",
    desc: "Makeup, hair, nail, and scent guides that connect directly to the outfit lanes.",
    href: "/en/women/finish/beauty-bridges/",
  },
];

const WF_GUIDES = [
  ["Dewy skin with wool trousers", "Skin + outfit", "/en/women/finish/skin-outfit-pairings/dewy-skin-wool-trousers/"],
  ["Red lip with a black dress", "Lip + look", "/en/women/finish/lip-and-look/red-lip-black-dress/"],
  ["Brown lip with cream knitwear", "Lip + look", "/en/women/finish/lip-and-look/brown-lip-cream-knitwear/"],
  ["Oxblood nails with navy and camel", "Nails + palette", "/en/women/finish/nails-and-palette/oxblood-nails-navy-camel/"],
  ["Sheer manicure for office outfits", "Nails + palette", "/en/women/finish/nails-and-palette/sheer-manicure-office-outfits/"],
  ["Clean fragrance for business casual", "Fragrance", "/en/women/finish/fragrance-by-mood/business-casual-clean-scents/"],
  ["Slick hair with a column outfit", "Hair + texture", "/en/women/finish/hair-and-texture/slick-hair-column-outfit/"],
  ["Silver jewelry with black denim", "Jewelry + metal", "/en/women/finish/jewelry-and-metal/silver-jewelry-black-denim/"],
  ["Black shoes with a brown bag", "Bags + shoes", "/en/women/finish/bags-and-shoes/black-shoes-brown-bag/"],
  ["Evening makeup without heavy eye", "Beauty bridges", "/en/women/finish/beauty-bridges/evening-makeup-without-heavy-eye/"],
  ["Weekend hair that still looks done", "Beauty bridges", "/en/women/finish/beauty-bridges/weekend-hair-looks-done/"],
  ["Lip, nail, and bag color map", "Beauty bridges", "/en/women/finish/beauty-bridges/lip-nail-bag-color-map/"],
];

const WF_FAQ = [
  ["How do you match makeup to an outfit?", "Start with the outfit's dominant material and color. Tailoring can hold a sharper lip or slicker hair, while linen, denim, and soft knits usually look better with skin, nail, and hair that feel less controlled."],
  ["Should nails match clothes?", "They do not need to match, but they should relate. Sheer nails disappear cleanly, oxblood adds depth to navy and camel, black sharpens evening, and milky shades soften saturated color."],
  ["How do you choose gold or silver jewelry?", "Use metal as a color temperature. Gold warms cream, brown, camel, olive, and oxblood. Silver cools black, grey, white, denim, and navy. Mix metals when another contrast in the outfit already makes it feel intentional."],
  ["What makes an outfit look finished?", "One visible decision at the edge: a lip, nail, metal, hair shape, scent mood, shoe, or bag. Finished does not mean more accessories. It means the last detail agrees with the outfit."],
];

function WFHero() {
  return (
    <section className="wf-hero" data-screen-label="01 Hero">
      <div className="wf-hero-bg" style={{ backgroundImage: `url(${WF_IMG.hero})` }} />
      <div className="frame">
        <div>
          <div className="crumb">
            <a href="/en/women/">Women</a>
            <span className="sep">/</span>
            <span className="here">Finish</span>
          </div>
          <span className="wf-kicker">Lane 04 - The last two inches</span>
        </div>
        <div className="wf-hero-copy">
          <h1>Finish<span>the punctuation.</span></h1>
          <p>
            Skin, lip, nail, scent, hair, jewelry, bag, and shoe choices that make
            an outfit read deliberate before anyone knows why.
          </p>
        </div>
        <div className="hero-stats wf-stats">
          <div className="stat"><div className="n"><span className="gold">08</span></div><div className="l">L3 sections</div></div>
          <div className="stat"><div className="n">64</div><div className="l">Guide slots</div></div>
          <div className="stat"><div className="n">6</div><div className="l">Finish signals</div></div>
          <div className="stat"><div className="n"><span className="gold">04</span></div><div className="l">Women lane</div></div>
        </div>
      </div>
    </section>
  );
}

function WFNav() {
  const [active, setActive] = React.useState("skin");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = WF_NAV[0].id;
      for (const item of WF_NAV) {
        const el = document.getElementById(item.id);
        if (el && el.getBoundingClientRect().top < 190) cur = item.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className="wf-nav">
      <div className="frame">
        <span className="wf-nav-label">The Finish Index</span>
        <div className="wf-nav-links">
          {WF_NAV.map((item) => (
            <a href={item.href} className={active === item.id ? "on" : ""} key={item.id}>
              <span>{item.n}</span>{item.nm}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

function WFIntro() {
  return (
    <section className="section wf-intro" data-screen-label="02 Intro">
      <div className="frame">
        <div className="wf-ledger">
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>Finish / 04</b></div>
          <div><span>Use</span><b>Menu hub</b></div>
          <div><span>Depth</span><b>L3 to leaves</b></div>
          <div><span>Bridge</span><b>Beauty Edition</b></div>
        </div>
        <div className="wf-intro-body">
          <p className="wf-standfirst">
            Finish is the page for the decisions that happen after the outfit is chosen: the lip against the coat, the nail against the bag, the scent against the room.
          </p>
          <p>
            This hub treats beauty and accessories as styling systems, not afterthoughts. Each section below opens into a future L3 page with article paths ready for the next publishing pass.
          </p>
          <p>
            The rule is restraint with evidence. One or two finish signals should make the outfit clearer: texture, color temperature, shine, scent mood, or the final shape at the hand and foot.
          </p>
        </div>
      </div>
    </section>
  );
}

function WFLead() {
  return (
    <section className="wf-sec" data-screen-label="03 Primary menu">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">01</div>
          <div><span>Primary L3s</span><h2>The close-up <em>decisions.</em></h2></div>
          <p>The first four Finish pages carry the beauty logic: skin, lip, nail, and fragrance as extensions of fabric, color, occasion, and mood.</p>
        </div>
        <div className="wf-lead-grid">
          {WF_LEADS.map((card) => (
            <a className="wf-lead-card" href={card.href} key={card.title}>
              <div className="wf-card-img" style={{ backgroundImage: `url(${WF_IMG[card.img]})` }}>
                <span>No. {card.n}</span>
              </div>
              <h3>{card.title} <em>{card.italic}</em></h3>
              <p>{card.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFPairings() {
  return (
    <section id="skin" className="wf-sec wf-pairings" data-screen-label="04 Pairings">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">02</div>
          <div><span>Skin + Lip + Nail</span><h2>Match the finish to <em>the fabric.</em></h2></div>
          <p>Search-friendly pairing logic for the questions women ask when the outfit is right but the face, nail, and metal still feel separate.</p>
        </div>
        <div className="wf-pair-layout">
          <a id="lip" className="wf-pair-photo" href="/en/women/finish/lip-and-look/" style={{ backgroundImage: `url(${WF_IMG.lip})` }}>
            <span>Lip and look</span>
            <h3>One color at the mouth can carry the whole outfit.</h3>
          </a>
          <div id="nails" className="wf-pair-list">
            {WF_PAIRINGS.map((row, i) => (
              <a href={row[2]} key={row[0]}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{row[0]}</h3>
                <p>{row[1]}</p>
                <b>Draft</b>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WFMood() {
  return (
    <section id="fragrance" className="wf-sec" data-screen-label="05 Fragrance">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">03</div>
          <div><span>Fragrance by mood</span><h2>Scent should know <em>where you are going.</em></h2></div>
          <p>Fragrance belongs beside clothes because it changes the impression of clean, warm, formal, casual, daylight, and after dark.</p>
        </div>
        <div className="wf-mood-grid">
          {WF_MOODS.map((mood, i) => (
            <a href={mood.href} key={mood.title}>
              <span>{String(i + 1).padStart(2, "0")} / {mood.label}</span>
              <h3>{mood.title}</h3>
              <p>{mood.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFTexture() {
  return (
    <section className="wf-sec wf-texture" data-screen-label="06 Hair and jewelry">
      <div className="frame">
        <div className="wf-texture-grid">
          {WF_TEXTURE.map((item) => (
            <article id={item.id} className="wf-texture-card" key={item.id}>
              <a className="wf-texture-img" href={item.href} style={{ backgroundImage: `url(${WF_IMG[item.img]})` }}>
                <span>No. {item.n}</span>
              </a>
              <div className="wf-texture-copy">
                <span>{item.eyebrow}</span>
                <h2>{item.title}</h2>
                <p>{item.desc}</p>
                <div className="wf-mini-links">
                  {item.links.map((link) => (
                    <a href={link[1]} key={link[0]}>{link[0]}</a>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFCarry() {
  return (
    <section id="bags" className="wf-sec wf-carry" data-screen-label="07 Carry and bridges">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">04</div>
          <div><span>Bags, Shoes, Bridges</span><h2>The outfit ends at <em>the hand and foot.</em></h2></div>
          <p>Bags and shoes are not separate from beauty. They set the level of polish that the lip, hair, nail, jewelry, and scent must answer.</p>
        </div>
        <div className="wf-carry-grid">
          {WF_CARRY.map((item, i) => (
            <a href={item.href} key={item.title}>
              <div className="wf-carry-img" style={{ backgroundImage: `url(${WF_IMG[item.img]})` }} />
              <span>No. {item.n}</span>
              <h3>{item.title}</h3>
              <p>{item.desc}</p>
            </a>
          ))}
        </div>
        <a id="bridges" className="wf-bridge-band" href="/en/women/finish/beauty-bridges/">
          <span>Beauty Edition bridges</span>
          <h3>When the outfit is the brief for makeup, hair, nail, and scent.</h3>
          <p>Crossovers for date night makeup, office fragrance, weekend hair, evening skin, and color maps that connect Beauty Edition back to Build, Wear, and Style.</p>
        </a>
      </div>
    </section>
  );
}

function WFGuideIndex() {
  return (
    <section className="wf-sec" data-screen-label="08 Article inventory">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">05</div>
          <div><span>Article Inventory</span><h2>Future leaves, <em>already placed.</em></h2></div>
          <p>Sample article links under each L3 so the static generator has useful placeholder routes for Finish later.</p>
        </div>
        <div className="wf-guide-list">
          {WF_GUIDES.map((guide, i) => (
            <a href={guide[2]} key={guide[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{guide[0]}</h3>
              <small>{guide[1]}</small>
              <b>Draft</b>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WFFAQ() {
  return (
    <section className="wf-sec" data-screen-label="09 FAQ">
      <div className="frame">
        <div className="wf-head">
          <div className="wf-num">06</div>
          <div><span>SEO Questions</span><h2>Finish questions <em>women actually ask.</em></h2></div>
          <p>Concise answers for outfit finishing, beauty coordination, nails, metals, and the difference between styled and overdone.</p>
        </div>
        <div className="wf-faq">
          {WF_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 WFCross() {
  const cards = [
    ["/en/women/build/", "Lane 01", "Build", "The closet pieces before the finish."],
    ["/en/women/wear/", "Lane 02", "Wear", "Occasions, outfit formulas, and weather."],
    ["/en/women/style/", "Lane 03", "Style", "Taste, trends, pattern, and color."],
    ["/en/women/seasonal/", "Lane 05", "Seasonal", "Drops keyed to the weather and calendar."],
  ];
  return (
    <section className="section section-rule" data-screen-label="10 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 07</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>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 }}>
            Sister lanes<br />inside women
          </div>
        </div>
        <div className="cross-lanes wf-cross">
          {cards.map((card) => (
            <a href={card[0]} key={card[1]}>
              <span className="n">{card[1]}</span>
              <h6>{card[2]}</h6>
              <p>{card[3]}</p>
              <span className="arr">Open</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  WFHero, WFNav, WFIntro, WFLead, WFPairings, WFMood,
  WFTexture, WFCarry, WFGuideIndex, WFFAQ, WFCross,
});