/* =========================================================
   Mother's Day LP — sections 8–13 + Footer + Sticky CTA
   ========================================================= */

/* ---------- 8. SOCIAL PROOF / TESTIMONIALS ---------- */
function SocialProof() {
  const stats = [
    { num: '+12mil', label: 'alunas' },
    { num: '4.9★', label: 'avaliação' },
    { num: '92%', label: 'concluem' },
  ];
  const cards = [
    {
      tone: ['#ffd6e7', '#ff8fc1'],
      name: 'Marina', age: 34, ctx: 'mãe de 2 · aluna há 8 meses',
      quote: 'Em 3 meses meu glúteo cresceu mais do que em 2 anos de academia. Treino na sala enquanto a Bia dorme.',
    },
    {
      tone: ['#ffe1f1', '#ff6bae'],
      name: 'Carla', age: 41, ctx: 'mãe de 3 · aluna há 1 ano',
      quote: 'Nunca achei que ia voltar a me sentir bem no espelho depois dos 40. A Jaque me devolveu isso.',
    },
    {
      tone: ['#fff4fa', '#ffb3d4'],
      name: 'Renata', age: 29, ctx: 'aluna há 6 meses',
      quote: 'Sou enfermeira, faço plantão. 30 minutos cabe na minha vida. Perdi 7kg sem dieta maluca.',
    },
  ];

  return (
    <section data-screen-label="08 Social Proof" style={{ padding: '64px 22px', background: '#fff' }}>
      <span className="eyebrow">Quem já viveu isso</span>
      <h2 style={{ fontSize: 'clamp(26px, 6vw, 36px)', marginTop: 12, marginBottom: 22, lineHeight: 1.1 }}>
        Mais de <span style={{ color: 'var(--jp-pink)' }}>12 mil mulheres</span> já transformaram seus corpos com o Método.
      </h2>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '18px 0 22px', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', marginBottom: 26 }}>
        {stats.map(s => (
          <div key={s.label} style={{ textAlign: 'center', flex: 1 }}>
            <div className="display" style={{ fontSize: 24, color: 'var(--jp-pink)', letterSpacing: '-0.02em' }}>{s.num}</div>
            <div style={{ fontSize: 10, color: 'var(--fg-subtle)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 800, marginTop: 2 }}>{s.label}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gap: 14 }}>
        {cards.map((c, i) => (
          <article key={i} style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 18,
            overflow: 'hidden',
            boxShadow: 'var(--shadow-sm)',
          }}>
            <div style={{ display: 'flex', height: 140, borderBottom: '1px solid var(--border)' }}>
              <div style={{ flex: 1, background: `linear-gradient(135deg, ${c.tone[0]}, ${c.tone[1]})`, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 10 }}>
                <span style={{ background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(4px)', padding: '4px 10px', borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--jp-pink-600)' }}>Antes</span>
              </div>
              <div style={{ flex: 1, background: `linear-gradient(135deg, ${c.tone[1]}, var(--jp-pink))`, position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 10 }}>
                <span style={{ background: 'var(--jp-pink)', color: '#fff', padding: '4px 10px', borderRadius: 999, fontSize: 10, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Depois</span>
              </div>
            </div>
            <div style={{ padding: '18px 20px' }}>
              <div style={{ color: 'var(--jp-pink)', fontSize: 13, marginBottom: 8, letterSpacing: '0.1em' }}>★★★★★</div>
              <p style={{ fontSize: 15, color: 'var(--jp-black)', lineHeight: 1.5, margin: 0, fontWeight: 500 }}>"{c.quote}"</p>
              <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: `linear-gradient(135deg, ${c.tone[0]}, ${c.tone[1]})`, flexShrink: 0 }}></div>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 13, color: 'var(--jp-black)' }}>{c.name}, {c.age}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>{c.ctx}</div>
                </div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- 9. GUARANTEE BLOCK ---------- */
function GuaranteeBlock() {
  return (
    <section data-screen-label="09 Guarantee" style={{ padding: '64px 22px', background: 'var(--jp-green-100)' }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        {/* Seal */}
        <div style={{
          width: 110, height: 110, margin: '0 auto 20px',
          borderRadius: '50%',
          background: '#fff',
          border: '3px solid var(--jp-green)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 12px 30px rgba(34,197,94,0.25)',
          position: 'relative',
        }}>
          <i data-lucide="shield-check" style={{ width: 36, height: 36, color: 'var(--jp-green)', marginBottom: 2 }}></i>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, color: 'var(--jp-green-700)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Garantia</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--jp-green-700)', letterSpacing: '-0.02em' }}>7 dias</div>
        </div>
      </div>
      <h2 style={{ fontSize: 'clamp(26px, 6vw, 34px)', textAlign: 'center', marginBottom: 16, color: 'var(--jp-black)', lineHeight: 1.1 }}>
        Garantia de 7 dias. <em style={{ fontStyle: 'italic', color: 'var(--jp-green-700)' }}>O risco é todo meu.</em>
      </h2>
      <p style={{ fontSize: 16, color: 'var(--jp-black)', textAlign: 'center', maxWidth: 520, margin: '0 auto', lineHeight: 1.6 }}>
        Você pode acessar a plataforma, olhar os treinos, conhecer o método e começar. Se dentro de 7 dias você sentir que não é para você, tudo bem. É só pedir o reembolso.
      </p>
      <p style={{ fontSize: 17, color: 'var(--jp-green-700)', textAlign: 'center', marginTop: 18, fontWeight: 700, fontStyle: 'italic' }}>
        Você só precisa tomar a decisão de começar.
      </p>
    </section>
  );
}

/* ---------- 10. FAQ / OBJECTIONS ---------- */
function FAQBlock() {
  const qs = [
    ['Vou conseguir mesmo sem academia?', 'Sim, lindona. O método foi desenhado pra treinar em casa com peso do corpo e equipamento mínimo (caneleira leve e colchonete). Os exercícios são pensados pra ativar e crescer músculo de verdade — eu te mostro o caminho certo.'],
    ['E se eu não tiver tempo?', '30 minutos, 3x por semana. Cabe até no horário da soneca da criança ou antes do trabalho. E como o acesso é vitalício, se você precisar pausar uma semana, é só voltar. Sem perder nada.'],
    ['Funciona pra quem nunca treinou?', 'Funciona principalmente pra quem nunca treinou. Tem 3 níveis: começa do zero, com vídeo de cada movimento, e evolui no seu ritmo. Você não precisa saber nada antes.'],
    ['Como eu acesso a plataforma?', 'Assim que o pagamento for confirmado, você recebe um e-mail com login e senha. Acessa pelo celular, tablet ou computador, no app ou no navegador. Tudo organizado por semana e por treino.'],
    ['E se eu não gostar?', 'Você tem 7 dias pra testar tudo. Se não for pra você, manda um e-mail e devolvo 100% do valor. Sem perguntas, sem burocracia. O risco é meu.'],
  ];
  return (
    <section data-screen-label="10 FAQ" style={{ padding: '64px 22px', background: '#fff' }}>
      <div style={{ textAlign: 'center', marginBottom: 28 }}>
        <span className="eyebrow">Tira dúvida</span>
        <h2 style={{ fontSize: 'clamp(26px, 6vw, 34px)', marginTop: 12, lineHeight: 1.1 }}>Perguntas frequentes</h2>
      </div>
      <div style={{ display: 'grid', gap: 10 }}>
        {qs.map(([q, a], i) => (
          <details key={i} style={{
            background: 'var(--jp-gray-50)',
            borderRadius: 14,
            padding: '16px 18px',
            border: '1px solid var(--border)',
          }}>
            <summary style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 15,
              cursor: 'pointer',
              listStyle: 'none',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              gap: 12,
              color: 'var(--jp-black)',
              lineHeight: 1.35,
            }}>
              <span>{q}</span>
              <span style={{ color: 'var(--jp-pink)', fontSize: 22, fontWeight: 800, lineHeight: 1, flexShrink: 0, marginTop: -2 }}>+</span>
            </summary>
            <p style={{ marginTop: 12, fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{a}</p>
          </details>
        ))}
      </div>
    </section>
  );
}

/* ---------- 11. CONSOLIDATED OFFER ---------- */
function ConsolidatedOffer() {
  const includes = [
    'Acesso completo à plataforma',
    'Todos os programas de treino',
    'Foco em glúteos, pernas e barriga',
    'Atualizações futuras inclusas',
    'Suporte vitalício no grupo',
    'Comunidade no WhatsApp',
  ];
  return (
    <section id="oferta" data-screen-label="11 Offer" style={{ padding: '64px 22px', background: 'linear-gradient(180deg, #fff 0%, var(--jp-pink-50) 100%)' }}>
      <div style={{ textAlign: 'center', marginBottom: 22 }}>
        <span className="eyebrow">Oferta de Dia das Mães</span>
        <h2 style={{ fontSize: 'clamp(26px, 6vw, 34px)', marginTop: 12, lineHeight: 1.1 }}>Comece hoje, lindona.</h2>
      </div>

      <div style={{
        background: '#fff',
        borderRadius: 24,
        boxShadow: 'var(--shadow-lg)',
        padding: '32px 22px 26px',
        border: '2px solid var(--jp-pink)',
        position: 'relative',
        marginTop: 20,
      }}>
        <div style={{
          position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--jp-pink)', color: '#fff',
          padding: '8px 18px', borderRadius: 999,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', whiteSpace: 'nowrap',
          boxShadow: 'var(--shadow-pink)',
        }}>★ Mais vendido · Vitalício</div>

        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--jp-black)' }}>Método Corpo Definido</div>
          <div style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 4, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700 }}>Acesso vitalício · Pagamento único</div>
        </div>

        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <div style={{ fontSize: 15, color: 'var(--fg-subtle)', textDecoration: 'line-through', fontWeight: 600 }}>De R$ 997</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, justifyContent: 'center', marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--jp-black)' }}>R$</span>
            <span className="display" style={{ fontSize: 'clamp(72px, 18vw, 110px)', color: 'var(--jp-pink)', lineHeight: 0.95, letterSpacing: '-0.04em' }}>297</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 4 }}>à vista · ou 12x R$ 29,40 no cartão</div>
        </div>

        <div style={{ height: 1, background: 'var(--border)', margin: '4px 0 18px' }}></div>

        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--jp-black)', marginBottom: 12 }}>O que está incluso</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'grid', gap: 10 }}>
          {includes.map(t => (
            <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--jp-black)' }}>
              <i data-lucide="check-circle-2" style={{ width: 18, height: 18, color: 'var(--jp-green)', flexShrink: 0, marginTop: 1 }}></i>
              <span>{t}</span>
            </li>
          ))}
        </ul>

        <button className="btn btn-cta" style={{ width: '100%', padding: '18px', fontSize: 15 }}>
          Quero meu acesso vitalício por R$297
        </button>
        <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-subtle)', marginTop: 10 }}>
          Pagamento 100% seguro · Cartão, Pix ou boleto
        </div>
      </div>

      <div className="guarantee-seal" style={{ marginTop: 18 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--jp-green)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <i data-lucide="shield-check" style={{ width: 22, height: 22 }}></i>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>Garantia incondicional de 7 dias</div>
          <div style={{ fontSize: 12, marginTop: 2 }}>Se não amar, devolvemos 100%. Sem perguntas.</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 12. FINAL CTA ---------- */
function FinalCTA() {
  return (
    <section data-screen-label="12 Final CTA" style={{
      padding: '72px 22px',
      background: 'var(--jp-black)',
      color: '#fff',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* pink glow accent */}
      <div style={{
        position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)',
        width: 320, height: 320, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,20,147,0.5) 0%, rgba(255,20,147,0) 70%)',
        pointerEvents: 'none',
      }}></div>

      <div style={{ position: 'relative' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(255,20,147,0.15)', border: '1px solid rgba(255,20,147,0.4)', marginBottom: 22 }}>
          <i data-lucide="heart" style={{ width: 14, height: 14, color: 'var(--jp-pink)', fill: 'var(--jp-pink)' }}></i>
          <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--jp-pink)' }}>Dia das Mães · 2026</span>
        </div>

        <h2 className="display" style={{
          fontSize: 'clamp(34px, 8vw, 56px)',
          color: '#fff', marginBottom: 24,
          lineHeight: 1.05,
          maxWidth: 600, margin: '0 auto 28px',
          letterSpacing: '-0.025em',
        }}>
          Esse pode ser o Dia das Mães em que <em style={{ fontStyle: 'italic', color: 'var(--jp-pink)' }}>você se escolhe.</em>
        </h2>

        <a href="#oferta" className="btn btn-cta" style={{ padding: '20px 30px', fontSize: 16, width: '100%', maxWidth: 420 }}>
          Quero garantir meu acesso agora
        </a>
        <div style={{ marginTop: 14, fontSize: 12, color: '#a3a3a3' }}>
          R$297 · Pagamento único · Acesso vitalício
        </div>
      </div>
    </section>
  );
}

/* ---------- 13. URGENCY BLOCK ---------- */
function UrgencyBlock({ countdown }) {
  return (
    <section data-screen-label="13 Urgency" style={{ padding: '56px 22px 72px', background: 'var(--jp-pink)', color: '#fff' }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.18)', marginBottom: 18 }}>
        <i data-lucide="alarm-clock" style={{ width: 14, height: 14, color: '#fff' }}></i>
        <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#fff' }}>Tempo limitado</span>
      </div>

      <h2 style={{ fontSize: 'clamp(28px, 6.5vw, 38px)', color: '#fff', marginBottom: 18, lineHeight: 1.1 }}>
        Essa condição é especial de Dia das Mães.
      </h2>
      <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.92)', lineHeight: 1.6, marginBottom: 22 }}>
        O acesso vitalício por <strong style={{ color: '#fff' }}>R$297</strong> não ficará disponível o tempo todo. Depois que a campanha acabar, o vitalício volta para o valor cheio (<strong style={{ color: '#fff' }}>R$997</strong>) e os outros planos voltam ao normal.
      </p>

      {/* Countdown */}
      <div style={{
        background: 'rgba(0,0,0,0.25)',
        border: '1px solid rgba(255,255,255,0.2)',
        borderRadius: 16,
        padding: '18px 16px',
        marginBottom: 22,
      }}>
        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.8)', textAlign: 'center', marginBottom: 12 }}>Campanha encerra em</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            { v: countdown.days, l: 'dias' },
            { v: countdown.hours, l: 'horas' },
            { v: countdown.minutes, l: 'min' },
            { v: countdown.seconds, l: 'seg' },
          ].map((u, i) => (
            <div key={i} style={{
              background: '#fff',
              borderRadius: 10,
              padding: '10px 4px',
              textAlign: 'center',
            }}>
              <div className="display" style={{ fontSize: 26, color: 'var(--jp-pink)', letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                {String(u.v).padStart(2, '0')}
              </div>
              <div style={{ fontSize: 9, color: 'var(--jp-black)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 800, marginTop: 4 }}>{u.l}</div>
            </div>
          ))}
        </div>
      </div>

      <a href="#oferta" className="btn btn-cta" style={{ width: '100%', padding: '18px', fontSize: 15 }}>
        Quero meu acesso vitalício agora
      </a>
      <div style={{ textAlign: 'center', fontSize: 11, color: 'rgba(255,255,255,0.85)', marginTop: 12, fontWeight: 600 }}>
        Campanha encerra 10 de maio de 2026 · 23h59
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ logoSrc }) {
  return (
    <footer style={{ background: 'var(--jp-black)', color: '#a3a3a3', padding: '40px 22px 32px' }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 36, marginBottom: 16 }} />
      <p style={{ fontSize: 13, color: '#a3a3a3', lineHeight: 1.6, marginBottom: 20, maxWidth: 480 }}>
        Método Corpo Definido — treinos em casa pra mulheres reais. Resultados variam de pessoa a pessoa. Consulte um profissional de saúde antes de iniciar.
      </p>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '14px 22px', fontSize: 12, marginBottom: 22 }}>
        <a href="#" style={{ color: '#fff', fontWeight: 600 }}>Termos de uso</a>
        <a href="#" style={{ color: '#fff', fontWeight: 600 }}>Política de privacidade</a>
        <a href="#" style={{ color: '#fff', fontWeight: 600 }}>Contato</a>
        <a href="#" style={{ color: '#fff', fontWeight: 600 }}>Suporte</a>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
        <a href="#" aria-label="Instagram" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
        </a>
        <a href="#" aria-label="YouTube" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
        </a>
        <a href="#" aria-label="WhatsApp" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
          <i data-lucide="message-circle" style={{ width: 16, height: 16 }}></i>
        </a>
      </div>

      <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 18, fontSize: 11, color: '#737373', lineHeight: 1.6 }}>
        © 2026 Jaque Personal · Todos os direitos reservados<br />
        CNPJ 00.000.000/0001-00 · contato@jaquepersonal.com.br
      </div>
    </footer>
  );
}

/* ---------- STICKY CTA ---------- */
function StickyCTA({ visible, countdown }) {
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 60,
      background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(12px)',
      borderTop: '1px solid var(--border)',
      padding: '10px 14px',
      display: 'flex', alignItems: 'center', gap: 10,
      transform: visible ? 'translateY(0)' : 'translateY(110%)',
      transition: 'transform 320ms var(--ease-out)',
      boxShadow: '0 -8px 24px rgba(0,0,0,0.08)',
      maxWidth: 430,
      margin: '0 auto',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{ fontSize: 11, color: 'var(--fg-subtle)', textDecoration: 'line-through', fontWeight: 600 }}>R$997</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--jp-pink)', fontSize: 18 }}>R$297</span>
          <span style={{ fontSize: 10, color: 'var(--fg-subtle)', fontWeight: 600 }}>vitalício</span>
        </div>
        <div style={{ fontSize: 10, color: 'var(--jp-pink-600)', fontWeight: 700, marginTop: 1, fontVariantNumeric: 'tabular-nums' }}>
          ⏱ Encerra em {countdown.days}d {String(countdown.hours).padStart(2,'0')}h{String(countdown.minutes).padStart(2,'0')}
        </div>
      </div>
      <a href="#oferta" className="btn btn-cta" style={{ padding: '12px 18px', fontSize: 13 }}>
        Garantir agora →
      </a>
    </div>
  );
}

Object.assign(window, {
  SocialProof, GuaranteeBlock, FAQBlock, ConsolidatedOffer,
  FinalCTA, UrgencyBlock, Footer, StickyCTA,
});
