import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Compass, HeartHandshake, MapPin, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PublicPageLayout } from "@/components/public-page-layout";

const CANONICAL = "https://sms.gatavaseug.com/about";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Gatavase Bulky SMS — Business Messaging for Africa" },
      { name: "description", content: "Meet Gatavase Bulky SMS, a messaging product from Gatavase Corporation, built to help businesses connect with customers across Uganda and Africa." },
      { property: "og:title", content: "About Gatavase Bulky SMS" },
      { property: "og:description", content: "Business messaging tools from Gatavase Corporation, based in Kampala, Uganda." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: CANONICAL },
      { name: "twitter:card", content: "summary" },
    ],
    links: [{ rel: "canonical", href: CANONICAL }],
  }),
  component: AboutPage,
});

function AboutPage() {
  const principles = [
    { icon: MapPin, title: "Rooted in Uganda", text: "We build for the way businesses here work: mobile-first, practical, and connected to customers across networks." },
    { icon: HeartHandshake, title: "Made for useful conversations", text: "Campaigns work best when they are timely and relevant. Our tools help teams communicate clearly and responsibly." },
    { icon: ShieldCheck, title: "Clarity at every step", text: "From message composition to delivery reports, we aim to make the important parts of a campaign easier to understand." },
  ];

  return (
    <PublicPageLayout
      activePath="/about"
      eyebrow="About Gatavase"
      title="Technology that keeps business communication close."
      description="Gatavase Bulky SMS is a product of Gatavase Corporation. We help teams send useful updates, alerts, and campaigns to the people they serve."
    >
      <section className="container mx-auto grid max-w-7xl gap-12 px-5 py-14 sm:px-8 sm:py-20 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
        <div>
          <p className="text-sm font-semibold text-primary">Our story</p>
          <h2 className="mt-3 max-w-2xl font-display text-3xl font-bold tracking-tight sm:text-4xl">A local team, building for everyday connection.</h2>
          <p className="mt-5 max-w-2xl leading-7 text-muted-foreground">
            Based in Kampala, Uganda, Gatavase Corporation builds digital products for businesses and communities. Gatavase Bulky SMS brings messaging, contact tools, and campaign reporting together so teams can reach customers without losing the personal touch.
          </p>
          <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">
            We focus on reliable workflows that are straightforward to use, with support from people who understand the region and its mobile networks.
          </p>
          <div className="mt-7 flex flex-wrap gap-3">
            <Button asChild><Link to="/services">Explore our services <ArrowRight className="h-4 w-4" /></Link></Button>
            <Button asChild variant="outline"><Link to="/contact">Contact our team</Link></Button>
          </div>
        </div>
        <div className="relative overflow-hidden rounded-3xl border border-border bg-gradient-hero p-8 text-primary-foreground shadow-card sm:p-10">
          <div className="absolute -right-16 -top-16 h-52 w-52 rounded-full border border-primary-foreground/15" aria-hidden="true" />
          <Compass className="h-9 w-9" aria-hidden="true" />
          <p className="mt-8 text-xs font-semibold uppercase tracking-[0.18em] text-primary-foreground/75">Our focus</p>
          <p className="mt-3 max-w-md font-display text-2xl font-semibold leading-snug sm:text-3xl">Make clear communication easier for every growing team.</p>
          <div className="mt-8 flex flex-wrap gap-x-6 gap-y-3 text-sm text-primary-foreground/85">
            <span>Based in Kampala</span><span>Serving Uganda & Africa</span>
          </div>
        </div>
      </section>

      <section className="border-y border-border bg-muted/40">
        <div className="container mx-auto max-w-7xl px-5 py-14 sm:px-8 sm:py-18">
          <div className="max-w-2xl">
            <p className="text-sm font-semibold text-primary">What guides us</p>
            <h2 className="mt-2 font-display text-3xl font-bold tracking-tight sm:text-4xl">Useful, thoughtful, and made to grow.</h2>
          </div>
          <div className="mt-9 grid gap-5 md:grid-cols-3">
            {principles.map(({ icon: Icon, title, text }) => (
              <article key={title} className="rounded-2xl border border-border bg-card p-6 shadow-card">
                <span className="grid h-11 w-11 place-items-center rounded-xl bg-secondary text-primary"><Icon className="h-5 w-5" aria-hidden="true" /></span>
                <h3 className="mt-5 font-display text-lg font-semibold">{title}</h3>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">{text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </PublicPageLayout>
  );
}