// Hero (Section A) — selectable via Tweaks
const HEADLINES = [
  {
    eyebrow: 'Executive Entertainment Night · Cedar Rapids',
    h: <>Stop Renting Ballrooms.<br/><em style={{ fontStyle: 'italic', color: '#E8C979' }}>Start throwing concerts.</em></>,
    s: 'Turn your next Cedar Rapids company event into a private 1914 theater takeover — live entertainment and concert-grade production included.',
  },
  {
    eyebrow: 'The Executive Entertainment Night · 2026 Season',
    h: <>The corporate holiday party<br/>that feels like a <em style={{ fontStyle: 'italic', color: '#E8C979' }}>tour stop.</em></>,
    s: 'One flat fee. Historic theater. Live act. Production. Bar credit. Best-Event-Or-Your-Next-Venue-Is-On-Us guarantee.',
  },
  {
    eyebrow: 'For HR, Ops & Founders',
    h: <>What if your next all-hands<br/>felt like a <em style={{ fontStyle: 'italic', color: '#E8C979' }}>private show?</em></>,
    s: 'Executive Entertainment Night packages a 1914 music theater, live entertainment, and full production into one simple decision.',
  },
  {
    eyebrow: 'A Concert-Grade Takeover',
    h: <>Trade beige ballrooms<br/>for <em style={{ fontStyle: 'italic', color: '#E8C979' }}>a night at the theater.</em></>,
    s: 'A private concert experience in a historic 1914 venue for about what you already spend on a forgettable hotel party.',
  },
  {
    eyebrow: 'The Best Night You’ve Had Together',
    h: <>Turn “mandatory work party” into<br/><em style={{ fontStyle: 'italic', color: '#E8C979' }}>“best night we’ve ever had.”</em></>,
    s: 'A full-venue takeover, curated live act, and bar credit — wrapped into one done-for-you package.',
  },
];
window.HEADLINES = HEADLINES;

function Hero({ variantIdx = 0 }) {
  const v = HEADLINES[variantIdx] || HEADLINES[0];
  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex', alignItems: 'center',
      overflow: 'hidden',
      background: '#0B0B0C',
    }}>
      {/* Image */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: "url('assets/venue-ceiling.jpg')",
        backgroundSize: 'cover', backgroundPosition: 'center',
        transform: 'scale(1.04)',
      }} />
      {/* Gradient overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.50) 35%, rgba(11,11,12,.85) 100%)',
      }} />
      {/* Gold vignette glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 60%, rgba(198,165,92,.10), transparent 60%)',
      }} />

      <div style={{
        position: 'relative', zIndex: 2,
        padding: '120px 56px 80px',
        maxWidth: 1240, margin: '0 auto', width: '100%',
      }}>
        {/* Top eyebrow row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 16, marginBottom: 40,
        }}>
          <span style={{ width: 36, height: 1, background: '#E8C979' }} />
          <Kicker light style={{ margin: 0 }}>{v.eyebrow}</Kicker>
        </div>

        <h1 style={{
          fontFamily: '"Playfair Display", serif', fontWeight: 500,
          fontSize: 'clamp(44px, 6.2vw, 104px)', lineHeight: 1.02,
          letterSpacing: '-0.015em', color: '#F6F1E6', margin: 0,
          maxWidth: 1100,
          textShadow: '0 2px 30px rgba(0,0,0,0.5)',
        }}>{v.h}</h1>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 16, margin: '36px 0 28px',
        }}>
          <div style={{ width: 88, height: 2, background: '#C8102E' }} />
          <div style={{
            fontFamily: 'Jost, sans-serif', fontSize: 10,
            letterSpacing: '0.3em', textTransform: 'uppercase', color: '#C6A55C',
          }}>Est. 1914 · The Ideal Theater &amp; Bar</div>
        </div>

        <p style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontWeight: 400,
          fontSize: 'clamp(20px, 1.5vw, 26px)', lineHeight: 1.5, color: '#EDE5D1',
          maxWidth: 680, margin: '0 0 44px',
        }}>{v.s}</p>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
          <Button variant="primary" size="lg" onClick={() => {
            const el = document.getElementById('cta');
            if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' });
          }}>Book A Walk-Through →</Button>
          <Button variant="ghostLight" size="lg" onClick={() => {
            const el = document.getElementById('offer');
            if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' });
          }}>See What's Included</Button>
        </div>

        {/* Fact strip */}
        <div style={{
          marginTop: 88,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(198,165,92,.28)',
          borderBottom: '1px solid rgba(198,165,92,.28)',
        }}>
          {[
            ['$6,000', 'All-in, turnkey'],
            ['175', 'Guests, full buyout'],
            ['1914', 'Historic theater'],
            ['5', 'Nights per 2026 season'],
          ].map(([n, l], i) => (
            <div key={i} style={{
              padding: '22px 20px',
              borderRight: i < 3 ? '1px solid rgba(198,165,92,.2)' : 'none',
            }}>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500,
                fontSize: 36, color: '#E8C979', lineHeight: 1,
              }}>{n}</div>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10,
                letterSpacing: '0.28em', textTransform: 'uppercase',
                color: '#B5B5BB', marginTop: 10,
              }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;