import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Bot, Brain, Mail, Search, Sparkles } from "lucide-react";
import { HoloHost } from "@/components/holo-host";
import { ParticleField } from "@/components/hud-orbit";
import { openGatavaseChat } from "@/components/gatavase-chat";

export const Route = createFileRoute("/welcome")({
  head: () => ({
    meta: [
      { title: "Enter the Gatavase Universe — AI Systems, Search, Mail & More" },
      {
        name: "description",
        content:
          "Step into Gatavase Corporation's AI universe: Gatavase AI, GataMail, Gatavase Search and ChatBud — intelligent systems engineered in Kampala and Doha.",
      },
      { property: "og:title", content: "Enter the Gatavase Universe" },
      {
        property: "og:description",
        content:
          "A living AI interface welcoming you to Gatavase Corporation — AI platforms, secure mail, search and conversational assistants.",
      },
      { property: "og:url", content: "/welcome" },
    ],
    links: [{ rel: "canonical", href: "/welcome" }],
  }),
  component: Welcome,
});

const portals = [
  {
    label: "Gatavase Ai",
    body: "Agents, automation and data intelligence.",
    icon: Brain,
    to: "/gatavase-ai" as const,
  },
  {
    label: "GataMail",
    body: "Secure corporate mail for African teams.",
    icon: Mail,
    to: "/gatamail" as const,
  },
  {
    label: "Gatavase Search",
    body: "Discovery engine tuned for local context.",
    icon: Search,
    to: "/gatavase-search" as const,
  },
];

function Welcome() {
  return (
    <section className="relative min-h-[calc(100vh-4rem)] overflow-hidden hero-surface">
      <ParticleField className="pointer-events-none absolute inset-0 size-full" />
      <div className="pointer-events-none absolute inset-0 grid-lines opacity-60" />
      <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/70 to-background" />

      <div className="relative mx-auto grid max-w-6xl items-center gap-16 px-5 py-20 md:py-28 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="order-first lg:order-none">
          <HoloHost />
        </div>

        <div>
          <p className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-3.5 py-1.5 font-mono text-xs tracking-[0.2em] text-primary uppercase">
            <Sparkles className="size-3.5" /> System online
          </p>
          <h1 className="mt-6 text-4xl leading-[1.05] font-bold md:text-6xl">
            Welcome to the <span className="text-gradient">Gatavase Universe</span>
          </h1>
          <p className="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground md:text-lg">
            An interface, not a brochure. Intelligent systems for Africa and the world — AI
            platforms, secure communication, search and enterprise software, engineered from
            Kampala to Doha.
          </p>

          <div className="mt-9 flex flex-wrap gap-3">
            <Link
              to="/"
              className="group inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-[0_0_30px_-6px_color-mix(in_oklab,var(--primary)_60%,transparent)] transition-transform hover:scale-[1.03]"
            >
              Enter the Universe
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
            </Link>
            <button
              onClick={openGatavaseChat}
              className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-6 py-3 text-sm font-semibold text-primary transition-colors hover:bg-primary/20"
            >
              <Bot className="size-4" /> ChatBud
            </button>
          </div>

          <div className="mt-12 grid gap-4 sm:grid-cols-3">
            {portals.map((p) => (
              <Link
                key={p.label}
                to={p.to}
                className="panel group p-5 transition-transform hover:-translate-y-1"
              >
                <p.icon className="size-5 text-primary" />
                <h2 className="mt-4 text-base font-semibold">{p.label}</h2>
                <p className="mt-1.5 text-xs leading-relaxed text-muted-foreground">{p.body}</p>
                <span className="mt-4 inline-flex items-center gap-1 font-mono text-[11px] tracking-wide text-primary">
                  Open <ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
                </span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}