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 { Check, X, MessageCircle, ArrowRight, Sparkles } from "lucide-react";

export const Route = createFileRoute("/comparacao")({
  head: () => ({
    meta: [
      { title: "Ararabot vs Chatbot, Atendente Humano e ManyChat — Comparação Completa" },
      { name: "description", content: "Compare a Ararabot com chatbot tradicional, atendente humana, ManyChat, Blip e Take Blip. Veja por que mais de 300 empresas no Brasil escolheram a Ararabot para atender, agendar e vender no WhatsApp 24/7." },
      { property: "og:title", content: "Ararabot vs Chatbot vs Atendente Humano — Qual escolher?" },
      { property: "og:description", content: "Comparação direta de preço, recursos, tempo de implantação e ROI. Descubra a melhor solução para automatizar seu WhatsApp." },
      { property: "og:url", content: "https://ararabot.lovable.app/comparacao" },
      { property: "og:type", content: "website" },
    ],
    links: [
      { rel: "canonical", href: "https://ararabot.lovable.app/comparacao" },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "FAQPage",
          mainEntity: [
            {
              "@type": "Question",
              name: "Qual a diferença da Ararabot para um chatbot tradicional?",
              acceptedAnswer: { "@type": "Answer", text: "Chatbots tradicionais seguem fluxos rígidos com botões e respostas pré-programadas. A Ararabot usa IA generativa treinada com o conhecimento da sua empresa, entende linguagem natural, qualifica leads, agenda na agenda e responde em menos de 1 segundo, 24/7." },
            },
            {
              "@type": "Question",
              name: "Vale mais a pena contratar uma atendente humana ou a Ararabot?",
              acceptedAnswer: { "@type": "Answer", text: "Uma atendente custa entre R$ 2.500 e R$ 4.500 por mês, atende 8h por dia e tira férias. A Ararabot custa a partir de R$ 239/mês, atende 24/7, nunca falta e responde em segundos. A maioria dos clientes economiza o salário de uma atendente já no primeiro mês." },
            },
            {
              "@type": "Question",
              name: "Por que escolher Ararabot ao invés de ManyChat ou Take Blip?",
              acceptedAnswer: { "@type": "Answer", text: "ManyChat e Take Blip são plataformas de chatbot por fluxo, não têm sistema próprio de agendamento e o suporte é em inglês ou genérico. A Ararabot é brasileira, com IA generativa, CRM, agenda integrada e suporte direto com o time do Diego Bencke em português." },
            },
          ],
        }),
      },
      {
        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: "Comparação", item: "https://ararabot.lovable.app/comparacao" },
          ],
        }),
      },
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Service",
          serviceType: "Automação de WhatsApp com IA, CRM e Agendamento",
          name: "Ararabot — alternativa a chatbot, atendente humana e ManyChat",
          provider: { "@type": "Organization", name: "Ararabot", url: "https://ararabot.lovable.app" },
          areaServed: { "@type": "Country", name: "Brasil" },
          description: "Comparação entre Ararabot, chatbots tradicionais, atendentes humanas e plataformas como ManyChat/Blip. Solução brasileira com IA generativa, CRM e agenda integrada.",
          offers: { "@type": "Offer", price: "239", priceCurrency: "BRL", url: "https://ararabot.lovable.app/comparacao", availability: "https://schema.org/InStock" },
        }),
      },
    ],
  }),
  component: ComparacaoPage,
});

type LinhaComparacao = {
  feature: string;
  ararabot: string | boolean;
  chatbot: string | boolean;
  humana: string | boolean;
  manychat: string | boolean;
};

const linhas: LinhaComparacao[] = [
  { feature: "Disponibilidade 24/7", ararabot: true, chatbot: true, humana: false, manychat: true },
  { feature: "Tempo de resposta", ararabot: "<1 segundo", chatbot: "Imediato (botões)", humana: "Minutos a horas", manychat: "Imediato (botões)" },
  { feature: "Entende linguagem natural (IA generativa)", ararabot: true, chatbot: false, humana: true, manychat: false },
  { feature: "Treinada com o conhecimento da sua empresa", ararabot: true, chatbot: false, humana: "Depende", manychat: false },
  { feature: "Sistema próprio de agendamento", ararabot: true, chatbot: false, humana: false, manychat: false },
  { feature: "Lembretes automáticos de consulta", ararabot: true, chatbot: "Limitado", humana: "Manual", manychat: "Limitado" },
  { feature: "CRM com Kanban de leads", ararabot: true, chatbot: false, humana: false, manychat: "Básico" },
  { feature: "Multiatendimento (vários atendentes)", ararabot: true, chatbot: false, humana: false, manychat: true },
  { feature: "API Oficial Meta (sem risco de banimento)", ararabot: true, chatbot: "Depende", humana: true, manychat: true },
  { feature: "Suporte em português com humanos", ararabot: true, chatbot: "Raramente", humana: "N/A", manychat: false },
  { feature: "Implantação em até 7 dias", ararabot: true, chatbot: "Variável", humana: "Imediato", manychat: "Variável" },
  { feature: "Custo mensal", ararabot: "A partir de R$ 239", chatbot: "R$ 99–R$ 500", humana: "R$ 2.500–R$ 4.500", manychat: "US$ 15–US$ 165" },
  { feature: "Tira férias / falta / pede aumento", ararabot: false, chatbot: false, humana: true, manychat: false },
  { feature: "Escala sem custo adicional por conversa", ararabot: true, chatbot: "Depende", humana: false, manychat: "Por contato" },
];

function Cell({ value }: { value: string | boolean }) {
  if (value === true) {
    return (
      <div className="flex justify-center">
        <Check className="h-5 w-5 text-accent" aria-label="Sim" />
      </div>
    );
  }
  if (value === false) {
    return (
      <div className="flex justify-center">
        <X className="h-5 w-5 text-muted-foreground/60" aria-label="Não" />
      </div>
    );
  }
  return <span className="text-sm">{value}</span>;
}

const concorrentes = [
  {
    nome: "Chatbot tradicional (fluxo de botões)",
    pros: ["Barato", "Implantação rápida para fluxos simples"],
    contras: [
      "Cliente fica preso em menus de 1, 2, 3",
      "Não entende perguntas fora do roteiro",
      "Frustra o cliente e queima sua marca",
      "Não agenda, não vende, não qualifica",
    ],
    para: "Empresas que só precisam responder FAQ simples.",
  },
  {
    nome: "Atendente humana",
    pros: ["Empatia humana real", "Bom para vendas consultivas complexas"],
    contras: [
      "Custa R$ 2.500–R$ 4.500/mês + encargos",
      "Atende 8h por dia, com pausas",
      "Demora minutos para responder",
      "Tira férias, falta, sai da empresa",
    ],
    para: "Negócios pequenos com volume muito baixo de WhatsApp.",
  },
  {
    nome: "ManyChat / Take Blip / Blip",
    pros: ["Marca consolidada", "Muitas integrações"],
    contras: [
      "Cobrança por contato — fica caro escalando",
      "Sem sistema próprio de agenda",
      "Suporte genérico, muitas vezes em inglês",
      "IA generativa só nos planos mais caros",
    ],
    para: "Grandes empresas com time técnico para configurar.",
  },
  {
    nome: "Ararabot",
    pros: [
      "IA generativa em todos os planos",
      "Agenda + CRM + Atendente IA integrados",
      "Conversas e contatos ilimitados",
      "Brasileira, suporte em português, implantação em até 7 dias",
      "ROI no primeiro mês para a maioria dos clientes",
    ],
    contras: ["Foco em pequenas e médias empresas (não atendemos enterprise com SLA dedicado)"],
    para: "Clínicas, salões, consultórios, hotéis, escolas e prestadores de serviço que querem parar de perder cliente no WhatsApp.",
    destaque: true,
  },
];

function ComparacaoPage() {
  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">
            <Sparkles className="h-3.5 w-3.5" /> Comparação honesta
          </span>
          <h1 className="mt-5 text-4xl font-bold leading-tight md:text-6xl">
            Ararabot vs Chatbot vs Atendente Humano <span className="text-gradient-neon">— qual escolher?</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-base text-muted-foreground md:text-lg">
            Comparação direta de preço, recursos, ROI e tempo de implantação entre as principais opções para automatizar seu WhatsApp em 2026.
          </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 a Ararabot
            </a>
            <GoogleReviewsBadge />
          </div>
        </div>
      </section>

      <section className="px-6 py-12">
        <div className="mx-auto max-w-6xl">
          <div className="overflow-x-auto rounded-3xl border border-border bg-card/60 shadow-elevated">
            <table className="w-full min-w-[760px] text-left">
              <thead>
                <tr className="border-b border-border bg-background/60">
                  <th className="p-4 text-xs font-bold uppercase tracking-wider text-muted-foreground">Recurso</th>
                  <th className="p-4 text-center">
                    <div className="text-sm font-bold text-gradient-neon">Ararabot</div>
                    <div className="text-[10px] uppercase tracking-wider text-accent">recomendado</div>
                  </th>
                  <th className="p-4 text-center text-sm font-bold">Chatbot tradicional</th>
                  <th className="p-4 text-center text-sm font-bold">Atendente humana</th>
                  <th className="p-4 text-center text-sm font-bold">ManyChat / Blip</th>
                </tr>
              </thead>
              <tbody>
                {linhas.map((l, i) => (
                  <tr key={l.feature} className={i % 2 === 0 ? "bg-background/20" : ""}>
                    <td className="p-4 text-sm font-medium">{l.feature}</td>
                    <td className="p-4 text-center bg-primary/5"><Cell value={l.ararabot} /></td>
                    <td className="p-4 text-center"><Cell value={l.chatbot} /></td>
                    <td className="p-4 text-center"><Cell value={l.humana} /></td>
                    <td className="p-4 text-center"><Cell value={l.manychat} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto max-w-6xl">
          <div className="text-center">
            <span className="text-xs font-bold uppercase tracking-widest text-accent">Análise por opção</span>
            <h2 className="mt-3 text-3xl font-bold md:text-4xl">Quando faz sentido cada uma.</h2>
          </div>
          <div className="mt-10 grid gap-6 md:grid-cols-2">
            {concorrentes.map((c) => (
              <div
                key={c.nome}
                className={`rounded-3xl border p-7 shadow-elevated ${
                  c.destaque
                    ? "border-accent/60 bg-gradient-to-br from-primary/10 to-card/80 shadow-neon"
                    : "border-border bg-card/60"
                }`}
              >
                <div className="flex items-center justify-between gap-2">
                  <h3 className={`text-lg font-bold ${c.destaque ? "text-gradient-neon" : ""}`}>{c.nome}</h3>
                  {c.destaque && (
                    <span className="rounded-full bg-gradient-neon px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-neon-foreground">
                      Nossa escolha
                    </span>
                  )}
                </div>
                <h4 className="mt-5 text-xs font-bold uppercase tracking-wider text-accent">Pontos fortes</h4>
                <ul className="mt-2 space-y-1.5">
                  {c.pros.map((p) => (
                    <li key={p} className="flex items-start gap-2 text-sm">
                      <Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>
                <h4 className="mt-5 text-xs font-bold uppercase tracking-wider text-muted-foreground">Pontos fracos</h4>
                <ul className="mt-2 space-y-1.5">
                  {c.contras.map((p) => (
                    <li key={p} className="flex items-start gap-2 text-sm text-muted-foreground">
                      <X className="mt-0.5 h-4 w-4 flex-shrink-0" />
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-5 rounded-xl border border-border bg-background/40 p-3 text-xs">
                  <span className="font-bold uppercase tracking-wider text-muted-foreground">Indicado para: </span>
                  {c.para}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto max-w-5xl rounded-3xl border border-border bg-card/60 p-10 shadow-elevated md:p-14">
          <span className="text-xs font-bold uppercase tracking-widest text-accent">Conta de padaria</span>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">
            Quanto a Ararabot <span className="text-gradient-neon">realmente economiza?</span>
          </h2>
          <div className="mt-8 grid gap-6 md:grid-cols-3">
            <div className="rounded-2xl bg-background/40 p-6">
              <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Atendente humana</div>
              <div className="mt-2 text-3xl font-bold">R$ 3.800</div>
              <div className="text-xs text-muted-foreground">salário + encargos / mês</div>
              <div className="mt-4 text-xs text-muted-foreground">• 8h/dia • Tira férias • Falta • Demora a responder</div>
            </div>
            <div className="rounded-2xl bg-background/40 p-6">
              <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Faltas evitadas</div>
              <div className="mt-2 text-3xl font-bold">R$ 4.200</div>
              <div className="text-xs text-muted-foreground">média recuperada / mês</div>
              <div className="mt-4 text-xs text-muted-foreground">• 6 horários/sem × R$ 175 ticket médio</div>
            </div>
            <div className="rounded-2xl border-2 border-accent bg-primary/10 p-6">
              <div className="text-xs font-bold uppercase tracking-wider text-accent">Ararabot (módulos avulsos)</div>
              <div className="mt-2 text-3xl font-bold text-gradient-neon">A partir de R$ 239</div>
              <div className="text-xs text-muted-foreground">Por módulo / mês — comece pelo que faz mais sentido</div>
              <div className="mt-4 text-xs font-semibold text-accent">Economia média: R$ 7.300/mês</div>
            </div>
          </div>
          <div className="mt-6 rounded-2xl border border-accent/40 bg-accent/5 p-5">
            <p className="text-sm font-semibold text-foreground">
              São raras as empresas que precisam dos 3 módulos juntos.
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              A maioria dos negócios começa com 1 módulo (Agendamento, CRM ou Atendente de IA) e só evolui para os demais quando o volume justifica. Cada empresa é um caso — fale com a gente para um diagnóstico gratuito e descobrir exatamente qual combinação cabe no seu momento (e no seu bolso).
            </p>
            <a
              href={WHATSAPP_URL}
              target="_blank"
              rel="noopener"
              className="mt-4 inline-flex items-center gap-2 rounded-full bg-gradient-neon px-5 py-2.5 text-xs font-bold text-neon-foreground shadow-neon hover:scale-[1.03] transition"
            >
              <MessageCircle className="h-3.5 w-3.5" /> Falar com um especialista
            </a>
          </div>
          <p className="mt-6 text-xs text-muted-foreground">
            * Cálculo baseado na média de clientes Ararabot do setor de saúde e estética. Seu resultado pode variar — peça um diagnóstico gratuito para a estimativa exata do seu negócio.
          </p>
        </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">
            Pronto para comparar na prática?
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-primary-foreground/80">
            Diagnóstico gratuito de 20 minutos. Mostramos quanto a Ararabot economiza no seu mês — e se não fizer sentido, falamos isso também.
          </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" /> Falar com especialista
            </a>
            <Link
              to="/casos-de-sucesso"
              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"
            >
              Ver casos de sucesso <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

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