import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Building2, Globe2, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { keywordMeta } from "@/lib/seo-keywords";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Gatavase Corporation — Founder, Divisions & Mission" },
      {
        name: "description",
        content:
          "Gatavase Corporation is a technology group founded by Kabogoza Fred Edwards, operating from Kampala and Doha through Gazman Advanced Technologies, Gatavase Messenger, Lil Gazman Music and Destiny & Divine Foundation.",
      },
      keywordMeta(["corporate", "geo", "impact", "software"]),
      { property: "og:title", content: "About Gatavase Corporation" },
      {
        property: "og:description",
        content:
          "Founded by Kabogoza Fred Edwards. Engineering, media and social impact divisions across Uganda and Qatar.",
      },
      { property: "og:url", content: "/about" },
    ],
    links: [{ rel: "canonical", href: "/about" }],
  }),
  component: AboutPage,
});

const subsidiaries = [
  {
    name: "Gazman Advanced Technologies Ltd",
    body: "The group's advanced engineering arm: AI, cloud, blockchain, security and enterprise systems for clients who cannot afford failure.",
    to: "/gazman-advanced-technologies",
  },
  {
    name: "Gatavase Messenger",
    body: "Secure, low-data messaging for individuals, teams and organisations, with private deployments for institutions.",
    to: "/gatavase-messenger",
  },
  {
    name: "Destiny & Divine Foundation",
    body: "The social impact arm — digital skills training, school and clinic support, and community welfare across Uganda.",
    to: "/destiny-and-divine-foundation",
  },
  {
    name: "Lil Gazman Music",
    body: "Music production, distribution and artist technology, giving African artists a professional route to a global audience.",
    to: "/lil-gazman-music",
  },
] as const;

const values = [
  {
    icon: Building2,
    title: "Build things that last",
    body: "We deliver systems our clients can still run, extend and audit years after handover.",
  },
  {
    icon: Globe2,
    title: "African engineering, global standard",
    body: "Work produced in Kampala and Doha is held to the same bar as any engineering team anywhere.",
  },
  {
    icon: Users,
    title: "Lift people as we grow",
    body: "Training, internships and community programmes are part of the business model, not a side project.",
  },
];

function AboutPage() {
  return (
    <>
      <section className="hero-surface border-b border-border">
        <div className="mx-auto max-w-6xl px-5 py-20 md:py-24">
          <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">About Us</p>
          <h1 className="mt-4 max-w-3xl text-4xl font-bold md:text-5xl">
            A technology group built in Africa, engineered for the world.
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
            Gatavase Corporation designs and delivers AI systems, software, mobile products, secure
            infrastructure and media technology — from our headquarters in Kampala, Uganda and our
            base in Doha, Qatar.
          </p>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-5 py-20">
        <div className="grid gap-12 lg:grid-cols-[1fr_0.9fr]">
          <div>
            <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">Leadership</p>
            <h2 className="mt-4 text-3xl font-bold">Kabogoza Fred Edwards</h2>
            <p className="mt-2 text-sm font-medium text-primary">Founder & Chief Executive Officer</p>
            <div className="mt-6 space-y-4 leading-relaxed text-muted-foreground">
              <p>
                Kabogoza Fred Edwards founded Gatavase Corporation on a straightforward conviction:
                that world-class technology can be conceived, engineered and supported from Uganda —
                and that the returns should be visible in the communities the company grows from.
              </p>
              <p>
                Under his leadership the group has grown from a single engineering practice into a
                multi-division corporation spanning advanced technology, secure communication,
                creative media and social impact, serving clients across East Africa and the Gulf.
              </p>
              <p>
                He remains directly involved in how work is delivered: written scope, honest
                estimates, documented handover, and a refusal to sell clients systems they do not
                need.
              </p>
            </div>
          </div>

          <div className="grid gap-5 self-start">
            {values.map((v) => (
              <div key={v.title} className="panel p-7">
                <v.icon className="size-5 text-primary" />
                <h3 className="mt-4 text-lg font-semibold">{v.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-y border-border bg-[color-mix(in_oklab,var(--surface)_45%,transparent)]">
        <div className="mx-auto max-w-6xl px-5 py-20">
          <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">
            Subsidiaries & Divisions
          </p>
          <h2 className="mt-4 max-w-2xl text-3xl font-bold">
            One corporation, four focused organisations.
          </h2>
          <div className="mt-12 grid gap-5 md:grid-cols-2">
            {subsidiaries.map((s) => (
              <Link key={s.name} to={s.to} className="panel block p-8">
                <h3 className="text-xl font-semibold">{s.name}</h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{s.body}</p>
                <p className="mt-6 inline-flex items-center gap-2 font-mono text-xs text-primary">
                  Learn more <ArrowRight className="size-3.5" />
                </p>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-5 py-20">
        <div className="grid gap-8 md:grid-cols-2">
          <div className="panel p-8">
            <h2 className="text-xl font-semibold">Kampala Headquarters</h2>
            <p className="mt-3 text-sm text-muted-foreground">
              Muyenga-Bukasa, Plot 68, Kampala, Uganda
            </p>
            <p className="mt-1 text-sm text-muted-foreground">+256 773 231138</p>
          </div>
          <div className="panel p-8">
            <h2 className="text-xl font-semibold">Doha Office</h2>
            <p className="mt-3 text-sm text-muted-foreground">Abu Nakhla, Al Rayyan, Qatar</p>
            <p className="mt-1 text-sm text-muted-foreground">+974 3320 1668</p>
          </div>
        </div>

        <div className="panel mt-10 flex flex-col items-start gap-6 p-10 md:flex-row md:items-center md:justify-between">
          <div>
            <h2 className="text-2xl font-bold">Work with Gatavase</h2>
            <p className="mt-2 max-w-xl text-sm text-muted-foreground">
              Tell us what you are trying to build and we will tell you honestly what it takes.
            </p>
          </div>
          <Button asChild size="lg" className="shrink-0">
            <Link to="/contact">
              Start a Project <ArrowRight className="size-4" />
            </Link>
          </Button>
        </div>
      </section>
    </>
  );
}
