import { Link } from "@tanstack/react-router";
import { ArrowRight, Users, Calendar, Brain } from "lucide-react";

type Page = "agendamento" | "crm" | "atendentes-ia";

const modules: Record<
  Page,
  { slug: Page; href: string; icon: typeof Users; title: string; desc: string }
> = {
  agendamento: {
    slug: "agendamento",
    href: "/",
    icon: Calendar,
    title: "Agendamento IA",
    desc: "Sua agenda no automático. A IA marca, confirma e lembra seus clientes pelo WhatsApp 24/7.",
  },
  crm: {
    slug: "crm",
    href: "/crm",
    icon: Users,
    title: "CRM WhatsApp",
    desc: "Pipeline de vendas, multiatendimento e automações — tudo dentro do seu WhatsApp oficial.",
  },
  "atendentes-ia": {
    slug: "atendentes-ia",
    href: "/atendentes-ia",
    icon: Brain,
    title: "Atendentes de IA",
    desc: "IA treinada com a sua empresa atendendo, qualificando e vendendo no WhatsApp 24 horas por dia.",
  },
};

export function CrossPromo({ current }: { current: Page }) {
  const others = (Object.keys(modules) as Page[]).filter((k) => k !== current);

  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">
            Ecossistema Ararabot
          </span>
          <h2 className="mt-3 text-4xl font-bold md:text-5xl">
            Um WhatsApp inteligente. <span className="text-gradient-neon">Três módulos.</span>
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
            A Ararabot não é só isso. Combine os módulos e transforme seu WhatsApp em uma máquina de vendas, atendimento e agendamento automático.
          </p>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-2">
          {others.map((key) => {
            const m = modules[key];
            const Icon = m.icon;
            return (
              <div
                key={key}
                className="group relative rounded-3xl border border-border bg-card/60 p-8 shadow-elevated 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-xl font-bold">{m.title}</h3>
                <p className="mt-2 text-sm text-muted-foreground">{m.desc}</p>
                <Link
                  to={m.href}
                  className="mt-6 inline-flex items-center gap-2 rounded-full bg-gradient-neon px-6 py-2.5 text-sm font-bold text-neon-foreground shadow-neon transition hover:scale-[1.03]"
                >
                  Conhecer módulo <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}