import { createFileRoute, redirect } from "@tanstack/react-router";
import { useState } from "react";

import { Nav, WHATSAPP_URL } from "@/components/site/Nav";
import { Footer } from "@/components/site/Footer";
import { CrossPromo } from "@/components/site/CrossPromo";
import { BlogTeaser } from "@/components/site/BlogTeaser";
import { GoogleReviewsBadge } from "@/components/site/GoogleReviewsBadge";
import {
  Calendar, Users, Clock, TrendingDown,
  Sparkles, BarChart3, Bot, CheckCircle2,
  ArrowRight, Star, Phone, AlertTriangle, BellRing, CalendarCheck, CalendarX,
  X,
} from "lucide-react";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Ararabot — Agendamento por IA no WhatsApp + CRM | Reduz faltas em 70%" },
      { name: "description", content: "Agente de IA da Ararabot agenda clientes pelo WhatsApp 24/7, envia lembretes automáticos e reduz faltas em até 70%. Sistema próprio de agenda + CRM. Setup em 7 dias. Diagnóstico gratuito." },
      { property: "og:title", content: "Ararabot — Sua agenda no automático, dentro do WhatsApp" },
      { property: "og:description", content: "IA agenda, confirma e lembra seus clientes 24/7. Menos faltas, mais tempo livre. CRM nativo no WhatsApp." },
      { property: "og:url", content: "https://ararabot.lovable.app/" },
      { property: "og:image", content: "https://ararabot.com.br/wp-content/uploads/2024/06/bot-conversa-chatbot-768x505.png" },
      { name: "twitter:title", content: "Ararabot — Agendamento por IA no WhatsApp" },
      { name: "twitter:description", content: "Agenda automática, lembretes inteligentes e CRM — tudo no WhatsApp." },
    ],
    links: [
      { rel: "canonical", href: "https://ararabot.lovable.app/" },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Service",
          serviceType: "Agente de IA para WhatsApp com agendamento e CRM",
          provider: { "@type": "Organization", name: "Ararabot", url: "https://ararabot.lovable.app" },
          areaServed: { "@type": "Country", name: "Brasil" },
          description: "Agente de IA que atende, agenda e vende automaticamente pelo WhatsApp, com lembretes automáticos, sistema próprio de agenda e CRM integrado.",
          offers: [
            { "@type": "Offer", name: "Módulo Agendamentos", price: "239", priceCurrency: "BRL", url: "https://ararabot.lovable.app/#precos" },
            { "@type": "Offer", name: "CRM Vendas e SAC", price: "239", priceCurrency: "BRL", url: "https://ararabot.lovable.app/#precos" },
            { "@type": "Offer", name: "Agente de IA", price: "190", priceCurrency: "BRL", url: "https://ararabot.lovable.app/#precos" },
          ],
          aggregateRating: { "@type": "AggregateRating", ratingValue: "5.0", reviewCount: "10", bestRating: "5", worstRating: "1" },
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: [
            { "@type": "Question", name: "Preciso usar Google Calendar ou outro sistema?", acceptedAnswer: { "@type": "Answer", text: "Não. A Ararabot tem sistema próprio de agendamento, integrado direto ao WhatsApp. Você não depende de nenhuma ferramenta externa." } },
            { "@type": "Question", name: "Como funcionam os lembretes automáticos?", acceptedAnswer: { "@type": "Answer", text: "A IA envia lembretes pelo WhatsApp 24h e 1h antes da consulta. O cliente confirma, remarca ou cancela na própria conversa e a agenda atualiza sozinha." } },
            { "@type": "Question", name: "Em quanto tempo a IA fica pronta?", acceptedAnswer: { "@type": "Answer", text: "Em até 7 dias úteis após o diagnóstico. Casos simples saem em 48h." } },
            { "@type": "Question", name: "Preciso trocar meu número de WhatsApp?", acceptedAnswer: { "@type": "Answer", text: "Não. Usamos a API Oficial da Meta com o seu número atual ou um novo, como preferir." } },
            { "@type": "Question", name: "E se a IA não souber responder algo?", acceptedAnswer: { "@type": "Answer", text: "Ela transfere automaticamente para um humano com todo o contexto da conversa, sem perder o cliente." } },
            { "@type": "Question", name: "Tem fidelidade?", acceptedAnswer: { "@type": "Answer", text: "Não. Você cancela quando quiser, sem multa." } },
          ],
        }),
      },
      {
        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: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "HowTo",
          name: "Como ativar o Agendamento por IA da Ararabot no seu WhatsApp",
          description: "Passo a passo para automatizar agendamentos, lembretes e confirmações no WhatsApp em até 7 dias.",
          totalTime: "P7D",
          estimatedCost: { "@type": "MonetaryAmount", currency: "BRL", value: "239" },
          step: [
            { "@type": "HowToStep", position: 1, name: "Diagnóstico gratuito", text: "Conversa de 20 minutos para entender sua agenda, equipe e taxa atual de faltas." },
            { "@type": "HowToStep", position: 2, name: "Configuração da agenda", text: "Configuramos profissionais, serviços, horários, intervalos e regras de bloqueio." },
            { "@type": "HowToStep", position: 3, name: "Conexão WhatsApp Oficial Meta", text: "Conectamos seu número com a API Oficial da Meta sem risco de banimento." },
            { "@type": "HowToStep", position: 4, name: "Treinamento da IA", text: "Treinamos a IA com os scripts da sua empresa, tom de voz e perguntas frequentes." },
            { "@type": "HowToStep", position: 5, name: "Go-live com lembretes automáticos", text: "IA passa a agendar 24/7 e dispara lembretes automáticos para reduzir faltas em até 70%." },
          ],
        }),
      },
    ],
  }),
  component: Landing,
});



function Landing() {
  return (
    <div className="min-h-screen bg-hero text-foreground overflow-x-clip">
      <Nav />
      <Hero />
      <SocialProofMarquee />
      <Pain />
      <Solution />
      <Features />
      <HowItWorks />
      <Results />
      <Testimonials />
      <Pricing />
      <CrossPromo current="agendamento" />
      <FAQ />
      <BlogTeaser />
      <FinalCTA />
      <Footer />
    </div>
  );
}




const HERO_VIDEO_ID = "cOBj4mLqZbo";

function HeroVideo() {
  const [playing, setPlaying] = useState(false);
  const thumb = `https://i.ytimg.com/vi/${HERO_VIDEO_ID}/hqdefault.jpg`;

  return (
    <>
      <div className="relative">
        <div className="absolute inset-0 -z-10 rounded-full bg-primary/30 blur-3xl" />
        <button
          type="button"
          onClick={() => setPlaying(true)}
          aria-label="Reproduzir vídeo da Ararabot"
          className="group relative mx-auto block aspect-[9/16] w-full max-w-[300px] overflow-hidden rounded-3xl border border-border/60 bg-card shadow-[0_30px_60px_rgba(120,40,180,0.45)] transition hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-accent md:max-w-[340px]"
        >
          <img
            src={thumb}
            alt="Veja a Ararabot em ação — Agente de IA no WhatsApp"
            loading="eager"
            fetchPriority="high"
            decoding="async"
            className="absolute inset-0 h-full w-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-black/20" />
          <div className="absolute inset-0 flex items-center justify-center">
            <span className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-neon shadow-neon transition group-hover:scale-110">
              <svg viewBox="0 0 24 24" className="ml-1 h-9 w-9 fill-neon-foreground" aria-hidden="true">
                <path d="M8 5v14l11-7z" />
              </svg>
            </span>
          </div>
          <span className="absolute bottom-4 left-4 right-4 text-left text-sm font-semibold text-white drop-shadow">
            ▶ Assista em 30s como funciona
          </span>
        </button>
        <div className="absolute -left-2 top-10 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"><CalendarCheck className="h-4 w-4" /> Agendado por IA</div>
          <div className="text-muted-foreground">Sem você levantar um dedo</div>
        </div>
        <div className="absolute -right-2 bottom-10 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"><BellRing className="h-4 w-4" /> Lembrete enviado</div>
          <div className="text-muted-foreground">Faltas caem até 70%</div>
        </div>
      </div>

      {playing && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Vídeo Ararabot"
          onClick={() => setPlaying(false)}
          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 p-4 backdrop-blur-sm animate-in fade-in"
        >
          <button
            type="button"
            onClick={() => setPlaying(false)}
            aria-label="Fechar vídeo"
            className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
          >
            <X className="h-6 w-6" />
          </button>
          <div
            onClick={(e) => e.stopPropagation()}
            className="relative aspect-[9/16] h-full max-h-[92vh] w-auto max-w-full overflow-hidden rounded-2xl bg-black shadow-2xl"
          >
            <iframe
              src={`https://www.youtube.com/embed/${HERO_VIDEO_ID}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
              title="Ararabot — Agente de IA no WhatsApp"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
              className="absolute inset-0 h-full w-full"
            />
          </div>
        </div>
      )}
    </>
  );
}

function Hero() {
  return (
    <section id="top" className="relative px-6 pt-16 pb-24 md:pt-24 md:pb-32">
      <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" /> Agendamento por IA + CRM no WhatsApp
          </span>
          <h1 className="mt-6 text-5xl font-bold leading-[1.05] md:text-7xl">
            Sua agenda <span className="text-gradient-neon">no automático</span>. Sua cabeça, livre.
          </h1>
          <p className="mt-6 max-w-xl text-lg text-muted-foreground md:text-xl">
            Pare de perder <strong className="text-foreground">horas todo dia</strong> remarcando, confirmando e
            cobrando cliente. A IA da Ararabot <strong className="text-foreground">agenda pelo WhatsApp</strong>,
            envia lembretes automáticos antes da consulta e organiza tudo num CRM próprio —
            <strong className="text-foreground"> sem depender de Google Calendar</strong>.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a href={WHATSAPP_URL} 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 recuperar meu tempo <ArrowRight className="h-5 w-5 transition group-hover:translate-x-1" />
            </a>
            <a href="#solucao" 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">
              Como funciona
            </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" /> Sistema próprio de agenda</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> Lembretes automáticos</div>
            <div className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-accent" /> Setup em 7 dias</div>
          </div>
        </div>
        <HeroVideo />
      </div>
    </section>
  );
}

function SocialProofMarquee() {
  const items = [
    "Agenda própria, sem Google Calendar",
    "Lembretes automáticos antes da consulta",
    "Faltas reduzidas em até 70%",
    "Agendamento 24/7 pelo WhatsApp",
    "+10h por semana de volta no seu dia",
    "Confirmação automática de presença",
    "CRM completo no WhatsApp",
  ];
  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: "Horas todo dia organizando agenda", text: "Confirmar, remarcar, encaixar, lembrar… enquanto isso, você não atende, não vende e não descansa. Seu tempo vale mais do que isso." },
    { icon: CalendarX, title: "Faltas que custam caro", text: "Cliente esquece. Não confirma. Não aparece. E o horário vazio é prejuízo direto no seu faturamento — todo santo dia." },
    { icon: TrendingDown, title: "WhatsApp lotado, agenda bagunçada", text: "Mensagem em cima de mensagem, papel, planilha, anotação no celular. No fim do mês ninguém sabe quanto se perdeu." },
    { icon: AlertTriangle, title: "Cliente quer agendar às 22h", text: "Você está dormindo. Ou em atendimento. Ou com a família. Ele desiste — e marca com o concorrente que respondeu na hora." },
  ];
  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">Quanto tempo da sua semana <span className="text-destructive">a agenda rouba</span> de você?</h2>
        <p className="mx-auto mt-5 max-w-2xl text-muted-foreground">
          Profissionais perdem em média <strong className="text-foreground">10 a 15 horas por semana</strong> só
          organizando horários, confirmando consultas e correndo atrás de cliente que não respondeu. Tempo que
          deveria estar atendendo, vendendo ou vivendo.
        </p>
      </div>
      <div className="mx-auto mt-14 grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
        {pains.map(({ icon: Icon, title, text }) => (
          <div key={title} className="rounded-2xl border border-destructive/30 bg-card/60 p-6 backdrop-blur">
            <Icon className="h-8 w-8 text-destructive" />
            <h3 className="mt-4 text-lg font-semibold">{title}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Solution() {
  return (
    <section id="solucao" className="relative px-6 py-24">
      <div className="mx-auto max-w-6xl rounded-3xl border border-border bg-card/60 p-10 shadow-elevated md:p-16">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <span className="text-xs font-bold uppercase tracking-widest text-accent">A solução</span>
            <h2 className="mt-3 text-4xl font-bold md:text-5xl">Uma <span className="text-gradient-neon">agenda inteligente</span> que conversa, marca e lembra — tudo sozinha.</h2>
            <p className="mt-5 text-muted-foreground">
              A Ararabot tem <strong className="text-foreground">sistema próprio de agendamento</strong> — você não
              precisa de Google Calendar, planilha ou caderno. A IA pergunta, encaixa no melhor horário, confirma
              com o cliente e envia <strong className="text-foreground">lembretes automáticos antes da consulta</strong>.
              Você só precisa atender quem chega.
            </p>
            <ul className="mt-7 space-y-3 text-sm">
              {[
                "Agenda própria, integrada ao WhatsApp (sem Google Calendar)",
                "Lembretes automáticos 24h e 1h antes da consulta",
                "Confirmação e remarcação feitas pela IA",
                "CRM com histórico, etiquetas e funil de vendas",
                "Bloqueios, intervalos e múltiplos profissionais",
              ].map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" />
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="relative">
            <ChatMockup />
          </div>
        </div>
      </div>
    </section>
  );
}

function ChatMockup() {
  return (
    <div className="relative mx-auto max-w-sm rounded-3xl border border-border bg-background p-4 shadow-glow">
      <div className="flex items-center gap-3 border-b border-border pb-3">
        <img src="/favicon.ico" alt="" loading="lazy" decoding="async" className="h-9 w-9" />
        <div>
          <div className="text-sm font-semibold">Ararabot</div>
          <div className="text-xs text-accent">● online · agenda em tempo real</div>
        </div>
      </div>
      <div className="space-y-2 py-4 text-sm">
        <div className="ml-auto max-w-[80%] rounded-2xl rounded-br-sm bg-primary/40 px-3 py-2">Oi, queria marcar um horário pra amanhã</div>
        <div className="max-w-[85%] rounded-2xl rounded-bl-sm bg-muted px-3 py-2">
          Claro! 😊 Tenho amanhã às <strong>10h</strong>, <strong>14h30</strong> ou <strong>17h</strong>. Qual prefere?
        </div>
        <div className="ml-auto max-w-[60%] rounded-2xl rounded-br-sm bg-primary/40 px-3 py-2">14h30!</div>
        <div className="max-w-[90%] rounded-2xl rounded-bl-sm bg-muted px-3 py-2">
          Agendado ✅ Vou te lembrar <strong>1 dia antes</strong> e <strong>1h antes</strong> aqui no WhatsApp. Combinado?
        </div>
      </div>
      <div className="rounded-xl bg-muted/60 px-3 py-2 text-xs text-muted-foreground">Digite uma mensagem...</div>
    </div>
  );
}

function Features() {
  const features = [
    { icon: Calendar, title: "Sistema de agenda próprio", text: "Esqueça Google Calendar e planilhas. Agenda nativa da Ararabot, feita para WhatsApp, com bloqueios, intervalos e múltiplos profissionais." },
    { icon: BellRing, title: "Lembretes automáticos", text: "A IA envia lembretes 24h e 1h antes da consulta. Faltas caem drasticamente — clientes confirmam ou remarcam direto na conversa." },
    { icon: CalendarCheck, title: "Agendamento 24/7 pelo WhatsApp", text: "Cliente quer marcar de madrugada? A IA marca. De domingo? Marca também. Sua agenda nunca fecha — você descansa." },
    { icon: Bot, title: "IA treinada no seu negócio", text: "Conhece seus serviços, duração de cada atendimento, valores e regras. Agenda como o melhor recepcionista que você já teve." },
    { icon: Users, title: "CRM nativo no WhatsApp", text: "Histórico do cliente, etiquetas, funil de vendas e múltiplos atendentes — tudo num lugar só, dentro do WhatsApp." },
    { icon: BarChart3, title: "Relatórios em tempo real", text: "Quantos agendamentos hoje? Quantas faltas? Qual horário enche mais? Decisões com dados, não com achismo." },
  ];
  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">Tudo em uma plataforma</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Mais que um chatbot. Sua <span className="text-gradient-neon">agenda inteligente</span> dentro do WhatsApp.</h2>
        </div>
        <div className="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
          {features.map(({ icon: Icon, title, text }) => (
            <div key={title} className="group rounded-2xl border border-border bg-card/60 p-6 transition hover:border-accent/60 hover:shadow-neon">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-primary shadow-glow">
                <Icon className="h-6 w-6 text-primary-foreground" />
              </div>
              <h3 className="mt-5 text-lg font-semibold">{title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", title: "Diagnóstico gratuito", text: "Mapeamos sua rotina de agenda, seus serviços, durações e regras de atendimento." },
    { n: "02", title: "Treinamos sua IA", text: "Em até 7 dias seu agente está pronto, falando como sua marca e respeitando sua agenda." },
    { n: "03", title: "Conectamos seu WhatsApp", text: "API Oficial da Meta. Sem migrar número, sem risco de bloqueio." },
    { n: "04", title: "Sua agenda no automático", text: "A IA marca, confirma e lembra. Você ganha tempo de volta — todo dia." },
  ];
  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">Como funciona</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Em 7 dias rodando. Em 30, com tempo livre de novo.</h2>
        </div>
        <div className="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((s) => (
            <div key={s.n} className="rounded-2xl border border-border bg-card/60 p-6">
              <div className="text-4xl font-bold text-gradient-neon">{s.n}</div>
              <h3 className="mt-3 text-lg font-semibold">{s.title}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Results() {
  const stats = [
    { v: "+10h", l: "De volta na sua semana" },
    { v: "-70%", l: "Faltas com lembretes" },
    { v: "24/7", l: "Agenda aberta sem parar" },
    { v: "<1s", l: "Resposta ao cliente" },
  ];
  return (
    <section id="resultados" className="px-6 py-24">
      <div className="mx-auto max-w-6xl rounded-3xl bg-gradient-primary p-10 shadow-glow md:p-16">
        <div className="grid gap-10 md:grid-cols-2 md:items-center">
          <div>
            <h2 className="text-4xl font-bold text-primary-foreground md:text-5xl">Mais tempo livre. Menos faltas. Agenda cheia.</h2>
            <p className="mt-4 text-primary-foreground/80">Profissionais que usam Ararabot recuperam horas da semana e param de perder dinheiro com horários vazios.</p>
          </div>
          <div className="grid grid-cols-2 gap-5">
            {stats.map((s) => (
              <div key={s.l} className="rounded-2xl bg-background/95 p-6 text-center shadow-elevated">
                <div className="text-4xl font-bold text-gradient-neon">{s.v}</div>
                <div className="mt-1 text-xs font-medium uppercase tracking-wider text-muted-foreground">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { name: "Carla Mendes", role: "Clínica de Estética", quote: "Antes eu passava 2 horas por dia confirmando consulta no WhatsApp. Hoje a IA faz tudo e os lembretes praticamente acabaram com as faltas." },
    { name: "Dr. Rafael Souza", role: "Consultório Odontológico", quote: "Os lembretes automáticos mudaram meu mês. Caiu de 8 faltas por semana pra 1 ou 2. Sozinho isso já paga a Ararabot." },
    { name: "Juliana Prado", role: "Studio de Pilates", quote: "Sistema próprio de agenda, sem ficar amarrada no Google Calendar. Cliente marca de madrugada, eu acordo com a agenda cheia." },
  ];
  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">Quem já usa</span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">Eles pararam de perder clientes.</h2>
          <div className="mt-6 flex justify-center">
            <GoogleReviewsBadge />
          </div>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-3">
          {items.map((t) => (
            <div key={t.name} className="rounded-2xl border border-border bg-card/60 p-7">
              <div className="flex gap-1 text-accent">
                {Array.from({ length: 5 }).map((_, i) => <Star key={i} className="h-4 w-4 fill-accent" />)}
              </div>
              <p className="mt-4 text-sm leading-relaxed">"{t.quote}"</p>
              <div className="mt-5 border-t border-border pt-4">
                <div className="text-sm font-semibold">{t.name}</div>
                <div className="text-xs text-muted-foreground">{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const plans = [
    {
      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: "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 CRM",
    },
    {
      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",
    },
  ];
  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">Escolha os módulos que seu negócio precisa.</h2>
          <p className="mx-auto mt-4 max-w-xl text-muted-foreground">Combine Agendamentos, CRM e Agente de IA. O Agente de IA é o módulo mais escolhido pelos nossos clientes.</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">MAIS ESCOLHIDO</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: "Preciso usar Google Calendar ou outro sistema?", a: "Não. A Ararabot tem sistema próprio de agendamento, integrado direto ao WhatsApp. Você não depende de nenhuma ferramenta externa." },
    { q: "Como funcionam os lembretes automáticos?", a: "A IA envia lembretes pelo WhatsApp 24h e 1h antes da consulta (configurável). O cliente confirma, remarca ou cancela na própria conversa — e sua agenda atualiza sozinha." },
    { q: "Em quanto tempo a IA fica pronta?", a: "Em até 7 dias úteis após o diagnóstico. Casos simples saem em 48h." },
    { q: "Preciso trocar meu número de WhatsApp?", a: "Não. Usamos a API Oficial da Meta com o seu número atual ou um novo, como preferir." },
    { q: "E se a IA não souber responder algo?", a: "Ela transfere automaticamente para um humano com todo o contexto da conversa, sem perder o cliente." },
    { q: "Tem fidelidade?", a: "Não. Você cancela quando quiser, sem multa." },
  ];
  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">
        <Sparkles className="mx-auto h-10 w-10 text-accent" />
        <h2 className="mt-4 text-4xl font-bold text-primary-foreground md:text-6xl">
          Quantas horas você vai <span className="text-gradient-neon">perder amanhã</span> com a agenda?
        </h2>
        <p className="mx-auto mt-5 max-w-2xl text-primary-foreground/85">
          Sua agenda pode estar trabalhando por você ainda esta semana. Diagnóstico gratuito, sem compromisso —
          fale agora com a Ararabot no WhatsApp.
        </p>
        <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="mt-8 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">
          <Phone className="h-5 w-5" /> Falar no WhatsApp (54) 98112-2381
        </a>
        <div className="mt-5 text-xs text-primary-foreground/70">Resposta em menos de 1 segundo. Óbvio. 😉</div>
      </div>
    </section>
  );
}