/* global React, IMAGES, SearchComposer */

/* ============================================================
   HERO V1 — Cinematic full-bleed
   ============================================================ */
function HeroCinematic() {
  return (
    <section className="hero-shell hero-cine">
      <div className="bg" style={{ backgroundImage: `url(${IMAGES.heroCine})` }} />
      <span className="credit">Photographed in Milan · Look 04</span>
      <div className="frame">
        <div className="copy">
          <div className="kicker">Volume 02 · The Fashion Edition</div>
          <h1 className="h1">
            Dress like
            <span className="it">you mean it.</span>
          </h1>
          <p className="lede">
            A working library for getting dressed — built piece by piece, season by
            season. Two lanes, no rules, plenty of opinions held lightly.
          </p>
          <SearchComposer />
        </div>
      </div>
    </section>
  );
}
window.HeroCinematic = HeroCinematic;

/* ============================================================
   HERO V2 — Asymmetric oversized "Fashion"
   ============================================================ */
function HeroAsymmetric() {
  return (
    <section className="hero-shell hero-asym">
      <div className="frame">
        <div className="word">
          <div>
            <div className="kicker eyebrow" style={{ marginBottom: 24, color: "var(--accent)" }}>
              Vol. 02<span className="dot" />Spring / Summer ’26
            </div>
            <h1 className="megaword">
              How to<br/>
              <span className="gold">Fashion</span><span className="stroke">.</span>
            </h1>
            <p className="sub">
              The everyday handbook for getting dressed. Building blocks, fit, finish — and a few opinions worth borrowing.
            </p>
          </div>
          <div className="search-wrap">
            <SearchComposer />
          </div>
        </div>
        <div className="col-img" style={{ backgroundImage: `url(${IMAGES.heroAsym})` }}>
          <span className="col-cap">Look 01 — Tailored Navy</span>
        </div>
      </div>
    </section>
  );
}
window.HeroAsymmetric = HeroAsymmetric;

/* ============================================================
   HERO V3 — Runway triple-strip
   ============================================================ */
function HeroStrip() {
  return (
    <section className="hero-shell hero-strip">
      <div className="top">
        <div className="strip" style={{ backgroundImage: `url(${IMAGES.heroStrip1})` }}>
          <span className="num">01</span>
          <span className="label">Tailored Navy</span>
        </div>
        <div className="strip" style={{ backgroundImage: `url(${IMAGES.heroStrip2})` }}>
          <span className="num">02</span>
          <span className="label">Soft Layers</span>
        </div>
        <div className="strip" style={{ backgroundImage: `url(${IMAGES.heroStrip3})` }}>
          <span className="num">03</span>
          <span className="label">Off-Duty</span>
        </div>
      </div>
      <div className="bottom">
        <div className="frame bottom-inner">
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>
              Vol. 02<span className="dot" />The Fashion Edition
            </div>
            <h1 className="h-title">
              Get dressed,
              <br/>
              <span className="it">on purpose.</span>
            </h1>
            <p className="h-sub">
              Two lanes, real answers, zero gatekeeping. Start with what you have — we’ll tell you what it’s missing.
            </p>
          </div>
          <SearchComposer />
        </div>
      </div>
    </section>
  );
}
window.HeroStrip = HeroStrip;