import { useEffect } from "react";
import { Link } from "react-router-dom";
import { WHATSAPP_LINK } from "@/constants";
import catleadLogo from "@/assets/catlead-logo.png";

const WhatsAppIcon = ({ className }: { className?: string }) => (
  <svg className={className} width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.438 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.662c1.72.94 3.659 1.437 5.634 1.437h.005c6.558 0 11.894-5.335 11.897-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
);

const Landing = () => {
  useEffect(() => {
    document.title = "Catlead — Inteligência Comercial em Feiras e Eventos";
  }, []);

  return (
    <div className="min-h-screen bg-[#0A0A0A] text-[#FAFAF8] font-sans selection:bg-[#F5C842] selection:text-black">
      {/* 3. NAV FIXO */}
      <nav className="fixed top-0 left-0 right-0 z-50 px-6 py-4 lg:px-12 lg:py-5 bg-black/85 backdrop-blur-xl border-b border-white/[0.04]">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <a href="#" className="flex items-center">
            <img src={catleadLogo} alt="Catlead" className="h-8 w-auto" />
          </a>

          <ul className="hidden lg:flex items-center gap-8 list-none text-sm text-gray-400">
            <li><a href="#funcionalidades" className="hover:text-white transition-colors">Funcionalidades</a></li>
            <li><a href="#followup" className="hover:text-white transition-colors">Follow-up</a></li>
            <li><a href="#dados" className="hover:text-white transition-colors">Dados</a></li>
            <li><a href="#planos" className="hover:text-white transition-colors">Planos</a></li>
          </ul>

          <div className="flex items-center gap-4">
            <Link to="/login" 
              className="hidden sm:inline-flex text-gray-400 hover:text-white transition-colors text-sm font-medium">
              Entrar
            </Link>
            <a href={WHATSAPP_LINK}
              className="inline-flex items-center gap-2 bg-[#F5C842] text-black px-5 py-2.5 rounded-full text-sm font-medium hover:shadow-lg hover:shadow-yellow-500/25 hover:-translate-y-0.5 transition-all">
              Falar com vendas
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>
      </nav>

      {/* 4. HERO PRINCIPAL */}
      <section className="relative min-h-screen flex flex-col justify-center px-6 lg:px-12 pt-32 pb-20 overflow-hidden">
        {/* Background gradient + grid */}
        <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(245,200,66,0.10)_0%,transparent_70%)]"/>
        <div className="absolute inset-0 pointer-events-none bg-[linear-gradient(rgba(255,255,255,0.025)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.025)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_80%)]"/>

        <div className="relative z-10 max-w-5xl mx-auto text-center">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1.5 mb-8 text-xs font-medium text-[#F5C842] animate-fade-up">
            <span className="w-1.5 h-1.5 bg-[#F5C842] rounded-full animate-pulse"/>
            Captura inteligente de leads em feiras B2B
          </div>

          {/* Headline */}
          <h1 className="font-serif text-[52px] md:text-[72px] lg:text-[88px] leading-[1.0] tracking-[-2.5px] mb-7 animate-fade-up [animation-delay:100ms]">
            Capture leads em feiras<br/>
            e envie follow-ups com IA<br/>
            <em className="italic text-[#F5C842]">na mesma hora.</em>
          </h1>

          {/* Subtitle */}
          <p className="text-lg lg:text-xl font-light text-gray-400 leading-relaxed max-w-2xl mx-auto mb-10 animate-fade-up [animation-delay:200ms]">
            O Catlead ajuda sua equipe a captar visitantes no estande, qualificar oportunidades, gerar mensagens inteligentes de follow-up e montar propostas em PDF para envio imediato pelo WhatsApp.
          </p>

          {/* Texto de apoio */}
          <p className="text-sm text-gray-500 mb-10 max-w-xl mx-auto animate-fade-up [animation-delay:250ms]">
            Ideal para empresas que investem em feiras, eventos e exposições — e querem transformar o interesse do visitante em uma ação comercial rápida, organizada e profissional.
          </p>

          {/* CTAs */}
          <div className="flex items-center justify-center gap-3 flex-wrap mb-12 animate-fade-up [animation-delay:300ms]">
            <a href={WHATSAPP_LINK}
              className="inline-flex items-center gap-2.5 bg-[#F5C842] text-black px-9 py-4 rounded-full text-base font-medium hover:shadow-2xl hover:shadow-yellow-500/30 hover:-translate-y-0.5 transition-all">
              Quero captar mais leads
              <WhatsAppIcon className="w-5 h-5"/>
            </a>
            <a href="#como-funciona"
              className="inline-flex items-center gap-2 bg-white/[0.03] border border-white/[0.12] text-gray-400 px-8 py-4 rounded-full text-base hover:text-white hover:bg-white/[0.05] transition-all">
              Ver como funciona
            </a>
          </div>

          {/* Bullets de apoio */}
          <div className="flex flex-wrap justify-center gap-x-6 gap-y-3 text-sm text-gray-500 animate-fade-up [animation-delay:400ms]">
            {[
              'Follow-up gerado com IA',
              'Proposta em PDF pronta',
              'Leads qualificados',
              'Comparativo entre feiras',
              'Gestão por representante'
            ].map(item => (
              <div key={item} className="flex items-center gap-2">
                <span className="text-[#F5C842] font-semibold">✓</span>
                {item}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5. SEÇÃO PROBLEMA */}
      <section className="relative px-6 lg:px-12 py-28 border-y border-white/[0.05]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              O PROBLEMA
            </span>
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              Sua empresa investe alto<br/>
              para expor em <em className="italic text-[#F5C842]">feiras e eventos.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto leading-relaxed">
              Participar de uma feira exige investimento em estande, equipe, viagem, hospedagem, alimentação, montagem e material promocional. Mas na hora de capturar leads, muitas empresas ainda dependem de cartões, anotações no WhatsApp, papéis ou coletores caros da organização do evento.
            </p>
          </div>

          {/* Grid de 7 dores */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
            {[
              {icon:'📋', t:'Cartões de visita perdidos', d:'200 cartões viram pilha que vira esquecimento.'},
              {icon:'💬', t:'Leads espalhados no WhatsApp', d:'Contatos misturados, sem contexto da conversa.'},
              {icon:'📊', t:'Planilhas manuais e atrasadas', d:'Digitar tudo na segunda-feira: ninguém faz.'},
              {icon:'🤔', t:'Falta de contexto da conversa', d:'Vendedor não lembra o que o lead disse.'},
              {icon:'⏰', t:'Follow-up feito tarde demais', d:'Lead já visitou 5 concorrentes nesse tempo.'},
              {icon:'📄', t:'Propostas enviadas dias depois', d:'Quando chega, o cliente já decidiu sem você.'},
              
            ].map(item => (
              <div key={item.t} className="bg-white/[0.02] border border-white/[0.06] rounded-2xl p-6 hover:border-white/[0.15] hover:bg-white/[0.04] transition-all">
                <div className="w-11 h-11 rounded-xl bg-white/[0.04] border border-white/[0.06] flex items-center justify-center text-xl mb-4">{item.icon}</div>
                <div className="text-base font-medium text-white mb-2 leading-snug">{item.t}</div>
                <div className="text-sm font-light text-gray-400 leading-relaxed">{item.d}</div>
              </div>
            ))}
          </div>

          <p className="font-serif text-2xl lg:text-3xl italic text-center text-white leading-snug">
            Feira sem controle de leads vira apenas presença. Com Catlead, vira
            <em className="text-[#F5C842]">{' '}inteligência comercial.</em>
          </p>
        </div>
      </section>

      {/* 6. SEÇÃO DIFERENCIAL — NÃO PRECISA ALUGAR */}
      <section className="relative px-6 lg:px-12 py-28 bg-gradient-to-br from-[rgba(245,200,66,0.04)] to-transparent border-y border-[rgba(245,200,66,0.1)]">
        <div className="max-w-5xl mx-auto text-center">
          <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
            DIFERENCIAL
          </span>
          <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-6">
            Sua empresa não precisa<br/>
            alugar o <em className="italic text-[#F5C842]">coletor oficial</em> da feira.
          </h2>
          <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto mb-12 leading-relaxed">
            Em muitos eventos, o expositor precisa pagar à parte para usar leitores de crachá ou coletores da organização. Com o Catlead, você tem sua própria estrutura de captura, com mais autonomia, mais controle dos dados e mais inteligência no pós-evento.
          </p>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-12 text-left">
            {[
              'Mais autonomia',
              'Mais controle dos dados',
              'Mais flexibilidade para sua equipe',
              'Mais inteligência no pós-evento',
              'Mais economia em cada feira',
              'Não fica preso ao sistema do evento'
            ].map(b => (
              <div key={b} className="flex items-center gap-3 bg-white/[0.02] border border-white/[0.06] rounded-xl px-5 py-4">
                <span className="text-[#F5C842] text-xl">✓</span>
                <span className="text-sm text-gray-200">{b}</span>
              </div>
            ))}
          </div>

          <p className="font-serif text-2xl lg:text-3xl italic text-white max-w-3xl mx-auto leading-snug">
            Você investiu para estar na feira.<br/>
            Os leads precisam ser <em className="text-[#F5C842]">seus, organizados e prontos para vender.</em>
          </p>
        </div>
      </section>

      {/* 7. SEÇÃO AGITAÇÃO */}
      <section className="relative px-6 lg:px-12 py-28">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-14">
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              O maior prejuízo<br/>
              não é o valor da feira.
            </h2>
            <p className="text-xl font-light text-[#F5C842] italic">
              É sair do evento sem saber exatamente o que aconteceu com os leads.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-4 max-w-3xl mx-auto mb-14">
            {[
              'Quantos visitantes passaram pelo estande?',
              'Quais leads eram mais quentes?',
              'Qual vendedor captou mais oportunidades?',
              'Quem precisa receber follow-up?',
              'Qual lead já está com proposta?',
              'Qual foi o melhor dia da feira?',
              'Qual foi o melhor horário de captação?',
              'Qual feira realmente valeu a pena?'
            ].map(q => (
              <div key={q} className="flex items-start gap-3 text-base text-gray-300">
                <span className="text-[#F5C842] font-bold mt-0.5">?</span>
                <span>{q}</span>
              </div>
            ))}
          </div>

          <p className="font-serif text-3xl lg:text-4xl italic text-center text-white">
            A feira termina. Mas as oportunidades<br/>
            <em className="text-[#F5C842]">não podem se perder.</em>
          </p>
        </div>
      </section>

      {/* 8. SEÇÃO SOLUÇÃO */}
      <section id="funcionalidades" className="relative px-6 lg:px-12 py-28 border-y border-white/[0.05]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              A SOLUÇÃO
            </span>
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              O sistema de captura de leads<br/>
              para <em className="italic text-[#F5C842]">feiras e eventos B2B.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto leading-relaxed">
              Sua equipe captura visitantes em segundos, qualifica automaticamente, gera follow-up com IA, monta proposta em PDF e acompanha tudo em tempo real.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-3 mb-12">
            {[
              {icon:'📲', t:'Captura do lead'},
              {icon:'🧠', t:'Qualificação inteligente'},
              {icon:'👥', t:'Equipe comercial'},
              {icon:'📊', t:'Dashboard em tempo real'},
              {icon:'💬', t:'Follow-up com IA'},
              {icon:'📄', t:'Propostas em PDF'},
              {icon:'🎯', t:'Pipeline de vendas'},
              {icon:'📥', t:'Exportação de dados'},
              {icon:'📈', t:'Comparativo entre feiras'},
            ].map(f => (
              <div key={f.t} className="bg-white/[0.02] border border-white/[0.06] rounded-xl px-5 py-6 flex items-center gap-3 hover:border-[rgba(245,200,66,0.25)] hover:bg-white/[0.04] transition-all">
                <span className="text-2xl">{f.icon}</span>
                <span className="text-sm font-medium text-white">{f.t}</span>
              </div>
            ))}
          </div>

          <p className="font-serif text-2xl lg:text-3xl italic text-center text-white">
            Não espere a feira acabar<br/>
            <em className="text-[#F5C842]">para começar a vender.</em>
          </p>
        </div>
      </section>

      {/* 9. SEÇÃO COMO FUNCIONA — 7 PASSOS */}
      <section id="como-funciona" className="relative px-6 lg:px-12 py-28">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              COMO FUNCIONA
            </span>
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              Do visitante no estande<br/>
              à proposta enviada em<br/>
              <em className="italic text-[#F5C842]">poucos minutos.</em>
            </h2>
          </div>

          <div className="max-w-3xl mx-auto space-y-4">
            {[
              {n:'01', t:'Capture o lead', d:'Use QR Code do estande, QR do WhatsApp, foto de cartão com IA, foto de crachá com IA ou cadastro manual rápido.'},
              {n:'02', t:'Registre o interesse', d:'Informe produto, necessidade, observações, potencial de compra e respostas personalizadas.'},
              {n:'03', t:'Classifique a oportunidade', d:'A IA ajuda a identificar se o lead é quente, morno ou frio.'},
              {n:'04', t:'Gere o follow-up com IA', d:'O Catlead cria uma mensagem personalizada com base no contexto do atendimento.'},
              {n:'05', t:'Monte a proposta em PDF', d:'Crie uma proposta profissional com os dados do lead e da oportunidade.'},
              {n:'06', t:'Envie pelo WhatsApp', d:'Encaminhe o follow-up e a proposta enquanto o interesse ainda está vivo.'},
              {n:'07', t:'Acompanhe a performance', d:'Compare feiras, representantes, dias, horários, propostas e oportunidades geradas.'},
            ].map((step, i) => (
              <div key={step.n} className="flex gap-5 lg:gap-8 bg-white/[0.02] border border-white/[0.06] rounded-2xl p-6 lg:p-8 hover:border-[rgba(245,200,66,0.2)] transition-all">
                <div className="flex-shrink-0 w-14 h-14 rounded-full bg-[rgba(245,200,66,0.08)] border border-[rgba(245,200,66,0.2)] flex items-center justify-center font-serif text-xl italic text-[#F5C842]">
                  {step.n}
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-medium text-white mb-2 tracking-tight">{step.t}</h3>
                  <p className="text-sm lg:text-base font-light text-gray-400 leading-relaxed">{step.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 10. SEÇÃO CAPTURA — 6 CARDS */}
      <section className="relative px-6 lg:px-12 py-28 border-y border-white/[0.05]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              Capture visitantes do estande<br/>
              de <em className="italic text-[#F5C842]">várias formas.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto">
              Sua equipe não depende de um único método. O Catlead se adapta à rotina da feira.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              {icon:'📱', t:'QR Code do estande', d:'O visitante aponta a câmera, preenche os dados e entra automaticamente na sua base de leads.'},
              {icon:'💬', t:'Scanner de QR do WhatsApp', d:'Capture contatos rapidamente a partir do QR Code do WhatsApp.'},
              {icon:'💳', t:'Foto de cartão de visita com IA', d:'Tire uma foto e a IA transforma os dados em cadastro automaticamente.'},
              {icon:'🪪', t:'Foto de crachá com IA', d:'Ideal para eventos com credenciais, congressos e feiras corporativas.'},
              {icon:'⌨️', t:'Cadastro manual rápido', d:'Quando precisar, sua equipe registra o lead em poucos segundos.'},
              {icon:'📶', t:'Funciona em conexão ruim', d:'Mesmo quando a internet da feira oscila, o app sincroniza depois.'},
            ].map(c => (
              <div key={c.t} className="bg-white/[0.02] border border-white/[0.06] rounded-2xl p-7 hover:border-[rgba(245,200,66,0.2)] hover:-translate-y-1 transition-all">
                <div className="w-12 h-12 rounded-xl bg-[rgba(245,200,66,0.08)] border border-[rgba(245,200,66,0.15)] flex items-center justify-center text-2xl mb-5">{c.icon}</div>
                <h3 className="text-lg font-medium text-white mb-2 tracking-tight">{c.t}</h3>
                <p className="text-sm font-light text-gray-400 leading-relaxed">{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 11. SEÇÃO QUALIFICAÇÃO INTELIGENTE */}
      <section className="relative px-6 lg:px-12 py-28">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              QUALIFICAÇÃO INTELIGENTE
            </span>
            <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-5">
              Nem todo visitante tem<br/>
              o <em className="italic text-[#F5C842]">mesmo potencial.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 leading-relaxed mb-8">
              O Catlead ajuda sua equipe a identificar os melhores leads e priorizar quem merece atenção imediata. Durante a captura, sua equipe registra informações importantes para não perder o contexto da conversa.
            </p>

            <ul className="space-y-3">
              {[
                'Formulário com até 5 perguntas personalizadas',
                'Classificação quente, morno ou frio por IA',
                'Análise do perfil do lead',
                'Observações criadas pelo vendedor',
                'Registro de interesse e produto',
                'Histórico por representante',
                'Status de atendimento e próximo passo'
              ].map(b => (
                <li key={b} className="flex items-start gap-3 text-base text-gray-200">
                  <span className="w-6 h-6 rounded-full bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] flex items-center justify-center text-[#F5C842] text-xs flex-shrink-0 mt-0.5">✓</span>
                  {b}
                </li>
              ))}
            </ul>

            <p className="font-serif text-xl italic text-white mt-8 leading-relaxed">
              O pós-feira começa pelos leads certos, sem esquecer do que foi conversado.
            </p>
          </div>

          <div className="bg-[#111] border border-white/[0.08] rounded-2xl p-7">
            <div className="flex justify-between items-start mb-5 pb-4 border-b border-white/[0.06]">
              <div>
                <div className="text-sm text-gray-400 uppercase tracking-wider mb-1">Lead</div>
                <div className="text-lg font-medium text-white">João Martins</div>
                <div className="text-sm text-gray-400">Fazenda Santa Clara</div>
              </div>
              <span className="text-xs font-medium bg-red-500/15 text-red-400 border border-red-500/20 rounded-full px-3 py-1">
                🔥 Quente
              </span>
            </div>

            <div className="space-y-3 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-500">Interesse</span>
                <span className="text-gray-200">Piloto automático agrícola</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Potencial</span>
                <span className="text-gray-200">2 equipamentos</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Score IA</span>
                <span className="text-[#F5C842] font-medium">87/100</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-500">Representante</span>
                <span className="text-gray-200">Marcos Silva</span>
              </div>
            </div>

            <div className="mt-5 pt-5 border-t border-white/[0.06]">
              <div className="text-xs text-gray-500 mb-2">OBSERVAÇÃO DO VENDEDOR</div>
              <div className="text-sm text-gray-300 italic leading-relaxed">
                "Quer proposta para 2 equipamentos. Decisão até final do mês."
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 12. SEÇÃO FOLLOW-UP COM IA */}
      <section id="followup" className="relative px-6 lg:px-12 py-28 bg-gradient-to-br from-[rgba(245,200,66,0.04)] to-transparent border-y border-[rgba(245,200,66,0.1)]">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              FOLLOW-UP COM IA
            </span>
            <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-5">
              Follow-up inteligente,<br/>
              pronto para enviar<br/>
              pelo <em className="italic text-[#F5C842]">WhatsApp.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 leading-relaxed mb-8">
              Depois que o lead é capturado, o Catlead gera uma mensagem de follow-up com base no contexto real da conversa.
            </p>

            <div className="text-sm text-gray-400 mb-4 uppercase tracking-wider font-medium">
              A IA considera dados como:
            </div>
            <ul className="space-y-2.5 mb-8">
              {[
                'Nome do lead e empresa',
                'Produto ou solução de interesse',
                'Respostas do formulário',
                'Temperatura do lead',
                'Observações do representante',
                'Contexto da feira',
                'Idioma do lead (detectado pelo DDI)',
                'Próximo passo comercial'
              ].map(b => (
                <li key={b} className="flex items-center gap-3 text-sm text-gray-200">
                  <span className="text-[#F5C842]">→</span>
                  {b}
                </li>
              ))}
            </ul>

            <p className="font-serif text-xl italic text-white leading-relaxed">
              O melhor follow-up não é o que acontece dias depois da feira. É o que acontece
              <em className="text-[#F5C842]"> enquanto o lead ainda lembra da conversa.</em>
            </p>

            <a href={WHATSAPP_LINK}
              className="inline-flex items-center gap-2 bg-[#F5C842] text-black px-7 py-3.5 rounded-full text-sm font-medium mt-8 hover:shadow-xl hover:shadow-yellow-500/30 hover:-translate-y-0.5 transition-all">
              Quero ver isso funcionando
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
          </div>

          <div className="bg-[#111] border border-white/[0.08] rounded-2xl p-7">
            <div className="flex justify-between items-center mb-5 pb-4 border-b border-white/[0.06]">
              <div className="text-sm text-gray-400 uppercase tracking-wider">
                Follow-up gerado pela IA
              </div>
              <span className="text-xs text-[#F5C842] bg-[rgba(245,200,66,0.1)] px-2.5 py-1 rounded-full">🇧🇷 Português</span>
            </div>

            <div className="bg-white/[0.03] rounded-xl p-5 mb-3 border-l-2 border-[#F5C842]">
              <div className="text-sm text-gray-200 leading-relaxed font-light">
                Olá, João! Foi um prazer conversar com você na feira. Conforme falamos sobre a necessidade da Fazenda Santa Clara, preparei uma proposta para os 2 equipamentos de piloto automático agrícola.
                <br/><br/>
                Segue o PDF com todas as informações. Fico à disposição para avançarmos no próximo passo.
              </div>
              <div className="text-xs text-gray-500 mt-3 flex items-center gap-2">
                ⚡ Gerado 14 minutos após a captura
              </div>
            </div>

            <div className="bg-white/[0.03] rounded-xl p-4 mb-3">
              <div className="text-sm text-gray-200">
                <div className="text-[#F5C842] font-medium mb-1">📄 Proposta-Joao-Martins.pdf</div>
                <div className="text-xs text-gray-500">
                  2 unidades de piloto automático<br/>
                  R$ 64.000 — válida por 30 dias
                </div>
              </div>
            </div>

            <div className="flex justify-between text-xs text-gray-500 pt-4 border-t border-white/[0.06]">
              <span>📊 Score: 87/100</span>
              <span>🔥 Quente</span>
              <span>👤 Marcos Silva</span>
            </div>
          </div>
        </div>
      </section>

      {/* 13. SEÇÃO PROPOSTA EM PDF */}
      <section className="relative px-6 lg:px-12 py-28">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">
              PROPOSTA EM PDF
            </span>
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              Monte uma proposta em PDF<br/>
              enquanto o lead ainda<br/>
              <em className="italic text-[#F5C842]">está no estande.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto leading-relaxed">
              Durante o atendimento, o representante registra produto de interesse, observações e condições comerciais. O Catlead gera uma proposta em PDF pronta para enviar pelo WhatsApp na hora.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
            {[
              {icon:'⚡', t:'Mais velocidade comercial', d:'A proposta não fica para depois. É enviada no momento do interesse.'},
              {icon:'✨', t:'Mais profissionalismo', d:'Material organizado, claro e com identidade da sua empresa.'},
              {icon:'🔁', t:'Menos retrabalho', d:'O representante não precisa refazer tudo depois do evento.'},
              {icon:'📈', t:'Mais chance de conversão', d:'Quanto mais rápido o retorno, maior a chance de manter o interesse vivo.'},
            ].map(b => (
              <div key={b.t} className="bg-white/[0.02] border border-white/[0.06] rounded-2xl p-6 hover:border-[rgba(245,200,66,0.2)] transition-all">
                <div className="text-3xl mb-4">{b.icon}</div>
                <h3 className="text-base font-medium text-white mb-2 tracking-tight">{b.t}</h3>
                <p className="text-sm font-light text-gray-400 leading-relaxed">{b.d}</p>
              </div>
            ))}
          </div>

          <p className="font-serif text-2xl lg:text-3xl italic text-center text-white">
            Captou, qualificou, gerou proposta e enviou.<br/>
            <em className="text-[#F5C842]">Tudo no fluxo da feira.</em>
          </p>
        </div>
      </section>

      {/* 14. SEÇÃO MINI CRM E PIPELINE */}
      <section className="relative px-6 lg:px-12 py-28 border-y border-white/[0.05]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-14">
            <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-5">
              Organize o pós-feira em um<br/>
              <em className="italic text-[#F5C842]">mini CRM simples e visual.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto leading-relaxed">
              O evento acaba, mas a venda continua. Acompanhe cada lead até o próximo passo.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-10">
            {[
              {icon:'📋', t:'Pipeline visual em Kanban'},
              {icon:'🎯', t:'Status de atendimento'},
              {icon:'🔍', t:'Busca, filtros e ordenação'},
              {icon:'💬', t:'Histórico de follow-up'},
              {icon:'📄', t:'Histórico de propostas'},
              {icon:'📅', t:'Link de agendamento embutido'},
              {icon:'📥', t:'Exportação Excel ou CSV'},
              {icon:'🔄', t:'Atualização em tempo real'},
            ].map(f => (
              <div key={f.t} className="bg-white/[0.02] border border-white/[0.06] rounded-xl px-5 py-5 flex items-center gap-3 hover:border-[rgba(245,200,66,0.2)] transition-all">
                <span className="text-xl">{f.icon}</span>
                <span className="text-sm text-white font-medium">{f.t}</span>
              </div>
            ))}
          </div>

          <p className="font-serif text-xl lg:text-2xl italic text-center text-gray-200 max-w-3xl mx-auto">
            Sua equipe deixa de trabalhar com contatos soltos e passa a trabalhar com
            <em className="text-[#F5C842]">{' '}oportunidades organizadas.</em>
          </p>
        </div>
      </section>

      {/* 15. SEÇÃO DASHBOARD */}
      <section id="dados" className="relative px-6 lg:px-12 py-28">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="bg-[#111] border border-white/[0.08] rounded-2xl p-7 order-2 lg:order-1">
            <div className="flex justify-between mb-6">
              <div>
                <div className="text-xs text-gray-500 uppercase tracking-wider mb-1">COMPARATIVO DE EVENTOS</div>
                <div className="text-lg font-semibold text-white">Performance histórica</div>
              </div>
              <span className="text-xs text-[#F5C842] bg-[rgba(245,200,66,0.1)] px-2.5 py-1 rounded-full">+ ROI</span>
            </div>
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/[0.08]">
                  <th className="text-left py-3 text-xs text-gray-500 uppercase font-medium">Evento</th>
                  <th className="text-right py-3 text-xs text-gray-500 uppercase font-medium">Leads</th>
                  <th className="text-right py-3 text-xs text-gray-500 uppercase font-medium">Fechados</th>
                  <th className="text-right py-3 text-xs text-gray-500 uppercase font-medium">ROI</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-white/[0.04]">
                  <td className="py-3.5 text-gray-200"><div className="flex items-center gap-2.5"><div className="w-2 h-2 rounded-full bg-[#F5C842]"/>Feira Setor A — 2026</div></td>
                  <td className="text-right text-gray-200">320</td>
                  <td className="text-right text-gray-200">47</td>
                  <td className="text-right text-[#F5C842] font-semibold">312%</td>
                </tr>
                <tr className="border-b border-white/[0.04]">
                  <td className="py-3.5 text-gray-200"><div className="flex items-center gap-2.5"><div className="w-2 h-2 rounded-full bg-[rgba(245,200,66,0.4)]"/>Expo Negócios — 2026</div></td>
                  <td className="text-right text-gray-200">189</td>
                  <td className="text-right text-gray-200">28</td>
                  <td className="text-right text-white">187%</td>
                </tr>
              </tbody>
            </table>
            <div className="mt-5 p-4 bg-[rgba(245,200,66,0.06)] border border-[rgba(245,200,66,0.2)] rounded-xl text-sm text-gray-200">
              🏆 <strong className="text-[#F5C842]">Feira Setor A</strong> entrega 7.4× mais ROI que eventos menores.
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <span className="inline-block text-xs font-medium tracking-widest uppercase text-[#F5C842] bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.25)] rounded-full px-4 py-1 mb-4">DASHBOARD EM TEMPO REAL</span>
            <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-5">Saiba qual feira<br/><em className="italic text-[#F5C842]">vale o investimento.</em></h2>
            <p className="text-lg font-light text-gray-400 leading-relaxed mb-8">Pare de chutar onde investir. O Catlead mostra qual feira trouxe mais leads, qual representante performou melhor e qual produto teve mais interesse.</p>
          </div>
        </div>
      </section>

      {/* 16. COMPARATIVO FEIRAS */}
      <section className="relative px-6 lg:px-12 py-28 border-y border-white/[0.05]">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-14">
            <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-5">Saiba onde vale a pena<br/><em className="italic text-[#F5C842]">investir novamente.</em></h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5 max-w-4xl mx-auto">
            <div className="bg-white/[0.02] border border-white/[0.08] rounded-2xl p-7">
              <div className="text-xs font-medium tracking-widest text-gray-500 uppercase mb-2">Feira A</div>
              <h3 className="font-serif text-2xl text-white mb-6">Volume alto, conversão média</h3>
              <div className="space-y-3 text-sm">
                {[['Leads capturados', '320'], ['Leads quentes', '82']].map(([k,v]) => <div key={k} className="flex justify-between py-2 border-b border-white/[0.04]"><span className="text-gray-500">{k}</span><span className="text-white font-medium">{v}</span></div>)}
              </div>
            </div>
            <div className="bg-[rgba(245,200,66,0.04)] border border-[rgba(245,200,66,0.3)] rounded-2xl p-7 relative">
              <div className="absolute -top-3 right-7 bg-[#F5C842] text-black text-xs font-bold px-3 py-1 rounded-full">🏆 MELHOR ROI</div>
              <div className="text-xs font-medium tracking-widest text-[#F5C842] uppercase mb-2">Feira B</div>
              <h3 className="font-serif text-2xl text-white mb-6">Volume menor, leads qualificados</h3>
              <div className="space-y-3 text-sm">
                {[['Leads capturados', '180'], ['Leads quentes', '96']].map(([k,v]) => <div key={k} className="flex justify-between py-2 border-b border-[rgba(245,200,66,0.1)]"><span className="text-gray-400">{k}</span><span className="text-white font-medium">{v}</span></div>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 17. PARA QUEM É */}
      <section className="relative px-6 lg:px-12 py-28">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="font-serif text-4xl lg:text-5xl leading-tight tracking-tight mb-14">
            Feito para empresas que<br/>
            <em className="italic text-[#F5C842]">vendem em feiras.</em>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-left">
            {[
              {
                icon: "🏭",
                t: "Indústrias",
                d: "Capture compradores, distribuidores, representantes, revendas e oportunidades B2B.",
              },
              {
                icon: "🌾",
                t: "Empresas do agronegócio",
                d: "Organize contatos de produtores, consultores, revendedores e parceiros comerciais.",
              },
              {
                icon: "📦",
                t: "Distribuidores e atacadistas",
                d: "Registre lojistas interessados, regiões atendidas, volume de compra e potencial de venda.",
              },
              {
                icon: "🚀",
                t: "Startups e empresas de tecnologia",
                d: "Capture leads em eventos, congressos, ativações e rodadas de negócio.",
              },
              {
                icon: "💼",
                t: "Representantes comerciais",
                d: "Centralize contatos captados em campo, feiras e visitas comerciais.",
              },
              {
                icon: "🏢",
                t: "Empresas expositoras",
                d: "Tenha controle real sobre os contatos gerados durante a participação no evento.",
              },
            ].map((c) => (
              <div
                key={c.t}
                className="bg-white/[0.02] border border-white/[0.06] rounded-2xl p-6 hover:border-[rgba(245,200,66,0.2)] hover:-translate-y-1 transition-all duration-300"
              >
                <div className="text-[32px] mb-4">{c.icon}</div>
                <h3 className="text-lg font-medium text-white mb-2 tracking-tight">
                  {c.t}
                </h3>
                <p className="text-sm font-light text-gray-400 leading-relaxed">
                  {c.d}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 18. CASE AVMAP */}
      <section className="relative px-6 lg:px-12 py-24 bg-gradient-to-b from-transparent to-[rgba(245,200,66,0.05)] border-y border-white/[0.05]">
        <div className="max-w-[1100px] mx-auto">
          <div className="text-center mb-16">
            <span className="inline-block text-[10px] font-bold tracking-[0.2em] uppercase text-black bg-[#F5C842] rounded-full px-4 py-1.5 mb-6">
              CASE REAL
            </span>
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-6">
              AvMap captura leads<br/>
              <em className="italic text-[#F5C842]">com muito mais inteligência.</em>
            </h2>
            <p className="text-lg font-light text-gray-400 max-w-2xl mx-auto">
              A AvMap usou o Catlead para organizar a captura e o acompanhamento dos visitantes no estande durante a feira.
            </p>
          </div>

          {/* Card do Depoimento */}
          <div className="bg-white/[0.02] border border-white/[0.06] rounded-[20px] p-8 lg:p-12 mt-12">
            <div className="font-serif italic text-2xl lg:text-[28px] leading-[1.5] text-white space-y-6">
              <p>
                "Antes do Catlead, eu e meus representantes captávamos tudo por cartão de visita e WhatsApp. O problema é que a gente perdia o contexto do lead e não tinha um aproveitamento relevante."
              </p>
              <p>
                "Com o Catlead, <span className="text-[#F5C842]">aumentamos muito o número de leads capturados</span>, conseguimos <span className="text-[#F5C842]">qualificar melhor cada contato</span> e <span className="text-[#F5C842]">exportar tudo para o nosso CRM</span>."
              </p>
            </div>

            {/* Assinatura */}
            <div className="mt-12 pt-8 border-t border-white/[0.06] flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#F5C842] to-[#d4a82a] flex items-center justify-center text-black font-bold text-lg">
                K
              </div>
              <div>
                <div className="text-white font-medium text-base">Karl Groterhorst</div>
                <div className="text-gray-500 font-light text-[13px]">Diretor Comercial · AvMap do Brasil</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 19. PLANOS */}
      <section id="planos" className="relative px-6 lg:px-12 py-28">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="font-serif text-4xl lg:text-6xl leading-tight tracking-tight mb-5">
              Escolha o plano ideal.
            </h2>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20 items-stretch">
            {/* CARD 1 — PLANO EVENTO */}
            <div className="bg-white/[0.02] border border-white/[0.08] rounded-3xl p-10 flex flex-col hover:border-white/[0.18] transition-all duration-300">
              <div className="text-sm font-medium uppercase text-gray-400 mb-2">
                Plano Evento
              </div>
              <p className="text-sm text-gray-500 mb-8">
                Ideal para empresas que querem usar em uma feira específica.
              </p>
              <div className="mb-8">
                <div className="flex items-baseline gap-1">
                  <span className="text-xl text-gray-400 font-serif">R$</span>
                  <span className="text-5xl lg:text-6xl font-serif text-white">797</span>
                </div>
                <div className="text-xs text-gray-500 mt-2 italic">
                  ou até 12× de R$ 66,41
                </div>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {[
                  "30 dias de acesso",
                  "1 evento ativo",
                  "10 representantes",
                  "Captura de leads",
                  "Qualificação de leads",
                  "Dashboard do evento",
                  "Exportação dos dados",
                ].map((f) => (
                  <li key={f} className="flex items-center gap-3 text-sm text-gray-300">
                    <span className="w-5 h-5 rounded-full bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.2)] flex items-center justify-center text-[#F5C842] text-[10px] shrink-0">
                      ✓
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href="https://wa.me/5519994466722?text=Ol%C3%A1%2C%20quero%20saber%20mais%20sobre%20o%20Catlead"
                className="w-full bg-white/[0.05] border border-white/[0.12] text-white py-4 rounded-full text-sm font-medium hover:bg-white/[0.1] text-center transition-all"
              >
                Quero usar em uma feira →
              </a>
            </div>

            {/* CARD 2 — PLANO EXPO (DESTAQUE) */}
            <div className="relative bg-gradient-to-b from-[rgba(245,200,66,0.05)] to-[rgba(245,200,66,0.01)] border-2 border-[#F5C842] rounded-3xl p-10 flex flex-col hover:shadow-2xl hover:shadow-yellow-500/10 transition-all duration-300 scale-105 z-10">
              <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-[#F5C842] text-black text-[10px] font-bold tracking-widest px-4 py-1 rounded-full whitespace-nowrap">
                ⭐ MAIS ESCOLHIDO
              </div>
              <div className="text-sm font-medium uppercase text-[#F5C842] mb-2">
                Plano Expo
              </div>
              <p className="text-sm text-gray-400 mb-8">
                Ideal para empresas que querem usar em até 3 feiras.
              </p>
              <div className="mb-8">
                <div className="flex items-baseline gap-1">
                  <span className="text-xl text-[#F5C842] font-serif">R$</span>
                  <span className="text-5xl lg:text-6xl font-serif text-white">1.497</span>
                </div>
                <div className="text-xs text-gray-400 mt-2 italic">
                  ou até 12× de R$ 124,75
                </div>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {[
                  "6 meses de acesso",
                  "3 eventos ativos",
                  "20 representantes",
                  "Tudo do Plano Evento",
                  "Follow-up com IA",
                  "Insights com IA",
                  "Geração de propostas em PDF",
                  "Relatório de eventos",
                  "Comparativo entre feiras",
                ].map((f) => (
                  <li key={f} className="flex items-center gap-3 text-sm text-gray-200">
                    <span className="w-5 h-5 rounded-full bg-[#F5C842] flex items-center justify-center text-black text-[10px] shrink-0">
                      ✓
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href="https://wa.me/5519994466722?text=Ol%C3%A1%2C%20quero%20saber%20mais%20sobre%20o%20Catlead"
                className="w-full bg-[#F5C842] text-black py-4 rounded-full text-sm font-bold hover:shadow-xl hover:shadow-yellow-500/30 transition-all text-center"
              >
                Quero o Plano Expo →
              </a>
            </div>

            {/* CARD 3 — PLANO PREMIUM */}
            <div className="bg-white/[0.02] border border-white/[0.08] rounded-3xl p-10 flex flex-col hover:border-white/[0.18] transition-all duration-300">
              <div className="text-sm font-medium uppercase text-gray-400 mb-2">
                Plano Premium
              </div>
              <p className="text-sm text-gray-500 mb-8">
                Para empresas que participam de mais feiras durante o ano.
              </p>
              <div className="mb-8">
                <div className="flex items-baseline gap-1">
                  <span className="text-xl text-gray-400 font-serif">R$</span>
                  <span className="text-5xl lg:text-6xl font-serif text-white">2.497</span>
                </div>
                <div className="text-xs text-gray-500 mt-2 italic">
                  ou até 12× de R$ 208,08
                </div>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {[
                  "1 ano de acesso",
                  "Eventos ilimitados",
                  "Representantes ilimitados",
                  "Tudo do Plano Expo",
                  "Histórico completo por evento",
                  "Performance por representante",
                  "Suporte prioritário",
                ].map((f) => (
                  <li key={f} className="flex items-center gap-3 text-sm text-gray-300">
                    <span className="w-5 h-5 rounded-full bg-[rgba(245,200,66,0.1)] border border-[rgba(245,200,66,0.2)] flex items-center justify-center text-[#F5C842] text-[10px] shrink-0">
                      ✓
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href="https://wa.me/5519994466722?text=Ol%C3%A1%2C%20quero%20saber%20mais%20sobre%20o%20Catlead"
                className="w-full bg-white/[0.05] border border-white/[0.12] text-white py-4 rounded-full text-sm font-medium hover:bg-white/[0.1] text-center transition-all"
              >
                Quero o Plano Premium →
              </a>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center justify-center gap-8 text-xs text-gray-500 opacity-60">
            <div className="flex items-center gap-2">
              <span className="text-[#F5C842]">🛡</span> Garantia de 7 dias — reembolso integral
            </div>
            <div className="flex items-center gap-2">
              <span className="text-[#F5C842]">🔒</span> Pagamento seguro via PIX ou cartão
            </div>
            <div className="flex items-center gap-2">
              <span className="text-[#F5C842]">✓</span> Sem fidelidade — cancele quando quiser
            </div>
          </div>
        </div>
      </section>

      {/* 20. FAQ + CTA FINAL + FOOTER */}
      <section id="faq" className="py-28 px-6 lg:px-12 border-t border-white/[0.05]">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-3xl lg:text-5xl font-serif text-center mb-16">
            Dúvidas Frequentes
          </h2>
          <div className="space-y-3">
            {[
              {
                q: "O Catlead funciona em qualquer feira?",
                a: "Sim. Pode ser usado em feiras, eventos, congressos, exposições, rodadas de negócio, ativações comerciais e ações B2B.",
              },
              {
                q: "Preciso alugar o coletor oficial da feira?",
                a: "Não. Com o Catlead, sua empresa tem sua própria estrutura de captura — sem depender da organização do evento. Mais autonomia, controle dos dados e economia em cada feira.",
              },
              {
                q: "Minha equipe pode usar durante o evento?",
                a: "Sim. Cada representante pode ter seu próprio acesso, de acordo com o plano contratado (10 reps no Evento, 20 no Expo, ilimitados no Premium).",
              },
              {
                q: "O Catlead gera follow-up com IA?",
                a: "Sim. A plataforma gera mensagens personalizadas com base nas informações do lead, contexto da conversa e até no idioma detectado pelo DDI do WhatsApp.",
              },
              {
                q: "Posso gerar proposta em PDF?",
                a: "Sim, nos planos Expo e Premium. Sua equipe monta a proposta com produtos e condições comerciais, gera o PDF e envia direto pelo WhatsApp ainda na feira.",
              },
              {
                q: "Consigo exportar os leads?",
                a: "Sim. Os dados podem ser exportados para Excel ou CSV a qualquer momento, em todos os planos.",
              },
              {
                q: "O Catlead funciona com conexão ruim?",
                a: "Sim. Foi pensado para o ambiente de feira, onde a internet 3G ou 4G pode oscilar. Os dados sincronizam quando a conexão melhora.",
              },
              {
                q: "Dá para comparar uma feira com outra?",
                a: "Sim, nos planos Expo e Premium. Você compara eventos, representantes, leads, follow-ups, propostas e descobre melhores dias e horários de captação.",
              },
              {
                q: "Qual plano devo escolher?",
                a: "Para uma feira específica, escolha Plano Evento. Para até 3 feiras, escolha Plano Expo. Para uso durante todo o ano com eventos ilimitados, escolha Plano Premium.",
              },
            ].map((item, idx) => (
              <details
                key={idx}
                className="group bg-white/[0.02] border border-white/[0.06] rounded-2xl p-6 transition-all duration-300 open:border-[rgba(245,200,66,0.2)]"
              >
                <summary className="flex items-center justify-between cursor-pointer list-none">
                  <span className="font-medium text-white transition-colors group-hover:text-white/90">
                    {item.q}
                  </span>
                  <span className="text-[#F5C842] transition-transform duration-300 group-open:rotate-45">
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <line x1="12" y1="5" x2="12" y2="19"></line>
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                  </span>
                </summary>
                <div className="mt-4 text-gray-400 font-light leading-[1.7] animate-fade-down">
                  {item.a}
                </div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* 21. SEÇÃO CTA FINAL */}
      <section className="relative px-6 lg:px-12 py-32 text-center overflow-hidden border-t border-white/[0.05]">
        <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_center,rgba(245,200,66,0.08)_0%,transparent_70%)]" />
        <div className="relative z-10 max-w-4xl mx-auto">
          <h2 className="font-serif text-4xl lg:text-7xl leading-tight tracking-tight mb-8">
            Transforme sua próxima feira em uma<br />
            <em className="italic text-[#F5C842]">máquina de oportunidades.</em>
          </h2>
          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto font-light">
            Não deixe os leads esfriarem. Comece a capturar, qualificar e vender ainda no estande com o Catlead.
          </p>
          <a href={WHATSAPP_LINK}
            className="inline-flex items-center gap-3 bg-[#F5C842] text-black px-10 py-5 rounded-full text-lg font-bold hover:shadow-2xl hover:shadow-yellow-500/40 hover:-translate-y-1 transition-all">
            Quero usar o Catlead na próxima feira
            <WhatsAppIcon className="w-6 h-6" />
          </a>
        </div>
      </section>

      <footer className="border-t border-white/[0.06] px-6 lg:px-12 py-12 text-center text-gray-500 text-sm">
        © 2026 Catlead. Todos os direitos reservados.
      </footer>
      <a href={WHATSAPP_LINK} className="fixed bottom-7 right-7 z-40 w-15 h-15 rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-2xl hover:scale-110 transition-all">
        <WhatsAppIcon className="w-7 h-7"/>
      </a>


      {/* Botão flutuante WhatsApp */}
      <a href={WHATSAPP_LINK}
        className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center justify-center">
        <WhatsAppIcon className="w-7 h-7" />
      </a>
    </div>
  );
};

export default Landing;