import { openGatavaseChat } from "@/components/gatavase-chat";
import { createFileRoute, Link } from "@tanstack/react-router";
import {
  Brain,
  Smartphone,
  Workflow,
  Clapperboard,
  HeartHandshake,
  Banknote,
  GraduationCap,
  Stethoscope,
  ShoppingBag,
  Music,
  Landmark,
  ArrowRight,
  Cloud,
  Code2,
  Gamepad2,
  Sparkles,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import officePoster from "@/assets/office-poster.jpg";
import officeVideo from "@/assets/gatavase-office.mp4.asset.json";
import { HudOrbit, HudWidgets, ParticleField } from "@/components/hud-orbit";
import { IMAGES } from "@/lib/page-images";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Gatavase Corporation — Intelligent Systems for a Connected Africa" },
      {
        name: "description",
        content:
          "Gatavase Corporation builds AI platforms, mobile apps, enterprise software and digital experiences for businesses across Africa and beyond. Kampala · Doha.",
      },
      {
        property: "og:title",
        content: "Gatavase Corporation — Intelligent Systems for a Connected Africa",
      },
      {
        property: "og:description",
        content:
          "Gatavase Corporation builds AI platforms, mobile apps, enterprise software and digital experiences for businesses across Africa and beyond. Kampala · Doha.",
      },
      { property: "og:url", content: "/" },
    ],
    links: [{ rel: "canonical", href: "/" }],
  }),
  component: Index,
});

const services = [
  {
    icon: Brain,
    title: "AI & Data Engineering",
    body: "Custom AI models, automation, voice cloning for African languages, and predictive systems built on real operational data.",
  },
  {
    icon: Smartphone,
    title: "Web & Mobile Development",
    body: "Modern apps, responsive websites, secure portals and cloud-ready platforms — optimized for low-bandwidth environments.",
  },
  {
    icon: Workflow,
    title: "Enterprise & Automation",
    body: "Accounting systems, school portals, workflow automation and business intelligence that remove manual work.",
  },
  {
    icon: Clapperboard,
    title: "Creative & Media Technologies",
    body: "Music platforms, digital storytelling and media production tools for artists, labels and broadcasters.",
  },
  {
    icon: HeartHandshake,
    title: "Social Impact & Foundations",
    body: "Technology that supports education, children and community development across Uganda and the region.",
  },
];

const industries = [
  { icon: Banknote, title: "FinTech", body: "Secure payments, digital wallets, automation." },
  { icon: GraduationCap, title: "Education", body: "School portals, admissions, e-learning." },
  { icon: Stethoscope, title: "Healthcare", body: "Patient systems, tele-health, dashboards." },
  { icon: ShoppingBag, title: "Retail & E-commerce", body: "Stores, inventory, delivery systems." },
  { icon: Music, title: "Entertainment & Media", body: "Music platforms, streaming, creative tools." },
  { icon: Landmark, title: "Government & NGOs", body: "Community portals, data, transparency tools." },
];

const divisions = [
  {
    title: "Gazman Advanced Technologies",
    body: "AI engineering, automation and next-generation software.",
    tag: "Engineering division",
    to: "/gazman-advanced-technologies",
  },
  {
    title: "Gatavase Messenger",
    body: "A secure communication platform built for speed, clarity and community.",
    tag: "Secure messaging",
    to: "/gatavase-messenger",
  },
  {
    title: "Destiny & Divine Foundation",
    body: "Supporting children, education and hope across Uganda.",
    tag: "Social impact",
    to: "/destiny-and-divine-foundation",
  },
  {
    title: "Lil Gazman Music",
    body: "Creative storytelling, Afro-Soul artistry and digital music experiences.",
    tag: "Music & creative",
    to: "/lil-gazman-music",
  },
] as const;

const stories = [
  {
    title: "Gatavase Accounting System",
    body: "A secure internal financial platform for corporate operations, reporting and audit trails.",
  },
  {
    title: "Lil Gazman Music Platform",
    body: "A digital home for Afro-Soul music, streaming and fan engagement.",
  },
  {
    title: "Destiny & Divine School Portal",
    body: "A modern portal for admissions, parent access and student management.",
  },
  {
    title: "Gatavase Web Ecosystem",
    body: "A unified network of sites powering communication, education and innovation.",
  },
];

const stack = [
  { icon: Code2, title: "PHP · JavaScript · Node.js" },
  { icon: Sparkles, title: "AI models for voice, text & automation" },
  { icon: Cloud, title: "Azure, AWS & custom infrastructure" },
  { icon: Gamepad2, title: "Godot for interactive experiences" },
];

function Index() {
  return (
    <>
      {/* HERO */}
      <section className="relative overflow-hidden hero-surface">
        <video
          className="pointer-events-none absolute inset-0 size-full object-cover opacity-20"
          autoPlay
          muted
          loop
          playsInline
          poster={officePoster}
          aria-label="Gatavase Corporation engineering office in Kampala"
        >
          <source src={officeVideo.url} type="video/mp4" />
        </video>
        <ParticleField className="pointer-events-none absolute inset-0 size-full" />
        <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/70 to-background" />
        <div className="relative mx-auto grid max-w-6xl items-center gap-14 px-5 py-24 md:py-32 lg:grid-cols-[1.05fr_0.95fr]">
          <div>
            <p className="inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-3.5 py-1.5 text-xs font-medium text-primary">
              African-born · Globally engineered
            </p>
            <h1 className="mt-6 max-w-3xl text-4xl leading-[1.08] font-bold md:text-6xl">
              Gatavase Corporation — <span className="text-gradient">Intelligent Systems</span> for a
              Connected Africa
            </h1>
            <p className="mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
              We build AI platforms, enterprise software, mobile apps and digital experiences that
              empower businesses, creators and communities across Africa and the world.
            </p>
            <div className="mt-9 flex flex-wrap gap-3">
              <Button asChild size="lg">
                <Link to="/" hash="divisions">
                  Explore Our Divisions <ArrowRight className="size-4" />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link to="/demo-request">Start a Project</Link>
              </Button>
            </div>
            <p className="mt-8 text-sm text-muted-foreground">
              From Kampala to Doha — shaping tomorrow's technology with African innovation and global
              precision.
            </p>

            <dl className="mt-14 grid max-w-3xl grid-cols-2 gap-6 border-t border-border pt-8 md:grid-cols-4">
              {[
                ["10+", "Internal systems built"],
                ["2", "Countries of operation"],
                ["4", "Active divisions"],
                ["2015", "Building since"],
              ].map(([n, l]) => (
                <div key={l}>
                  <dt className="font-display text-2xl font-bold text-primary md:text-3xl">{n}</dt>
                  <dd className="mt-1 text-xs text-muted-foreground md:text-sm">{l}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="order-first lg:order-none">
            <HudOrbit />
            <HudWidgets className="mt-8 justify-center" />
          </div>
        </div>
      </section>

      {/* CAPABILITY GALLERY */}
      <section className="border-t border-border py-16">
        <div className="mx-auto grid max-w-6xl gap-4 px-5 sm:grid-cols-2 lg:grid-cols-4">
          {[
            { img: IMAGES.appDev, title: "Mobile engineering" },
            { img: IMAGES.cloudInfra, title: "Cloud infrastructure" },
            { img: IMAGES.healthcare, title: "Health technology" },
            { img: IMAGES.training, title: "Computer training" },
          ].map((c) => (
            <figure key={c.title} className="panel overflow-hidden">
              <img
                src={c.img.url}
                alt={c.img.alt}
                loading="lazy"
                className="h-40 w-full object-cover opacity-90"
              />
              <figcaption className="px-4 py-3 text-sm font-medium">{c.title}</figcaption>
            </figure>
          ))}
        </div>
      </section>


      {/* WHAT WE BUILD */}
      <section id="what-we-build" className="scroll-mt-20 border-t border-border py-24">
        <div className="mx-auto max-w-6xl px-5">
          <SectionHead
            eyebrow="What We Build"
            title="Technology that moves people, businesses, and nations forward."
            copy="Gatavase designs and engineers digital systems that solve real problems. Our work blends AI intelligence, clean design and reliable engineering to create platforms that scale from local communities to global markets."
          />
          <div className="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {services.map((s) => (
              <article key={s.title} className="panel p-7">
                <span className="grid size-11 place-items-center rounded-lg bg-primary/12 text-primary">
                  <s.icon className="size-5" />
                </span>
                <h3 className="mt-5 text-lg font-semibold">{s.title}</h3>
                <p className="mt-2.5 text-sm leading-relaxed text-muted-foreground">{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* INDUSTRIES */}
      <section id="industries" className="scroll-mt-20 border-t border-border py-24 grid-lines">
        <div className="mx-auto max-w-6xl px-5">
          <SectionHead
            eyebrow="Industries & Impact"
            title="Serving the industries that shape everyday life."
            copy="Our solutions support organizations across Africa, the Middle East and beyond — from startups to schools, from creators to enterprises."
          />
          <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {industries.map((i) => (
              <div key={i.title} className="panel flex items-start gap-4 p-6">
                <i.icon className="mt-0.5 size-5 shrink-0 text-primary" />
                <div>
                  <h3 className="text-base font-semibold">{i.title}</h3>
                  <p className="mt-1 text-sm text-muted-foreground">{i.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DIVISIONS */}
      <section id="divisions" className="scroll-mt-20 border-t border-border py-24">
        <div className="mx-auto max-w-6xl px-5">
          <SectionHead
            eyebrow="Our Divisions"
            title="A unified corporation. Multiple powerful divisions."
            copy="Each Gatavase division focuses on a specific mission — from advanced technology to humanitarian impact."
          />
          <div className="mt-14 grid gap-5 md:grid-cols-2">
            {divisions.map((d) => (
              <Link key={d.title} to={d.to} className="panel block p-8">
                <h3 className="text-xl font-semibold">{d.title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{d.body}</p>
                <p className="mt-6 inline-flex items-center gap-2 font-mono text-xs tracking-wide text-primary">
                  {d.tag} <ArrowRight className="size-3.5" />
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* STORIES */}
      <section id="stories" className="scroll-mt-20 border-t border-border py-24">
        <div className="mx-auto max-w-6xl px-5">
          <SectionHead
            eyebrow="Stories from Gatavase"
            title="Real projects. Real impact."
            copy="Every solution we build is crafted with care, precision and purpose. Here are some of our ongoing achievements."
          />
          <div className="mt-14 grid gap-px overflow-hidden rounded-xl border border-border bg-border md:grid-cols-2">
            {stories.map((s, idx) => (
              <article key={s.title} className="bg-background p-8">
                <span className="font-mono text-xs text-primary">
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-3 text-lg font-semibold">{s.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* TECH */}
      <section className="border-t border-border py-24">
        <div className="mx-auto max-w-6xl px-5">
          <SectionHead
            eyebrow="Technology & Partners"
            title="Built with modern engineering and global standards."
            copy="We use reliable, scalable technologies to ensure every Gatavase product performs beautifully — today and in the future."
          />
          <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {stack.map((t) => (
              <div key={t.title} className="panel flex flex-col gap-4 p-6">
                <t.icon className="size-5 text-primary" />
                <p className="text-sm font-medium">{t.title}</p>
              </div>
            ))}
          </div>
          <p className="mt-8 text-sm text-muted-foreground">
            Modern UI/UX with clean, elegant African-futuristic design — 95%+ tested, containerized
            and delivered in two-week sprints.
          </p>
        </div>
      </section>

      {/* CTA */}
      <section className="border-t border-border hero-surface py-24">
        <div className="mx-auto max-w-6xl px-5 text-center">
          <h2 className="mx-auto max-w-2xl text-3xl font-bold md:text-4xl">
            Let's build something meaningful.
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
            Gatavase Corporation operates across Uganda and Qatar, serving clients and communities
            with dedication and clarity.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <Button asChild size="lg">
              <Link to="/demo-request">
                Start a Project <ArrowRight className="size-4" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" onClick={openGatavaseChat}>
              Talk to Gatavase
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

function SectionHead({
  eyebrow,
  title,
  copy,
}: {
  eyebrow: string;
  title: string;
  copy: string;
}) {
  return (
    <div className="max-w-3xl">
      <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">{eyebrow}</p>
      <h2 className="mt-4 text-3xl font-bold md:text-4xl">{title}</h2>
      <p className="mt-5 text-base leading-relaxed text-muted-foreground">{copy}</p>
    </div>
  );
}
