const Hero = ({ variant = "editorial" }) => {
  if (variant === "bleed") {
    return (
      <section id="top" className="hero v-bleed">
        <div className="bleed-media">
          <Placeholder label="hero portret — full bleed" id="IMG_9761" style={{width:"100%",height:"100%"}} dark />
        </div>
        <div className="bleed-content wrap">
          <div className="hero-kicker">
            <span className="dot"></span>
            <span className="eyebrow" style={{color:"inherit"}}>Stylist Coach · Sanne Claessen</span>
          </div>
          <h1 className="display">
            <span className="row">Jouw stijl,</span>
            <span className="row italic">jouw verhaal.</span>
          </h1>
          <p className="hero-copy" style={{marginTop:28}}>
            Je bent veranderd. Laat je stijl met je meegroeien — een persoonlijke
            reis waar kleding en coaching elkaar ontmoeten.
          </p>
          <div className="hero-ctas">
            <a href="#services" className="btn btn-solid">
              Ontdek diensten
              <span className="arrow">→</span>
            </a>
            <a href="#contact" className="btn btn-ghost">Neem contact op</a>
          </div>
          <div className="hero-meta">
            <div className="label">— Fashion styling &amp; innerlijke groei, in één traject.</div>
            <div className="index">№ 01 · Introductie</div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === "stacked") {
    return (
      <section id="top" className="hero v-stacked wrap">
        <div className="hero-kicker">
          <span className="dot"></span>
          <span className="eyebrow">Sanne Claessen · Stylist Coach</span>
        </div>
        <div className="hero-grid">
          <div>
            <h1 className="display">
              <span className="row">Wat in je kast hangt,</span>
              <span className="row italic">mag meegroeien.</span>
            </h1>
          </div>
          <div className="hero-media">
            <Placeholder label="editorial — portret in beweging" id="16:9" ratio="16/9" style={{height:"100%"}}/>
          </div>
        </div>
        <div className="hero-meta">
          <p className="hero-copy">
            Je verandert. Je groeit. En op een dag merk je: wat in je kast hangt,
            voelt niet meer als jij. Ik help je ontdekken wat écht bij je past —
            vanbinnen en vanbuiten.
          </p>
          <div className="hero-ctas">
            <a href="#services" className="btn btn-solid">Ontdek diensten<span className="arrow">→</span></a>
            <a href="#contact" className="btn btn-ghost">Maak een afspraak</a>
          </div>
        </div>
      </section>
    );
  }

  // default: editorial split
  return (
    <section id="top" className="hero wrap">
      <div>
        <div className="hero-kicker">
          <span className="dot"></span>
          <span className="eyebrow">Stylist Coach — est. Sanne Claessen</span>
        </div>
        <div className="hero-grid">
          <div>
            <h1 className="display">
              <span className="row">Jouw stijl,</span>
              <span className="row italic indent">jouw</span>
              <span className="row">verhaal.</span>
            </h1>
            <p className="hero-copy" style={{marginTop:36}}>
              Je verandert. Je groeit. En op een dag merk je: wat in je kast hangt,
              voelt niet meer als jij — niet omdat je iets verkeerd doet, maar omdat
              je gegroeid bent. En dat mag zichtbaar zijn.
            </p>
            <div className="hero-ctas">
              <a href="#services" className="btn btn-solid">Ontdek diensten<span className="arrow">→</span></a>
              <a href="#contact" className="btn btn-ghost">Neem contact op</a>
            </div>
          </div>
          <div className="hero-media">
            <img src="images/content_sc_16.jpg" alt="Portret Sanne" style={{width:"100%",height:"100%",objectFit:"cover"}} />
          </div>
        </div>
      </div>
      <div className="hero-meta">
        <div className="label">— Fashion Styling &amp; Coaching, in één persoonlijke aanpak.</div>
        <div className="index">№ 01 · 05 — Introductie</div>
      </div>
    </section>
  );
};

window.Hero = Hero;