// -------------------------------------------------------------------------
// CARDS DIFERENCIAIS
//
// Destino: /lp/components/middle.jsx
// Protótipo: lab/protos/cards-diferenciais.html · Ficha: refs/cards-diferenciais/ficha.md
// GERADO por tools/portar.py — edite o protótipo e rode de novo.
//
// Ícones: use `II` (window.Icon), já aliasado no topo de middle.jsx.
// Tudo vive numa IIFE porque os arquivos de /lp/components/ dividem o
// mesmo escopo global — nomes soltos colidem entre si.
// -------------------------------------------------------------------------

(function () {
  const CARDS = [
    {
      chave: 'personalizacao',
      titulo: 'O checkout é seu, não nosso',
      texto: 'Cor, copy, blocos, ordem das etapas, regras por público. 24 blocos arrastáveis e HTML/CSS inline quando você quiser ir além.',
      metrica: '24', unidade: 'blocos arrastáveis',
      visual: 'paleta',
    },
    {
      chave: 'pfpj',
      titulo: 'PF e PJ no mesmo fluxo',
      texto: 'Um campo só de CPF ou CNPJ. Digitou CNPJ, o checkout se reconfigura: razão social, inscrição estadual e boleto faturado em 30, 60 ou 90 dias.',
      metrica: '1', unidade: 'campo, dois públicos',
      visual: 'documento',
    },
    {
      chave: 'taxa',
      titulo: 'Taxa menor, repasse maior',
      texto: 'Sem intermediário extra entre a sua venda e o seu caixa. Você escolhe o gateway — Mercado Pago, Asaas ou Atlas Pague — e mantém a negociação.',
      metrica: '3', unidade: 'gateways à escolha',
      visual: 'grafico',
    },
  ];


  function CardsDiferenciais() {
    return (
      <section className="relative overflow-hidden bg-ink py-20 lg:py-28">
        <div className="absolute inset-0 -z-10">
          <div className="mesh-blob bg-violet-700/40 w-[520px] h-[520px] top-0 right-1/4 animate-drift2"></div>
          <div className="absolute inset-0 dot-grid opacity-[0.16]"></div>
        </div>

        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="reveal max-w-3xl">
            <div className="inline-flex items-center gap-2 rounded-full border border-violet-300/20 bg-violet-500/10 px-3 py-1.5 text-[12px] font-medium text-violet-200">
              <span className="h-1.5 w-1.5 rounded-full bg-cyan-400"></span> Diferenciais
            </div>
            <h2 className="mt-5 text-4xl font-semibold leading-[1.05] tracking-[-0.03em] sm:text-5xl">
              Mais que um checkout.<br />
              <span className="grad-cyan">Um checkout que é seu.</span>
            </h2>
          </div>

          <div className="reveal mt-12">
            <img
              src="/lp/assets/img/diferenciais-photo.webp"
              alt="Comprador finalizando pedido com ofertas de cross-sell no checkout cartROI"
              loading="lazy"
              className="w-full h-auto rounded-3xl border border-white/10 shadow-2xl"
            />
          </div>

          <div className="reveal mt-8 flex flex-wrap gap-x-10 gap-y-3">
            {CARDS.map((c) => (
              <span key={c.chave} className="flex items-baseline gap-2">
                <span className="text-[28px] font-semibold leading-none tracking-[-0.03em] grad-cyan">{c.metrica}</span>
                <span className="text-[13px] text-violet-100/70">{c.unidade}</span>
              </span>
            ))}
          </div>
        </div>
      </section>
    );
  }

  setTimeout(() => window.__attachReveal && window.__attachReveal(), 50);

  Object.assign(window, { CardsDiferenciais });
})();