/* global React, M_IMAGES, M_L2_MENU */

function MenHero() {
  return (
    <section className="hero-shell w-hero" data-screen-label="01 Hero">
      <div className="bg" style={{ backgroundImage: `url(${M_IMAGES.hero})` }} />
      <span className="frame-tag">Cover · Look 02</span>
      <span className="credit">Photographed in Florence · S/S '26</span>
      <div className="frame">
        <div className="kicker">
          <span>Vol. 02 <span className="crest" /> The Men's Edition</span>
        </div>
        <div className="copy">
          <h1 className="megaword">
            Men<span className="ampersand">,</span>
            <span className="it">from the shoulders down.</span>
          </h1>
          <p className="lede">
            The everyday closet, sharpened. From a starter blazer to denim that ages well —
            practical answers to questions you'd rather not ask out loud.
          </p>
        </div>
        <nav className="w-hero-menu" aria-label="Section index">
          {M_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.MenHero = MenHero;