// Hero — split intent CTAs
const Hero = ({ onShop, onGift, variant = 'split' }) => {
  // variant: 'split' (default) | 'centered' | 'original'
  if (variant === 'centered') {
    return (
      <section style={{ padding: '40px 0 24px' }}>
        <div className="container">
          <div style={{
            background: 'var(--sky-300)',
            borderRadius: 28,
            padding: '80px 48px',
            textAlign: 'center',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ color: '#fff', fontWeight: 500, letterSpacing: '0.18em', fontSize: 12, textTransform: 'uppercase', marginBottom: 18 }}>
              Rosie's Place · Baked Fresh Daily
            </div>
            <h1 className="serif" style={{
              fontSize: 'clamp(44px, 6vw, 80px)', lineHeight: 1.02,
              color: '#fff', margin: 0, fontWeight: 500, letterSpacing: '-0.02em',
            }}>
              Fresh Gooey Butter Cookies,<br/>
              <em style={{ fontWeight: 500 }}>delivered to your door.</em>
            </h1>
            <p style={{
              color: '#fff', opacity: 0.9, maxWidth: 620, margin: '22px auto 34px',
              fontSize: 17, lineHeight: 1.55,
            }}>
              Order today, or send a gift they'll remember every month.
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={onShop}>
                <Icon name="bag" size={18} stroke="#fff"/> Shop Cookies
              </button>
              <button className="btn btn-outline-white btn-lg" onClick={onGift}>
                <Icon name="gift" size={18}/> Send a Gift
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Default: split layout, mirrors existing site but with dual CTA
  return (
    <section style={{ padding: '32px 0 24px' }}>
      <div className="container">
        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          borderRadius: 28,
          overflow: 'hidden',
          background: 'var(--sky-300)',
          minHeight: 540,
        }}>
          <div style={{ padding: 'clamp(32px, 5vw, 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', color: '#fff' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <span style={{
                fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600,
                background: 'rgba(255,255,255,.22)', padding: '6px 12px', borderRadius: 999,
                border: '1px solid rgba(255,255,255,.35)',
              }}>Home of the Original</span>
            </div>
            <h1 className="serif" style={{
              fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.02, fontWeight: 500,
              letterSpacing: '-0.015em', margin: 0,
            }}>
              Fresh Gooey Butter Cookies <em style={{ fontWeight: 500 }}>delivered</em> to your door.
            </h1>
            <p style={{
              fontSize: 'clamp(15px, 1.2vw, 17px)', lineHeight: 1.55, maxWidth: 480,
              margin: '22px 0 6px', opacity: 0.95,
            }}>
              Dangerously addicting cookies — a masterpiece of butter, sugar, and a few special ingredients. Order today, or send a gift they'll remember every month.
            </p>
            <p style={{ fontSize: 14, margin: '14px 0 0', opacity: 0.85, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon name="sparkle" size={15}/> Baked fresh · ships right away
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={onShop}
                style={{ minWidth: 190 }}>
                <Icon name="bag" size={18} stroke="#fff"/> Shop Cookies
              </button>
              <button className="btn btn-outline-white btn-lg" onClick={onGift}
                style={{ minWidth: 190 }}>
                <Icon name="gift" size={18}/> Send a Gift
              </button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 24, fontSize: 13, opacity: 0.9 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Stars n={5} color="#fff"/>
                <span>1,000+ cookie fans</span>
              </div>
              <span style={{ opacity: 0.6 }}>·</span>
              <span>Family-owned on the northside of Indy</span>
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <Photo src="assets/cookies-stack.webp" aspect="auto" rounded="0" label="The Original"
              style={{ height: '100%' }}/>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-grid > div:last-child { min-height: 320px; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Hero });