/* Surgr Landing — Hero */

const { PillTag: HPillTag, CTAButton: HCTAButton, GlowBlob: HGlowBlob, PhoneMockup: HPhoneMockup } = window.SurgrLandingKit;

function Hero() {
  return (
    <section style={{
      position: 'relative',
      padding: '80px 24px 120px',
      overflow: 'hidden',
    }}>
      <HGlowBlob size={700} x="20%" y="40%" delay={0}/>
      <HGlowBlob size={500} x="85%" y="80%" delay={3}/>

      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,1fr)',
        gap: 60,
        alignItems: 'center',
        position: 'relative',
        zIndex: 1,
      }}>
        <div>
          <div style={{ marginBottom: 28 }}>
            <HPillTag text="TREINO COM IA PERSONALIZADA"/>
          </div>

          <h1 style={{
            fontFamily: 'var(--surgr-font-heading)',
            fontWeight: 800,
            fontSize: 'clamp(48px, 8vw, 96px)',
            letterSpacing: '-2px',
            lineHeight: 1.0,
            color: '#FFF',
            margin: 0,
            textWrap: 'balance',
          }}>
            SEU TREINO<br/>
            <span style={{
              color: 'var(--surgr-accent)',
              textShadow: '0 0 40px rgba(200,255,0,0.4)',
            }}>INTELIGENTE.</span>
          </h1>

          <p style={{
            fontFamily: 'var(--surgr-font-body)',
            fontSize: 'clamp(16px, 2vw, 20px)',
            lineHeight: 1.6,
            color: '#8888A0',
            marginTop: 28,
            maxWidth: 520,
            fontWeight: 500,
          }}>
            Chega de ficha genérica. O Surgr usa IA pra montar, ajustar e evoluir seu treino com base em como você treina <strong style={{ color: '#F0F0F5', fontWeight: 700 }}>de verdade</strong>.
          </p>

          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <HCTAButton text="COMEÇAR AGORA" large/>
            <span style={{
              fontFamily: 'var(--surgr-font-body)', fontSize: 13,
              color: '#55556A', fontWeight: 600,
            }}>
              7 dias grátis · Sem cartão
            </span>
          </div>

          {/* Social proof row */}
          <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <div style={{
                fontFamily: 'var(--surgr-font-heading)', fontWeight: 700,
                fontSize: 28, color: '#FFF', letterSpacing: 0.5,
              }}>4.9 ★</div>
              <div style={{
                fontSize: 11, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
                color: '#55556A', marginTop: 4, fontFamily: 'var(--surgr-font-body)',
              }}>App Store BR</div>
            </div>
            <div style={{ width: 1, height: 36, background: 'rgba(255,255,255,0.06)' }}/>
            <div>
              <div style={{
                fontFamily: 'var(--surgr-font-heading)', fontWeight: 700,
                fontSize: 28, color: '#FFF', letterSpacing: 0.5,
              }}>+12k</div>
              <div style={{
                fontSize: 11, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
                color: '#55556A', marginTop: 4, fontFamily: 'var(--surgr-font-body)',
              }}>Atletas ativos</div>
            </div>
            <div style={{ width: 1, height: 36, background: 'rgba(255,255,255,0.06)' }}/>
            <div>
              <div style={{
                fontFamily: 'var(--surgr-font-heading)', fontWeight: 700,
                fontSize: 28, color: '#FFF', letterSpacing: 0.5,
              }}>1.2M</div>
              <div style={{
                fontSize: 11, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
                color: '#55556A', marginTop: 4, fontFamily: 'var(--surgr-font-body)',
              }}>Séries logadas</div>
            </div>
          </div>
        </div>

        <HPhoneMockup/>
      </div>
    </section>
  );
}

window.SurgrLandingKit.Hero = Hero;