import { createFileRoute, Link } from "@tanstack/react-router";
import { FOOTER_GROUPS } from "@/lib/site-content";
import { keywordMeta } from "@/lib/seo-keywords";

export const Route = createFileRoute("/site-map")({
  head: () => ({
    meta: [
      { title: "Site Map — Gatavase Corporation" },
      {
        name: "description",
        content:
          "Every page on the Gatavase Corporation website: services, products, divisions, company information, blog and legal pages.",
      },
      keywordMeta(["corporate", "web", "geo"]),
      { property: "og:title", content: "Site Map — Gatavase Corporation" },
      {
        property: "og:description",
        content: "Browse every section of the Gatavase Corporation website.",
      },
      { property: "og:url", content: "/site-map" },
    ],
    links: [{ rel: "canonical", href: "/site-map" }],
  }),
  component: SiteMapPage,
});

function SiteMapPage() {
  return (
    <section className="mx-auto max-w-6xl px-5 py-20">
      <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">Navigation</p>
      <h1 className="mt-4 text-4xl font-bold">Site Map</h1>
      <p className="mt-4 max-w-2xl text-muted-foreground">
        Every public page on this website. The machine-readable version lives at{" "}
        <a href="/sitemap.xml" className="text-primary underline">
          /sitemap.xml
        </a>
        .
      </p>

      <div className="mt-14 grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
        {FOOTER_GROUPS.map((group) => (
          <div key={group.label}>
            <h2 className="text-sm font-semibold">{group.label}</h2>
            <ul className="mt-4 space-y-2">
              {group.links.map((link) => (
                <li key={link.to}>
                  <Link to={link.to} className="text-sm text-muted-foreground hover:text-foreground">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
        <div>
          <h2 className="text-sm font-semibold">Main</h2>
          <ul className="mt-4 space-y-2">
            <li>
              <Link to="/" className="text-sm text-muted-foreground hover:text-foreground">
                Home
              </Link>
            </li>
            <li>
              <Link to="/blog" className="text-sm text-muted-foreground hover:text-foreground">
                Blog
              </Link>
            </li>
            <li>
              <Link to="/contact" className="text-sm text-muted-foreground hover:text-foreground">
                Contact Us
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}
