/* global React */

const WSE_IMG = {
  hero: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=2400&q=80",
  spring: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=1400&q=80",
  summer: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1400&q=80",
  fall: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1400&q=80",
  winter: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=1400&q=80",
  transitional: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1400&q=80",
  texture: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1200&q=80",
};

const WSE_NAV = [
  { n: "01", id: "spring", nm: "Spring", href: "/en/women/seasonal/spring/" },
  { n: "02", id: "summer", nm: "Summer", href: "/en/women/seasonal/summer/" },
  { n: "03", id: "fall", nm: "Fall", href: "/en/women/seasonal/fall/" },
  { n: "04", id: "winter", nm: "Winter", href: "/en/women/seasonal/winter/" },
  { n: "05", id: "transitional", nm: "Transitional", href: "/en/women/seasonal/transitional/" },
];

const WSE_SEASONS = [
  {
    id: "spring",
    n: "01",
    name: "Spring",
    italic: "reset",
    href: "/en/women/seasonal/spring/",
    img: "spring",
    range: "45 F to 68 F",
    guides: "8 guide slots",
    lede: "Light layers, revived color, and the first days when a trench can carry the whole outfit.",
    rules: ["Trench before blazer when rain is possible", "Cotton poplin, fine knit, mid-weight denim", "Shoes that can survive wet pavement", "One color lift: butter, sky, tomato, or ivory"],
    articles: [
      ["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/"],
    ],
  },
  {
    id: "summer",
    n: "02",
    name: "Summer",
    italic: "heat",
    href: "/en/women/seasonal/summer/",
    img: "summer",
    range: "75 F and up",
    guides: "9 guide slots",
    lede: "Fabric, air, and shape. Heat dressing fails when loose turns into limp.",
    rules: ["Linen, cotton voile, silk, open weave", "Skin where it cools, structure where it frames", "Flat leather sandals before plastic slides", "White, black, tobacco, citrus, metal"],
    articles: [
      ["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/"],
    ],
  },
  {
    id: "fall",
    n: "03",
    name: "Fall",
    italic: "layering",
    href: "/en/women/seasonal/fall/",
    img: "fall",
    range: "50 F to 65 F",
    guides: "8 guide slots",
    lede: "The richest season for outfit math: jacket, knit, trouser, boot, and one texture doing the talking.",
    rules: ["Suede, wool, denim, leather, brushed cotton", "One warm color against one clean neutral", "Boot shaft matters more than boot trend", "Outer layer should finish the shape, not hide it"],
    articles: [
      ["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/"],
    ],
  },
  {
    id: "winter",
    n: "04",
    name: "Winter",
    italic: "armor",
    href: "/en/women/seasonal/winter/",
    img: "winter",
    range: "45 F and down",
    guides: "9 guide slots",
    lede: "Warmth with a line. The whole project is keeping shape when every layer wants to erase it.",
    rules: ["Base layer, insulating layer, coat, boot, scarf", "Long coat beats short puff when polish matters", "Black is useful, texture keeps it alive", "One visible vertical line: coat edge, scarf drop, trouser crease"],
    articles: [
      ["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/"],
    ],
  },
];

const WSE_TRANSITION = {
  id: "transitional",
  n: "05",
  name: "Transitional",
  italic: "weather",
  href: "/en/women/seasonal/transitional/",
  img: "transitional",
  range: "The in-between",
  guides: "6 guide slots",
  lede: "For the weeks that are neither season nor forecast: shoulder weather, office chill, sun at noon, rain by six.",
  articles: [
    ["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/"],
  ],
};

function WSEHero() {
  return (
    <section className="wse-hero" data-screen-label="01 Hero">
      <div className="wse-hero-bg" style={{ backgroundImage: `url(${WSE_IMG.hero})` }} />
      <div className="frame">
        <div>
          <div className="crumb">
            <a href="/en/women/">Women</a>
            <span className="sep">/</span>
            <span className="here">Seasonal</span>
          </div>
          <span className="wse-kicker">Lane 05 - Weather edits</span>
        </div>
        <div className="wse-hero-copy">
          <h1>Seasonal,<span>the weather decides.</span></h1>
          <p>
            Spring resets, summer heat, fall layering, winter armor, and the awkward weeks in between.
            A menu hub for dressing by conditions, not by fantasy.
          </p>
        </div>
        <div className="hero-stats wse-stats">
          <div className="stat"><div className="n"><span className="gold">05</span></div><div className="l">L3 sections</div></div>
          <div className="stat"><div className="n">40</div><div className="l">Guide slots</div></div>
          <div className="stat"><div className="n">4</div><div className="l">Weather bands</div></div>
          <div className="stat"><div className="n"><span className="gold">L2</span></div><div className="l">Menu hub</div></div>
        </div>
      </div>
    </section>
  );
}

function WSENav() {
  const [active, setActive] = React.useState("spring");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = WSE_NAV[0].id;
      for (const item of WSE_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="wse-nav">
      <div className="frame">
        <span className="label">The Seasonal Index</span>
        <div className="links">
          {WSE_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 WSEIntro() {
  return (
    <section className="section wse-intro" data-screen-label="02 Intro">
      <div className="frame">
        <div className="wse-ledger">
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>Seasonal / 05</b></div>
          <div><span>Use</span><b>L2 menu hub</b></div>
          <div><span>Scope</span><b>Weather to wardrobe</b></div>
          <div><span>Status</span><b>Sample links</b></div>
        </div>
        <div className="wse-intro-body">
          <p className="standfirst">
            Seasonal dressing is not a mood board. It is a negotiation between temperature, fabric, shoes, and how much shape survives the forecast.
          </p>
          <p>
            This hub points into five future L3 pages: spring, summer, fall, winter, and transitional dressing. Each section below carries route links and sample article paths so the next generator pass can create placeholders cleanly.
          </p>
          <p>
            The editorial promise is specific: what to wear when the calendar says one thing, the pavement says another, and the outfit still needs to look intentional.
          </p>
        </div>
      </div>
    </section>
  );
}

function WSESeasonCard({ item }) {
  return (
    <section id={item.id} className="wse-season" data-screen-label={`${item.n} ${item.name}`}>
      <a className="wse-season-photo" href={item.href} style={{ backgroundImage: `url(${WSE_IMG[item.img]})` }}>
        <span>{item.range}</span>
      </a>
      <div className="wse-season-copy">
        <div className="wse-season-top">
          <span>No. {item.n}</span>
          <small>{item.guides}</small>
        </div>
        <h2>{item.name} <em>{item.italic}.</em></h2>
        <p>{item.lede}</p>
        <ul>
          {item.rules.map((rule) => <li key={rule}>{rule}</li>)}
        </ul>
        <div className="wse-mini-index">
          {item.articles.map((article, i) => (
            <a href={article[1]} key={article[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              {article[0]}
            </a>
          ))}
        </div>
        <a className="wse-open" href={item.href}>Open {item.name}</a>
      </div>
    </section>
  );
}

function WSESeasonEdit() {
  return (
    <section className="wse-sec" data-screen-label="03 Season edits">
      <div className="frame">
        <div className="wse-head">
          <div className="num">01</div>
          <div><span>Four true seasons</span><h2>The closet changes <em>by condition.</em></h2></div>
          <p>Each season gets an L3 landing page, but the hub shows the editorial logic first: fabric, layer, shoe, color, and failure point.</p>
        </div>
        <div className="wse-season-stack">
          {WSE_SEASONS.map((item) => <WSESeasonCard item={item} key={item.id} />)}
        </div>
      </div>
    </section>
  );
}

function WSETransitional() {
  const rows = [
    ["Rain by evening", "Trench, knit tee, straight denim, water-ready loafer"],
    ["Cold morning, warm afternoon", "Fine knit, shirt, light jacket, trouser with air"],
    ["Office air conditioning", "Sleeveless base, cardigan or blazer, closed shoe"],
    ["Travel between climates", "Soft trouser, layerable tee, scarf, packable shell"],
  ];
  return (
    <section id="transitional" className="wse-sec wse-transitional" data-screen-label="04 Transitional">
      <div className="frame">
        <div className="wse-split">
          <a className="photo" href={WSE_TRANSITION.href} style={{ backgroundImage: `url(${WSE_IMG[WSE_TRANSITION.img]})` }}>
            <span>{WSE_TRANSITION.range}</span>
          </a>
          <div>
            <div className="wse-head compact">
              <div className="num">02</div>
              <div><span>Transitional Dressing</span><h2>The season between <em>seasons.</em></h2></div>
            </div>
            <p className="wse-copy-lede">{WSE_TRANSITION.lede}</p>
            <div className="wse-weather-list">
              {rows.map((row, i) => (
                <a href={`/en/women/seasonal/transitional/${row[0].toLowerCase().replace(/[^a-z0-9]+/g, "-")}/`} key={row[0]}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <h3>{row[0]}</h3>
                  <p>{row[1]}</p>
                </a>
              ))}
            </div>
            <div className="wse-mini-index wide">
              {WSE_TRANSITION.articles.map((article, i) => (
                <a href={article[1]} key={article[0]}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  {article[0]}
                </a>
              ))}
            </div>
            <a className="wse-open" href={WSE_TRANSITION.href}>Open Transitional</a>
          </div>
        </div>
      </div>
    </section>
  );
}

const WSE_GUIDES = [
  ["Spring", "Spring outfits for unpredictable weather", "/en/women/seasonal/spring/unpredictable-weather-outfits/"],
  ["Spring", "How to wear a trench coat in spring", "/en/women/seasonal/spring/trench-coat-outfits/"],
  ["Spring", "Spring capsule wardrobe for women", "/en/women/seasonal/spring/capsule-wardrobe/"],
  ["Summer", "Summer outfits that still look polished", "/en/women/seasonal/summer/polished-outfits/"],
  ["Summer", "What to wear in humid weather", "/en/women/seasonal/summer/humid-weather-outfits/"],
  ["Summer", "Linen outfits for women", "/en/women/seasonal/summer/linen-outfits/"],
  ["Fall", "Fall capsule wardrobe for women", "/en/women/seasonal/fall/capsule-wardrobe/"],
  ["Fall", "Fall layering without bulk", "/en/women/seasonal/fall/layering-without-bulk/"],
  ["Fall", "Ankle boot outfits for fall", "/en/women/seasonal/fall/ankle-boot-outfits/"],
  ["Winter", "Winter outfits that keep their shape", "/en/women/seasonal/winter/outfits-that-keep-shape/"],
  ["Winter", "How to style a wool coat for women", "/en/women/seasonal/winter/wool-coat-outfits/"],
  ["Winter", "Cold weather work outfits", "/en/women/seasonal/winter/cold-weather-work-outfits/"],
  ["Transitional", "What to wear between seasons", "/en/women/seasonal/transitional/between-seasons/"],
  ["Transitional", "Light jackets for transitional weather", "/en/women/seasonal/transitional/light-jackets/"],
  ["Transitional", "Cold morning, warm afternoon outfits", "/en/women/seasonal/transitional/cold-morning-warm-afternoon/"],
];

function WSEArticleIndex() {
  return (
    <section className="wse-sec" data-screen-label="05 Article index">
      <div className="frame">
        <div className="wse-head">
          <div className="num">03</div>
          <div><span>Article Inventory</span><h2>Future leaves, <em>already routed.</em></h2></div>
          <p>Sample long-tail links underneath each L3, written for search behavior people actually bring to seasonal dressing.</p>
        </div>
        <div className="wse-guide-board">
          <div className="wse-guide-image" style={{ backgroundImage: `url(${WSE_IMG.texture})` }}>
            <span>Fabric, weather, line</span>
          </div>
          <div className="wse-guide-list">
            {WSE_GUIDES.map((guide, i) => (
              <a href={guide[2]} key={`${guide[0]}-${guide[1]}`}>
                <span>{String(i + 1).padStart(2, "0")}</span>
                <h3>{guide[1]}</h3>
                <small>{guide[0]}</small>
                <b>Draft</b>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const WSE_FAQ = [
  ["What is seasonal dressing?", "Seasonal dressing means choosing fabric, layers, shoes, and color for the actual conditions. It is less about buying a new wardrobe every season and more about changing weight, texture, and coverage."],
  ["What should women wear in transitional weather?", "Start with a breathable base, add one removable layer, and choose shoes that match the wettest part of the day. A trench, light jacket, cardigan, loafer, and straight denim solve most shoulder-season outfits."],
  ["How do you dress well in summer heat?", "Use fabric first: linen, cotton, silk, and open weaves. Keep shape through collar, waist, hem, or shoe so the outfit stays polished even when it is loose."],
  ["How do winter outfits keep shape?", "Build a visible line: long coat edge, scarf drop, trouser crease, or tonal column underneath. Winter fails when every layer is bulky and nothing tells the eye where to go."],
];

function WSEFAQ() {
  return (
    <section className="wse-sec" data-screen-label="06 FAQ">
      <div className="frame">
        <div className="wse-head">
          <div className="num">04</div>
          <div><span>SEO Questions</span><h2>Seasonal questions <em>with answers.</em></h2></div>
          <p>Concise search copy for the static hub, ready to become schema content later.</p>
        </div>
        <div className="wse-faq">
          {WSE_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 WSECross() {
  const cards = [
    ["/en/women/build/", "Lane 01", "Build", "The pieces before the weather gets involved."],
    ["/en/women/wear/", "Lane 02", "Wear", "Outfit formulas and occasion dressing."],
    ["/en/women/style/", "Lane 03", "Style", "Color, pattern, trend, and taste."],
    ["/en/women/finish/", "Lane 04", "Finish", "Beauty bridges and final details."],
  ];
  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 }}>
            Sister lanes<br />inside women
          </div>
        </div>
        <div className="cross-lanes wse-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, {
  WSEHero, WSENav, WSEIntro, WSESeasonEdit, WSETransitional,
  WSEArticleIndex, WSEFAQ, WSECross,
});