import { createFileRoute, Link } from "@tanstack/react-router";
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";
import { ArrowRight, TrendingUp, Clock, CalendarCheck, MessageCircle, Quote, CheckCircle2 } from "lucide-react";

export const Route = createFileRoute("/casos-de-sucesso")({
  head: () => ({
    meta: [
      { title: "Casos de Sucesso Ararabot — Resultados Reais com IA no WhatsApp" },
      { name: "description", content: "Veja casos reais de clínicas, salões, consultórios e hotéis que reduziram faltas em até 90%, recuperaram horas por semana e aumentaram a receita usando o Agente de IA da Ararabot no WhatsApp." },
      { property: "og:title", content: "Casos de Sucesso Ararabot — IA que entrega resultado de verdade" },
      { property: "og:description", content: "Números reais de empresas que automatizaram agendamentos, atendimento e vendas no WhatsApp com a Ararabot." },
      { property: "og:url", content: "https://ararabot.lovable.app/casos-de-sucesso" },
      { property: "og:type", content: "website" },
    ],
    links: [
      { rel: "canonical", href: "https://ararabot.lovable.app/casos-de-sucesso" },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "ItemList",
          name: "Casos de Sucesso Ararabot",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Clínica de Estética reduz 87% das faltas" },
            { "@type": "ListItem", position: 2, name: "Consultório Odontológico recupera 12h por semana" },
            { "@type": "ListItem", position: 3, name: "Studio de Pilates triplica agendamentos noturnos" },
            { "@type": "ListItem", position: 4, name: "Salão de beleza dobra faturamento mensal" },
            { "@type": "ListItem", position: 5, name: "Hotel boutique elimina perda de reservas" },
          ],
        }),
      },
      {
        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: "Casos de Sucesso", item: "https://ararabot.lovable.app/casos-de-sucesso" },
          ],
        }),
      },
    ],
  }),
  component: CasosPage,
});

type Caso = {
  setor: string;
  cliente: string;
  desafio: string;
  solucao: string[];
  resultados: { label: string; antes: string; depois: string; destaque: string }[];
  depoimento: string;
  autor: string;
  cargo: string;
};

const casos: Caso[] = [
  {
    setor: "Clínica de Estética",
    cliente: "Studio Carla Mendes — Porto Alegre/RS",
    desafio:
      "Carla perdia em média 8 horários por semana com faltas e ainda gastava 2 horas por dia confirmando consultas manualmente no WhatsApp. O time de recepção não dava conta.",
    solucao: [
      "Agente de IA respondendo em menos de 1 segundo, 24/7",
      "Lembretes automáticos 24h e 2h antes da consulta",
      "Confirmação, remarcação e cancelamento pelo próprio WhatsApp",
      "Integração com a agenda interna da clínica",
    ],
    resultados: [
      { label: "Faltas por semana", antes: "8", depois: "1", destaque: "-87%" },
      { label: "Tempo confirmando", antes: "2h/dia", depois: "0", destaque: "-100%" },
      { label: "Faturamento mensal", antes: "Base 100%", depois: "138%", destaque: "+38%" },
    ],
    depoimento:
      "Antes eu passava 2 horas por dia confirmando consulta no WhatsApp. Hoje a IA faz tudo e os lembretes praticamente acabaram com as faltas. Em 60 dias paguei o ano inteiro de Ararabot.",
    autor: "Carla Mendes",
    cargo: "Proprietária — Studio Carla Mendes",
  },
  {
    setor: "Consultório Odontológico",
    cliente: "Dr. Rafael Souza Odontologia — Caxias do Sul/RS",
    desafio:
      "Alta taxa de no-show estava custando mais de R$ 12.000 por mês em horários perdidos. A secretária não conseguia ligar para todos os pacientes a tempo.",
    solucao: [
      "Lembretes inteligentes em 3 momentos (48h, 24h e 2h antes)",
      "Fila de espera automática: vaga liberada vira oferta para o próximo paciente",
      "IA qualifica novos pacientes antes de marcar avaliação",
      "Bloqueio inteligente de horários de pacientes faltosos crônicos",
    ],
    resultados: [
      { label: "Faltas por semana", antes: "8", depois: "1,5", destaque: "-81%" },
      { label: "Receita recuperada", antes: "R$ 0", depois: "R$ 9.800/mês", destaque: "+R$ 9.8k" },
      { label: "Horas da secretária", antes: "Saturada", depois: "+12h livres/sem", destaque: "+12h" },
    ],
    depoimento:
      "Os lembretes automáticos mudaram meu mês. Caiu de 8 faltas por semana pra 1 ou 2. Sozinho isso já paga a Ararabot várias vezes. Hoje minha agenda fecha com 3 semanas de antecedência.",
    autor: "Dr. Rafael Souza",
    cargo: "Cirurgião-Dentista — CRO/RS",
  },
  {
    setor: "Studio de Pilates",
    cliente: "Juliana Prado Pilates — Gramado/RS",
    desafio:
      "Clientes queriam marcar de noite e de madrugada, mas Juliana só respondia de manhã. Vários potenciais alunos desistiam antes da primeira aula.",
    solucao: [
      "Atendimento e agendamento 100% automático 24/7",
      "Aula experimental marcada sem intervenção humana",
      "Sistema próprio de agenda sem depender do Google Calendar",
      "Pacotes e renovações vendidos pela IA",
    ],
    resultados: [
      { label: "Agendamentos noturnos", antes: "3/sem", depois: "11/sem", destaque: "+267%" },
      { label: "Conversão aula experimental → aluno", antes: "42%", depois: "68%", destaque: "+26 p.p." },
      { label: "Alunos ativos", antes: "47", depois: "82", destaque: "+74%" },
    ],
    depoimento:
      "Sistema próprio de agenda, sem ficar amarrada no Google Calendar. Cliente marca de madrugada, eu acordo com a agenda cheia. Triplicou meu studio em 4 meses.",
    autor: "Juliana Prado",
    cargo: "Proprietária — Studio Pilates Gramado",
  },
  {
    setor: "Salão de Beleza",
    cliente: "Bella Hair Studio — Bento Gonçalves/RS",
    desafio:
      "5 cabeleireiras compartilhando 1 WhatsApp era um caos: clientes sem resposta, agendamentos duplicados e brigas internas por horários.",
    solucao: [
      "Multiatendimento no CRM da Ararabot com fila distribuída por profissional",
      "Agenda individual por cabeleireira com bloqueio automático",
      "IA encaminha o cliente para a profissional certa",
      "Funil Kanban de leads de procedimentos premium (progressiva, mechas, etc.)",
    ],
    resultados: [
      { label: "Tempo médio de resposta", antes: "4h20", depois: "8 segundos", destaque: "-99%" },
      { label: "Agendamentos/mês", antes: "320", depois: "640", destaque: "x2" },
      { label: "Faturamento mensal", antes: "Base 100%", depois: "210%", destaque: "+110%" },
    ],
    depoimento:
      "Era guerra interna por causa do WhatsApp. Hoje cada uma tem a sua agenda, a IA encaminha sozinho, e a gente dobrou o faturamento sem contratar mais ninguém.",
    autor: "Patricia Bertotti",
    cargo: "Proprietária — Bella Hair Studio",
  },
  {
    setor: "Hotelaria",
    cliente: "Pousada Vale Encantado — Canela/RS",
    desafio:
      "Reservas perdidas por demora no WhatsApp à noite e nos fins de semana. Recepcionistas humanos só conseguiam responder em horário comercial.",
    solucao: [
      "Atendente de IA treinada com todas as informações da pousada (quartos, tarifas, café, pet, etc.)",
      "Cotação automática enviada em segundos",
      "Reserva pré-confirmada pela IA antes de passar para o humano",
      "Integração com o motor de reservas para checar disponibilidade",
    ],
    resultados: [
      { label: "Reservas fora do horário comercial", antes: "8%", depois: "41%", destaque: "+33 p.p." },
      { label: "Tempo até cotação", antes: "3h10", depois: "12 segundos", destaque: "-99%" },
      { label: "Taxa de ocupação", antes: "62%", depois: "84%", destaque: "+22 p.p." },
    ],
    depoimento:
      "Antes a gente perdia reserva todo fim de semana porque o hóspede não esperava resposta. A IA cota, tira dúvida e segura o cliente até a gente confirmar. Mudou o jogo.",
    autor: "Marcos Vinícius",
    cargo: "Gestor — Pousada Vale Encantado",
  },
];

function CasosPage() {
  return (
    <div className="min-h-screen bg-hero text-foreground overflow-x-clip">
      <Nav />

      <section className="relative px-6 pt-20 pb-12">
        <div className="absolute inset-0 -z-10 bg-gradient-to-b from-primary/10 via-transparent to-transparent" />
        <div className="mx-auto max-w-5xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-accent">
            <TrendingUp className="h-3.5 w-3.5" /> Resultados reais, clientes reais
          </span>
          <h1 className="mt-5 text-4xl font-bold leading-tight md:text-6xl">
            Empresas que pararam de perder cliente <span className="text-gradient-neon">com a Ararabot.</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-base text-muted-foreground md:text-lg">
            Mais de 300 empresas em todo o Brasil. Clínicas, consultórios, salões, studios e hotéis automatizando agendamento, atendimento e vendas no WhatsApp — com números que aparecem no faturamento.
          </p>
          <div className="mt-7 flex flex-wrap items-center justify-center gap-4">
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              className="inline-flex items-center gap-2 rounded-full bg-gradient-neon px-7 py-3.5 text-sm font-bold text-neon-foreground shadow-neon hover:scale-[1.03] transition"
            >
              <MessageCircle className="h-4 w-4" /> Quero meus números assim
            </a>
            <GoogleReviewsBadge />
          </div>
        </div>
      </section>

      <section className="px-6 py-10">
        <div className="mx-auto grid max-w-6xl gap-4 md:grid-cols-4">
          {[
            { v: "+300", l: "empresas no Brasil" },
            { v: "-87%", l: "faltas em média" },
            { v: "<1s", l: "tempo de resposta" },
            { v: "5,0", l: "nota no Google" },
          ].map((s) => (
            <div key={s.l} className="rounded-2xl border border-border bg-card/60 p-5 text-center shadow-elevated">
              <div className="text-3xl 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>
      </section>

      <section className="px-6 py-12">
        <div className="mx-auto max-w-6xl space-y-10">
          {casos.map((c, idx) => (
            <article
              key={c.cliente}
              className="rounded-3xl border border-border bg-card/60 p-8 shadow-elevated md:p-12"
            >
              <div className="grid gap-10 lg:grid-cols-[1.2fr,1fr]">
                <div>
                  <div className="flex items-center gap-3">
                    <span className="rounded-full bg-gradient-primary px-3 py-1 text-xs font-bold uppercase tracking-wider text-primary-foreground">
                      Caso #{String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-xs font-semibold uppercase tracking-widest text-accent">{c.setor}</span>
                  </div>
                  <h2 className="mt-3 text-2xl font-bold md:text-3xl">{c.cliente}</h2>

                  <h3 className="mt-6 text-sm font-bold uppercase tracking-wider text-muted-foreground">O desafio</h3>
                  <p className="mt-2 text-sm leading-relaxed text-foreground/90">{c.desafio}</p>

                  <h3 className="mt-6 text-sm font-bold uppercase tracking-wider text-muted-foreground">O que a Ararabot fez</h3>
                  <ul className="mt-3 space-y-2">
                    {c.solucao.map((s) => (
                      <li key={s} className="flex items-start gap-2 text-sm">
                        <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
                        <span>{s}</span>
                      </li>
                    ))}
                  </ul>

                  <div className="mt-7 rounded-2xl border border-accent/40 bg-accent/5 p-5">
                    <Quote className="h-5 w-5 text-accent" />
                    <p className="mt-2 text-sm italic leading-relaxed">"{c.depoimento}"</p>
                    <div className="mt-3 border-t border-border pt-3">
                      <div className="text-sm font-semibold">{c.autor}</div>
                      <div className="text-xs text-muted-foreground">{c.cargo}</div>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">Resultados em 90 dias</h3>
                  <div className="mt-3 space-y-4">
                    {c.resultados.map((r) => (
                      <div key={r.label} className="rounded-2xl border border-border bg-background/60 p-5">
                        <div className="flex items-center justify-between gap-2">
                          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                            {r.label}
                          </span>
                          <span className="rounded-full bg-gradient-neon px-2.5 py-0.5 text-xs font-bold text-neon-foreground">
                            {r.destaque}
                          </span>
                        </div>
                        <div className="mt-3 grid grid-cols-2 gap-3 text-center">
                          <div className="rounded-xl bg-muted/40 p-3">
                            <div className="text-xs text-muted-foreground">Antes</div>
                            <div className="mt-1 text-lg font-bold">{r.antes}</div>
                          </div>
                          <div className="rounded-xl bg-primary/10 p-3">
                            <div className="text-xs text-accent">Depois</div>
                            <div className="mt-1 text-lg font-bold text-gradient-neon">{r.depois}</div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="px-6 py-20">
        <div className="mx-auto max-w-4xl rounded-3xl bg-gradient-primary p-10 text-center shadow-glow md:p-14">
          <h2 className="text-3xl font-bold text-primary-foreground md:text-4xl">
            Seu negócio é o próximo caso de sucesso.
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-primary-foreground/80">
            Diagnóstico gratuito de 20 minutos. Saímos com um plano claro de quanto a Ararabot economiza no seu mês.
          </p>
          <div className="mt-7 flex flex-wrap justify-center gap-3">
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              className="inline-flex items-center gap-2 rounded-full bg-background px-7 py-3.5 text-sm font-bold text-foreground shadow-elevated hover:scale-[1.03] transition"
            >
              <MessageCircle className="h-4 w-4" /> Quero meu diagnóstico grátis
            </a>
            <Link
              to="/comparacao"
              className="inline-flex items-center gap-2 rounded-full border border-primary-foreground/40 px-7 py-3.5 text-sm font-bold text-primary-foreground hover:bg-primary-foreground/10 transition"
            >
              Comparar com outras opções <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      <CrossPromo current="agendamento" />
      <Footer />
    </div>
  );
}
