// PRICING, FAQ, CTA, FOOTER
const III = window.Icon;
const { useState: useState2 } = React;

function PricingSection() {
  const plans = [
    { n: 'Grátis',  price: 0,     pct: 2.59, tag: 'Para começar',  cta: 'Começar grátis', features: ['Checkouts ilimitados', '1 gateway ativo', 'Editor visual completo', 'Domínio compartilhado', 'Suporte por e-mail'] },
    { n: 'Starter', price: 47.90, pct: 2.00, tag: 'Para crescer',  highlighted: true, cta: 'Assinar Starter', features: ['Checkouts ilimitados', 'Multi-gateway cascade', 'Domínio próprio', 'Order bump + upsell', 'Recuperação de carrinho', 'Suporte WhatsApp'] },
    { n: 'Pro',     price: 259.00, pct: 1.50, tag: 'Para escalar',  cta: 'Assinar Pro',     features: ['Tudo do Starter', 'Checkout PF + PJ híbrido', 'Pontos · cashback · afiliados', 'Multi-moeda (50)', 'API + Webhooks', 'Gerente dedicado'] },
    { n: 'Enterprise', custom: true, pct: 'neg', tag: 'Para times grandes', cta: 'Falar com vendas', features: ['Taxa negociada', 'SLA contratual', 'White-label', 'Onboarding + treinamento', 'Integrações sob medida', 'Suporte 24/7'] },
  ];
  return (
    <section id="pricing" className="relative py-28">
      <div className="absolute inset-x-0 top-0 h-64 -z-10 bg-gradient-to-b from-violet-500/10 via-transparent to-transparent"></div>
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal text-center max-w-3xl mx-auto mb-14">
          <SectionEyebrow>Preços simples</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-5xl sm:text-6xl lg:text-7xl leading-[0.95]">
            <span className="grad-cyan">Seu checkout</span>. <br/>Pelo menor preço.
          </h2>
          <p className="mt-6 text-lg text-violet-100/70">Mensalidade baixa + taxa por transação. Sem fidelidade, sem multa, sem surpresa.</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 reveal-stagger">
          {plans.map((p, i) => {
            const hi = p.highlighted;
            return (
              <div key={i} className={`relative rounded-3xl p-7 flex flex-col ${
                hi ? 'bg-gradient-to-b from-violet-500/25 via-violet-700/15 to-transparent border border-violet-300/50 shadow-glow-violet'
                   : 'bg-white/[0.03] border border-white/10'
              }`}>
                {hi && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-gradient-to-r from-violet-400 to-cyan-300 text-ink text-[11px] font-semibold tracking-wide shadow-glow-violet-sm">
                    ★ Mais escolhido
                  </div>
                )}
                <div className="flex items-baseline justify-between">
                  <div className="font-semibold text-lg">{p.n}</div>
                  <div className={`text-[11px] ${hi?'text-violet-200':'text-violet-300/60'} font-mono uppercase tracking-widest`}>{p.tag}</div>
                </div>

                <div className="mt-6 min-h-[88px]">
                  {p.custom ? (
                    <>
                      <div className="text-4xl font-semibold tracking-[-0.02em]">A consultar</div>
                      <div className="text-[13px] text-violet-200/60 mt-1.5">taxa negociada</div>
                    </>
                  ) : (
                    <>
                      <div className="flex items-baseline gap-1">
                        <span className="text-[18px] text-violet-200/60">R$</span>
                        <span className="text-5xl font-semibold tracking-[-0.03em] tabular-nums">{p.price.toLocaleString('pt-BR',{minimumFractionDigits:2})}</span>
                        <span className="text-[13px] text-violet-200/60 ml-1">/mês</span>
                      </div>
                      <div className={`mt-1.5 text-[13px] ${hi?'text-violet-200':'text-violet-200/60'}`}>
                        + <span className="font-medium tabular-nums">{p.pct.toFixed(2).replace('.', ',')}%</span> por transação
                      </div>
                    </>
                  )}
                </div>

                <ul className="mt-7 space-y-2.5 text-[14px] text-violet-100/85 flex-1">
                  {p.features.map((f,fi)=>(
                    <li key={fi} className="flex items-start gap-2.5">
                      <span className={`mt-0.5 h-4 w-4 rounded-full grid place-items-center shrink-0 ${hi?'bg-cyan-400/20 text-cyan-200':'bg-violet-500/15 text-violet-300'}`}>
                        <III.Check size={10} sw={3.5}/>
                      </span>{f}
                    </li>
                  ))}
                </ul>

                <a href="https://app.cartroi.com/login" className={`shine-btn mt-8 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl font-medium transition-shadow ${
                  hi ? 'bg-gradient-to-b from-violet-400 to-violet-600 text-white shadow-glow-violet'
                     : 'bg-white/5 border border-white/15 text-violet-100 hover:bg-white/10'
                }`}>
                  {p.cta} <III.ArrowRight size={16}/>
                </a>
              </div>
            );
          })}
        </div>

        <div className="reveal mt-8 text-center text-[13px] text-violet-200/50">
          Todos os planos incluem SSL · LGPD · suporte em português. Cancele em 1 clique, sem multa.
        </div>
      </div>
    </section>
  );
}

// ------- FAQ -------
const FAQ = [
  { q: 'Por que o nome cartROI?', a: 'Porque a gente acha bizarro chamar de "checkout" uma das ferramentas mais lucrativas do seu negócio. cartROI é a soma de "cart" (carrinho) com "ROI" (return on investment) — o que ele é de verdade quando bem configurado.' },
  { q: 'Preciso de programador para instalar?', a: 'Não. É um app na Nuvemshop — 2 cliques para conectar e o checkout entra no ar. Personalização toda no editor visual.' },
  { q: 'Funciona com Shopify?', a: 'Em breve, via UI Extensions. O foco do MVP é Nuvemshop e WooCommerce, que cobrem o varejo brasileiro híbrido.' },
  { q: 'Como funciona o checkout B2B?', a: 'O cliente digita o documento. O cartROI detecta CNPJ e ativa o fluxo PJ: boleto faturado, prazo, NF-e mãe-filha, análise de crédito — sem virar de loja.' },
  { q: 'Quais gateways posso usar?', a: 'No MVP: Mercado Pago e Asaas. Stripe e Pagar.me chegam nas próximas semanas. Tudo em modo cascade — se um falha, o próximo tenta.' },
  { q: 'O cartROI fica com meu dinheiro?', a: 'Nunca. O pagamento vai direto do cliente para o seu gateway, na sua conta. A gente cobra só a mensalidade + taxa fixa por transação.' },
  { q: 'Posso usar meu próprio domínio?', a: 'Sim, em todos os planos pagos (Starter, Pro e Enterprise). No plano Grátis o checkout fica em checkout.cartroi.com.br/sualoja.' },
  { q: 'Existe limite no plano grátis?', a: 'Não há limite de checkouts: no Grátis você cobra com taxa de 2,59% por venda paga. Suba para Starter ou Pro para reduzir a taxa e liberar mais recursos — a transição é automática e sem perda de dados.' },
  { q: 'Como cancelo?', a: 'Em 1 clique no painel, sem fidelidade e sem call de retenção. Seus dados ficam disponíveis por 30 dias para export.' },
];

function FAQSection() {
  const [open, setOpen] = useState2(0);
  return (
    <section id="faq" className="relative py-28">
      <div className="max-w-5xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-2xl mb-12">
          <SectionEyebrow>Dúvidas frequentes</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-5xl sm:text-6xl leading-[0.95]">
            Tudo o que perguntam <br/><span className="grad-cyan">antes de assinar</span>.
          </h2>
        </div>

        <div className="reveal space-y-2">
          {FAQ.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`rounded-2xl border transition-colors ${isOpen?'border-violet-300/40 bg-violet-500/[0.06]':'border-white/8 bg-white/[0.02] hover:border-white/15'}`}>
                <button onClick={()=>setOpen(isOpen?-1:i)} className="w-full flex items-center gap-4 px-6 py-5 text-left">
                  <span className="text-[12px] font-mono text-violet-300/60 tabular-nums">{String(i+1).padStart(2,'0')}</span>
                  <span className="font-medium text-[16px] sm:text-[17px] flex-1">{f.q}</span>
                  <span className={`h-8 w-8 rounded-full grid place-items-center border ${isOpen?'border-violet-300/40 bg-violet-500/15 text-violet-100 rotate-180':'border-white/10 text-violet-200/70'} transition-all duration-300`}>
                    <III.ChevronDown size={14} sw={2.5}/>
                  </span>
                </button>
                <div className={`grid transition-all duration-300 ${isOpen?'grid-rows-[1fr] opacity-100':'grid-rows-[0fr] opacity-0'}`}>
                  <div className="overflow-hidden">
                    <div className="px-6 pb-6 pl-[58px] text-[15px] text-violet-100/75 leading-relaxed">{f.a}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ------- CTA -------
function CTASection() {
  return (
    <section className="relative py-32 overflow-hidden">
      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-violet-600 via-violet-700 to-purple-900"></div>
      <div className="absolute inset-0 -z-10 opacity-30 dot-grid"></div>
      <div className="absolute inset-0 -z-10">
        <div className="mesh-blob bg-cyan-400 w-[600px] h-[600px] -top-40 -left-20 opacity-30 animate-drift1"></div>
        <div className="mesh-blob bg-fuchsia-500 w-[600px] h-[600px] bottom-[-200px] right-[-100px] opacity-30 animate-drift2"></div>
      </div>
      <div className="max-w-5xl mx-auto px-6 lg:px-10 text-center reveal">
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/25 bg-white/10 text-[12px] text-white/90 backdrop-blur">
          <III.Sparkles size={12}/> Sem cartão · sem instalação técnica · no ar em 5 minutos
        </div>
        <h2 className="mt-7 font-semibold tracking-[-0.035em] text-5xl sm:text-6xl lg:text-7xl leading-[0.95] text-white">
          Cada loja é única. <br/>Seu checkout deveria ser <em className="not-italic underline decoration-cyan-300 decoration-4 underline-offset-[10px]">também</em>.
        </h2>
        <p className="mt-7 text-lg sm:text-xl text-white/80 max-w-2xl mx-auto">
          Sem cartão. Comece em minutos. Cancele quando quiser.
        </p>
        <div className="mt-10 flex flex-col sm:flex-row gap-3 justify-center">
          <a href="https://app.cartroi.com/login" className="shine-btn group inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl bg-white text-violet-700 font-semibold text-lg shadow-[0_30px_80px_-20px_rgba(0,0,0,0.5)] hover:shadow-[0_40px_120px_-20px_rgba(255,255,255,0.4)] transition-shadow">
            Personalizar grátis <III.ArrowRight size={20} className="group-hover:translate-x-1 transition-transform"/>
          </a>
          <a href="https://app.cartroi.com/login" className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl border border-white/30 text-white hover:bg-white/10 font-medium text-lg transition-colors">
            Ver demo ao vivo
          </a>
        </div>
        <div className="mt-12 grid grid-cols-3 gap-6 max-w-2xl mx-auto text-white/80 text-sm">
          <div><div className="text-3xl font-semibold text-white"><AnimNum value={2} suffix=" min"/></div>Instalação</div>
          <div><div className="text-3xl font-semibold text-white">R$ <AnimNum value={0}/></div>Para começar</div>
          <div><div className="text-3xl font-semibold text-white"><AnimNum value={1}/>-clique</div>Cancelamento</div>
        </div>
      </div>
    </section>
  );
}

// ------- FOOTER -------
function Footer() {
  const cols = [
    { t: 'Produto',  links: ['Editor', 'Gateways', 'B2B', 'Multi-moeda', 'Pontos'] },
    { t: 'Empresa',  links: ['Sobre', 'Blog', 'Carreiras', 'Imprensa'] },
    { t: 'Recursos', links: ['Documentação', 'API', 'Status', 'Changelog'] },
    { t: 'Legal',    links: ['Termos', 'Privacidade', 'LGPD', 'Cookies'] },
  ];
  return (
    <footer className="relative bg-[#0a0617] pt-20 pb-10 border-t border-white/5">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        {/* Ecosystem card */}
        <div className="rounded-3xl p-7 sm:p-9 border border-violet-400/30 bg-gradient-to-br from-violet-500/12 via-violet-700/8 to-transparent shadow-glow-violet-sm">
          <div className="grid lg:grid-cols-[1fr_2fr] gap-8 items-start">
            <div>
              <div className="text-[11px] uppercase tracking-[0.2em] text-cyan-300 font-mono">Quem desenvolve</div>
              <h3 className="mt-3 text-3xl font-semibold tracking-tight leading-tight">O cartROI é desenvolvido pela <span className="grad-cyan">Athenis Marketing</span>.</h3>
              <p className="mt-3 text-violet-100/60 text-[14px] max-w-md">Agência especializada em SaaS e performance para e-commerce. O Athenis Hub completa a família, cuidando da gestão financeira do seu negócio.</p>
            </div>
            <div className="grid sm:grid-cols-2 gap-3">
              <a href="https://athenismarketing.com" target="_blank" rel="noopener" className="group rounded-2xl border border-white/10 bg-white/[0.03] p-5 hover:border-violet-300/40 hover:bg-violet-500/10 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="h-12 w-12 rounded-xl bg-white grid place-items-center p-1.5 shadow-glow-violet-sm">
                    <img src="/lp/assets/athenis-marketing.png" alt="Athenis Marketing" className="h-full w-full object-contain" loading="lazy"/>
                  </div>
                  <III.ArrowUpRight size={18} className="text-violet-300/60 group-hover:text-violet-100 group-hover:rotate-12 transition-all"/>
                </div>
                <div className="mt-5 font-semibold text-[17px]">Athenis Marketing</div>
                <div className="text-[13px] text-violet-100/60 mt-1">Nossa agência — marketing digital + SaaS</div>
                <div className="mt-3 text-[11px] font-mono text-violet-300/60">athenismarketing.com</div>
              </a>
              <a href="https://athenishub.com" target="_blank" rel="noopener" className="group rounded-2xl border border-white/10 bg-white/[0.03] p-5 hover:border-cyan-300/40 hover:bg-cyan-400/10 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="h-12 w-12 rounded-xl bg-white grid place-items-center p-1.5 shadow-glow-violet-sm">
                    <img src="/lp/assets/athenis-hub.png" alt="Athenis Hub" className="h-full w-full object-contain" loading="lazy"/>
                  </div>
                  <III.ArrowUpRight size={18} className="text-cyan-300/60 group-hover:text-cyan-100 group-hover:rotate-12 transition-all"/>
                </div>
                <div className="mt-5 font-semibold text-[17px]">Athenis Hub</div>
                <div className="text-[13px] text-violet-100/60 mt-1">SaaS de gestão de capital de giro</div>
                <div className="mt-3 text-[11px] font-mono text-violet-300/60">athenishub.com</div>
              </a>
            </div>
          </div>
        </div>

        {/* Main footer */}
        <div className="mt-16 grid lg:grid-cols-[1.5fr_3fr] gap-12">
          <div>
            <div className="flex items-center gap-3">
              <img src="/brand/logo-dark.png" alt="CartROI" className="h-7 w-auto" />
            </div>
            <div className="mt-2 text-[11px] uppercase tracking-[0.2em] text-violet-300/60 font-mono">checkout que paga por si</div>
            <p className="mt-5 text-[14px] text-violet-100/55 max-w-sm">
              O checkout transparente brasileiro que entende PF e PJ na mesma loja — e devolve mais do que cobra. Feito por <a className="underline decoration-violet-400/40 hover:text-violet-100" href="https://athenismarketing.com" target="_blank" rel="noopener">Athenis Marketing</a> · São Paulo, BR.
            </p>
            <div className="mt-6 flex items-center gap-2 text-[12px] text-violet-200/50">
              <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
              Todos os sistemas operacionais · <span className="font-mono">99.98%</span>
            </div>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-8 text-[14px]">
            {cols.map((c,i)=>(
              <div key={i}>
                <div className="text-violet-300/60 text-[11px] uppercase tracking-[0.18em] font-mono mb-4">{c.t}</div>
                <ul className="space-y-2.5">
                  {c.links.map((l,li)=>(
                    <li key={li}><a href="#" className="text-violet-100/75 hover:text-white transition-colors">{l}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="hairline mt-14"></div>
        <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-[12px] text-violet-200/50">
          <div>© 2026 cartROI · Desenvolvido pela Athenis Marketing. Todos os direitos reservados.</div>
          <div className="flex items-center gap-5">
            <a href="/termos" className="hover:text-white">Termos</a>
            <a href="/privacidade" className="hover:text-white">Privacidade</a>
            <a href="/privacidade" className="hover:text-white">Cookies</a>
            <span className="font-mono text-violet-300/50">v1.0.0</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PricingSection, FAQSection, CTASection, Footer });
