/* Secao de Precos (#precos) — 3 planos "nos somos a agencia" */

function codekidWhatsAppLink(message) {
  const cfg = window.CODEKID_CONTATO || {};
  const num = (cfg.whatsapp || '').replace(/\D/g, '');
  if (!num) return null;
  return 'https://wa.me/' + num + '?text=' + encodeURIComponent(message);
}
window.codekidWhatsAppLink = codekidWhatsAppLink;

// abre WhatsApp se configurado; senao rola para #contato (fallback)
function codekidContactCTA(message) {
  const link = codekidWhatsAppLink(message);
  if (link) window.open(link, '_blank', 'noopener');
  else if (window.scrollToSection) window.scrollToSection('contato');
  else location.hash = '#contato';
}
window.codekidContactCTA = codekidContactCTA;

const PLANS = [
  {
    id: 'presenca', name: 'PRESENÇA', price: '49,99', accent: 'var(--cyan)', popular: false,
    tagline: 'Seu negócio no mapa digital.',
    features: [
      'Site profissional gerado com IA',
      'Subdomínio incluso; domínio próprio opcional',
      'Orientação para o Perfil da Empresa no Google',
      'Botão de WhatsApp integrado'
    ]
  },
  {
    id: 'crescimento', name: 'CRESCIMENTO', price: '100', accent: 'var(--purple)', popular: true,
    tagline: 'Para atrair e converter mais clientes.',
    features: [
      'Tudo do plano Presença',
      'SEO local (sem garantia de posição)',
      'Automação de WhatsApp',
      'Agendamentos online',
      'Relatório de resultados mensal'
    ]
  },
  {
    id: 'dominio', name: 'DOMÍNIO', price: '129,99', accent: 'var(--green)', popular: false,
    tagline: 'Sua presença digital no piloto automático.',
    features: [
      'Tudo do plano Crescimento',
      'Gestão completa da presença digital',
      'Campanhas de anúncios',
      'CRM de clientes',
      'Consultoria 1:1 mensal'
    ]
  }
];

function Pricing() {
  return (
    <section id="precos" style={{ padding: '60px 0' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 44 }}>
          <div className="eyebrow" style={{ color: 'var(--purple)', marginBottom: 14 }}>Planos & Preços</div>
          <h2 className="display" style={{ fontSize: 'clamp(28px, 3vw, 42px)', margin: '0 0 14px', lineHeight: 1.12 }}>
            Um plano para cada<br/>fase do seu <span className="gradient-text">negócio</span>.
          </h2>
          <p style={{ color: 'var(--text-dim)', fontSize: 15, maxWidth: 520, margin: '0 auto' }}>
            Sem carência, sem burocracia. Comece hoje e cancele quando quiser.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22, alignItems: 'stretch'
        }} data-pricing>
          {PLANS.map(p => (
            <div key={p.id} className="panel reveal" style={{
              position: 'relative',
              padding: '34px 28px',
              display: 'flex', flexDirection: 'column',
              overflow: 'visible',
              border: p.popular ? '1px solid var(--purple)' : '1px solid rgba(124,58,237,0.22)',
              boxShadow: p.popular ? '0 0 40px -12px rgba(124,58,237,0.55)' : 'none',
              transform: p.popular ? 'translateY(-6px)' : 'none'
            }}>
              {p.popular && (
                <div style={{
                  position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)',
                  background: 'linear-gradient(135deg, #5b8cff, var(--purple))',
                  color: '#fff', fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
                  padding: '6px 14px', borderRadius: 999, whiteSpace: 'nowrap',
                  boxShadow: '0 6px 18px -6px rgba(124,58,237,0.8)'
                }}>★ CRESCIMENTO</div>
              )}

              <div className="display" style={{ fontSize: 15, fontWeight: 700, letterSpacing: '0.08em', color: p.accent, marginBottom: 6 }}>
                {p.name}
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-dim)', marginBottom: 18, minHeight: 34 }}>{p.tagline}</div>

              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, marginBottom: 22 }}>
                <span style={{ fontSize: 15, color: 'var(--text-dim)', marginBottom: 6 }}>R$</span>
                <span className="display" style={{ fontSize: 46, fontWeight: 800, lineHeight: 1 }}>{p.price}</span>
                <span style={{ fontSize: 14, color: 'var(--text-dim)', marginBottom: 6 }}>/mês</span>
              </div>

              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'flex', flexDirection: 'column', gap: 12, flex: 1 }}>
                {p.features.map((f, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, fontSize: 13.5, color: 'rgba(255,255,255,0.85)' }}>
                    <span style={{
                      width: 20, height: 20, flexShrink: 0, borderRadius: 5,
                      background: 'rgba(0,255,163,0.12)', border: '1px solid rgba(0,255,163,0.5)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--green)'
                    }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                        <path d="M5 12l5 5 9-11" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>

              <button
                className={p.popular ? 'btn btn-primary' : 'btn btn-ghost'}
                style={{ justifyContent: 'center', width: '100%' }}
                onClick={() => codekidContactCTA(
                  `Olá! Tenho interesse no plano ${p.name} (R$ ${p.price}/mês) do CodeKid. Pode me explicar como funciona?`
                )}>
                Quero o {p.name.charAt(0) + p.name.slice(1).toLowerCase()}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
          ))}
        </div>

        <p style={{ textAlign: 'center', color: 'var(--text-faint)', fontSize: 12.5, marginTop: 26 }}>
          Planos para negócios do Rio de Janeiro. Confirme as formas de pagamento na contratação.<br />
          Todos os planos incluem suporte humano. Precisa de algo sob medida?{' '}
          <a href="#contato" onClick={e => { e.preventDefault(); window.scrollToSection && window.scrollToSection('contato'); }}
             style={{ color: 'var(--cyan)', textDecoration: 'none', fontWeight: 600 }}>Fale com a gente</a>.
        </p>
      </div>

      <style>{`
        @media (max-width: 960px) {
          [data-pricing] { grid-template-columns: 1fr !important; max-width: 420px; margin: 0 auto; }
          [data-pricing] > div { transform: none !important; }
        }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;