import type { Metadata } from "next";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CategoryIcon from "@/lib/category-icons";
import { cities } from "@/data/cities";
import { categories } from "@/data/categories";
import { MapPin, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Şehirler — Yakınımda Arama | yakınımda.tr",
  description:
    "İstanbul, Ankara, İzmir ve tüm büyük şehirlerde yakınımda aramalar. Şehir bazlı kategori sayfaları.",
};

export default function SehirlerPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen pt-28 pb-16">
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-2xl text-center">
            <span className="inline-flex rounded-full border border-emerald-500/20 bg-emerald-500/8 px-3.5 py-1 text-xs font-semibold uppercase tracking-widest text-emerald-400">
              {cities.length} Şehir
            </span>
            <h1 className="mt-4 text-4xl font-extrabold text-white sm:text-5xl">
              Şehirlere Göre <span className="text-gradient">Yakınımda</span>
            </h1>
            <p className="mt-4 text-lg text-slate-400">
              Her şehir için {categories.length} kategori — SEO ve yerel arama için optimize
              edilmiş statik sayfalar.
            </p>
          </div>

          <div className="mt-14 space-y-12">
            {cities.map((city) => (
              <section
                key={city.slug}
                className="overflow-hidden rounded-2xl border border-white/6 bg-white/2"
              >
                <div className="flex flex-wrap items-center justify-between gap-4 border-b border-white/5 px-6 py-5">
                  <div className="flex items-center gap-3">
                    <MapPin className="h-6 w-6 text-emerald-400" />
                    <div>
                      <h2 className="text-xl font-bold text-white">{city.name}</h2>
                      <p className="text-sm text-slate-500">{city.population} · {city.districts.length} ilçe</p>
                    </div>
                  </div>
                  <Link
                    href={`/sehir/${city.slug}/nobetci-eczane`}
                    className="flex items-center gap-1 text-sm font-semibold text-emerald-400 hover:text-emerald-300"
                  >
                    Nöbetçi eczane
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
                <div className="grid grid-cols-2 gap-2 p-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
                  {categories.map((cat) => (
                    <Link
                      key={cat.slug}
                      href={`/sehir/${city.slug}/${cat.slug}`}
                      className="flex items-center gap-2 rounded-xl border border-white/5 bg-white/3 px-3 py-2.5 text-sm text-slate-300 transition-all hover:border-emerald-500/25 hover:text-white"
                    >
                      <CategoryIcon name={cat.icon} className="h-4 w-4 shrink-0 text-emerald-400" />
                      <span className="truncate">{cat.title}</span>
                    </Link>
                  ))}
                </div>
              </section>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}