/* global React, IMAGES, W_IMAGES */

const L2_MENU = [
  { n: "01", nm: "Build", ct: "12 guides", id: "build", href: "/en/women/build/" },
  { n: "02", nm: "Wear", ct: "24 guides", id: "wear", href: "/en/women/wear/" },
  { n: "03", nm: "Style", ct: "18 guides", id: "style", href: "/en/women/style/" },
  { n: "04", nm: "Finish", ct: "9 guides", id: "finish", href: "/en/women/finish/" },
  { n: "05", nm: "Seasonal", ct: "6 drops", id: "seasonal", href: "/en/women/seasonal/" },
];
window.L2_MENU = L2_MENU;

function WomenHero() {
  return (
    <section className="hero-shell w-hero" data-screen-label="01 Hero">
      <div className="bg" style={{ backgroundImage: `url(${W_IMAGES.hero})` }} />
      <span className="frame-tag">Cover · Look 01</span>
      <span className="credit">Photographed in Paris · S/S '26</span>
      <div className="frame">
        <div className="kicker">
          <span>Vol. 02 <span className="crest" /> The Women's Edition</span>
        </div>
        <div className="copy">
          <h1 className="megaword">
            Women<span className="ampersand">,</span>
            <span className="it">in five acts.</span>
          </h1>
          <p className="lede">
            A working library for getting dressed — built piece by piece, season by season.
            Tailoring that flatters, denim that fits, and the small finishes that turn a
            get-up into a look.
          </p>
        </div>
        <nav className="w-hero-menu" aria-label="Section index">
          {L2_MENU.map((m) => (
            <a key={m.id} href={m.href}>
              <span className="n">No. {m.n}</span>
              <span className="nm">{m.nm}</span>
              <span className="ct">{m.ct}</span>
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}
window.WomenHero = WomenHero;