const Hero = () => {
  const stats = [
    { num: '40+', label: 'Churches Served' },
    { num: '$200', label: 'Starting / Month' },
    { num: '48hr', label: 'First Reel Delivered' },
  ];

  return (
    <section style={{
      minHeight: '100dvh',
      background: 'var(--espresso)',
      display: 'flex', alignItems: 'center',
      padding: '120px 48px 80px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Radial glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 60% 70% at 78% 50%, rgba(168,124,61,0.1) 0%, transparent 65%)',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1, width: '100%' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 80, alignItems: 'center' }}>

          {/* Left */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '7px 14px', borderRadius: 4,
              border: '1px solid rgba(168,124,61,0.35)',
              marginBottom: 36,
            }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brass)', boxShadow: '0 0 8px rgba(168,124,61,0.6)' }} />
              <span className="overline" style={{ color: 'var(--brass)', fontSize: 11 }}>
                Church Media Services · Nashville, TN
              </span>
            </div>

            <h1 className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 74px)', color: 'var(--cream)', marginBottom: 28 }}>
              Free Your Team<br />
              <em style={{ color: 'var(--brass)', fontStyle: 'italic' }}>for Ministry.</em>
            </h1>

            <p style={{
              fontFamily: 'DM Sans, sans-serif', fontSize: 18, fontWeight: 300,
              lineHeight: 1.7, color: 'rgba(244,237,226,0.6)',
              maxWidth: 500, marginBottom: 52,
            }}>
              We handle your Sunday Reels, social media, live streaming, and video production — so your staff can focus on what they were called to do.
            </p>

            <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 64 }}>
              <a href="#contact" className="btn btn-rust">Book a Free Call</a>
              <a href="#pricing" style={{
                fontFamily: 'DM Sans, sans-serif', fontSize: 14, fontWeight: 400,
                color: 'rgba(244,237,226,0.5)', textDecoration: 'none',
                display: 'flex', alignItems: 'center', gap: 8,
                transition: 'color 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'rgba(244,237,226,0.9)'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(244,237,226,0.5)'}>
                See pricing →
              </a>
            </div>

            <div style={{ display: 'flex', gap: 48, paddingTop: 36, borderTop: '1px solid rgba(244,237,226,0.1)' }}>
              {stats.map(({ num, label }) => (
                <div key={label}>
                  <div className="display" style={{ fontSize: 30, color: 'var(--cream)' }}>{num}</div>
                  <div className="overline" style={{ fontSize: 10, color: 'rgba(244,237,226,0.38)', marginTop: 4 }}>{label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Phone */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', position: 'relative' }}>
            <PhoneMockup />
            {/* Badge: delivered */}
            <div style={{
              position: 'absolute', bottom: 88, left: -28,
              background: 'var(--cream)', borderRadius: 10, padding: '12px 16px',
              boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#52C07A', flexShrink: 0 }} />
              <div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, fontWeight: 600, color: 'var(--espresso)' }}>Reel delivered</div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, color: 'var(--text-lighter)' }}>Sunday 8:42 AM</div>
              </div>
            </div>
            {/* Badge: views */}
            <div style={{
              position: 'absolute', top: 56, right: -16,
              background: 'var(--espresso-mid)', border: '1px solid rgba(168,124,61,0.3)',
              borderRadius: 10, padding: '10px 14px',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ fontSize: 13 }}>📈</span>
              <div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, fontWeight: 600, color: 'var(--cream)' }}>+4,200 views</div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 10, color: 'rgba(244,237,226,0.45)' }}>This week's Reel</div>
              </div>
            </div>
          </div>

        </div>
      </div>

      {/* Scroll hint */}
      <div style={{
        position: 'absolute', bottom: 36, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
        <span className="overline" style={{ fontSize: 9, color: 'rgba(244,237,226,0.22)' }}>scroll</span>
        <div style={{ width: 1, height: 36, background: 'linear-gradient(to bottom, rgba(244,237,226,0.22), transparent)' }} />
      </div>
    </section>
  );
};

const PhoneMockup = () => (
  <div style={{
    width: 260, height: 510,
    background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(244,237,226,0.12)',
    borderRadius: 42, position: 'relative', overflow: 'hidden',
    boxShadow: '0 48px 96px rgba(0,0,0,0.5)',
  }}>
    <div style={{ position: 'absolute', inset: 9, borderRadius: 34, background: 'var(--espresso-mid)', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, var(--espresso-light) 0%, var(--espresso) 100%)' }} />
      {/* Subtle cross */}
      <div style={{ position: 'absolute', top: '28%', left: '50%', transform: 'translate(-50%,-50%)', opacity: 0.12 }}>
        <div style={{ width: 7, height: 48, background: 'var(--cream)', borderRadius: 3, margin: '0 auto' }} />
        <div style={{ width: 28, height: 7, background: 'var(--cream)', borderRadius: 3, marginTop: -32, marginLeft: -10 }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 35%, rgba(45,36,26,0.97) 78%)' }} />
      {/* Bottom content */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 18px 18px' }}>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, color: 'var(--brass)', letterSpacing: '0.06em', marginBottom: 6 }}>@trinitychurch_nash</div>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13, color: 'var(--cream)', lineHeight: 1.45, marginBottom: 10 }}>
          "You were made for more than you're settling for." — Watch the full message
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'rgba(244,237,226,0.08)', borderRadius: 20, padding: '3px 9px', marginBottom: 10 }}>
          <span style={{ fontSize: 9 }}>♪</span>
          <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 10, color: 'rgba(244,237,226,0.65)' }}>Way Maker — Bethel Music</span>
        </div>
        <div style={{ height: 2, background: 'rgba(244,237,226,0.12)', borderRadius: 1 }}>
          <div style={{ width: '42%', height: '100%', background: 'var(--brass)', borderRadius: 1 }} />
        </div>
      </div>
      {/* Side actions */}
      <div style={{ position: 'absolute', right: 12, bottom: 72, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
        {[{ icon: '♡', count: '2.4k' }, { icon: '↗', count: '318' }].map(({ icon, count }) => (
          <div key={icon} style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 18, color: 'var(--cream)' }}>{icon}</div>
            <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 10, color: 'rgba(244,237,226,0.55)', marginTop: 1 }}>{count}</div>
          </div>
        ))}
      </div>
      {/* SR badge */}
      <div style={{ position: 'absolute', top: 18, left: 18, display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ width: 26, height: 26, borderRadius: 6, background: 'var(--brass)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontFamily: 'Playfair Display, serif', fontSize: 11, color: 'var(--espresso)', fontWeight: 600 }}>S</span>
        </div>
        <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, color: 'rgba(244,237,226,0.85)', letterSpacing: '0.04em' }}>Sunday Reels</span>
      </div>
    </div>
    <div style={{ position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)', width: 68, height: 5, background: 'rgba(0,0,0,0.5)', borderRadius: 3 }} />
  </div>
);