// Section 8 — Pricing. 3 plans (Profissional highlighted, levitating) +
// Founder note. Prices count up from 0.
function Pricing() {
  const plans = [
    { name: 'Essencial', price: 59, blurb: 'Pro negócio que está começando online.', feats: ['Site de 1 página', 'Domínio próprio', 'WhatsApp integrado', '1 edição/mês'] },
    { name: 'Profissional', price: 119, blurb: 'O favorito. Tudo que um negócio local precisa.', feats: ['Até 4 páginas', 'Agendamento online', 'Google Meu Negócio', '3 edições/mês', 'Suporte prioritário'], highlight: true },
    { name: 'Premium', price: 219, blurb: 'Pra quem quer virar máquina de clientes.', feats: ['Páginas ilimitadas', 'Blog + SEO', 'Integração de tráfego pago', 'Edições ilimitadas', 'Gerente dedicado'] },
  ];
  return (
    <section id="planos" className="section">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 4 }}>
            <span className="eyebrow">Planos</span>
            <h2 className="h-section" style={{ margin: '8px auto 0', maxWidth: '16ch' }}>Preço de quem <span className="em">começa junto.</span></h2>
            <p style={{ fontSize: 15, color: 'var(--muted)', marginTop: 8 }}>Setup único de R$397 · cancela quando quiser.</p>
          </div>
        </Reveal>
        <div className="pricing grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 22, alignItems: 'stretch' }}>
          {plans.map((p, i) => (
            <Reveal key={p.name} delay={i * 0.08} style={{ display: 'flex' }}>
              <PriceCard {...p} />
            </Reveal>
          ))}
        </div>
        {/* founder note */}
        <Reveal>
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', justifyContent: 'center',
            background: 'var(--ink)', color: '#fff', borderRadius: 'var(--r-xl)', padding: '22px 28px', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', width: 300, height: 300, right: -80, top: -120, background: 'radial-gradient(circle, rgba(15,107,92,.5), transparent 64%)', filter: 'blur(14px)' }} />
            <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 21, color: '#fff' }}>
              <span style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--brand)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={16} color="#fff" stroke={2.4} /></span>
              Você é dos primeiros.
            </span>
            <span style={{ position: 'relative', fontSize: 15, color: '#cdded7' }}>Plano Fundador: <strong style={{ color: '#fff' }}>setup R$97 + R$79/mês</strong>. Vagas limitadas.</span>
            <a href="#previa" className="btn btn-primary" style={{ position: 'relative', marginLeft: 'auto' }}>Garantir vaga</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PriceCard({ name, price, blurb, feats, highlight }) {
  return (
    <div className={highlight ? 'levitate-price' : ''} style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      background: highlight ? 'var(--ink)' : 'var(--paper)', color: highlight ? '#fff' : 'var(--ink)',
      border: highlight ? '0' : '1px solid var(--line)', borderRadius: 'var(--r-2xl)', padding: 30,
      boxShadow: highlight ? 'var(--shadow-lg)' : 'var(--shadow-sm)', position: 'relative', overflow: 'hidden',
    }}>
      {highlight && <div style={{ position: 'absolute', width: 240, height: 240, right: -60, top: -80, background: 'radial-gradient(circle, rgba(15,107,92,.55), transparent 64%)', filter: 'blur(14px)' }} />}
      {highlight && <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)" /> Favorito</span>}
      <div style={{ position: 'relative' }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: highlight ? '#fff' : 'var(--ink-2)', margin: 0, letterSpacing: '-.01em' }}>{name}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.5, color: highlight ? '#9fb3ab' : 'var(--muted)', margin: '8px 0 22px', minHeight: 42 }}>{blurb}</p>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, marginBottom: 24 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 56, lineHeight: .9, letterSpacing: '-.02em', color: highlight ? '#fff' : 'var(--ink-2)' }}>R$<Counter value={price} /></span>
          <span style={{ fontSize: 15, color: highlight ? '#9fb3ab' : 'var(--muted)', marginBottom: 8 }}>/mês</span>
        </div>
        <a href="#previa" className={highlight ? 'btn' : 'btn btn-ghost'} style={highlight ? { background: 'var(--brand)', color: '#fff', width: '100%', marginBottom: 24 } : { width: '100%', marginBottom: 24 }}>Começar</a>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {feats.map(f => (
            <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14.5, color: highlight ? '#cdded7' : 'var(--ink-2)' }}>
              <Icon name="check" size={17} color={highlight ? 'var(--brand-300)' : 'var(--brand)'} stroke={2.2} /> {f}
            </div>
          ))}
        </div>
      </div>
      <style>{`@keyframes levp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } .levitate-price{ animation: levp 3.2s ease-in-out infinite; }`}</style>
    </div>
  );
}

window.Pricing = Pricing;