import Link from "next/link";
import { constructMetadata } from "@/lib/seo";
import { getServiceDetailSlugs, getServiceDetail } from "@/data/service-details";
import { getAllIndustries } from "@/data/industries";
import { getAllProjects } from "@/data/projects";
import { getAllPosts } from "@/data/posts";
import { getAllRoles } from "@/data/careers";

export const metadata = constructMetadata({
  title: "Sitemap",
  description: "A complete map of every page on Cerkel — services, industries, work, insights and open roles.",
  path: "/sitemap",
});

/** Build the grouped link columns from our content data. */
function getColumns() {
  return [
    {
      title: "Explore",
      links: [
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Industries", href: "/industries" },
        { label: "Portfolio", href: "/portfolio" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "/careers" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Industries",
      links: getAllIndustries().map((i) => ({ label: i.name, href: `/industries/${i.slug}` })),
    },
    {
      title: "Services",
      links: getServiceDetailSlugs()
        .map((slug) => ({ slug, detail: getServiceDetail(slug) }))
        .filter((s) => s.detail)
        .map((s) => ({ label: s.detail.title, href: `/services/${s.slug}` })),
    },
    {
      title: "Case studies",
      links: getAllProjects().map((p) => ({ label: p.title, href: `/portfolio/${p.slug}` })),
    },
    {
      title: "Open roles",
      links: getAllRoles().map((r) => ({ label: r.title, href: `/careers/${r.id}` })),
    },
    {
      title: "From the blog",
      links: getAllPosts().map((p) => ({ label: p.title, href: `/blog/${p.slug}` })),
    },
  ];
}

export default function SitemapPage() {
  const columns = getColumns();

  return (
    <section className="relative overflow-hidden bg-background pb-16 pt-24 text-foreground md:pb-24 md:pt-32">
      <div className="pointer-events-none absolute left-1/2 top-0 h-72 w-[44rem] -translate-x-1/2 rounded-full bg-primary/[0.06] blur-[150px]" />
      <div className="container relative">
        {/* Header */}
        <div className="max-w-2xl">
          <span className="font-heading text-sm font-semibold uppercase tracking-wider text-primary">Sitemap</span>
          <h1 className="mt-3 font-heading text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
            Everything on{" "}
            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Cerkel.</span>
          </h1>
          <p className="mt-5 text-base leading-relaxed text-muted-foreground sm:text-lg">
            Every page in one place — browse our services, industries, work, insights and open roles.
          </p>
        </div>

        {/* Columns (masonry) */}
        <div className="mt-14 gap-x-10 sm:columns-2 lg:columns-3">
          {columns.map((col) => (
            <div key={col.title} className="mb-10 break-inside-avoid">
              <h2 className="font-heading text-sm font-semibold uppercase tracking-wider text-primary">{col.title}</h2>
              <ul className="mt-4 space-y-2.5">
                {col.links.map((l) => (
                  <li key={l.href}>
                    <Link href={l.href} className="group inline-flex items-start gap-2 text-sm leading-relaxed text-muted-foreground transition-colors duration-200 hover:text-foreground">
                      <span className="mt-2 h-1 w-1 shrink-0 rounded-full bg-border transition-colors duration-200 group-hover:bg-primary" />
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Footnote — XML sitemap for crawlers */}
        <p className="mt-6 border-t border-border pt-6 text-sm text-muted-foreground">
          Looking for the machine-readable version?{" "}
          <a href="/sitemap.xml" className="font-medium text-primary hover:underline">View the XML sitemap</a>.
        </p>
      </div>
    </section>
  );
}