import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Lock, Mail, Server, Users } from "lucide-react";

export const Route = createFileRoute("/gatamail")({
  head: () => ({
    meta: [
      { title: "GataMail — Secure Business Email by Gatavase Corporation" },
      {
        name: "description",
        content:
          "GataMail is Gatavase Corporation's secure business email platform: encrypted delivery, custom domains, shared team inboxes and African-hosted infrastructure.",
      },
      { property: "og:title", content: "GataMail — Secure Business Email by Gatavase" },
      {
        property: "og:description",
        content:
          "Encrypted business email with custom domains, shared inboxes and admin controls, built for teams across Africa and the Gulf.",
      },
      { property: "og:url", content: "/gatamail" },
    ],
    links: [{ rel: "canonical", href: "/gatamail" }],
  }),
  component: GataMail,
});

const features = [
  {
    icon: Lock,
    title: "Encrypted by default",
    body: "TLS in transit, encrypted storage at rest, spam and phishing filtering on every message.",
  },
  {
    icon: Mail,
    title: "Your domain, your identity",
    body: "name@yourcompany.com with DKIM, SPF and DMARC configured for reliable inbox delivery.",
  },
  {
    icon: Users,
    title: "Shared team inboxes",
    body: "Sales, support and billing inboxes with assignment, notes and response tracking.",
  },
  {
    icon: Server,
    title: "Admin console",
    body: "Create accounts, enforce two-factor, set retention and export mail on demand.",
  },
];

function GataMail() {
  return (
    <>
      <section className="border-b border-border hero-surface">
        <div className="mx-auto max-w-6xl px-5 py-20 md:py-28">
          <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">Products</p>
          <h1 className="mt-4 max-w-3xl text-4xl font-bold md:text-5xl">
            GataMail — <span className="text-gradient">secure business email</span> for serious teams
          </h1>
          <p className="mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
            Professional email on your own domain, hosted and supported by Gatavase Corporation.
            Built for organisations that need reliability, privacy and local support in Kampala and
            Doha.
          </p>
          <div className="mt-9 flex flex-wrap gap-3">
            <Link
              to="/demo-request"
              className="inline-flex items-center gap-2 rounded-full bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground"
            >
              Request GataMail access <ArrowRight className="size-4" />
            </Link>
            <Link
              to="/contact"
              className="inline-flex items-center gap-2 rounded-full border border-input px-6 py-3 text-sm font-semibold"
            >
              Talk to sales
            </Link>
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="mx-auto grid max-w-6xl gap-5 px-5 md:grid-cols-2">
          {features.map((f) => (
            <article key={f.title} className="panel p-7">
              <span className="grid size-11 place-items-center rounded-lg bg-primary/12 text-primary">
                <f.icon className="size-5" />
              </span>
              <h2 className="mt-5 text-lg font-semibold">{f.title}</h2>
              <p className="mt-2.5 text-sm leading-relaxed text-muted-foreground">{f.body}</p>
            </article>
          ))}
        </div>
      </section>
    </>
  );
}
