import { createFileRoute } from "@tanstack/react-router";
import {
  MessageSquare, Users, KanbanSquare, Zap, BarChart3, Eye,
  Sparkles, CheckCircle2, ArrowRight, Phone, ShieldCheck,
  Inbox, Tag, Workflow, Bot, Clock, TrendingUp, AlertTriangle,
  UserCheck, Filter, Send,
} from "lucide-react";

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

export const Route = createFileRoute("/crm")({
  head: () => ({
    meta: [
      { title: "CRM para WhatsApp — Ararabot | Pipeline e Multiatendimento" },
      { name: "description", content: "CRM da Ararabot: pipeline kanban, multiatendimento, automações, relatórios e WhatsApp espião — tudo no WhatsApp oficial Meta. Comece em 7 dias." },
      { property: "og:title", content: "CRM para WhatsApp da Ararabot — Venda mais, perca zero lead" },
      { property: "og:description", content: "Pipeline visual, multiatendimento, automações e relatórios — tudo conectado ao seu WhatsApp oficial Meta." },
      { property: "og:url", content: "https://ararabot.lovable.app/crm" },
      { 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: "CRM WhatsApp Ararabot — Pipeline + Multiatendimento + IA" },
      { name: "twitter:description", content: "Centralize leads, vendas e SAC em um CRM nativo do WhatsApp. Cancela quando quiser." },
    ],
    links: [
      { rel: "canonical", href: "https://ararabot.lovable.app/crm" },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Product",
          name: "Ararabot CRM para WhatsApp",
          description:
            "CRM completo integrado ao WhatsApp com pipeline kanban, multiatendimento, automações, relatórios e WhatsApp espião.",
          brand: { "@type": "Brand", name: "Ararabot" },
          category: "Software CRM",
          offers: {
            "@type": "Offer",
            price: "239",
            priceCurrency: "BRL",
            url: "https://ararabot.lovable.app/crm",
            availability: "https://schema.org/InStock",
          },
          aggregateRating: {
            "@type": "AggregateRating",
            ratingValue: "4.9",
            reviewCount: "127",
            bestRating: "5",
            worstRating: "1",
          },
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: [
            { "@type": "Question", name: "O CRM funciona com meu WhatsApp atual?", acceptedAnswer: { "@type": "Answer", text: "Sim. Usamos a API Oficial da Meta. Você mantém seu número e ganha um CRM em volta dele, sem risco de bloqueio." } },
            { "@type": "Question", name: "Quantos atendentes podem usar ao mesmo tempo?", acceptedAnswer: { "@type": "Answer", text: "Quantos você quiser. O CRM é multiusuário — cada atendente tem login próprio e você vê tudo em tempo real." } },
            { "@type": "Question", name: "Tem WhatsApp espião?", acceptedAnswer: { "@type": "Answer", text: "Sim. Você acompanha todas as conversas da sua equipe, em tempo real, sem precisar pedir print." } },
            { "@type": "Question", name: "Posso integrar com a IA?", acceptedAnswer: { "@type": "Answer", text: "Sim. Contratando o módulo Agente de IA, sua IA atende, qualifica leads e só passa para humano quando necessário." } },
            { "@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: "CRM WhatsApp", item: "https://ararabot.lovable.app/crm" },
          ],
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "HowTo",
          name: "Como implantar o CRM WhatsApp da Ararabot",
          description: "Passo a passo para colocar o CRM WhatsApp da Ararabot rodando em até 7 dias úteis.",
          totalTime: "P7D",
          estimatedCost: { "@type": "MonetaryAmount", currency: "BRL", value: "239" },
          step: [
            { "@type": "HowToStep", position: 1, name: "Diagnóstico gratuito", text: "Mapeamos seu funil atual, equipe de atendimento e integrações desejadas em uma call de 20 minutos." },
            { "@type": "HowToStep", position: 2, name: "Configuração do pipeline", text: "Montamos o Kanban com as etapas reais do seu processo comercial e SAC." },
            { "@type": "HowToStep", position: 3, name: "Conexão WhatsApp Oficial", text: "Migramos seu número para a API Oficial da Meta, sem perder histórico nem contatos." },
            { "@type": "HowToStep", position: 4, name: "Treinamento da equipe", text: "Treinamento ao vivo com seus atendentes, criação de respostas rápidas e automações." },
            { "@type": "HowToStep", position: 5, name: "Go-live e otimização", text: "Acompanhamento dos primeiros dias, ajustes de funil e relatórios para o gestor." },
          ],
        }),
      },
    ],
  }),
  component: CrmPage,
});

function CrmPage() {
  return (
    <div className="min-h-screen bg-hero text-foreground overflow-x-clip">
      <Nav />
      <Hero />
      <ProofBar />
      <Pain />
      <Solution />
      <Features />
      <Kanban />
      <Results />
      <WhoIsFor />
      <Pricing />
      <CrossPromo current="crm" />
      <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" /> CRM nativo para WhatsApp
          </span>
          <h1 className="mt-6 text-5xl font-bold leading-[1.05] md:text-7xl">
            Seu WhatsApp virou caos? <span className="text-gradient-neon">Vire CRM.</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg text-muted-foreground md:text-xl">
            Centralize <strong className="text-foreground">leads, vendas e atendimento</strong> em um CRM feito sob medida
            para WhatsApp. Pipeline kanban, multiatendimento, automações e relatórios — tudo conectado ao seu número oficial Meta.
            Pare de perder cliente em meio a mil conversas abertas.
          </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 organizar meu WhatsApp <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" /> API oficial Meta</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> Multiusuário ilimitado</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> Sem fidelidade</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">
                <KanbanSquare className="h-4 w-4 text-accent" /> Pipeline · Vendas
              </div>
              <span className="text-xs text-muted-foreground">12 leads hoje</span>
            </div>
            <div className="mt-4 grid grid-cols-3 gap-3 text-xs">
              {[
                { t: "Novo", c: "Maria · R$ 1.2k", k: 4, color: "bg-primary/30" },
                { t: "Qualificado", c: "João · R$ 890", k: 5, color: "bg-accent/30" },
                { t: "Fechado", c: "Ana · R$ 2.1k", k: 3, color: "bg-gradient-neon text-neon-foreground" },
              ].map((col) => (
                <div key={col.t} className="rounded-xl border border-border bg-background/40 p-3">
                  <div className="mb-2 flex items-center justify-between text-[10px] uppercase tracking-wider text-muted-foreground">
                    {col.t} <span>{col.k}</span>
                  </div>
                  <div className={`rounded-lg ${col.color} px-2 py-2 font-medium`}>{col.c}</div>
                  <div className="mt-2 h-8 rounded-lg border border-dashed border-border/60" />
                  <div className="mt-2 h-8 rounded-lg border border-dashed border-border/60" />
                </div>
              ))}
            </div>
            <div className="mt-5 grid grid-cols-2 gap-3">
              <div className="rounded-xl border border-border bg-background/40 p-3">
                <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Em conversa</div>
                <div className="mt-1 flex items-center gap-2 text-sm font-semibold"><MessageSquare className="h-4 w-4 text-accent" /> 38 abertas</div>
              </div>
              <div className="rounded-xl border border-border bg-background/40 p-3">
                <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Convertido</div>
                <div className="mt-1 flex items-center gap-2 text-sm font-semibold"><TrendingUp className="h-4 w-4 text-accent" /> +32% mês</div>
              </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"><Eye className="h-4 w-4" /> WhatsApp espião</div>
            <div className="text-muted-foreground">Veja sua equipe ao vivo</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"><Workflow className="h-4 w-4" /> Automação</div>
            <div className="text-muted-foreground">Mova leads sozinho</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofBar() {
  const items = [
    "Pipeline kanban visual",
    "Multiatendimento ilimitado",
    "WhatsApp espião em tempo real",
    "Automações e workflows",
    "Relatórios de vendas",
    "API oficial Meta",
    "Etiquetas e segmentação",
  ];
  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: Inbox, title: "WhatsApp lotado, ninguém sabe de nada", text: "Mensagens se perdem, atendente respondendo o mesmo cliente duas vezes, lead esquecido por dias. Quem está vendendo? Você não consegue medir." },
    { icon: AlertTriangle, title: "Lead bom virou pó", text: "O cara mandou “Quero comprar” na sexta. Segunda-feira a conversa está soterrada por 200 mensagens. Ele já comprou do concorrente." },
    { icon: Clock, title: "Time descentralizado, zero controle", text: "Cada vendedor com seu próprio celular, sua planilha, seu jeitinho. Funcionário sai e leva o WhatsApp — e os clientes — embora." },
    { icon: BarChart3, title: "Sem números, sem decisão", text: "Quantos leads chegaram? Quantos fecharam? Qual atendente vende mais? Sem CRM você está pilotando o seu negócio no escuro." },
  ];
  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">Seu WhatsApp <span className="text-destructive">não foi feito</span> pra vender em escala.</h2>
        <p className="mx-auto mt-5 max-w-2xl text-muted-foreground">
          Ele é um app de mensagem. Quando o negócio cresce, vira um pesadelo: lead perdido, atendente desencontrado,
          zero rastreio. <strong className="text-foreground">Sem CRM, você está perdendo dinheiro todo dia</strong> — só ainda não viu o tamanho.
        </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">
              Transforme cada conversa em <span className="text-gradient-neon">oportunidade rastreada</span>.
            </h2>
            <p className="mt-5 text-muted-foreground">
              O CRM Ararabot conecta direto no seu WhatsApp oficial e organiza tudo: cada lead vira um card,
              cada conversa tem um responsável, cada venda é medida. Sua equipe trabalha junta, você enxerga tudo em tempo real.
            </p>
            <ul className="mt-6 space-y-3 text-sm">
              {[
                "Pipeline kanban: arraste o lead conforme ele avança",
                "Multiatendimento com fila e distribuição automática",
                "Etiquetas, notas e histórico completo por contato",
                "Funciona com seu número atual via API oficial Meta",
              ].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 testar o CRM <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"><MessageSquare className="h-4 w-4 text-accent" /> Caixa de entrada unificada</div>
            <div className="mt-4 space-y-2 text-sm">
              {[
                { n: "Maria Souza", m: "Quero saber sobre o plano", t: "agora", b: "Vendas" },
                { n: "João Lima", m: "Já paguei, e agora?", t: "2m", b: "SAC" },
                { n: "Ana Pereira", m: "Pode marcar pra quinta?", t: "8m", b: "Agenda" },
                { n: "Carla R.", m: "Show, fechado!", t: "15m", b: "Fechamento" },
              ].map((row) => (
                <div key={row.n} className="flex items-center justify-between rounded-xl border border-border bg-background/40 px-3 py-2">
                  <div>
                    <div className="font-medium">{row.n}</div>
                    <div className="text-xs text-muted-foreground">{row.m}</div>
                  </div>
                  <div className="text-right">
                    <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-semibold text-accent">{row.b}</span>
                    <div className="mt-1 text-[10px] text-muted-foreground">{row.t}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Features() {
  const features = [
    { icon: KanbanSquare, title: "Pipeline Kanban", text: "Arraste e solte leads pelas etapas da venda. Veja seu funil ao vivo." },
    { icon: Users, title: "Multiatendimento", text: "Vários atendentes, um único número. Fila inteligente, sem cliente parado." },
    { icon: Eye, title: "WhatsApp espião", text: "Acompanhe todas as conversas da sua equipe em tempo real, sem print." },
    { icon: Workflow, title: "Automações", text: "Mensagens automáticas, mudança de etapa, atribuição de atendente sozinha." },
    { icon: Tag, title: "Etiquetas e segmentação", text: "Marque, filtre e dispare campanhas para o grupo certo de clientes." },
    { icon: BarChart3, title: "Relatórios de vendas", text: "Conversão, tempo de resposta, ranking de atendente — tudo em dashboards." },
    { icon: Bot, title: "Pronto pra IA", text: "Plugue o Agente de IA e tenha atendimento 24/7 dentro do mesmo CRM." },
    { icon: ShieldCheck, title: "API Oficial Meta", text: "Seu número seguro, sem risco de banimento, com o selo verde de business." },
  ];
  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">Um CRM <span className="text-gradient-neon">desenhado pro WhatsApp</span> — não adaptado.</h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
            Cada funcionalidade pensada para quem vive de conversa. Nada de tela cheia de campo que ninguém preenche.
          </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 Kanban() {
  const stages = [
    { t: "Novo lead", icon: Inbox, items: ["Maria · Quero saber valor", "Pedro · Tem desconto?", "Bia · Vi no Instagram"] },
    { t: "Em negociação", icon: Filter, items: ["João · Esperando proposta", "Carla · Pediu prazo"] },
    { t: "Proposta enviada", icon: Send, items: ["Lucas · R$ 3.4k", "Rafa · R$ 1.2k", "Tati · R$ 980"] },
    { t: "Fechado 🎉", icon: UserCheck, items: ["Ana · R$ 2.1k", "Diego · R$ 4.5k"] },
  ];
  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">Pipeline visual</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Da primeira mensagem até o “fechado”.</h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
            Cada lead que entra no seu WhatsApp vira um card. Você arrasta, qualifica, fecha — e nunca mais esquece um cliente no meio do caminho.
          </p>
        </div>
        <div className="mt-12 grid gap-4 md:grid-cols-4">
          {stages.map((s) => (
            <div key={s.t} className="rounded-2xl border border-border bg-card/60 p-4">
              <div className="flex items-center gap-2 border-b border-border pb-3 text-sm font-semibold">
                <s.icon className="h-4 w-4 text-accent" /> {s.t}
                <span className="ml-auto text-xs text-muted-foreground">{s.items.length}</span>
              </div>
              <div className="mt-3 space-y-2">
                {s.items.map((c) => (
                  <div key={c} className="rounded-lg border border-border/60 bg-background/40 px-3 py-2 text-xs">{c}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Results() {
  const stats = [
    { n: "+38%", l: "Mais conversão", d: "Leads não dormem mais na caixa de entrada." },
    { n: "-65%", l: "Tempo de resposta", d: "Distribuição automática + respostas prontas." },
    { n: "3x", l: "Mais visibilidade", d: "Você vê cada conversa, cada vendedor, ao vivo." },
    { n: "100%", l: "Histórico seguro", d: "Funcionário sai, conversas e clientes ficam." },
  ];
  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">Números que aparecem <span className="text-gradient-neon">no caixa do mês</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 com equipe de atendimento",
    "Lojas e e-commerces que vendem pelo WhatsApp",
    "Imobiliárias, corretores e equipes comerciais",
    "Escolas, cursos e infoprodutores",
    "Agências, escritórios e prestadores B2B",
    "Qualquer negócio que recebe lead pelo WhatsApp",
  ];
  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ê vende por WhatsApp, esse CRM é seu.</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: "CRM Vendas e SAC", price: "R$ 239,00", per: "/mês", featured: true,
      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"],
      badge: "Plano principal desta página",
      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",
    },
    {
      name: "Agente de IA", price: "R$ 190,00", per: "/mês",
      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",
    },
  ];
  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 o CRM. Cresça com agenda e IA.</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: "O CRM funciona com meu WhatsApp atual?", a: "Sim. Usamos a API Oficial da Meta. Você mantém seu número e ganha um CRM em volta dele, sem risco de bloqueio." },
    { q: "Quantos atendentes podem usar ao mesmo tempo?", a: "Quantos você quiser. O CRM é multiusuário — cada atendente tem login próprio e você vê tudo em tempo real." },
    { q: "Tem WhatsApp espião?", a: "Sim. Você acompanha todas as conversas da sua equipe, em tempo real, sem precisar pedir print." },
    { q: "Posso integrar com a IA?", a: "Sim. Contratando o módulo Agente de IA, sua IA atende, qualifica leads e só passa para humano quando necessário." },
    { q: "E quando um atendente sai da empresa?", a: "Os contatos, conversas e histórico ficam no CRM — não no celular dele. Sua base de clientes nunca sai com ninguém." },
    { 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">
          Pare de perder cliente <span className="text-gradient-neon">por desorganização</span>.
        </h2>
        <p className="mx-auto mt-5 max-w-2xl text-primary-foreground/85">
          Seu WhatsApp pode estar virando vendas ainda essa semana. Cadastre-se em 1 minuto ou fale com um especialista —
          sem fidelidade, sem complicação.
        </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>
  );
}