import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/container";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { industries } from "@/content/industries";
import { BLOG_POSTS } from "@/content/blog";
import { BLOG_CATEGORIES_LIST } from "@/lib/blog-categories-data";
import { AUTHORS_DATA } from "@/lib/authors-data";

export const metadata: Metadata = {
  title: "Sitemap",
  description:
    "A human-readable map of every public page on the Quto AI website — solutions, industries, blog, authors and more.",
  alternates: { canonical: "/sitemap" },
  robots: { index: false, follow: true },
};

function LinkList({ links }: { links: { label: string; href: string }[] }) {
  return (
    <ul className="mt-4 space-y-2">
      {links.map((l) => (
        <li key={l.href}>
          <Link
            href={l.href}
            className="text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
          >
            {l.label}
          </Link>
        </li>
      ))}
    </ul>
  );
}

function Group({
  heading,
  children,
}: {
  heading: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-2xl border border-border bg-card p-6">
      <h2 className="font-display text-sm font-semibold uppercase tracking-wider text-foreground">
        {heading}
      </h2>
      {children}
    </div>
  );
}

export default function SitemapPage() {
  return (
    <div className="pt-8 pb-20 md:pt-10">
      <Container>
        <Breadcrumbs items={[{ label: "Sitemap" }]} className="mb-8" />
        <h1 className="font-display text-[clamp(2rem,4vw,3rem)] font-semibold tracking-tight">
          Sitemap
        </h1>
        <p className="mt-3 max-w-2xl text-muted-foreground">
          Every public page on the site, in one place.
        </p>

        <div className="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <Group heading="Main">
            <LinkList
              links={[
                { label: "Home", href: "/" },
                { label: "Solutions", href: "/#solutions" },
                { label: "Industries", href: "/industries" },
                { label: "Blog", href: "/blog" },
                { label: "About", href: "/about" },
                { label: "Contact", href: "/contact" },
                { label: "Authors", href: "/author" },
              ]}
            />
          </Group>

          <Group heading="Industries">
            <LinkList
              links={industries.map((i) => ({
                label: i.name,
                href: `/industries/${i.slug}`,
              }))}
            />
          </Group>

          <Group heading="Blog categories">
            <LinkList
              links={BLOG_CATEGORIES_LIST.map((c) => ({
                label: c.name,
                href: `/blog/category/${c.slug}`,
              }))}
            />
          </Group>

          <Group heading="Authors">
            <LinkList
              links={AUTHORS_DATA.map((a) => ({
                label: a.name,
                href: `/author/${a.slug}`,
              }))}
            />
          </Group>

          <Group heading="Legal">
            <LinkList
              links={[
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Disclaimer", href: "/disclaimer" },
              ]}
            />
          </Group>

          <Group heading={`Blog posts (${BLOG_POSTS.length})`}>
            <div className="mt-4 max-h-80 space-y-2 overflow-y-auto pr-1">
              {BLOG_POSTS.map((p) => (
                <Link
                  key={p.slug}
                  href={`/blog/${p.slug}`}
                  className="block text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
                >
                  {p.title}
                </Link>
              ))}
            </div>
          </Group>
        </div>
      </Container>
    </div>
  );
}