// Landing sections: Pricing inline · ROI Calculator · FAQ · CTA final · Footer

const { useState: useBizState } = React;

// ─── PRICING INLINE ───
function LpPricing({ onDemo, onPick }) {
  const [billing, setBilling] = useBizState('anual');

  const plans = [
    { id: 'essencial', name: 'Essencial', eyebrow: 'Começando a vender com IA', price: { mensal: 197, anual: 157 }, setup: 497,
      feats: ['Até 3 usuários', '1 número de WhatsApp', 'IA atende, qualifica e faz follow-up', 'Pipeline + Contatos + Conversas', 'Relatórios essenciais', '~500 conversas de IA/mês'], cta: 'Assinar Essencial' },
    { id: 'profissional', name: 'Profissional', eyebrow: 'O mais escolhido', price: { mensal: 397, anual: 317 }, setup: 897, hl: true,
      feats: ['Até 10 usuários', 'Tudo do Essencial +', 'Disparos em massa (templates)', 'Atribuição automática de leads', 'Pontuação de IA do vendedor', 'Follow-up de 1/3/5 dias', '~2.000 conversas de IA/mês', 'Suporte prioritário'], cta: 'Assinar Profissional' },
    { id: 'escala', name: 'Escala', eyebrow: 'Operações grandes', price: { mensal: 797, anual: 'sob consulta' }, setup: 1997,
      feats: ['Usuários ilimitados', 'Multi-número de WhatsApp', 'Alto volume de IA', 'Treinamento mensal incluído', 'Onboarding dedicado', 'SLA prioritário'], cta: 'Falar com vendas' },
  ];

  return (
    <section id="precos" className="lp-section pricing-inline">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />PREÇOS HONESTOS</span>
          <h2 className="lp-section-title">Preço justo,<br/><em>cobrado em Reais.</em></h2>
          <p className="lp-section-sub">Sem letrinha miúda, sem dólar dolarizado. Cancele a qualquer momento.</p>

          <div style={{display:'flex', justifyContent:'center', marginTop: 28}}>
            <div style={{display:'inline-flex', background: 'white', borderRadius: 999, padding: 4, boxShadow: '0 8px 24px -12px rgba(20,30,60,.18)'}}>
              <button onClick={() => setBilling('mensal')} style={{
                fontFamily:'inherit', fontSize: 13, fontWeight: 600, padding: '9px 18px',
                background: billing === 'mensal' ? 'var(--ink)' : 'transparent',
                color: billing === 'mensal' ? 'white' : 'var(--ink-muted)',
                border: 'none', borderRadius: 999, cursor: 'default', letterSpacing: '-0.005em',
              }}>Cobrança mensal</button>
              <button onClick={() => setBilling('anual')} style={{
                fontFamily:'inherit', fontSize: 13, fontWeight: 600, padding: '9px 18px',
                background: billing === 'anual' ? 'var(--ink)' : 'transparent',
                color: billing === 'anual' ? 'white' : 'var(--ink-muted)',
                border: 'none', borderRadius: 999, cursor: 'default', letterSpacing: '-0.005em',
                display:'inline-flex', alignItems:'center', gap: 8,
              }}>Anual <span style={{fontSize:10, fontWeight:700, padding:'2px 7px', borderRadius:999, background: billing === 'anual' ? 'oklch(1 0 0 / 0.2)' : 'var(--acc-mint)', color: billing === 'anual' ? 'var(--acc-mint)' : 'oklch(0.34 0.12 160)'}}>20% off + implantação grátis</span></button>
            </div>
          </div>
        </div>

        <div className="pricing-grid">
          {plans.map(p => (
            <div key={p.id} className={`price-card ${p.hl ? 'price-card-hl' : ''}`}>
              {p.hl && <div className="price-badge">⭐ MAIS POPULAR</div>}
              <div className="price-eyebrow">{p.eyebrow}</div>
              <div className="price-name">{p.name}</div>
              <div className="price-row">
                {typeof p.price[billing] === 'number' ? (
                  <>
                    <span className="price-currency">R$</span>
                    <span className="price-n">{p.price[billing]}</span>
                    <span className="price-unit">/mês</span>
                  </>
                ) : (
                  <span className="price-custom">{p.price[billing]}</span>
                )}
              </div>
              <div className="price-setup">
                {billing === 'anual'
                  ? <><s>Implantação R$ {p.setup.toLocaleString('pt-BR')}</s> <b style={{color:'oklch(0.42 0.13 155)'}}>grátis no anual</b></>
                  : <>+ Implantação R$ {p.setup.toLocaleString('pt-BR')} <span style={{opacity:.7}}>(única)</span></>}
              </div>
              <ul className="price-features">
                {p.feats.map((f, i) => (
                  <li key={i}>
                    <span className="price-feat-check">{lpICN.check}</span>{f}
                  </li>
                ))}
              </ul>
              <button className={`price-cta ${p.hl ? 'price-cta-hl' : ''}`} onClick={() => onPick(p.id)}>
                {p.cta}
              </button>
            </div>
          ))}
        </div>

        <div className="pricing-foot">
          <div style={{maxWidth: 680, margin: '0 auto 20px', padding: '16px 20px', background: 'white', borderRadius: 16, boxShadow: '0 8px 24px -14px rgba(20,30,60,.14)', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6}}>
            <b style={{color:'var(--ink)'}}>A implantação inclui:</b> configuração do WhatsApp, treino da IA com o seu negócio, importação da sua base de contatos, montagem do pipeline e <b style={{color:'var(--ink)'}}>treinamento do gestor e da equipe de vendas</b>. Tudo pronto pra vender no primeiro dia.
          </div>
          <a href="#" onClick={(e) => { e.preventDefault(); onPick('pricing'); }} className="lp-link">Falar com vendas sobre o seu plano →</a>
        </div>
      </div>
    </section>
  );
}

// ─── ROI CALCULATOR ───
function LpRoi({ onDemo }) {
  const [team, setTeam] = useBizState(8);
  const [ticket, setTicket] = useBizState(15000);
  const [conv, setConv] = useBizState(15);

  // simplificações: cada vendedor faz ~30 leads/mês. Ezza ↑ conversão em ~8pp e ↓ 30% do tempo.
  const leadsPerSeller = 30;
  const monthlyLeads = team * leadsPerSeller;
  const currentDealsMonth = monthlyLeads * (conv / 100);
  const currentRevenueMonth = currentDealsMonth * ticket;

  const ezzaConv = Math.min(60, conv + 8);
  const ezzaDealsMonth = monthlyLeads * (ezzaConv / 100);
  const ezzaRevenueMonth = ezzaDealsMonth * ticket;

  const extraRevenue = ezzaRevenueMonth - currentRevenueMonth;
  const hoursSaved = team * 12; // 12h/mês por vendedor
  const yearImpact = extraRevenue * 12;

  const fmt = (n) => {
    if (n >= 1_000_000) return 'R$ ' + (n / 1_000_000).toFixed(1).replace('.', ',') + 'M';
    if (n >= 1_000) return 'R$ ' + (n / 1_000).toFixed(0) + 'k';
    return 'R$ ' + n.toLocaleString('pt-BR');
  };

  return (
    <section className="lp-section roi">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />CALCULADORA DE ROI</span>
          <h2 className="lp-section-title">Quanto a Ezza<br/><em>devolve em receita</em>?</h2>
          <p className="lp-section-sub">Move os controles e veja a projeção pro seu time. Baseado em dados de clientes reais.</p>
        </div>

        <div className="roi-inner">
          <div className="roi-side">
            <h3>Seus números hoje</h3>
            <p>Ajuste os 3 indicadores principais — projetamos o impacto baseado em clientes com perfil parecido.</p>

            <div className="roi-controls">
              <div className="roi-control">
                <div className="roi-control-head">
                  <span className="roi-control-lbl">Tamanho do time comercial</span>
                  <span className="roi-control-val">{team} {team === 1 ? 'pessoa' : 'pessoas'}</span>
                </div>
                <input type="range" className="roi-range" min="2" max="40" step="1" value={team} onChange={(e) => setTeam(+e.target.value)} />
              </div>

              <div className="roi-control">
                <div className="roi-control-head">
                  <span className="roi-control-lbl">Ticket médio por negócio</span>
                  <span className="roi-control-val">R$ {(ticket/1000).toFixed(0)}k</span>
                </div>
                <input type="range" className="roi-range" min="1000" max="120000" step="1000" value={ticket} onChange={(e) => setTicket(+e.target.value)} />
              </div>

              <div className="roi-control">
                <div className="roi-control-head">
                  <span className="roi-control-lbl">Taxa de conversão atual</span>
                  <span className="roi-control-val">{conv}%</span>
                </div>
                <input type="range" className="roi-range" min="2" max="40" step="1" value={conv} onChange={(e) => setConv(+e.target.value)} />
              </div>
            </div>
          </div>

          <div className="roi-output">
            <div className="roi-output-eyebrow">PROJEÇÃO ANUAL COM A EZZA</div>
            <div className="roi-output-n">+{fmt(yearImpact).replace('R$ ', 'R$ ')}</div>
            <div className="roi-output-unit">em receita adicional / ano</div>

            <div className="roi-output-rows">
              <div className="roi-output-row">
                <span>Receita mensal hoje</span>
                <span className="roi-out-val">{fmt(currentRevenueMonth)}</span>
              </div>
              <div className="roi-output-row">
                <span>Com Ezza ({ezzaConv}% conversão)</span>
                <span className="roi-out-val">{fmt(ezzaRevenueMonth)}</span>
              </div>
              <div className="roi-output-row">
                <strong>+ receita / mês</strong>
                <span className="roi-out-val" style={{color:'var(--acc-mint)'}}>+{fmt(extraRevenue)}</span>
              </div>
              <div className="roi-output-row">
                <span>Horas economizadas</span>
                <span className="roi-out-val">{hoursSaved}h / mês</span>
              </div>
            </div>

            <button className="lp-btn lp-btn-light roi-output-cta" onClick={onDemo}>
              Ver isso no meu pipeline {lpICN.arrowRight}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───
function LpFaq() {
  const [open, setOpen] = useBizState(0);

  const items = [
    {
      q: 'Quanto tempo leva para implementar a Ezza?',
      a: 'Em média 1 a 2 semanas para times de até 25 pessoas. Importamos seus contatos, configuramos pipelines e treinamos seu time. O CSM da Ezza acompanha cada etapa.',
    },
    {
      q: 'Vocês têm integração com WhatsApp Business oficial?',
      a: 'Sim, oficialmente como BSP (Business Solution Provider) da Meta. Templates HSM aprovados, mensagens de marketing autorizadas e sem risco de banimento.',
    },
    {
      q: 'E os dados que já tenho hoje, em outro CRM ou planilha?',
      a: 'Migramos pra você. Aceitamos CSV, exports do Pipedrive, HubSpot, RD Station, Salesforce e Google Sheets. Migração inclusa no plano Pro e Business.',
    },
    {
      q: 'A Ezza atende empresa pequena ou só grande?',
      a: 'Os dois. O plano Starter foi desenhado para times de 3 a 10 pessoas, com tudo que precisa. O Business é para operações comerciais grandes (50+ vendedores), com SSO, auditoria e gerente dedicado.',
    },
    {
      q: 'Vocês são compatíveis com a LGPD?',
      a: 'Totalmente. Dados em servidores brasileiros (AWS São Paulo), criptografia em trânsito e em repouso, exportação de dados do titular em até 24h, auditoria automática de acesso a dados sensíveis e DPO disponível.',
    },
    {
      q: 'Posso cancelar a qualquer momento?',
      a: 'Sim, sem fidelidade. Cancela do próprio painel, exporta todos os dados em ZIP e segue a vida. Sem ligação de retenção, sem multas.',
    },
    {
      q: 'Tem desconto pra anual ou pra ONGs?',
      a: 'Plano anual tem 23% de desconto. ONGs e instituições educacionais têm 50% de desconto — basta enviar comprovante para parceiros@ezza.com.br.',
    },
    {
      q: 'Como funciona o suporte?',
      a: 'Chat e e-mail em horário comercial para Starter. Suporte prioritário 9–18h para Pro. Para Business, gerente de conta dedicado e SLA de resposta em 1h.',
    },
  ];

  return (
    <section id="faq" className="lp-section faq">
      <div className="lp-container">
        <div className="lp-section-head">
          <span className="lp-eyebrow"><span className="lp-eyebrow-dot" />PERGUNTAS FREQUENTES</span>
          <h2 className="lp-section-title">A gente <em>já ouviu isso</em>.</h2>
        </div>

        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'faq-item-open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-q-mark">+</span>
              </button>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA FINAL ───
function LpCtaFinal({ onDemo, onTalkSales }) {
  return (
    <section className="cta-final">
      <div className="cta-final-inner">
        <h2>
          Pronta pra ver isso<br/>
          rodando <em>no seu pipeline</em>?
        </h2>
        <p>
          Demo grátis com dados fictícios em 30 segundos. Sem cadastro, sem cartão, sem ligação de vendedor.
        </p>
        <div className="cta-final-ctas">
          <button className="lp-btn lp-btn-light" onClick={onDemo}>
            Iniciar demo gratuita {lpICN.arrowRight}
          </button>
          <button className="lp-btn lp-btn-ghost" onClick={onTalkSales} style={{borderColor:'oklch(1 0 0 / 0.2)', color: 'white'}}>
            Falar com vendas
          </button>
        </div>
        <div className="cta-final-trust">
          <span>{lpICN.check} Sem cartão de crédito</span>
          <span>{lpICN.check} Cancela quando quiser</span>
          <span>{lpICN.check} LGPD compliance total</span>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ───
function LpFooter() {
  const [email, setEmail] = useBizState('');
  const [subscribed, setSubscribed] = useBizState(false);

  const subscribe = (e) => {
    e.preventDefault();
    if (email.trim()) {
      setSubscribed(true);
      setTimeout(() => { setSubscribed(false); setEmail(''); }, 3000);
    }
  };

  return (
    <footer className="lp-footer">
      <div className="lp-container">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/ezza-logo.png" alt="" />
            <div className="footer-brand-name">ezza<em>CRM</em></div>
            <p>O CRM brasileiro que junta pipeline, atendimento e automação numa coisa só.</p>
            <form className="footer-newsletter" onSubmit={subscribe}>
              <input
                type="email"
                placeholder={subscribed ? 'Obrigada! 🎉' : 'Seu e-mail para novidades'}
                value={subscribed ? '' : email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={subscribed}
              />
              <button type="submit">{subscribed ? '✓' : 'Inscrever'}</button>
            </form>
          </div>

          <div className="footer-col">
            <h4>Produto</h4>
            <ul>
              <li><a href="#produto">Pipeline visual</a></li>
              <li><a href="#produto">WhatsApp integrado</a></li>
              <li><a href="#produto">Automações</a></li>
              <li><a href="#produto">Relatórios</a></li>
              <li><a href="#precos">Preços</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Empresa</h4>
            <ul>
              <li><a href="https://hub.ezzacrm.com.br/?legal=sobre" target="_blank" rel="noopener">Sobre a Ezza</a></li>
              <li><a href="#clientes">Clientes</a></li>
              <li><a href="https://wa.me/5585991598284?text=Ol%C3%A1!%20Quero%20falar%20com%20a%20Ezza." target="_blank" rel="noopener">Contato</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Ajuda</h4>
            <ul>
              <li><a href="https://wa.me/5585991598284?text=Ol%C3%A1!%20Preciso%20de%20ajuda%20com%20o%20Ezza%20CRM." target="_blank" rel="noopener">Central de ajuda</a></li>
              <li><a href="https://hub.ezzacrm.com.br" target="_blank" rel="noopener">Entrar na plataforma</a></li>
              <li><a href="https://hub.ezzacrm.com.br/?legal=termos" target="_blank" rel="noopener">Termos de uso</a></li>
              <li><a href="https://hub.ezzacrm.com.br/?legal=privacidade" target="_blank" rel="noopener">Privacidade e LGPD</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="footer-legal">
            <span>© 2026 EZZA Studio Criativo e Serviços LTDA · CNPJ 35.606.176/0001-76</span>
            <a href="https://hub.ezzacrm.com.br/?legal=termos" target="_blank" rel="noopener">Termos</a>
            <a href="https://hub.ezzacrm.com.br/?legal=privacidade" target="_blank" rel="noopener">Privacidade</a>
            <a href="https://hub.ezzacrm.com.br/?legal=privacidade" target="_blank" rel="noopener">Cookies</a>
            <a href="https://hub.ezzacrm.com.br/?legal=privacidade" target="_blank" rel="noopener">LGPD</a>
          </div>
          <div className="footer-badges">
            <div className="footer-badge"><span className="footer-badge-dot" /> Operação normal</div>
            <div className="footer-badge">🇧🇷 Feito no Brasil</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { LpPricing, LpRoi, LpFaq, LpCtaFinal, LpFooter });