function Hero({ heroVariant = 'editorial', logoVariant = 'a' }) {
  return (
    <section className="hero" data-hero={heroVariant}>
      <div className="floating-mark" style={{ right: '-4vw', top: '8%' }} aria-hidden>M.</div>
      <div className="container">
        <div className="hero-grid">
          <div className="reveal in">
            <div className="eyebrow">Fractional CX & Product Leadership</div>
            <h1>
              In a world where anyone can build anything, trust is the moat<span style={{ color: 'var(--navy)' }}>.</span>
            </h1>
            <p className="hero-lede">
              Fractional CX and product leadership for financial services and women's health teams who want to matter to their customers, not just reach them.
            </p>
            <div className="hero-cta-row">
              <a href="https://cal.com/megan-hunter" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Book an intro call
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </a>
              <a href="#services" className="btn btn-ghost">How we might work together</a>
            </div>
          </div>

          <div className="hero-portrait-wrap reveal in">
            <div className="hero-portrait">
              <img src="assets/megan-hero.jpeg" alt="Megan Hunter" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', position: 'absolute', inset: 0, pointerEvents: 'none', userSelect: 'none' }} />
              <div className="hero-caption">
                <div>
                  <div className="serif-it" style={{ fontSize: 14, color: 'var(--ink)' }}>Making It Matter</div>
                  <div className="mono" style={{ color: 'var(--body-soft)', marginTop: 2, fontSize: 10 }}>PODCAST · SINCE 2025</div>
                </div>
                <a href="#podcast" style={{ color: 'var(--navy)', fontSize: 13 }} className="btn-link mb-0">Listen
                  <svg width="10" height="10" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;