import { createFileRoute } from "@tanstack/react-router";
import {
  Bot, Brain, MessageSquare, Sparkles, CheckCircle2, ArrowRight, Phone,
  ShieldCheck, Clock, Zap, Languages, GraduationCap, Headphones,
  Workflow, TrendingUp, Users, AlertTriangle, Coffee, MoonStar, Target,
} from "lucide-react";

import { Nav, WHATSAPP_URL } from "@/components/site/Nav";
import { Footer } from "@/components/site/Footer";
import { CrossPromo } from "@/components/site/CrossPromo";
import { GoogleReviewsBadge } from "@/components/site/GoogleReviewsBadge";

export const Route = createFileRoute("/atendentes-ia")({
  head: () => ({
    meta: [
      { title: "Atendente de IA para WhatsApp 24/7 — Ararabot" },
      { name: "description", content: "Atendentes de IA sob medida para o seu WhatsApp: respondem, qualificam leads, vendem e marcam reuniões 24/7, integrados ao seu CRM." },
      { property: "og:title", content: "Atendentes de IA no WhatsApp — Ararabot" },
      { property: "og:description", content: "Sua IA atende, qualifica e vende dentro do WhatsApp, com a voz da sua marca. Sem fila, sem cliente esperando." },
      { property: "og:url", content: "https://ararabot.lovable.app/atendentes-ia" },
      { property: "og:type", content: "product" },
      { property: "og:image", content: "https://ararabot.com.br/wp-content/uploads/2024/06/bot-conversa-chatbot-768x505.png" },
      { name: "twitter:title", content: "Atendentes de IA para WhatsApp — Ararabot" },
      { name: "twitter:description", content: "IA treinada com a sua empresa, atendendo no WhatsApp 24/7. Cancela quando quiser." },
    ],
    links: [
      { rel: "canonical", href: "https://ararabot.lovable.app/atendentes-ia" },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Product",
          name: "Ararabot — Atendentes de IA para WhatsApp",
          description:
            "Criação de atendentes de inteligência artificial personalizados para WhatsApp, treinados com a base de conhecimento da empresa, com atendimento 24/7, qualificação de leads e integração com CRM.",
          brand: { "@type": "Brand", name: "Ararabot" },
          category: "Software de IA / Chatbot",
          offers: {
            "@type": "Offer",
            price: "190",
            priceCurrency: "BRL",
            url: "https://ararabot.lovable.app/atendentes-ia",
            availability: "https://schema.org/InStock",
          },
          aggregateRating: {
            "@type": "AggregateRating",
            ratingValue: "4.9",
            reviewCount: "112",
            bestRating: "5",
            worstRating: "1",
          },
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: [
            { "@type": "Question", name: "A IA é treinada com a minha empresa?", acceptedAnswer: { "@type": "Answer", text: "Sim. Treinamos o atendente com seus produtos, serviços, preços, FAQ e tom de voz. Ele responde como se fosse o seu melhor vendedor." } },
            { "@type": "Question", name: "Funciona com meu WhatsApp atual?", acceptedAnswer: { "@type": "Answer", text: "Sim. Usamos a API Oficial da Meta. Mantém seu número e adiciona inteligência em volta dele." } },
            { "@type": "Question", name: "A IA passa para um humano quando precisa?", acceptedAnswer: { "@type": "Answer", text: "Sim. Configuramos gatilhos: assuntos sensíveis, fechamento de venda ou pedido explícito do cliente acionam o atendente humano." } },
            { "@type": "Question", name: "Quanto tempo para colocar no ar?", acceptedAnswer: { "@type": "Answer", text: "Entre 5 e 10 dias úteis, com treinamento, testes e integração ao seu CRM." } },
            { "@type": "Question", name: "Tem fidelidade?", acceptedAnswer: { "@type": "Answer", text: "Não. Mensal, sem multa, cancele quando quiser." } },
          ],
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://ararabot.lovable.app/" },
            { "@type": "ListItem", position: 2, name: "Atendentes de IA", item: "https://ararabot.lovable.app/atendentes-ia" },
          ],
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "HowTo",
          name: "Como implantar um Atendente de IA no WhatsApp com a Ararabot",
          description: "Passo a passo para colocar uma IA treinada com a sua empresa atendendo no WhatsApp em até 10 dias.",
          totalTime: "P10D",
          estimatedCost: { "@type": "MonetaryAmount", currency: "BRL", value: "190" },
          step: [
            { "@type": "HowToStep", position: 1, name: "Diagnóstico gratuito", text: "Conversa de 20 minutos para entender seu negócio, fluxos de atendimento e gargalos atuais." },
            { "@type": "HowToStep", position: 2, name: "Treinamento da IA", text: "Treinamos o atendente com seus produtos, serviços, FAQ, tom de voz e regras de negócio." },
            { "@type": "HowToStep", position: 3, name: "Integração WhatsApp Oficial", text: "Conectamos a IA ao seu número via API Oficial da Meta, sem risco de bloqueio." },
            { "@type": "HowToStep", position: 4, name: "Testes e ajustes", text: "Rodada de testes com cenários reais e calibração do tom e dos gatilhos de transferência para humano." },
            { "@type": "HowToStep", position: 5, name: "Go-live e acompanhamento", text: "Ativação em produção com acompanhamento dos primeiros dias e otimização contínua." },
          ],
        }),
      },
    ],
  }),
  component: AtendentesIAPage,
});

function AtendentesIAPage() {
  return (
    <div className="min-h-screen bg-hero text-foreground overflow-x-clip">
      <Nav />
      <Hero />
      <ProofBar />
      <Pain />
      <Solution />
      <Features />
      <ChatDemo />
      <HowItWorks />
      <Results />
      <WhoIsFor />
      <Pricing />
      <CrossPromo current="atendentes-ia" />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

function Hero() {
  return (
    <section className="relative px-6 pt-16 pb-24 md:pt-24 md:pb-28">
      <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
        <div>
          <span className="inline-flex items-center gap-2 rounded-full border border-accent/40 bg-accent/10 px-3 py-1 text-xs font-medium text-accent">
            <Sparkles className="h-3.5 w-3.5" /> Atendente de IA para WhatsApp
          </span>
          <h1 className="mt-6 text-5xl font-bold leading-[1.05] md:text-7xl">
            Sua IA atendendo no WhatsApp <span className="text-gradient-neon">24 horas por dia.</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg text-muted-foreground md:text-xl">
            Criamos atendentes de inteligência artificial <strong className="text-foreground">treinados com a sua empresa</strong> —
            que conversam, qualificam leads, vendem e marcam reuniões dentro do WhatsApp.
            Sem fila, sem cliente esperando, sem perder dinheiro depois das 18h.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a
              href="https://crm.ararabot.com.br/register"
              target="_blank"
              rel="noopener"
              className="group inline-flex items-center gap-2 rounded-full bg-gradient-neon px-7 py-4 text-base font-bold text-neon-foreground shadow-neon animate-pulse-glow"
            >
              Quero minha IA atendendo <ArrowRight className="h-5 w-5 transition group-hover:translate-x-1" />
            </a>
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              className="inline-flex items-center gap-2 rounded-full border border-border bg-card/50 px-6 py-4 text-sm font-semibold hover:bg-card transition"
            >
              <Phone className="h-4 w-4" /> Falar com especialista
            </a>
          </div>
          <div className="mt-6">
            <GoogleReviewsBadge />
          </div>
          <div className="mt-8 flex flex-wrap items-center gap-x-8 gap-y-3 text-sm text-muted-foreground">
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> Treinada com sua empresa</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> API oficial Meta</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> No ar em até 10 dias</div>
          </div>
        </div>
        <div className="relative">
          <div className="absolute inset-0 -z-10 rounded-full bg-primary/30 blur-3xl" />
          <div className="rounded-3xl border border-border bg-card/60 p-6 shadow-elevated">
            <div className="flex items-center justify-between border-b border-border pb-4">
              <div className="flex items-center gap-2 text-sm font-semibold">
                <Bot className="h-4 w-4 text-accent" /> Atendente IA · Ararabot
              </div>
              <span className="inline-flex items-center gap-1 text-xs text-accent">
                <span className="h-2 w-2 animate-pulse rounded-full bg-accent" /> online
              </span>
            </div>
            <div className="mt-4 space-y-3 text-sm">
              <div className="max-w-[80%] rounded-2xl rounded-tl-sm bg-background/60 px-3 py-2">
                Oi! 👋 Sou a Aria, assistente da sua loja. Posso te ajudar com pedidos, dúvidas ou ver um produto pra você.
              </div>
              <div className="ml-auto max-w-[80%] rounded-2xl rounded-tr-sm bg-accent/20 px-3 py-2 text-right">
                Quero saber o valor do plano Premium
              </div>
              <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-background/60 px-3 py-2">
                Claro! O Premium sai por R$ 239/mês, sem fidelidade, com tudo liberado e suporte prioritário.
                Quer que eu já envie o link de assinatura? 😊
              </div>
              <div className="ml-auto max-w-[60%] rounded-2xl rounded-tr-sm bg-accent/20 px-3 py-2 text-right">
                Pode mandar!
              </div>
            </div>
          </div>
          <div className="absolute -left-3 top-8 hidden rounded-2xl glass px-4 py-3 text-xs shadow-elevated md:block">
            <div className="flex items-center gap-2 font-semibold text-accent"><Brain className="h-4 w-4" /> Treinada com sua base</div>
            <div className="text-muted-foreground">Fala como sua marca fala</div>
          </div>
          <div className="absolute -right-3 bottom-8 hidden rounded-2xl glass px-4 py-3 text-xs shadow-elevated md:block">
            <div className="flex items-center gap-2 font-semibold text-accent"><MoonStar className="h-4 w-4" /> 24h por dia</div>
            <div className="text-muted-foreground">Vende até de madrugada</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofBar() {
  const items = [
    "IA treinada com sua empresa",
    "Atendimento 24/7",
    "Qualifica e vende sozinha",
    "Multi-idiomas",
    "Integração com CRM",
    "API oficial Meta",
    "Handoff humano inteligente",
  ];
  return (
    <div className="relative overflow-hidden border-y border-border/60 bg-card/30 py-4">
      <div className="flex w-max animate-marquee gap-12 whitespace-nowrap text-sm font-medium text-muted-foreground">
        {[...items, ...items, ...items].map((t, i) => (
          <div key={i} className="flex items-center gap-3">
            <span className="h-1.5 w-1.5 rounded-full bg-accent" /> {t}
          </div>
        ))}
      </div>
    </div>
  );
}

function Pain() {
  const pains = [
    { icon: Clock, title: "Cliente esperando = cliente perdido", text: "Pesquisa atrás de pesquisa mostra: depois de 5 minutos sem resposta, a chance de fechar despenca. E você ainda atende manual, em horário comercial?" },
    { icon: MoonStar, title: "Depois das 18h, ninguém vende", text: "Seu site continua aberto. Seu Instagram continua bombando. Mas no WhatsApp, à noite e no fim de semana, o cliente fala sozinho — e some." },
    { icon: AlertTriangle, title: "Atendente cansa, IA não", text: "Mau humor, dia ruim, tom errado. Um atendente humano sem padrão queima leads sem você nem saber. Sua marca paga o preço." },
    { icon: Coffee, title: "Você só responde 'qual o valor?'", text: "Sua equipe gasta o dia repetindo as mesmas 10 perguntas básicas. Enquanto isso, os leads quentes que precisariam de atenção real ficam esperando." },
  ];
  return (
    <section className="px-6 py-24">
      <div className="mx-auto max-w-5xl text-center">
        <span className="text-xs font-bold uppercase tracking-widest text-destructive">A dor real</span>
        <h2 className="mt-3 text-4xl font-bold md:text-5xl">Atender no WhatsApp 24h <span className="text-destructive">é impossível</span> — pra um humano.</h2>
        <p className="mx-auto mt-5 max-w-2xl text-muted-foreground">
          Seu cliente quer resposta na hora, no idioma dele, no tom da sua marca, a qualquer hora.
          <strong className="text-foreground"> Sua equipe não dá conta — e isso está custando vendas todos os dias.</strong>
        </p>
      </div>
      <div className="mx-auto mt-14 grid max-w-6xl gap-6 md:grid-cols-2">
        {pains.map((p) => (
          <div key={p.title} className="group rounded-3xl border border-destructive/30 bg-card/60 p-7 shadow-elevated transition hover:border-destructive/60">
            <p.icon className="h-9 w-9 text-destructive" />
            <h3 className="mt-4 text-xl font-bold">{p.title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{p.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Solution() {
  return (
    <section id="solucao" className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <div>
            <span className="text-xs font-bold uppercase tracking-widest text-accent">A virada de chave</span>
            <h2 className="mt-3 text-4xl font-bold md:text-5xl">
              Um <span className="text-gradient-neon">atendente que nunca dorme</span>, treinado com a sua empresa.
            </h2>
            <p className="mt-5 text-muted-foreground">
              A gente cria, treina e ajusta um atendente de IA exclusivo pra você. Ele estuda seus produtos,
              FAQs, política, tabela de preços e tom de voz — e atende como o seu melhor vendedor atenderia,
              só que 24 horas por dia, em todas as conversas ao mesmo tempo.
            </p>
            <ul className="mt-6 space-y-3 text-sm">
              {[
                "Treinada com sua base de conhecimento (PDFs, site, planilhas)",
                "Responde no tom da sua marca — formal, descontraído, técnico",
                "Qualifica leads e marca reuniões automaticamente",
                "Passa pra um humano quando o assunto exige",
                "Integra com o CRM Ararabot e com seu sistema atual",
              ].map((t) => (
                <li key={t} className="flex items-start gap-2">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" /> {t}
                </li>
              ))}
            </ul>
            <a
              href="https://crm.ararabot.com.br/register"
              target="_blank"
              rel="noopener"
              className="mt-8 inline-flex items-center gap-2 rounded-full bg-gradient-neon px-6 py-3 text-sm font-bold text-neon-foreground shadow-neon"
            >
              Quero minha IA treinada <ArrowRight className="h-4 w-4" />
            </a>
          </div>
          <div className="relative rounded-3xl border border-border bg-card/60 p-6 shadow-elevated">
            <div className="flex items-center gap-2 text-sm font-semibold"><Brain className="h-4 w-4 text-accent" /> O que sua IA aprende</div>
            <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
              {[
                { t: "Produtos & serviços", d: "Catálogo completo, variações, estoque" },
                { t: "Preços & promoções", d: "Tabelas, descontos, regras comerciais" },
                { t: "FAQ & políticas", d: "Trocas, garantia, prazos, entrega" },
                { t: "Tom de voz", d: "Jeitão da sua marca, sem soar robô" },
                { t: "Processo de vendas", d: "Como qualificar, quando fechar" },
                { t: "Integrações", d: "CRM, agenda, pagamentos, ERP" },
              ].map((row) => (
                <div key={row.t} className="rounded-xl border border-border bg-background/40 p-3">
                  <div className="text-sm font-semibold">{row.t}</div>
                  <div className="text-xs text-muted-foreground">{row.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Features() {
  const features = [
    { icon: Brain, title: "Treinada sob medida", text: "Estudamos sua operação e ensinamos a IA com seu conteúdo, sua linguagem e suas regras." },
    { icon: MoonStar, title: "Atende 24/7", text: "Madrugada, feriado, domingo de Páscoa. A IA está lá, respondendo no segundo." },
    { icon: Target, title: "Qualifica leads", text: "Faz perguntas certas, identifica o quente do frio e entrega pra equipe só quem está pronto." },
    { icon: Languages, title: "Multi-idiomas", text: "Português, inglês, espanhol. Sua IA responde no idioma que o cliente escrever." },
    { icon: Users, title: "Handoff humano", text: "Passa pro atendente quando o assunto é sensível, valor alto ou o cliente pedir." },
    { icon: Workflow, title: "Integra com tudo", text: "Conecta CRM, agenda, pagamentos, planilhas, ERP. Sua IA puxa e atualiza dados em tempo real." },
    { icon: GraduationCap, title: "Aprende com o uso", text: "A cada conversa, a IA é ajustada. Quanto mais ela atende, melhor ela fica." },
    { icon: ShieldCheck, title: "API Oficial Meta", text: "Selo verde, número seguro, zero risco de banimento. Profissionalismo total." },
  ];
  return (
    <section id="recursos" className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Recursos</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Não é chatbot de FAQ. É um <span className="text-gradient-neon">atendente de verdade</span>.</h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
            Esqueça aqueles bots de menu “digite 1, digite 2”. A nossa IA conversa, entende contexto e resolve.
          </p>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {features.map((f) => (
            <div key={f.title} className="group rounded-3xl border border-border bg-card/60 p-6 shadow-elevated transition hover:border-accent/60 hover:shadow-neon">
              <f.icon className="h-8 w-8 text-accent" />
              <h3 className="mt-4 text-lg font-bold">{f.title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{f.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ChatDemo() {
  return (
    <section className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Veja em ação</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Uma conversa de verdade, com sua IA.</h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
            Exemplo real de atendimento qualificando um lead à 1h da manhã, sem ninguém da equipe online.
          </p>
        </div>
        <div className="mt-12 grid gap-6 lg:grid-cols-2">
          <div className="rounded-3xl border border-border bg-card/60 p-6 shadow-elevated">
            <div className="flex items-center justify-between border-b border-border pb-3">
              <div className="flex items-center gap-2 text-sm font-semibold"><MessageSquare className="h-4 w-4 text-accent" /> Cliente · 01:14</div>
              <span className="text-xs text-muted-foreground">Sem operador humano online</span>
            </div>
            <div className="mt-4 space-y-3 text-sm">
              <div className="ml-auto max-w-[80%] rounded-2xl rounded-tr-sm bg-accent/20 px-3 py-2 text-right">
                Boa noite, vocês fazem entrega aqui em Caxias?
              </div>
              <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-background/60 px-3 py-2">
                Boa noite! Sim, atendemos Caxias do Sul 💛 A entrega leva de 1 a 2 dias úteis. Pode me dizer o que você está procurando?
              </div>
              <div className="ml-auto max-w-[80%] rounded-2xl rounded-tr-sm bg-accent/20 px-3 py-2 text-right">
                Queria um buquê pra entregar amanhã, urgente
              </div>
              <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-background/60 px-3 py-2">
                Tenho sim, temos opções de entrega expressa até 18h amanhã. Faixa de R$ 89 a R$ 240, dependendo do tamanho. Posso te mandar 3 opções?
              </div>
              <div className="ml-auto max-w-[60%] rounded-2xl rounded-tr-sm bg-accent/20 px-3 py-2 text-right">
                Pode!
              </div>
            </div>
          </div>
          <div className="rounded-3xl border border-accent/40 bg-card/60 p-6 shadow-neon">
            <div className="flex items-center gap-2 text-sm font-semibold"><Sparkles className="h-4 w-4 text-accent" /> O que aconteceu nos bastidores</div>
            <ul className="mt-4 space-y-3 text-sm">
              {[
                { t: "Reconheceu cidade", d: "Conferiu na base de cidades atendidas e respondeu já com prazo." },
                { t: "Identificou urgência", d: "Marcou o lead como 'quente' no CRM e priorizou opções expressas." },
                { t: "Cotou na hora", d: "Buscou faixa de preço por categoria no catálogo treinado." },
                { t: "Manteve o tom da marca", d: "Linguagem leve, emoji, tratamento gentil — como o dono atenderia." },
                { t: "Pronta pra fechar", d: "Próxima mensagem dispara link de pagamento e cria pedido no sistema." },
              ].map((row) => (
                <li key={row.t} className="flex gap-3 rounded-xl border border-border bg-background/40 p-3">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" />
                  <div>
                    <div className="font-semibold">{row.t}</div>
                    <div className="text-xs text-muted-foreground">{row.d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", icon: Headphones, t: "Imersão", d: "Reunião pra entender seu negócio, sua operação, suas regras comerciais e o tom da sua marca." },
    { n: "02", icon: Brain, t: "Treinamento", d: "Alimentamos a IA com seu conteúdo: catálogo, FAQs, políticas, scripts de venda, planilhas." },
    { n: "03", icon: Workflow, t: "Integração", d: "Conectamos a IA ao seu WhatsApp oficial, ao CRM e aos sistemas que você já usa." },
    { n: "04", icon: Zap, t: "Lançamento", d: "Testes finais, ajustes finos e a IA entra no ar atendendo seus clientes — você só vê os resultados chegando." },
  ];
  return (
    <section id="como-funciona" className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Como funciona</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Em <span className="text-gradient-neon">até 10 dias úteis</span>, sua IA está atendendo.</h2>
        </div>
        <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((s) => (
            <div key={s.n} className="rounded-3xl border border-border bg-card/60 p-7 shadow-elevated">
              <div className="flex items-center justify-between">
                <s.icon className="h-8 w-8 text-accent" />
                <span className="text-3xl font-bold text-gradient-neon">{s.n}</span>
              </div>
              <h3 className="mt-4 text-lg font-bold">{s.t}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Results() {
  const stats = [
    { n: "24/7", l: "Atendimento ativo", d: "Madrugada, feriado, fim de semana." },
    { n: "<5s", l: "Tempo de resposta", d: "Cliente nunca mais fica no vácuo." },
    { n: "+47%", l: "Mais conversão", d: "Lead respondido na hora compra mais." },
    { n: "-70%", l: "Custo de atendimento", d: "Sua equipe só atende o que importa." },
  ];
  return (
    <section id="resultados" className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Resultados</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Mais vendas, <span className="text-gradient-neon">menos esforço</span>.</h2>
        </div>
        <div className="mt-12 grid gap-6 md:grid-cols-4">
          {stats.map((s) => (
            <div key={s.l} className="rounded-3xl border border-accent/30 bg-card/60 p-7 text-center shadow-elevated">
              <div className="text-5xl font-bold text-gradient-neon">{s.n}</div>
              <div className="mt-2 text-sm font-semibold">{s.l}</div>
              <p className="mt-2 text-xs text-muted-foreground">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhoIsFor() {
  const items = [
    "Clínicas, consultórios e estéticas que recebem muitos pedidos de orçamento",
    "Lojas e e-commerces que vendem direto no WhatsApp",
    "Imobiliárias, corretores e equipes comerciais",
    "Escolas, cursos e infoprodutores com leads em volume",
    "SAC de empresas com dúvidas repetitivas",
    "Qualquer negócio que perde venda por demorar a responder",
  ];
  return (
    <section className="px-6 py-24">
      <div className="mx-auto max-w-5xl rounded-3xl border border-border bg-card/60 p-10 shadow-elevated md:p-14">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Pra quem é</span>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">Se você atende por WhatsApp, sua IA está atrasada.</h2>
        </div>
        <ul className="mt-10 grid gap-3 md:grid-cols-2">
          {items.map((t) => (
            <li key={t} className="flex items-start gap-3 rounded-2xl border border-border bg-background/40 px-4 py-3 text-sm">
              <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" /> {t}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Pricing() {
  const plans = [
    {
      name: "Agente de IA", price: "R$ 190,00", per: "/mês", featured: true,
      desc: "Atendimento por IA ilimitado nos módulos.",
      features: ["Atendimento por IA no módulo CRM", "Atendimento por IA no módulo Agendamento", "Agente IA ilimitado", "Conversas ilimitadas", "Respostas inteligentes", "Análise de sentimento", "Qualificação de leads", "Integrações via API", "Conexão com o WhatsApp"],
      badge: "Obrigatório contratar o módulo CRM e/ou Agendamento",
      cta: "Quero Agente de IA",
    },
    {
      name: "CRM Vendas e SAC", price: "R$ 239,00", per: "/mês",
      desc: "Pipeline de vendas e atendimento no WhatsApp.",
      features: ["Pipeline de vendas", "Kanban inteligente", "Gestão de leads", "Automações de workflow", "Relatórios avançados", "Multi-usuários", "WhatsApp espião", "Conexão com WhatsApp"],
      cta: "Quero o CRM",
    },
    {
      name: "Módulo Agendamentos", price: "R$ 239,00", per: "/mês",
      desc: "Agendamento automático completo via WhatsApp.",
      features: ["Agendamento automático", "Confirmações via WhatsApp", "Lembretes inteligentes", "Calendário sincronizado", "Reagendamento fácil", "Múltiplas agendas", "Integrações calendário", "Conexão com WhatsApp"],
      cta: "Quero Agendamentos",
    },
  ];
  return (
    <section id="precos" className="px-6 py-24">
      <div className="mx-auto max-w-6xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Planos</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Comece com a IA. Cresça com CRM e Agenda.</h2>
          <p className="mx-auto mt-4 max-w-xl text-muted-foreground">Mensal, sem fidelidade. Combine os módulos do jeito que faz sentido pro seu negócio.</p>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-3">
          {plans.map((p) => (
            <div key={p.name} className={`relative rounded-3xl border p-8 ${p.featured ? "border-accent bg-card shadow-neon" : "border-border bg-card/60"}`}>
              {p.featured && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gradient-neon px-3 py-1 text-xs font-bold text-neon-foreground">RECOMENDADO</span>
              )}
              <h3 className="text-xl font-bold">{p.name}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{p.desc}</p>
              <div className="mt-6 flex items-baseline gap-1">
                <span className="text-4xl font-bold">{p.price}</span>
                <span className="text-sm text-muted-foreground">{p.per}</span>
              </div>
              {p.badge && (
                <p className="mt-3 rounded-lg bg-accent/10 px-3 py-2 text-xs font-medium text-accent">*{p.badge}</p>
              )}
              <ul className="mt-6 space-y-2 text-sm">
                {p.features.map((f) => (
                  <li key={f} className="flex items-start gap-2">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" /> {f}
                  </li>
                ))}
              </ul>
              <a
                href="https://crm.ararabot.com.br/register"
                target="_blank"
                rel="noopener"
                className={`mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-semibold transition ${p.featured ? "bg-gradient-neon text-neon-foreground shadow-neon" : "border border-border hover:bg-card"}`}
              >
                {p.cta} <ArrowRight className="h-4 w-4" />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const faqs = [
    { q: "A IA é treinada com a minha empresa?", a: "Sim. Treinamos o atendente com seus produtos, serviços, preços, FAQ e tom de voz. Ele responde como se fosse o seu melhor vendedor." },
    { q: "Funciona com meu WhatsApp atual?", a: "Sim. Usamos a API Oficial da Meta. Mantém seu número e adiciona inteligência em volta dele." },
    { q: "A IA passa para um humano quando precisa?", a: "Sim. Configuramos gatilhos: assuntos sensíveis, fechamento de venda ou pedido explícito do cliente acionam o atendente humano." },
    { q: "Quanto tempo para colocar no ar?", a: "Entre 5 e 10 dias úteis, com treinamento, testes e integração ao seu CRM." },
    { q: "A IA atende vários clientes ao mesmo tempo?", a: "Sim, sem limite. Pode atender 1 ou 1.000 conversas simultâneas, com a mesma qualidade." },
    { q: "Tem fidelidade?", a: "Não. Mensal, sem multa, cancele quando quiser." },
  ];
  return (
    <section id="faq" className="px-6 py-24">
      <div className="mx-auto max-w-3xl">
        <div className="text-center">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Dúvidas frequentes</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Tudo que você precisa saber.</h2>
        </div>
        <div className="mt-12 space-y-3">
          {faqs.map((f) => (
            <details key={f.q} className="group rounded-2xl border border-border bg-card/60 p-5 open:shadow-glow">
              <summary className="flex cursor-pointer list-none items-center justify-between text-base font-semibold">
                {f.q}
                <span className="ml-4 text-accent transition group-open:rotate-45">+</span>
              </summary>
              <p className="mt-3 text-sm text-muted-foreground">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="px-6 py-24">
      <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-accent/40 bg-gradient-primary p-10 text-center shadow-glow md:p-16">
        <Zap className="mx-auto h-10 w-10 text-accent" />
        <h2 className="mt-4 text-4xl font-bold text-primary-foreground md:text-6xl">
          Coloque uma IA <span className="text-gradient-neon">vendendo por você</span> ainda esta semana.
        </h2>
        <p className="mx-auto mt-5 max-w-2xl text-primary-foreground/85">
          Enquanto você lê isso, seu concorrente já está respondendo lead às 23h com IA. Cadastre-se ou fale com um especialista.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <a
            href="https://crm.ararabot.com.br/register"
            target="_blank"
            rel="noopener"
            className="inline-flex items-center gap-2 rounded-full bg-gradient-neon px-8 py-4 text-base font-bold text-neon-foreground shadow-neon animate-pulse-glow"
          >
            Começar agora <ArrowRight className="h-5 w-5" />
          </a>
          <a
            href={WHATSAPP_URL}
            target="_blank"
            rel="noopener"
            className="inline-flex items-center gap-2 rounded-full border border-primary-foreground/30 bg-card/30 px-6 py-4 text-sm font-semibold text-primary-foreground hover:bg-card/50 transition"
          >
            <Phone className="h-4 w-4" /> Falar no WhatsApp (54) 98112-2381
          </a>
        </div>
      </div>
    </section>
  );
}