/* global React */

const WS_IMG = {
  hero: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=2400&q=80",
  trends: "https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=1400&q=80",
  direction: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=1400&q=80",
  color: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=1200&q=80",
  pattern: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=1200&q=80",
  personal: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=1400&q=80",
  minimalism: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1200&q=80",
  classic: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=1200&q=80",
};

const WS_NAV = [
  { n: "01", id: "trends", nm: "Trends", href: "/en/women/style/trends/" },
  { n: "02", id: "direction", nm: "Editorial Direction", href: "/en/women/style/editorial-direction/" },
  { n: "03", id: "color", nm: "Color", href: "/en/women/style/color/" },
  { n: "04", id: "pattern", nm: "Pattern", href: "/en/women/style/pattern/" },
  { n: "05", id: "personal", nm: "Personal Style", href: "/en/women/style/personal-style/" },
  { n: "06", id: "minimalism", nm: "Minimalism", href: "/en/women/style/minimalism/" },
  { n: "07", id: "classic", nm: "Classic Dressing", href: "/en/women/style/classic-dressing/" },
];

function WSHero() {
  return (
    <section className="ws-hero" data-screen-label="01 Hero">
      <div className="ws-bg" style={{ backgroundImage: `url(${WS_IMG.hero})` }} />
      <div className="frame">
        <div className="crumb">
          <a href="/en/women/">Women</a>
          <span className="sep">/</span>
          <span className="here">Style</span>
        </div>
        <div className="ws-copy">
          <span className="ws-kicker">Lane 03 - Taste in public</span>
          <h1>Style,<span>the edit with a point of view.</span></h1>
          <p>
            Trends, color, pattern, minimalism, classics, and the private logic that makes
            clothes look like they belong to one person.
          </p>
        </div>
        <div className="hero-stats ws-stats">
          <div className="stat"><div className="n"><span className="gold">07</span></div><div className="l">L3 sections</div></div>
          <div className="stat"><div className="n">56</div><div className="l">Guide slots</div></div>
          <div className="stat"><div className="n">03</div><div className="l">Taste filters</div></div>
          <div className="stat"><div className="n"><span className="gold">Style</span></div><div className="l">Women lane</div></div>
        </div>
      </div>
    </section>
  );
}

function WSNav() {
  const [active, setActive] = React.useState("trends");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = WS_NAV[0].id;
      for (const item of WS_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="ws-nav">
      <div className="frame">
        <span className="label">The Style Index</span>
        <div className="links">
          {WS_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 WSIntro() {
  return (
    <section className="section ws-intro" data-screen-label="02 Intro">
      <div className="frame">
        <div className="ws-ledger">
          <div><span>Lane</span><b>Women</b></div>
          <div><span>Chapter</span><b>Style / 03</b></div>
          <div><span>Use</span><b>Menu hub</b></div>
          <div><span>Signal</span><b>Taste system</b></div>
          <div><span>Status</span><b>Sample editorial</b></div>
        </div>
        <div className="ws-body">
          <p className="standfirst">
            Style is the filter between what the market says is new and what your closet can actually absorb.
          </p>
          <p>
            Wear solves the outfit. Style explains the direction: which trends deserve attention, which colors sharpen the face, which patterns can live together, and when restraint is stronger than novelty.
          </p>
          <p>
            This hub is built as an editorial desk, not a mood board. Every L3 below points to future guides with enough specificity for search and enough taste to keep the lane from becoming generic advice.
          </p>
        </div>
      </div>
    </section>
  );
}

const LEADS = [
  { img: "trends", n: "01", t: "Trends", it: "with a filter", d: "Seasonal ideas sorted by longevity, silhouette, color, and how easily they enter a real wardrobe.", href: "/en/women/style/trends/" },
  { img: "direction", n: "02", t: "Editorial direction", it: "for the closet", d: "A sharper way to choose references: mood, proportion, beauty note, texture, and one visual rule.", href: "/en/women/style/editorial-direction/" },
  { img: "color", n: "03", t: "Color", it: "that carries the face", d: "Neutrals, accent color, tonal dressing, undertones, and how to make one strong shade feel expensive.", href: "/en/women/style/color/" },
  { img: "pattern", n: "04", t: "Pattern", it: "without noise", d: "Stripes, checks, florals, animal print, scale, spacing, and the difference between print and texture.", href: "/en/women/style/pattern/" },
];

function WSLead() {
  return (
    <section className="ws-sec" data-screen-label="03 Lead menu">
      <div className="frame">
        <div className="ws-head">
          <div className="num">01</div>
          <div><span>Primary L3s</span><h2>The taste desk <em>opens here.</em></h2></div>
          <p>Style starts with intake: what is happening now, what the page is trying to say, and what visual decisions should repeat.</p>
        </div>
        <div className="ws-lead-grid">
          {LEADS.map((card) => (
            <a className="ws-card" href={card.href} key={card.t}>
              <div className="img" style={{ backgroundImage: `url(${WS_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 TREND_ROWS = [
  ["The buyable trend test", "A trend earns space only if it changes three outfits you already wear.", "/en/women/style/trends/buyable-trend-test/"],
  ["Runway to real closet", "Translate the show idea into shape, color, material, or styling before buying.", "/en/women/style/trends/runway-to-real-closet/"],
  ["Microtrend exit strategy", "How to wear a fast idea once without letting it rewrite the wardrobe.", "/en/women/style/trends/microtrend-exit-strategy/"],
  ["Trend colors by season", "The seasonal color report filtered through neutrals, accents, and repeat wear.", "/en/women/style/trends/trend-colors-by-season/"],
  ["Trend fatigue reset", "What to skip when everything looks loud, familiar, or already overexposed.", "/en/women/style/trends/trend-fatigue-reset/"],
];

function WSTrends() {
  return (
    <section id="trends" className="ws-sec ws-trends" data-screen-label="04 Trends">
      <div className="frame">
        <div className="ws-head">
          <div className="num">02</div>
          <div><span>Trends</span><h2>Newness needs <em>editing.</em></h2></div>
          <p>The trend page should help a reader decide what to ignore as clearly as what to try.</p>
        </div>
        <div className="ws-trend-wrap">
          <div className="ws-trend-photo" style={{ backgroundImage: `url(${WS_IMG.trends})` }}>
            <span>Trend report / filtered</span>
          </div>
          <div className="ws-trend-list">
            {TREND_ROWS.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>
  );
}

const DIRECTION = [
  ["Mood", "Name the room before the outfit: polished, severe, romantic, sporty, undone.", "/en/women/style/editorial-direction/style-mood/"],
  ["Silhouette", "Choose the line that repeats: long column, cropped volume, narrow base, big coat.", "/en/women/style/editorial-direction/silhouette-direction/"],
  ["Texture", "Make the surface do the styling: wool with silk, patent with knit, suede with poplin.", "/en/women/style/editorial-direction/texture-direction/"],
  ["Beauty note", "Hair, lip, nail, or skin finish can make basics read intentional.", "/en/women/style/editorial-direction/beauty-note/"],
  ["Reference", "Use references as constraints, not costumes. Extract one rule and leave the rest.", "/en/women/style/editorial-direction/reference-board/"],
  ["Restraint", "The strongest direction often comes from deleting the second accent.", "/en/women/style/editorial-direction/restraint-rule/"],
];

function WSDirection() {
  return (
    <section id="direction" className="ws-sec" data-screen-label="05 Editorial direction">
      <div className="frame">
        <div className="ws-head">
          <div className="num">03</div>
          <div><span>Editorial Direction</span><h2>A closet needs <em>art direction.</em></h2></div>
          <p>These pages turn inspiration into rules a person can repeat without dressing like a reference image.</p>
        </div>
        <div className="ws-direction-grid">
          {DIRECTION.map((item, i) => (
            <a href={item[2]} key={item[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <p>{item[1]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const COLOR = [
  ["Personal color without the season chart", "Use contrast, temperature, and saturation before naming a palette.", "/en/women/style/color/personal-color-without-season-chart/"],
  ["How to wear red well", "Treat red as architecture: one strong field, small repeat, or deep oxblood base.", "/en/women/style/color/how-to-wear-red/"],
  ["Tonal dressing for women", "Make one color family read dimensional through fabric, depth, and shine.", "/en/women/style/color/tonal-dressing/"],
  ["Accent color rules", "One accent works when it appears with purpose, not apology.", "/en/women/style/color/accent-color-rules/"],
];

const PATTERN = [
  ["Mixing stripes and checks", "Pattern mixing works when scale changes and color stays disciplined.", "/en/women/style/pattern/mixing-stripes-and-checks/"],
  ["Animal print as a neutral", "Leopard, snake, and zebra read chic when the rest of the outfit is calm.", "/en/women/style/pattern/animal-print-as-neutral/"],
  ["Florals that feel modern", "Look for negative space, dark ground, unusual scale, or harder styling.", "/en/women/style/pattern/modern-florals/"],
  ["Print scale by body and outfit", "Scale is not about permission. It is about distance, contrast, and placement.", "/en/women/style/pattern/print-scale/"],
];

function WSColorPattern() {
  return (
    <section className="ws-sec" data-screen-label="06 Color and pattern">
      <div className="frame">
        <div className="ws-dual">
          <div id="color" className="ws-dual-panel">
            <div className="photo" style={{ backgroundImage: `url(${WS_IMG.color})` }} />
            <div className="copy">
              <span className="ey">Color</span>
              <h2>The palette is <em>not decoration.</em></h2>
              <p>Color decides temperature, authority, softness, and whether the face or the outfit arrives first.</p>
              <div className="ws-mini-list">
                {COLOR.map((item, i) => (
                  <a href={item[2]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><small>{item[1]}</small></a>
                ))}
              </div>
            </div>
          </div>
          <div id="pattern" className="ws-dual-panel">
            <div className="photo" style={{ backgroundImage: `url(${WS_IMG.pattern})` }} />
            <div className="copy">
              <span className="ey">Pattern</span>
              <h2>Print should have <em>a job.</em></h2>
              <p>Pattern can create rhythm, break a uniform, or add friction. It fails when it is only there to fill space.</p>
              <div className="ws-mini-list">
                {PATTERN.map((item, i) => (
                  <a href={item[2]} key={item[0]}><span>{String(i + 1).padStart(2, "0")}</span><b>{item[0]}</b><small>{item[1]}</small></a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const PERSONAL = [
  ["Find your style through repeats", "The pieces you repeat are evidence. Audit them before chasing a new aesthetic.", "/en/women/style/personal-style/find-your-style-through-repeats/"],
  ["Signature style without a uniform", "Build a recurring shape, color, finish, or styling note without wearing the same outfit.", "/en/women/style/personal-style/signature-style-without-uniform/"],
  ["How to edit inspiration boards", "Delete the fantasy images and keep the rules you can actually wear.", "/en/women/style/personal-style/edit-inspiration-boards/"],
  ["Style words that help you shop", "Use three precise adjectives to block bad purchases and sharpen good ones.", "/en/women/style/personal-style/style-words/"],
  ["When your style changes", "A closet shift is usually a life shift: body, work, city, climate, age, or visibility.", "/en/women/style/personal-style/when-your-style-changes/"],
];

function WSPersonal() {
  return (
    <section id="personal" className="ws-sec" data-screen-label="07 Personal style">
      <div className="frame">
        <div className="ws-personal">
          <div className="ws-personal-copy">
            <div className="ws-head compact">
              <div className="num">04</div>
              <div><span>Personal Style</span><h2>The evidence is already <em>in the closet.</em></h2></div>
            </div>
            <p>
              Personal style should not start with a shopping list. It starts by finding the pieces, proportions, colors, and finishes that keep surviving the edit.
            </p>
            <div className="ws-personal-list">
              {PERSONAL.map((item, i) => (
                <a href={item[2]} key={item[0]}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <h3>{item[0]}</h3>
                  <p>{item[1]}</p>
                </a>
              ))}
            </div>
          </div>
          <div className="ws-personal-photo" style={{ backgroundImage: `url(${WS_IMG.personal})` }}>
            <span>Personal style / audit</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const QUIET = [
  { id: "minimalism", img: "minimalism", name: "Minimalism", href: "/en/women/style/minimalism/", note: "Minimal dressing works when shape, fabric, and proportion are doing the work that print or color would normally do.", links: [
    ["Minimalism that is not boring", "/en/women/style/minimalism/not-boring/"],
    ["The five-piece minimalist outfit", "/en/women/style/minimalism/five-piece-outfit/"],
    ["Quiet color for minimal wardrobes", "/en/women/style/minimalism/quiet-color/"],
  ] },
  { id: "classic", img: "classic", name: "Classic Dressing", href: "/en/women/style/classic-dressing/", note: "Classic style is not old-fashioned. It is a system of familiar pieces sharpened by fit, material, and one current note.", links: [
    ["Classic outfits that feel current", "/en/women/style/classic-dressing/current-classic-outfits/"],
    ["The modern trench coat formula", "/en/women/style/classic-dressing/modern-trench-coat/"],
    ["Pearls, loafers, denim, blazer", "/en/women/style/classic-dressing/pearls-loafers-denim-blazer/"],
  ] },
];

function WSQuietClassic() {
  return (
    <section className="ws-sec" data-screen-label="08 Minimalism and classics">
      <div className="frame">
        <div className="ws-head">
          <div className="num">05</div>
          <div><span>Restraint</span><h2>Quiet does not mean <em>empty.</em></h2></div>
          <p>Minimalism and classic dressing are where the page gets disciplined: fewer moves, higher consequence.</p>
        </div>
        <div className="ws-quiet-grid">
          {QUIET.map((item) => (
            <article id={item.id} className="ws-quiet-card" key={item.id}>
              <div className="img" style={{ backgroundImage: `url(${WS_IMG[item.img]})` }} />
              <div className="body">
                <a className="title-link" href={item.href}>{item.name}</a>
                <p>{item.note}</p>
                <ul>
                  {item.links.map((link) => <li key={link[0]}><a href={link[1]}>{link[0]}</a></li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const ARTICLES = [
  ["What trends should women try this season?", "Trends", "/en/women/style/trends/what-to-try-this-season/"],
  ["How to build a style direction board", "Editorial direction", "/en/women/style/editorial-direction/style-direction-board/"],
  ["Best colors to wear with burgundy", "Color", "/en/women/style/color/colors-to-wear-with-burgundy/"],
  ["How to mix prints without looking busy", "Pattern", "/en/women/style/pattern/mix-prints-without-looking-busy/"],
  ["How to find your personal style after 40", "Personal style", "/en/women/style/personal-style/after-40/"],
  ["Minimalist outfits for women that still feel styled", "Minimalism", "/en/women/style/minimalism/outfits-for-women/"],
  ["Classic wardrobe staples that are not basic", "Classic dressing", "/en/women/style/classic-dressing/staples-that-are-not-basic/"],
  ["How to make neutrals look intentional", "Color", "/en/women/style/color/neutrals-look-intentional/"],
  ["How to update classic style for work", "Classic dressing", "/en/women/style/classic-dressing/work-update/"],
  ["Personal style mistakes that flatten an outfit", "Personal style", "/en/women/style/personal-style/mistakes/"],
];

function WSArticleIndex() {
  return (
    <section id="guides" className="ws-sec" data-screen-label="09 Article index">
      <div className="frame">
        <div className="ws-head">
          <div className="num">06</div>
          <div><span>Article Inventory</span><h2>Sample leaves <em>for the generator.</em></h2></div>
          <p>Future L4 pages sit under real L3 routes, with search language that still sounds edited.</p>
        </div>
        <div className="ws-article-list">
          {ARTICLES.map((item, i) => (
            <a href={item[2]} key={item[0]}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{item[0]}</h3>
              <small>{item[1]}</small>
              <b>Draft</b>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQ = [
  ["What is the difference between fashion and style?", "Fashion is the market: trends, products, seasons, and references. Style is the edit: what you repeat, refuse, soften, sharpen, and make recognizable on yourself."],
  ["How do I find my personal style?", "Start with evidence. Pull the outfits and pieces you actually repeat, then name their shared traits: color, silhouette, shoe, texture, neckline, polish level, and beauty note."],
  ["How do I wear trends without looking trendy?", "Translate the trend into one element only: shape, color, texture, or styling. Keep the rest of the outfit inside your existing style language."],
  ["Can minimalist style still look interesting?", "Yes. Minimalism needs better decisions, not more pieces: fabric contrast, strong proportion, precise color, excellent fit, and one intentional finish."],
  ["How do I mix patterns?", "Keep color disciplined and change the scale. A narrow stripe with a larger check works more easily than two patterns competing at the same size and contrast."],
];

function WSFAQ() {
  return (
    <section id="faq" className="ws-sec" data-screen-label="10 FAQ">
      <div className="frame">
        <div className="ws-head">
          <div className="num">07</div>
          <div><span>SEO Questions</span><h2>Style questions <em>with taste.</em></h2></div>
          <p>Search-led copy for the static pass, written as guidance rather than filler.</p>
        </div>
        <div className="ws-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 WSCross() {
  const cards = [
    ["/en/women/build/", "Lane 01", "Build", "The pieces before the point of view."],
    ["/en/women/wear/", "Lane 02", "Wear", "Outfits, occasions, and formulas."],
    ["/en/women/finish/", "Lane 04", "Finish", "Beauty bridges and final details."],
    ["/en/women/seasonal/", "Lane 05", "Seasonal", "Weather, drops, and timing."],
  ];
  return (
    <section className="section section-rule" data-screen-label="11 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 08</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 ws-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, {
  WSHero, WSNav, WSIntro, WSLead, WSTrends, WSDirection,
  WSColorPattern, WSPersonal, WSQuietClassic, WSArticleIndex, WSFAQ, WSCross,
});