/* global React */

const WW_IMG = {
  hero: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=2400&q=80",
  formula: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1200&q=80",
  smart: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1200&q=80",
  business: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=1200&q=80",
  date: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1200&q=80",
  weekend: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=1200&q=80",
  travel: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1200&q=80",
  evening: "https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?w=1200&q=80",
  warm: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=1200&q=80",
  cold: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=1200&q=80",
};

const WW_NAV = [
  { n: "01", id: "formulas", nm: "Formulas", href: "/en/women/wear/outfit-formulas/" },
  { n: "02", id: "smart", nm: "Smart Casual", href: "/en/women/wear/smart-casual/" },
  { n: "03", id: "business", nm: "Business", href: "/en/women/wear/business-casual/" },
  { n: "04", id: "date", nm: "Date Night", href: "/en/women/wear/date-night/" },
  { n: "05", id: "weekend", nm: "Weekend", href: "/en/women/wear/weekend/" },
  { n: "06", id: "travel", nm: "Travel", href: "/en/women/wear/travel/" },
  { n: "07", id: "evening", nm: "Evening", href: "/en/women/wear/evening/" },
  { n: "08", id: "weather", nm: "Weather", href: "/en/women/wear/warm-weather/" },
];

function WWHero() {
  return (
    <section className="ww-hero" data-screen-label="01 Hero">
      <div className="ww-bg" style={{ backgroundImage: `url(${WW_IMG.hero})` }} />
      <div className="frame">
        <div className="crumb">
          <a href="/en/women/">Women</a>
          <span className="sep">/</span>
          <span className="here">Wear</span>
        </div>
        <div className="ww-copy">
          <span className="ww-kicker">Lane 02 - Dressing in public</span>
          <h1>Wear,<span>the part after buying.</span></h1>
          <p>
            Outfit formulas, occasions, weather, and the small decisions that turn a closet
            into a week. This is the menu for getting dressed without starting over.
          </p>
        </div>
        <div className="hero-stats ww-stats">
          <div className="stat"><div className="n"><span className="gold">09</span></div><div className="l">L3 sections</div></div>
          <div className="stat"><div className="n">72</div><div className="l">Guide slots</div></div>
          <div className="stat"><div className="n">4</div><div className="l">Occasion bands</div></div>
          <div className="stat"><div className="n"><span className="gold">02</span></div><div className="l">Women lane</div></div>
        </div>
      </div>
    </section>
  );
}

function WWNav() {
  const [active, setActive] = React.useState("formulas");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = WW_NAV[0].id;
      for (const item of WW_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="ww-nav">
      <div className="frame">
        <span className="label">The Wear Index</span>
        <div className="links">
          {WW_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 WWIntro() {
  return (
    <section className="section ww-intro" data-screen-label="02 Intro">
      <div className="frame">
        <div className="ww-ledger">
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>Wear / 02</b></div>
          <div><span>Use</span><b>Menu hub</b></div>
          <div><span>Depth</span><b>L3 to leaves</b></div>
          <div><span>Status</span><b>Sample editorial</b></div>
        </div>
        <div className="ww-body">
          <p className="standfirst">
            Build tells you what earns the hanger. Wear tells you what happens at 8:12 in the morning, when the weather changed and the meeting moved.
          </p>
          <p>
            The page is organized by real dressing problems: formulas, degrees of polish, occasions, travel, evening, and weather. Each block below is a future L3 page with article slots already marked.
          </p>
          <p>
            The rule is not "more outfits." The rule is more reliable outfit math: base, shape, contrast, finish, and one reason the whole thing holds.
          </p>
        </div>
      </div>
    </section>
  );
}

const LEADS = [
  { img: "formula", n: "01", t: "Outfit formulas", it: "that repeat well", d: "The five repeatable equations: column, frame, proportion break, soft-hard, and one accent.", href: "/en/women/wear/outfit-formulas/" },
  { img: "smart", n: "02", t: "Smart casual", it: "without the shrug", d: "The middle dress code that fails when the shoes get lazy or the jacket tries too hard.", href: "/en/women/wear/smart-casual/" },
  { img: "business", n: "03", t: "Business casual", it: "with a spine", d: "Office polish without defaulting to a suit. Trousers, knit, blazer, shoe, finish.", href: "/en/women/wear/business-casual/" },
  { img: "date", n: "04", t: "Date night", it: "without costume", d: "Shape, skin, movement, and restraint. The difference between dressed and decorated.", href: "/en/women/wear/date-night/" },
];

function WWLead() {
  return (
    <section className="ww-sec" data-screen-label="03 Lead menu">
      <div className="frame">
        <div className="ww-head">
          <div className="num">01</div>
          <div><span>Primary L3s</span><h2>The first four <em>decisions.</em></h2></div>
          <p>These are the high-frequency sections: the pages people come back to when the closet is built but the outfit still has to happen.</p>
        </div>
        <div className="ww-lead-grid">
          {LEADS.map((card) => (
            <a className="ww-card" href={card.href} key={card.t}>
              <div className="img" style={{ backgroundImage: `url(${WW_IMG[card.img]})` }}>
                <span>No. {card.n}</span>
              </div>
              <h3>{card.t} <em>{card.it}</em></h3>
              <p>{card.d}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const FORMULAS = [
  ["Column", "One color family from shoulder to shoe, then one strong outer layer.", "/en/women/wear/outfit-formulas/column-dressing/"],
  ["Frame", "Soft base, sharp jacket, structured shoe. The quickest path to polish.", "/en/women/wear/outfit-formulas/frame-outfit/"],
  ["Proportion break", "Long over short, narrow over wide, or volume over column. Choose one.", "/en/women/wear/outfit-formulas/proportion-break/"],
  ["Soft-hard", "Silk with leather, knit with tailoring, denim with a clean coat.", "/en/women/wear/outfit-formulas/soft-hard-outfits/"],
  ["One accent", "A single color, metal, texture, or shine. Everything else supports it.", "/en/women/wear/outfit-formulas/one-accent-rule/"],
];

function WWFormula() {
  return (
    <section id="formulas" className="ww-sec" data-screen-label="04 Formula index">
      <div className="frame">
        <div className="ww-head">
          <div className="num">02</div>
          <div><span>Outfit Formulas</span><h2>Repeatable, <em>not repetitive.</em></h2></div>
          <p>Five equations that can turn basics into different days without rebuilding the closet.</p>
        </div>
        <div className="ww-formulas">
          {FORMULAS.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>Open</b>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const OCCASIONS = [
  { id: "smart", img: "smart", label: "Smart Casual", href: "/en/women/wear/smart-casual/", lines: ["Blazer with denim", "Knit with trouser", "Loafer with dress", "Structured bag"] },
  { id: "business", img: "business", label: "Business Casual", href: "/en/women/wear/business-casual/", lines: ["Soft suit", "Fine knit", "Wool trouser", "Low heel"] },
  { id: "date", img: "date", label: "Date Night", href: "/en/women/wear/date-night/", lines: ["One skin note", "Movement", "Texture contrast", "No overbuild"] },
  { id: "weekend", img: "weekend", label: "Weekend", href: "/en/women/wear/weekend/", lines: ["Denim base", "Soft layer", "Flat shoe", "Weather piece"] },
];

function WWOccasions() {
  return (
    <section className="ww-sec" data-screen-label="05 Occasions">
      <div className="frame">
        <div className="ww-head">
          <div className="num">03</div>
          <div><span>Occasion Bands</span><h2>Four degrees of <em>dressed.</em></h2></div>
          <p>The center of Wear is not a trend report. It is a scale of polish that moves from weekday to evening.</p>
        </div>
        <div className="ww-occasion-grid">
          {OCCASIONS.map((item) => (
            <a id={item.id} href={item.href} className="ww-occasion" key={item.id}>
              <div className="photo" style={{ backgroundImage: `url(${WW_IMG[item.img]})` }} />
              <div className="copy">
                <span>{item.label}</span>
                <ul>
                  {item.lines.map((line) => <li key={line}>{line}</li>)}
                </ul>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const DAYS = [
  ["Monday", "Business casual", "Blazer, knit, wool trouser, low heel"],
  ["Tuesday", "Smart casual", "Oxford shirt, denim, loafer, trench"],
  ["Wednesday", "Formula repeat", "Column base, hard jacket, single accent"],
  ["Thursday", "Date night", "Bias skirt, fine knit, slingback, one metal"],
  ["Friday", "Weekend bridge", "Tee, trouser, cardigan, flat"],
  ["Saturday", "Weekend", "Denim, soft shirt, leather belt, weather layer"],
  ["Sunday", "Reset", "Knit dress, flat, coat, clean bag"],
];

function WWCalendar() {
  return (
    <section id="weekend" className="ww-sec ww-calendar" data-screen-label="06 Week map">
      <div className="frame">
        <div className="ww-head">
          <div className="num">04</div>
          <div><span>Week Map</span><h2>Seven days, <em>one closet.</em></h2></div>
          <p>A sample editorial map that can become a recurring seasonal module later.</p>
        </div>
        <div className="ww-days">
          {DAYS.map((day) => (
            <a href={`/en/women/wear/weekend/${day[0].toLowerCase()}-outfit/`} key={day[0]}>
              <span>{day[0]}</span>
              <h3>{day[1]}</h3>
              <p>{day[2]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function WWTravel() {
  const rows = [
    ["Airport", "Soft trouser, knit tee, trench, loafer", "No leggings unless the destination is the gym."],
    ["Carry-on dinner", "Black dress, flat sandal, small metal", "One garment that can leave the bag with steam only."],
    ["Three-day work trip", "One blazer, two tops, one trouser, one jean", "The outfit changes by base layer, not by packing more."],
    ["Beach city", "Linen shirt, column tank, flat leather sandal", "Loose does not mean shapeless."],
  ];
  return (
    <section id="travel" className="ww-sec" data-screen-label="07 Travel">
      <div className="frame">
        <div className="ww-split">
          <div className="photo" style={{ backgroundImage: `url(${WW_IMG.travel})` }}><span>Travel / edit later</span></div>
          <div>
            <div className="ww-head compact">
              <div className="num">05</div>
              <div><span>Travel</span><h2>Pack for the <em>outfits,</em> not the fantasy.</h2></div>
            </div>
            <div className="ww-travel-list">
              {rows.map((row, i) => (
                <a href={`/en/women/wear/travel/${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>
                  <small>{row[2]}</small>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const TEMPS = [
  { id: "evening", img: "evening", name: "Evening", temp: "After dark", href: "/en/women/wear/evening/", note: "The evening page is where polish gets sharper: black, shine, skin, heel height, and the one thing that makes it look intentional." },
  { id: "warm", img: "warm", name: "Warm Weather", temp: "75 F and up", href: "/en/women/wear/warm-weather/", note: "Heat dressing is fabric first: cotton, linen, silk, open weave, and enough shape that loose still reads deliberate." },
  { id: "cold", img: "cold", name: "Cold Weather", temp: "45 F and down", href: "/en/women/wear/cold-weather/", note: "Winter outfits fail at bulk. The system is base, insulating layer, outer layer, shoe, and one visible line." },
];

function WWTemperature() {
  return (
    <section id="weather" className="ww-sec" data-screen-label="08 Weather and evening">
      <div className="frame">
        <div className="ww-head">
          <div className="num">06</div>
          <div><span>Evening + Weather</span><h2>The conditions <em>change the outfit.</em></h2></div>
          <p>These pages will carry some of the strongest long-tail search: evening, heat, cold, travel, and the outfits people need right now.</p>
        </div>
        <div className="ww-temp-grid">
          {TEMPS.map((item) => (
            <a id={item.id} href={item.href} key={item.id}>
              <div className="img" style={{ backgroundImage: `url(${WW_IMG[item.img]})` }} />
              <span>{item.temp}</span>
              <h3>{item.name}</h3>
              <p>{item.note}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const GUIDES = [
  ["One blazer, three outfits", "Outfit formulas", "/en/women/wear/outfit-formulas/one-blazer-three-outfits/"],
  ["Smart casual outfits for women", "Smart casual", "/en/women/wear/smart-casual/outfits-for-women/"],
  ["Business casual without black pants", "Business casual", "/en/women/wear/business-casual/without-black-pants/"],
  ["Date night outfits after 40", "Date night", "/en/women/wear/date-night/after-40/"],
  ["Weekend outfits that are not sweats", "Weekend", "/en/women/wear/weekend/not-sweats/"],
  ["What to wear on a long flight", "Travel", "/en/women/wear/travel/long-flight-outfit/"],
  ["Evening outfits without heels", "Evening", "/en/women/wear/evening/without-heels/"],
  ["Warm weather work outfits", "Warm weather", "/en/women/wear/warm-weather/work-outfits/"],
  ["Cold weather outfits that keep shape", "Cold weather", "/en/women/wear/cold-weather/keep-shape/"],
];

function WWGuideIndex() {
  return (
    <section id="guides" className="ww-sec" data-screen-label="09 Guide index">
      <div className="frame">
        <div className="ww-head">
          <div className="num">07</div>
          <div><span>Article Inventory</span><h2>Guide slots to <em>fill next.</em></h2></div>
          <p>Sample leaf pages underneath the L3s, ready for real copy as this lane fills out.</p>
        </div>
        <div className="ww-guide-list">
          {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>
  );
}

const FAQ = [
  ["What is the easiest outfit formula for women?", "Start with a column: one color family through the base, then a jacket or coat with structure. It works because the eye reads one long line before it reads the pieces."],
  ["How do you dress smart casual without looking boring?", "Keep one polished piece and one relaxed piece in tension: blazer with denim, silk shirt with flat shoe, trouser with knit. If everything is polished, it is business casual. If nothing is polished, it is weekend."],
  ["What should women wear for business casual?", "A reliable business casual base is wool trouser, fine knit or poplin shirt, soft blazer, and a low shoe. Change color and texture before changing the entire formula."],
  ["How do you make weekend outfits look intentional?", "Keep the base relaxed but the shape clear: good denim, defined waist or strong coat, real shoe, and one finish piece. The fastest fix is usually the shoe."],
  ["What matters most for warm weather outfits?", "Fabric and looseness with shape. Linen, cotton, silk, and open weaves work when the silhouette still has a line: collar, waist, hem, or shoe."],
];

function WWFAQ() {
  return (
    <section id="faq" className="ww-sec" data-screen-label="10 FAQ">
      <div className="frame">
        <div className="ww-head">
          <div className="num">08</div>
          <div><span>SEO Questions</span><h2>Wear questions <em>women actually ask.</em></h2></div>
          <p>Sample FAQ copy for the first static pass.</p>
        </div>
        <div className="ww-faq">
          {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 WWCross() {
  const cards = [
    ["/en/women/build/", "Lane 01", "Build", "The pieces before the outfit."],
    ["/en/women/style/", "Lane 03", "Style", "Taste, trends, pattern, color."],
    ["/en/women/finish/", "Lane 04", "Finish", "Beauty bridges and final details."],
    ["/en/women/seasonal/", "Lane 05", "Seasonal", "Drops keyed to weather."],
  ];
  return (
    <section className="section section-rule" data-screen-label="11 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 09</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 ww-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, {
  WWHero, WWNav, WWIntro, WWLead, WWFormula, WWOccasions,
  WWCalendar, WWTravel, WWTemperature, WWGuideIndex, WWFAQ, WWCross,
});