/* Hero + Interrupção (block 1 + 2) */

function Hero() {
  return (
    <section style={{
      padding: '24px 22px 48px',
      background: '#fff',
      position: 'relative',
    }}>
      {/* Pré-headline pill */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px',
          background: 'var(--jp-pink-100)',
          color: 'var(--jp-pink-600)',
          borderRadius: 999,
          fontFamily: 'var(--font-body)',
          fontSize: 11,
          fontWeight: 800,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          textWrap: 'balance',
          textAlign: 'center',
          lineHeight: 1.3,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--jp-pink)' }}></span>
          Dia das Mães · até 10/mai · condição única
        </span>
      </div>

      {/* Headline */}
      <h1 className="display" style={{
        fontSize: 'clamp(38px, 9.5vw, 56px)',
        textAlign: 'left',
        marginBottom: 18,
        letterSpacing: '-0.03em',
        lineHeight: 1.02,
      }}>
        Mãe, esse ano você vai treinar <span style={{ color: 'var(--jp-pink)' }}>pra você.</span>
      </h1>

      {/* Sub */}
      <p style={{
        fontSize: 17,
        lineHeight: 1.55,
        color: 'var(--fg-muted)',
        marginBottom: 14,
      }}>
        Acesso <strong style={{ color: 'var(--fg-strong)' }}>vitalício</strong> ao Método Corpo Definido por <strong style={{ color: 'var(--jp-pink)' }}>R$ 297</strong> — 70% off só no Dia das Mães. Pagamento único. Você treina pra sempre.
      </p>

      {/* Risk reversal small */}
      <p style={{ fontSize: 13, color: 'var(--fg-subtle)', marginBottom: 22 }}>
        7 dias pra testar. Não amou? Eu devolvo 100%. Sem perguntas.
      </p>

      {/* Photo Jaque (real) */}
      <div style={{
        borderRadius: 22,
        aspectRatio: '4/5',
        marginBottom: 24,
        position: 'relative',
        overflow: 'hidden',
        boxShadow: '0 20px 60px rgba(255,20,147,0.18)',
      }}>
        <img
          src="jaque-hero.jpg"
          alt="Jaque Personal — Acesso Vitalício Dia das Mães"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
        <div style={{
          position: 'absolute', bottom: 16, left: 16, right: 16,
          background: 'rgba(5,5,5,0.85)',
          color: '#fff',
          backdropFilter: 'blur(6px)',
          padding: '10px 14px',
          borderRadius: 12,
          fontSize: 12,
          fontWeight: 600,
        }}>
          ★★★★★ <span style={{ opacity: 0.85 }}>+12 mil mulheres já decidiram</span>
        </div>
      </div>

      {/* CTA */}
      <a href="#oferta" className="btn btn-cta" style={{
        width: '100%',
        padding: '20px 18px',
        fontSize: 17,
        whiteSpace: 'normal',
        textAlign: 'center',
        lineHeight: 1.25,
        boxSizing: 'border-box',
      }}>
        Quero meu acesso vitalício por R$ 297 →
      </a>

      {/* Trust strip */}
      <div style={{
        marginTop: 16,
        display: 'flex',
        flexDirection: 'column',
        gap: 6,
        fontSize: 13,
        color: 'var(--fg-muted)',
      }}>
        {['Pagamento via Eduzz', 'Acesso imediato', 'Garantia de 7 dias'].map(t => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <i data-lucide="check" style={{ width: 14, height: 14, color: 'var(--jp-green)', strokeWidth: 3 }}></i>
            {t}
          </div>
        ))}
      </div>
    </section>
  );
}

function PatternInterrupt() {
  return (
    <section style={{
      background: 'var(--jp-black)',
      color: '#fff',
      padding: '52px 22px',
    }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: 'rgba(255,255,255,0.08)', borderRadius: 999, marginBottom: 22 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--jp-pink)' }}></span>
        <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#fff' }}>Uma pausa</span>
      </div>
      <h2 className="display" style={{
        color: '#fff',
        fontSize: 'clamp(30px, 7vw, 44px)',
        marginBottom: 22,
        letterSpacing: '-0.025em',
        lineHeight: 1.05,
      }}>
        Antes de continuar, lê isso:
      </h2>
      <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 16, lineHeight: 1.65 }}>
        Eu sou a Jaque. Há <strong style={{ color: '#fff' }}>8 anos</strong> eu treino mulheres em casa — mães, profissionais, mulheres com 2 filhos e 3 trabalhos. Eu não vendo treino. Eu vendo um caminho pra você voltar a ser dona do seu próprio tempo.
        <br/><br/>
        Esse ano, no Dia das Mães, eu fiz a oferta que eu queria que tivesse me feito quando eu mais precisei: <strong style={{ color: 'var(--jp-pink)' }}>acesso vitalício, pagamento único, treine pra sempre.</strong>
        <br/><br/>
        <strong style={{ color: '#fff' }}>R$ 297.</strong> Eu sei que parece pouco. É pouco mesmo. Foi pra ser.
      </p>
      <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg, var(--jp-pink), var(--jp-pink-600))', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontFamily: 'var(--font-display)' }}>
          J
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, color: '#fff' }}>Jaque · personal trainer</div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>Criadora do Método Corpo Definido</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, PatternInterrupt });