import type { Metadata } from "next";
import Link from "next/link";
import StaticPageLayout from "@/components/layout/StaticPageLayout";
import { categories } from "@/data/categories";
import { cities } from "@/data/cities";
import { guides } from "@/data/guides";
import { sampleBusinesses } from "@/data/sample-businesses";

export const metadata: Metadata = {
  title: "Site Haritası | yakınımda.tr",
  description: "yakınımda.tr tüm sayfaların listesi.",
};

const staticPages = [
  { href: "/", label: "Ana Sayfa" },
  { href: "/kategoriler", label: "Kategoriler" },
  { href: "/sehirler", label: "Şehirler" },
  { href: "/rehber", label: "Rehber" },
  { href: "/nasil-calisir", label: "Nasıl Çalışır" },
  { href: "/sss", label: "SSS" },
  { href: "/hakkimizda", label: "Hakkımızda" },
  { href: "/iletisim", label: "İletişim" },
  { href: "/gizlilik-politikasi", label: "Gizlilik Politikası" },
  { href: "/kullanim-kosullari", label: "Kullanım Koşulları" },
  { href: "/cerez-politikasi", label: "Çerez Politikası" },
  { href: "/kvkk", label: "KVKK" },
];

export default function SiteHaritasiPage() {
  return (
    <StaticPageLayout
      badge="Navigasyon"
      title="Site Haritası"
      subtitle={`${staticPages.length + categories.length + cities.length * categories.length + guides.length + sampleBusinesses.length}+ sayfa`}
      breadcrumbs={[{ label: "Site Haritası" }]}
    >
      <section className="mb-10">
        <h2 className="mb-4 text-lg font-bold text-white">Ana Sayfalar</h2>
        <ul className="grid gap-2 sm:grid-cols-2">
          {staticPages.map((p) => (
            <li key={p.href}>
              <Link href={p.href} className="text-emerald-400 hover:text-emerald-300">
                {p.label}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section className="mb-10">
        <h2 className="mb-4 text-lg font-bold text-white">Kategoriler ({categories.length})</h2>
        <ul className="grid gap-2 sm:grid-cols-2 md:grid-cols-3">
          {categories.map((c) => (
            <li key={c.slug}>
              <Link href={`/${c.slug}`} className="text-slate-400 hover:text-emerald-400">
                {c.searchTitle}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section className="mb-10">
        <h2 className="mb-4 text-lg font-bold text-white">Rehber Yazıları ({guides.length})</h2>
        <ul className="space-y-2">
          {guides.map((g) => (
            <li key={g.slug}>
              <Link href={`/rehber/${g.slug}`} className="text-slate-400 hover:text-emerald-400">
                {g.title}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section className="mb-10">
        <h2 className="mb-4 text-lg font-bold text-white">Örnek İşletmeler</h2>
        <ul className="space-y-2">
          {sampleBusinesses.map((b) => (
            <li key={b.slug}>
              <Link href={`/isletme/${b.slug}`} className="text-slate-400 hover:text-emerald-400">
                {b.name} — {b.city}
              </Link>
            </li>
          ))}
        </ul>
      </section>

      <section>
        <h2 className="mb-4 text-lg font-bold text-white">
          Şehir + Kategori ({cities.length} × {categories.length} = {cities.length * categories.length})
        </h2>
        <p className="mb-4 text-sm text-slate-500">
          Tüm kombinasyonlar için <Link href="/sehirler">Şehirler</Link> sayfasına bakın.
        </p>
        <ul className="grid gap-2 sm:grid-cols-2">
          {cities.map((city) => (
            <li key={city.slug}>
              <Link
                href={`/sehir/${city.slug}/nobetci-eczane`}
                className="text-slate-400 hover:text-emerald-400"
              >
                {city.name} — tüm kategoriler
              </Link>
            </li>
          ))}
        </ul>
      </section>
    </StaticPageLayout>
  );
}