import type { Metadata } from "next";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { guides } from "@/data/guides";
import { ArrowRight, BookOpen, Clock } from "lucide-react";

export const metadata: Metadata = {
  title: "Rehber — Yakınımda Arama İpuçları | yakınımda.tr",
  description:
    "Google arama trendlerine göre yakınımda aramaları için rehberler. Nöbetçi eczane, eczane, hastane ve daha fazlası.",
};

export default function RehberIndexPage() {
  const sorted = [...guides].sort((a, b) => (a.rank ?? 99) - (b.rank ?? 99));

  return (
    <>
      <Header />
      <main className="min-h-screen pt-28 pb-16">
        <div className="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <span className="inline-flex items-center gap-2 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">
              <BookOpen className="h-3.5 w-3.5" />
              SEO Rehberleri
            </span>
            <h1 className="mt-4 text-4xl font-extrabold text-white sm:text-5xl">
              Yakınımda <span className="text-gradient">Rehberleri</span>
            </h1>
            <p className="mt-4 text-lg text-slate-400">
              Google Türkiye trendlerine göre önceliklendirilmiş arama rehberleri
            </p>
          </div>

          <div className="mt-12 space-y-4">
            {sorted.map((guide, i) => (
              <Link
                key={guide.slug}
                href={`/rehber/${guide.slug}`}
                className="group flex gap-4 rounded-2xl border border-white/6 bg-white/3 p-5 transition-all hover:border-emerald-500/25 hover:bg-white/5"
              >
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-500/15 text-sm font-bold text-emerald-400">
                  {guide.rank ?? i + 1}
                </span>
                <div className="min-w-0 flex-1">
                  <h2 className="font-bold text-white group-hover:text-emerald-300">
                    {guide.title}
                  </h2>
                  <p className="mt-1 text-sm text-slate-500">{guide.description}</p>
                  <div className="mt-2 flex items-center gap-3 text-xs text-slate-600">
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
                      {guide.readTime}
                    </span>
                    <span>→ /{guide.categorySlug}</span>
                  </div>
                </div>
                <ArrowRight className="h-5 w-5 shrink-0 text-slate-600 transition-transform group-hover:translate-x-1 group-hover:text-emerald-400" />
              </Link>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}