// Section 8 — Pricing. Plano único Vitrini Fundador (R$97/mês cartão).
// Cartão central destacado + nota lateral com benefícios.
function Pricing() {
  const feats = [
    'Site profissional pronto em 48h',
    'Domínio próprio (.com.br ou similar)',
    'Hospedagem rápida com SSL incluído',
    'Integração com WhatsApp e Google Meu Negócio',
    'Edições mensais sem cobrança extra',
    'Suporte humano por WhatsApp',
  ];
  return (
    <section id="planos" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <span className="eyebrow">Plano</span>
            <h2 className="h-section" style={{ margin: '8px auto 0', maxWidth: '18ch' }}>Um plano. <span className="em">Simples assim.</span></h2>
            <p style={{ fontSize: 15, color: 'var(--muted)', marginTop: 10 }}>Sem setup · sem fidelidade · cancele quando quiser.</p>
          </div>
        </Reveal>

        <Reveal>
          <div className="founder-card levitate-price" style={{
            maxWidth: 760, margin: '0 auto',
            background: 'var(--ink)', color: '#fff',
            borderRadius: 'var(--r-2xl)', padding: '40px 44px',
            position: 'relative', overflow: 'hidden',
            boxShadow: 'var(--shadow-lg)',
          }}>
            <div style={{ position: 'absolute', width: 380, height: 380, right: -120, top: -160, background: 'radial-gradient(circle, rgba(15,107,92,.55), transparent 64%)', filter: 'blur(20px)' }} />
            <span style={{ position: 'absolute', top: 22, right: 22, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink)', background: 'var(--mint)', padding: '5px 11px', borderRadius: 999 }}>
              <Star size={11} color="var(--gold)" /> Plano Fundador
            </span>

            <div style={{ position: 'relative' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 30, color: '#fff', margin: 0, letterSpacing: '-.01em' }}>Vitrini Fundador</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: '#9fb3ab', margin: '10px 0 26px', maxWidth: '46ch' }}>
                Tudo que um negócio local precisa pra parar de perder cliente no Google. Você é dos primeiros — preço fixo de fundador, pra sempre.
              </p>

              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, marginBottom: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 72, lineHeight: .9, letterSpacing: '-.02em', color: '#fff' }}>R$<Counter value={97} /></span>
                <span style={{ fontSize: 17, color: '#9fb3ab', marginBottom: 12 }}>/mês</span>
              </div>
              <p style={{ fontSize: 13, color: '#9fb3ab', margin: '0 0 28px' }}>Cobrado no cartão · cancele quando quiser · vagas limitadas.</p>

              <a href="https://www.asaas.com/c/l2gtopwyu2iqbgu4" target="_blank" rel="noopener" className="btn btn-primary" style={{ width: '100%', marginBottom: 30, background: 'var(--brand)', color: '#fff' }}>
                Garantir minha vaga <Icon name="arrow" size={18} color="#fff" />
              </a>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px 24px' }}>
                {feats.map(f => (
                  <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14.5, lineHeight: 1.45, color: '#cdded7' }}>
                    <Icon name="check" size={17} color="var(--brand-300)" stroke={2.2} /> {f}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <p style={{ textAlign: 'center', marginTop: 22, fontSize: 13.5, color: 'var(--muted)' }}>
            Está com dúvida? <a href="#previa" style={{ color: 'var(--ink-2)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Veja sua prévia grátis primeiro.</a>
          </p>
        </Reveal>
      </div>

      <style>{`@keyframes levp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } .levitate-price{ animation: levp 3.6s ease-in-out infinite; }`}</style>
    </section>
  );
}

window.Pricing = Pricing;