// MIDDLE SECTIONS
const II = window.Icon;

// ------- Section header helper -------
function SectionEyebrow({ children, color = 'violet' }) {
  return (
    <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium border ${
      color === 'light' ? 'border-violet-200 bg-violet-50 text-violet-700' : 'border-violet-300/20 bg-violet-500/10 text-violet-200'
    }`}>
      <span className={`h-1.5 w-1.5 rounded-full ${color==='light'?'bg-violet-500':'bg-cyan-400'}`}></span>
      {children}
    </div>
  );
}

// ------- PROBLEM -------
function ProblemSection() {
  const items = [
    { icon: <II.Square size={22}/>, stat: 'Igual', label: 'aos seus concorrentes', body: 'Yampi e CartPanda entregam o mesmo template para todo mundo. Sua marca some dentro de uma camisa de força violet-claro.' },
    { icon: <II.Unlink size={22}/>, stat: 'Rígido', label: 'pra modelos híbridos', body: 'Vende para PF e PJ no mesmo site? Os outros não sabem o que fazer. Você improvisa com WhatsApp, planilha e segunda loja.' },
    { icon: <II.DollarSign size={22}/>, stat: 'Caro', label: 'pra mudar uma cor', body: 'Quer um bloco a mais, uma copy diferente, uma regra para distribuidor? Plano enterprise, agendamento e fila de priorização.' },
  ];
  return (
    <section className="relative section-light py-28">
      {/* Cinematic transition from dark above */}
      <div aria-hidden="true" className="absolute -top-1 left-0 right-0 h-32 pointer-events-none -translate-y-full overflow-hidden">
        <div className="absolute inset-x-0 bottom-0 h-32" style={{background:'linear-gradient(180deg, transparent 0%, rgba(15,10,31,0) 35%, rgba(167,139,250,0.15) 75%, rgba(255,255,255,0.0) 100%)'}}></div>
      </div>
      <div aria-hidden="true" className="absolute -top-px inset-x-0 h-px bg-gradient-to-r from-transparent via-violet-400/70 to-transparent"></div>
      <div aria-hidden="true" className="absolute -top-24 left-1/2 -translate-x-1/2 w-[80vw] h-48 rounded-[100%] bg-gradient-to-b from-violet-500/30 via-violet-400/10 to-transparent blur-2xl pointer-events-none"></div>

      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-3xl">
          <SectionEyebrow color="light">O problema</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-4xl sm:text-5xl lg:text-6xl text-[#1a1233] leading-[1.02]">
            Por que você usa o checkout <span className="text-violet-600">do vizinho?</span>
          </h2>
          <p className="mt-6 text-lg text-[#1a1233]/60 max-w-2xl">
            Sua loja é única. Mas seu checkout é o mesmo de mais 50 mil lojas. Três razões pelas quais isso está custando caro.
          </p>
        </div>

        <div className="mt-16 grid md:grid-cols-3 gap-5 reveal-stagger">
          {items.map((it, i) => (
            <div key={i} className="group relative rounded-2xl bg-white border border-[#1a1233]/10 p-7 hover:border-violet-400 hover:-translate-y-1 transition-all duration-300 shadow-[0_1px_0_rgba(0,0,0,0.02)] hover:shadow-[0_24px_60px_-30px_rgba(124,58,237,0.4)]">
              <div className="absolute top-7 right-7 text-[11px] font-mono text-violet-500/60">0{i+1}</div>
              <div className="h-11 w-11 rounded-xl bg-violet-100 text-violet-700 grid place-items-center group-hover:bg-violet-600 group-hover:text-white transition-colors">{it.icon}</div>
              <div className="mt-7 text-5xl font-semibold tracking-[-0.04em] text-[#1a1233]">{it.stat}</div>
              <div className="mt-1 text-[#1a1233]/70 text-[15px]">{it.label}</div>
              <div className="mt-5 pt-5 border-t border-[#1a1233]/10 text-[14px] text-[#1a1233]/60 leading-relaxed">{it.body}</div>
            </div>
          ))}
        </div>

        <div className="reveal mt-12 flex items-center gap-4">
          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-violet-400/40 to-transparent"></div>
          <p className="text-xl sm:text-2xl font-medium text-[#1a1233]">
            Com o <span className="font-semibold text-violet-700">cartROI</span>, você desenha o <span className="grad-cyan">seu</span>.
          </p>
          <div className="h-px flex-1 bg-gradient-to-r from-transparent via-violet-400/40 to-transparent"></div>
        </div>
      </div>
    </section>
  );
}

// ------- HYBRID B2C+B2B -------
function HybridSection() {
  const PF = ['Cartão de crédito (até 12x)', 'PIX com 5% off', 'Boleto à vista', 'Carteiras digitais', 'Cashback na próxima'];
  const PJ = ['Boleto faturado', 'Prazo 30 / 60 / 90', 'NF-e mãe-filha', 'Análise de crédito', 'Tabela de preços B2B'];
  return (
    <section className="relative py-32 overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="mesh-blob bg-violet-600 w-[600px] h-[600px] -top-40 -left-40 opacity-30 animate-drift1"></div>
        <div className="mesh-blob bg-cyan-400/50 w-[500px] h-[500px] bottom-0 -right-40 opacity-30 animate-drift2"></div>
      </div>
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-4xl mx-auto text-center">
          <SectionEyebrow>Diferencial · Híbrido PF+PJ</SectionEyebrow>
          <h2 className="mt-6 font-semibold tracking-[-0.035em] text-5xl sm:text-6xl lg:text-[80px] leading-[0.95]">
            Dois públicos. <br/><span className="grad-cyan">Um checkout. Sob medida.</span>
          </h2>
          <p className="mt-7 text-lg text-violet-100/70 max-w-2xl mx-auto">
            O cliente digita o documento. O cartROI reorganiza tudo: métodos, prazos, descontos, copy. PF entra no varejo, PJ entra no atacado — mesmo site, mesmo carrinho, comportamentos diferentes.
          </p>
        </div>

        <div className="mt-16 grid lg:grid-cols-[1fr_auto_1fr] gap-6 items-stretch">
          {/* PF */}
          <div className="reveal group relative rounded-3xl border border-violet-300/20 bg-gradient-to-br from-violet-500/15 via-violet-700/10 to-transparent p-8 backdrop-blur-sm">
            <div className="flex items-center gap-3 mb-6">
              <div className="h-12 w-12 rounded-2xl bg-violet-500/20 border border-violet-300/30 grid place-items-center text-violet-200">
                <II.User size={22}/>
              </div>
              <div>
                <div className="text-[12px] uppercase tracking-[0.18em] text-violet-300/70 font-mono">Pessoa Física</div>
                <div className="text-2xl font-semibold">Cliente final — varejo</div>
              </div>
            </div>
            <div className="text-[12px] inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-violet-500/10 border border-violet-300/20 font-mono mb-5">
              CPF: 123.***.***-12
            </div>
            <ul className="space-y-3">
              {PF.map((x,i)=>(
                <li key={i} className="flex items-center gap-3 text-[15px] text-violet-50/90">
                  <span className="h-6 w-6 rounded-full bg-violet-500/20 border border-violet-300/30 grid place-items-center text-violet-200">
                    <II.Check size={13} sw={3}/>
                  </span>{x}
                </li>
              ))}
            </ul>
          </div>

          {/* Center connector */}
          <div className="hidden lg:flex flex-col items-center justify-center gap-3 px-2">
            <div className="h-full w-px bg-gradient-to-b from-transparent via-violet-300/40 to-transparent absolute inset-y-12"></div>
            <div className="relative z-10 rounded-2xl bg-ink border border-violet-300/40 px-4 py-3 text-center shadow-glow-violet animate-glowpulse">
              <div className="text-[10px] uppercase tracking-widest text-cyan-300 font-mono mb-1">Auto-detect</div>
              <div className="text-[13px] text-violet-50 font-medium leading-tight max-w-[160px]">Detecta pelo<br/>documento (CPF vs CNPJ)</div>
            </div>
          </div>
          <div className="lg:hidden flex items-center gap-3 my-2">
            <div className="flex-1 h-px bg-violet-300/30"></div>
            <div className="rounded-xl bg-ink border border-violet-300/40 px-3 py-2 text-[12px] text-violet-100 font-mono shadow-glow-violet-sm">
              auto-detect
            </div>
            <div className="flex-1 h-px bg-violet-300/30"></div>
          </div>

          {/* PJ */}
          <div className="reveal group relative rounded-3xl border border-violet-300/20 bg-gradient-to-bl from-cyan-400/15 via-violet-700/10 to-transparent p-8 backdrop-blur-sm">
            <div className="flex items-center gap-3 mb-6">
              <div className="h-12 w-12 rounded-2xl bg-cyan-400/15 border border-cyan-300/30 grid place-items-center text-cyan-200">
                <II.Building2 size={22}/>
              </div>
              <div>
                <div className="text-[12px] uppercase tracking-[0.18em] text-cyan-300/80 font-mono">Pessoa Jurídica</div>
                <div className="text-2xl font-semibold">Comprador B2B — atacado</div>
              </div>
            </div>
            <div className="text-[12px] inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-cyan-400/10 border border-cyan-300/20 font-mono mb-5">
              CNPJ: 12.345.678/****-90
            </div>
            <ul className="space-y-3">
              {PJ.map((x,i)=>(
                <li key={i} className="flex items-center gap-3 text-[15px] text-violet-50/90">
                  <span className="h-6 w-6 rounded-full bg-cyan-400/15 border border-cyan-300/30 grid place-items-center text-cyan-200">
                    <II.Check size={13} sw={3}/>
                  </span>{x}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="reveal mt-10 text-center text-violet-200/70 text-[15px]">
          Nenhum concorrente brasileiro faz isso de verdade. <span className="text-violet-100 font-medium">Conferimos.</span>
        </div>
      </div>
    </section>
  );
}

// ------- EDITOR DRAG & DROP -------
const BLOCK_GROUPS = [
  { title: 'Essenciais', count: 4, color: 'violet', items: [
    { ic: <II.User size={14}/>, n: 'Identificação' },
    { ic: <II.Truck size={14}/>, n: 'Endereço' },
    { ic: <II.CreditCard size={14}/>, n: 'Pagamento' },
    { ic: <II.PackageCheck size={14}/>, n: 'Resumo' },
  ]},
  { title: 'Conversão', count: 5, color: 'cyan', items: [
    { ic: <II.TrendingUp size={14}/>, n: 'Order Bump' },
    { ic: <II.Plus size={14}/>, n: 'Upsell' },
    { ic: <II.Tag size={14}/>, n: 'Downsell' },
    { ic: <II.Flame size={14}/>, n: 'Escassez' },
    { ic: <II.Timer size={14}/>, n: 'Countdown' },
  ]},
  { title: 'Confiança', count: 4, color: 'emerald', items: [
    { ic: <II.ShieldCheck size={14}/>, n: 'Trust Badges' },
    { ic: <II.Quote size={14}/>, n: 'Depoimentos' },
    { ic: <II.MessageCircle size={14}/>, n: 'FAQ' },
    { ic: <II.Lock size={14}/>, n: 'Política' },
  ]},
  { title: 'Diferencial', count: 4, color: 'fuchsia', items: [
    { ic: <II.PieChart size={14}/>, n: 'Comparação' },
    { ic: <II.Percent size={14}/>, n: 'Calculadora' },
    { ic: <II.Sparkles size={14}/>, n: 'Cupom Revelável' },
    { ic: <II.Truck size={14}/>, n: 'Frete Grátis' },
  ]},
  { title: 'Custom', count: 3, color: 'amber', items: [
    { ic: <II.Code2 size={14}/>, n: 'HTML/CSS inline' },
    { ic: <II.Image size={14}/>, n: 'Imagem' },
    { ic: <II.Type size={14}/>, n: 'Texto custom' },
  ]},
];

function EditorDemo() {
  return (
    <section id="editor" className="relative py-28">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-3xl mb-14">
          <SectionEyebrow>Editor visual · drag & drop</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-5xl sm:text-6xl lg:text-7xl leading-[0.95]">
            Seu checkout, <br/><span className="grad-cyan">do seu jeito</span>.
          </h2>
          <p className="mt-6 text-lg text-violet-100/70">
            24 blocos prontos. Você arrasta, organiza, edita texto inline, troca cor e publica. Nenhum dev no caminho. Nenhuma versão “quase certa”.
          </p>
        </div>

        <div className="grid lg:grid-cols-[1.35fr_1fr] gap-8 items-start">
          {/* Editor mockup */}
          <div className="reveal rounded-2xl overflow-hidden border border-white/10 bg-[#15102a]/80 backdrop-blur-xl shadow-card">
            {/* App chrome */}
            <div className="flex items-center gap-3 px-4 py-2.5 border-b border-white/5 bg-[#100a22]">
              <div className="flex items-center gap-1.5">
                <span className="h-2.5 w-2.5 rounded-full bg-rose-400/80"></span>
                <span className="h-2.5 w-2.5 rounded-full bg-amber-300/80"></span>
                <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/80"></span>
              </div>
              <div className="text-[12px] text-violet-200/60 font-mono ml-2">Editor — Checkout principal</div>
              <div className="ml-auto flex items-center gap-2">
                <button className="text-[11px] px-2 py-1 rounded-md text-violet-200/70 hover:text-white border border-white/10">Pré-visualizar</button>
                <button className="text-[11px] px-2.5 py-1 rounded-md bg-violet-500 text-white font-medium">Publicar</button>
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-[140px_1fr] lg:grid-cols-[160px_1fr_180px] min-h-[440px]">
              {/* Sidebar — blocks library */}
              <aside className="hidden sm:block border-r border-white/5 bg-[#120c28] p-3 space-y-3 overflow-hidden">
                <div className="text-[10px] uppercase tracking-widest text-violet-300/50 px-1">Blocos</div>
                {[
                  {n:'Identificação', ic:<II.User size={14}/>},
                  {n:'Endereço',     ic:<II.Truck size={14}/>},
                  {n:'Pagamento',    ic:<II.CreditCard size={14}/>},
                  {n:'Order Bump',   ic:<II.TrendingUp size={14}/>},
                  {n:'Countdown',    ic:<II.Timer size={14}/>},
                  {n:'HTML inline',  ic:<II.Code2 size={14}/>},
                ].map((b,i)=>(
                  <div key={i} className="group flex items-center gap-2 px-2.5 py-2 rounded-lg border border-white/5 bg-white/[0.02] hover:bg-violet-500/10 hover:border-violet-300/30 cursor-grab transition-colors">
                    <span className="text-violet-300/60 group-hover:text-violet-200"><II.GripVertical size={12}/></span>
                    <span className="text-violet-200/80">{b.ic}</span>
                    <span className="text-[12px] text-violet-100/80 truncate">{b.n}</span>
                  </div>
                ))}
              </aside>

              {/* Canvas */}
              <div className="relative bg-[#0d0820] p-6 overflow-hidden">
                <div className="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
                <div className="relative space-y-3 max-w-[380px] mx-auto">
                  <div className="rounded-lg bg-[#1a1135]/80 border border-white/10 p-3 flex items-center gap-2.5">
                    <II.User size={14} className="text-violet-300"/>
                    <span className="text-[13px]">Identificação</span>
                    <span className="ml-auto text-[10px] text-violet-300/50 font-mono">#01</span>
                  </div>
                  <div className="rounded-lg bg-[#1a1135]/80 border border-white/10 p-3 flex items-center gap-2.5">
                    <II.Truck size={14} className="text-violet-300"/>
                    <span className="text-[13px]">Endereço</span>
                    <span className="ml-auto text-[10px] text-violet-300/50 font-mono">#02</span>
                  </div>

                  {/* dragging block */}
                  <div className="relative">
                    <div
                      className="rounded-lg bg-gradient-to-br from-violet-500/30 to-violet-700/20 border border-violet-300/60 p-3 flex items-center gap-2.5 shadow-glow-violet-sm animate-dragblock"
                    >
                      <II.TrendingUp size={14} className="text-violet-100"/>
                      <span className="text-[13px] text-white font-medium">Order Bump</span>
                      <span className="ml-auto text-[10px] text-cyan-300 font-mono">arrastando…</span>
                    </div>
                    {/* drop zone hint */}
                    <div className="mt-2 h-9 rounded-lg border border-dashed border-violet-300/40 grid place-items-center text-[11px] text-violet-300/60 font-mono">solte para inserir</div>
                  </div>

                  <div className="rounded-lg bg-[#1a1135]/80 border border-white/10 p-3 flex items-center gap-2.5">
                    <II.CreditCard size={14} className="text-violet-300"/>
                    <span className="text-[13px]">Pagamento</span>
                    <span className="ml-auto text-[10px] text-violet-300/50 font-mono">#03</span>
                  </div>
                </div>
              </div>

              {/* Properties */}
              <aside className="hidden lg:block border-l border-white/5 bg-[#120c28] p-3 space-y-3">
                <div className="text-[10px] uppercase tracking-widest text-violet-300/50 px-1">Tema do checkout</div>
                <div className="rounded-lg bg-white/[0.02] border border-white/5 p-3 space-y-2.5">
                  <div className="text-[9px] uppercase tracking-widest text-violet-300/40">Cores</div>
                  {[
                    {l:'Cor primária', v:'#7c3aed'},
                    {l:'Cor de texto', v:'#111827'},
                    {l:'Fundo',        v:'#f9fafb'},
                  ].map((c,i)=>(
                    <div key={i} className="flex items-center justify-between">
                      <span className="text-[11px] text-violet-100/80">{c.l}</span>
                      <span className="flex items-center gap-1.5">
                        <span className="text-[9px] font-mono text-violet-300/60">{c.v}</span>
                        <span className="h-4 w-4 rounded border border-white/20" style={{background:c.v}}></span>
                      </span>
                    </div>
                  ))}
                </div>
                <div className="rounded-lg bg-white/[0.02] border border-white/5 p-3 space-y-2">
                  <div className="text-[9px] uppercase tracking-widest text-violet-300/40">Estilo dos cantos</div>
                  <div className="grid grid-cols-4 gap-1">
                    {['SM','MD','LG','XL'].map((s,i)=>(
                      <button key={i} className={`text-[10px] py-1 rounded ${i===1?'bg-violet-500 text-white':'bg-white/5 text-violet-200/70'}`}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="rounded-lg bg-white/[0.02] border border-white/5 p-3 space-y-1.5">
                  <div className="text-[9px] uppercase tracking-widest text-violet-300/40">Ordem dos pagamentos</div>
                  {[
                    {n:'PIX', tag:'Destaque'},
                    {n:'Cartão de crédito'},
                    {n:'Boleto'},
                  ].map((p,i)=>(
                    <div key={i} className="flex items-center gap-2 px-2 py-1.5 rounded bg-[#0d0820] border border-white/8">
                      <span className="text-violet-300/40"><II.GripVertical size={11}/></span>
                      <span className="text-[10px] font-mono text-violet-300/50">{i+1}</span>
                      <span className="text-[11px] text-violet-100/85">{p.n}</span>
                      {p.tag && <span className="ml-auto text-[8px] px-1.5 py-0.5 rounded bg-violet-500/20 text-violet-200 uppercase tracking-wider">{p.tag}</span>}
                    </div>
                  ))}
                </div>
              </aside>
            </div>
          </div>

          {/* Blocks list */}
          <div className="reveal space-y-5">
            {BLOCK_GROUPS.map((g, gi) => (
              <div key={gi} className="rounded-2xl border border-white/8 bg-white/[0.02] p-5">
                <div className="flex items-baseline justify-between mb-3">
                  <div className="font-medium tracking-tight">{g.title}</div>
                  <div className="text-[11px] text-violet-300/60 font-mono">{g.count} blocos</div>
                </div>
                <div className="flex flex-wrap gap-1.5">
                  {g.items.map((it, i)=>(
                    <span key={i} className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[12px] bg-violet-500/10 border border-violet-300/15 text-violet-100/90 hover:border-violet-300/40 transition-colors">
                      <span className="text-violet-300">{it.ic}</span>{it.n}
                    </span>
                  ))}
                </div>
              </div>
            ))}
            <div className="rounded-2xl border border-cyan-300/30 bg-gradient-to-br from-cyan-400/10 via-violet-500/5 to-transparent p-5 flex items-start gap-3">
              <div className="h-9 w-9 rounded-xl bg-cyan-400/15 border border-cyan-300/40 text-cyan-200 grid place-items-center"><II.Code2 size={16}/></div>
              <div>
                <div className="font-medium">Bloco de código HTML/CSS inline com CodeMirror</div>
                <div className="text-[13px] text-violet-100/65 mt-1">Único no mercado brasileiro. Inserir <span className="font-mono text-cyan-200">&lt;script&gt;</span> de pixel, A/B, calculadora — sem precisar de dev.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------- STACK OF DIFFERENTIATORS — 9 cards -------
function StackSection() {
  const cards = [
    { ic: <II.Zap size={22}/>, t: 'Multi-gateway cascade', d: 'Tenta MP, cai para Asaas, depois Stripe.', kpiVal: 'até 41%', kpiLbl: 'menos recusas — cada venda salva paga 6 meses de mensalidade.' },
    { ic: <II.MessageCircle size={22}/>, t: 'Recuperação de carrinho', d: 'E-mail + WhatsApp automáticos em 30 min, 2h e 24h.', kpiVal: 'R$ 4.200', kpiLbl: '/mês recuperados em média em lojas Starter.' },
    { ic: <II.TrendingUp size={22}/>, t: 'Order bump · Upsell · Downsell', d: 'Sequência pós-compra completa, sem segundo carrinho.', kpiVal: '+27%', kpiLbl: 'no ticket médio dos clientes Pro.' },
    { ic: <II.Coins size={22}/>, t: 'Pontos e Cashback', d: 'Programa de fidelidade nativo, sem app de fora.', kpiVal: '+34%', kpiLbl: 'de compra recorrente com fidelidade nativa.' },
    { ic: <II.Users size={22}/>, t: 'Programa de afiliados', d: 'Links com ?ref= e comissão por produto.', kpiVal: '1/4', kpiLbl: 'do CAC do Meta Ads — painel próprio do afiliado.' },
    { ic: <II.Percent size={22}/>, t: 'Desconto progressivo', d: 'Por faixa de valor ou quantidade, cumulativo com cupom.', kpiVal: '+38%', kpiLbl: 'dos pedidos sobem para a faixa de cima.' },
    { ic: <II.Globe size={22}/>, t: 'Multi-moeda', d: '50 moedas com formato customizável, câmbio em tempo real.', kpiVal: '50', kpiLbl: 'moedas — abre receita internacional sem segunda loja.' },
    { ic: <II.PieChart size={22}/>, t: 'B2B Híbrido (PF+PJ)', d: 'Detecta documento, ativa fluxo PJ — boleto, prazo, NF-e.', kpiVal: '+R$ 18 mil', kpiLbl: '/mês de mercado PJ ativado em lojas híbridas.' },
    { ic: <II.UserCircle size={22}/>, t: 'Portal do cliente', d: 'Login sem senha — só e-mail + documento. Recompra em 2 cliques.', kpiVal: '−62%', kpiLbl: 'de CAC de recompra · histórico + NF-e automáticos.' },
  ];
  return (
    <section className="relative py-32">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-3xl mb-14">
          <SectionEyebrow>Stack completo</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-5xl sm:text-6xl lg:text-7xl leading-[0.95]">
            9 alavancas para <span className="grad-cyan">customizar</span>.
          </h2>
          <p className="mt-6 text-lg text-violet-100/70">
            Tudo no mesmo painel, conversando entre si. Liga, desliga, mistura. Não é integração com 9 ferramentas — é uma só, no comando da sua loja.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 reveal-stagger">
          {cards.map((c, i) => (
            <div key={i} className="conic-border group relative rounded-2xl bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 p-7 hover:-translate-y-1 transition-transform duration-300 overflow-hidden">
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(167,139,250,0.12),transparent_60%)] opacity-0 group-hover:opacity-100 transition-opacity"></div>
              <div className="relative flex items-start gap-4">
                <div className="h-12 w-12 rounded-2xl bg-violet-500/10 border border-violet-300/20 grid place-items-center text-violet-200 group-hover:bg-violet-500/30 group-hover:text-white group-hover:border-violet-300/50 transition-colors">{c.ic}</div>
                <div className="text-[11px] font-mono text-violet-300/40 mt-2 ml-auto">0{i+1}</div>
              </div>
              <h3 className="relative mt-6 text-[19px] font-semibold tracking-tight">{c.t}</h3>
              <p className="relative mt-2 text-[14px] text-violet-100/65 leading-relaxed">{c.d}</p>
              <div className="relative mt-5 pt-4 border-t border-white/8 flex items-baseline gap-2">
                <span className="text-cyan-300 font-semibold tracking-tight text-[18px] tabular-nums">{c.kpiVal}</span>
                <span className="text-[12.5px] text-violet-100/65 leading-snug">{c.kpiLbl}</span>
              </div>
            </div>
          ))}
        </div>

        <p className="reveal mt-8 text-sm text-violet-300/60 italic max-w-3xl">
          *Médias observadas em testes piloto. Resultado varia por nicho — calcule o seu no simulador no topo da página.
        </p>
      </div>
    </section>
  );
}

// ------- COMPARISON -------
function useCounter(target, ready, duration = 1100) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!ready) return;
    let start; let raf;
    const tick = (t) => {
      if (start === undefined) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1-p, 3);
      setV(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [ready, target]);
  return v;
}

function AnimNum({ value, decimals = 0, prefix = '', suffix = '' }) {
  const ref = useRef(null);
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setReady(true); io.disconnect(); } }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const n = useCounter(value, ready);
  const fmt = n.toLocaleString('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return <span ref={ref} className="tabular-nums">{prefix}{fmt}{suffix}</span>;
}

function CompareSection() {
  const rows = [
    { plan: 'Grátis',  ath: {m:0, t:2.59}, yam: {m:0, t:2.5}, cp: {m:4.99, t:2.5} },
    { plan: 'Starter', ath: {m:47.90, t:2.0}, yam: {m:147, t:2.0}, cp: {m:127, t:2.0} },
    { plan: 'Pro',     ath: {m:97.90, t:1.5}, yam: {m:497, t:1.5}, cp: {m:597, t:1.0} },
  ];
  const Money = ({ v, decimals=2 }) => <AnimNum value={v} decimals={decimals} prefix="R$ "/>;
  const Pct   = ({ v }) => <AnimNum value={v} decimals={2} suffix="%"/>;
  return (
    <section id="compare" className="relative section-light py-28">
      <div aria-hidden="true" className="absolute -top-px inset-x-0 h-px bg-gradient-to-r from-transparent via-violet-400/60 to-transparent"></div>
      <div aria-hidden="true" className="absolute -top-24 left-1/2 -translate-x-1/2 w-[80vw] h-48 rounded-[100%] bg-gradient-to-b from-violet-500/25 via-violet-400/10 to-transparent blur-2xl pointer-events-none"></div>
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-3xl mb-14">
          <SectionEyebrow color="light">Comparativo direto</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-4xl sm:text-5xl lg:text-6xl text-[#1a1233] leading-[1.02]">
            Mais flexível. <span className="text-violet-600">3× mais barato.</span>
          </h2>
          <p className="mt-5 text-[#1a1233]/60 text-lg max-w-2xl">Preços equivalentes para os mesmos planos. O cartROI é o único que deixa você personalizar tudo — e pelo menor preço.</p>
        </div>

        <div className="reveal rounded-3xl border border-[#1a1233]/10 bg-white overflow-hidden shadow-[0_30px_80px_-40px_rgba(124,58,237,0.3)]">
         <div className="overflow-x-auto no-scrollbar">
          <div className="min-w-[560px]">
          <div className="grid grid-cols-4 text-[12px] font-mono uppercase tracking-widest text-[#1a1233]/50 bg-[#fafaff] border-b border-[#1a1233]/10">
            <div className="px-4 sm:px-6 py-4">Plano</div>
            <div className="px-4 sm:px-6 py-4 relative bg-gradient-to-b from-violet-500/15 to-violet-500/5 text-violet-700 font-semibold">
              <div className="flex items-center gap-2">
                <span className="h-2 w-2 rounded-full bg-violet-500"></span>
                Athenis
              </div>
              <div className="absolute -top-3 left-6 px-2 py-0.5 rounded-md bg-violet-600 text-white text-[10px] tracking-wider">3× mais barato</div>
            </div>
            <div className="px-4 sm:px-6 py-4">Yampi</div>
            <div className="px-4 sm:px-6 py-4">CartPanda</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className={`grid grid-cols-4 text-[#1a1233] ${i < rows.length-1 ? 'border-b border-[#1a1233]/8' : ''}`}>
              <div className="px-4 sm:px-6 py-7">
                <div className="text-lg font-semibold">{r.plan}</div>
                <div className="text-[12px] text-[#1a1233]/50 mt-0.5">por mês · taxa por transação</div>
              </div>
              <div className="relative px-4 sm:px-6 py-7 bg-gradient-to-b from-violet-500/8 to-violet-500/[0.02] border-x border-violet-200 animate-glowpulse">
                <div className="text-2xl font-semibold text-violet-700"><Money v={r.ath.m}/></div>
                <div className="text-[13px] text-violet-700/80 mt-0.5">+ <Pct v={r.ath.t}/></div>
              </div>
              <div className="px-4 sm:px-6 py-7">
                <div className="text-2xl font-semibold text-[#1a1233]/80"><Money v={r.yam.m}/></div>
                <div className="text-[13px] text-[#1a1233]/50 mt-0.5">+ <Pct v={r.yam.t}/></div>
              </div>
              <div className="px-4 sm:px-6 py-7">
                <div className="text-2xl font-semibold text-[#1a1233]/80"><Money v={r.cp.m}/></div>
                <div className="text-[13px] text-[#1a1233]/50 mt-0.5">+ <Pct v={r.cp.t}/></div>
              </div>
            </div>
          ))}
          <div className="grid grid-cols-4 bg-[#fafaff] text-[12px] text-[#1a1233]/60">
            <div className="px-4 sm:px-6 py-4">Checkout PF + PJ híbrido</div>
            <div className="px-4 sm:px-6 py-4 bg-violet-500/5 text-violet-700 font-medium flex items-center gap-1.5"><II.Check size={14} sw={2.5}/> Nativo</div>
            <div className="px-4 sm:px-6 py-4 flex items-center gap-1.5 text-rose-500/80"><II.X size={14} sw={2.5}/> Não tem</div>
            <div className="px-4 sm:px-6 py-4 flex items-center gap-1.5 text-rose-500/80"><II.X size={14} sw={2.5}/> Não tem</div>
          </div>
          <div className="grid grid-cols-4 bg-white text-[12px] text-[#1a1233]/60 border-t border-[#1a1233]/8">
            <div className="px-4 sm:px-6 py-4">Bloco HTML/CSS inline</div>
            <div className="px-4 sm:px-6 py-4 bg-violet-500/5 text-violet-700 font-medium flex items-center gap-1.5"><II.Check size={14} sw={2.5}/> CodeMirror</div>
            <div className="px-4 sm:px-6 py-4 flex items-center gap-1.5 text-rose-500/80"><II.X size={14} sw={2.5}/></div>
            <div className="px-4 sm:px-6 py-4 flex items-center gap-1.5 text-rose-500/80"><II.X size={14} sw={2.5}/></div>
          </div>
          </div>
         </div>
        </div>
      </div>
    </section>
  );
}

// ------- PERSONAS -------
function PersonasSection() {
  const items = [
    { ic: <II.Sparkles size={22}/>, t: 'Loja de cosméticos', sub: 'Vende PF + revendedoras PJ', body: 'A consumidora final paga no PIX; a revendedora abre boleto faturado com a tabela de atacado — no mesmo carrinho.', tag: 'Híbrido clássico' },
    { ic: <II.Truck size={22}/>, t: 'Distribuidor', sub: 'Atacado PJ + algum B2C', body: 'O grosso é B2B com prazo e NF-e mãe-filha. A vitrine B2C continua aberta sem comprometer margem.', tag: 'B2B dominante' },
    { ic: <II.Factory size={22}/>, t: 'Indústria pequena', sub: 'PJ majoritário + PF eventual', body: 'Pedidos mínimos por SKU, análise de crédito automática e portal do cliente para recompra recorrente.', tag: 'Atacado direto' },
  ];
  return (
    <section className="relative py-28">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal max-w-3xl mb-14">
          <SectionEyebrow>Quem usa</SectionEyebrow>
          <h2 className="mt-5 font-semibold tracking-[-0.03em] text-5xl sm:text-6xl lg:text-7xl leading-[0.95]">
            Três lojas, <span className="grad-cyan">três checkouts diferentes</span>.
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-4 reveal-stagger">
          {items.map((p, i) => (
            <div key={i} className="conic-border rounded-2xl bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 p-7 hover:-translate-y-1 transition-transform">
              <div className="flex items-center justify-between">
                <div className="h-12 w-12 rounded-2xl bg-violet-500/10 border border-violet-300/20 text-violet-200 grid place-items-center">{p.ic}</div>
                <span className="text-[10px] uppercase tracking-widest text-cyan-300/80 font-mono">{p.tag}</span>
              </div>
              <h3 className="mt-6 text-[22px] font-semibold tracking-tight">{p.t}</h3>
              <div className="text-violet-200/60 text-[14px] mt-0.5">{p.sub}</div>
              <p className="mt-4 text-[14px] text-violet-100/70 leading-relaxed border-t border-white/8 pt-4">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------- SECURITY -------
function SecuritySection() {
  const seals = [
    { ic: <II.ShieldCheck size={20}/>, t: 'PCI-DSS SAQ-A' },
    { ic: <II.Shield size={20}/>,      t: 'LGPD' },
    { ic: <II.Lock size={20}/>,        t: 'SSL/TLS 1.3' },
    { ic: <II.KeyRound size={20}/>,    t: 'Tokenização client-side' },
  ];
  const stack = [
    { ic: <II.Server size={16}/>,   t: 'Fly.io GRU' },
    { ic: <II.Database size={16}/>, t: 'PostgreSQL' },
    { ic: <II.Boxes size={16}/>,    t: 'Redis' },
    { ic: <II.KeyRound size={16}/>, t: 'JWT · RS256' },
  ];
  return (
    <section className="relative py-28">
      <div className="max-w-7xl mx-auto px-6 lg:px-10">
        <div className="reveal grid lg:grid-cols-[1fr_1fr] gap-12 items-center">
          <div>
            <SectionEyebrow>Segurança e infraestrutura</SectionEyebrow>
            <h2 className="mt-5 font-semibold tracking-[-0.03em] text-4xl sm:text-5xl lg:text-[56px] leading-[1.02]">
              Seu servidor <span className="grad-cyan">nunca recebe</span> número de cartão.
            </h2>
            <p className="mt-6 text-lg text-violet-100/70 max-w-lg">
              A tokenização acontece no navegador do cliente. Quem vê o cartão é o gateway — você só guarda um token reversível pelo dono dele.
            </p>
            <div className="mt-8 grid grid-cols-2 gap-2 max-w-md">
              {stack.map((s,i)=>(
                <div key={i} className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/[0.03] border border-white/8 text-[13px] text-violet-100/80">
                  <span className="text-violet-300">{s.ic}</span>{s.t}
                </div>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {seals.map((s,i)=>(
              <div key={i} className="rounded-2xl border border-violet-300/15 bg-gradient-to-br from-violet-500/8 to-transparent p-6 hover:border-violet-300/40 transition-colors">
                <div className="h-11 w-11 rounded-xl bg-violet-500/15 border border-violet-300/20 grid place-items-center text-violet-200">{s.ic}</div>
                <div className="mt-5 font-semibold tracking-tight">{s.t}</div>
                <div className="mt-1 text-[12px] text-violet-200/55">Certificação ativa</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, HybridSection, EditorDemo, StackSection, CompareSection, PersonasSection, SecuritySection });