import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { getAllRehberler } from "@/lib/rehber";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { CtaSiraForm } from "@/components/cta-sira-form";
import { RehberKapak } from "@/components/rehber-kapak";
import { SiteFooter } from "@/components/site-footer";
import { PagePixelDivider } from "@/components/pixel-decor";

export const metadata: Metadata = {
  title: "Tercih Rehberi 2026 — YKS Tercih Dönemi Yazıları",
  description:
    "YKS tercih dönemi rehberi: tercih listesi nasıl yapılır, ölü tercih nedir, ek yerleştirme nasıl işler, sıralama mı puan mı — hepsi öğrenci diliyle.",
  alternates: { canonical: "/rehber" },
};

export default function RehberIndexPage() {
  const yazilar = getAllRehberler();

  return (
    <>
    <main className="mx-auto w-full max-w-6xl px-4 py-12 sm:py-16">
      <JsonLd
        data={breadcrumbJsonLd([
          { name: "Ana Sayfa", path: "/" },
          { name: "Rehber", path: "/rehber" },
        ])}
      />

      <h1 className="font-heading text-3xl font-bold text-slate-900 sm:text-4xl">
        Tercih Rehberi
      </h1>
      <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
        Tercih döneminin en çok sorulan soruları, veriye dayalı ve öğrenci
        diliyle. Panik yok, pazarlama yok — sadece işine yarayacak bilgi.
      </p>

      <PagePixelDivider seed={11} className="mt-8" />

      <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
        {yazilar.map((y) => (
          <li key={y.slug} className="mb-5 break-inside-avoid">
            <Link
              href={`/rehber/${y.slug}`}
              className="block overflow-hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
            >
              <RehberKapak
                baslik={y.baslik}
                compact
                className="rounded-[1.15rem]"
              />
              <div className="px-3 pb-3 pt-4">
                <p className="text-sm leading-6 text-slate-600">
                  {y.aciklama}
                </p>
                <span className="mt-4 inline-flex items-center gap-1.5 font-bricolage text-sm font-semibold text-primary">
                  Yazıyı oku
                  <ArrowRight
                    className="size-4"
                    aria-hidden
                  />
                </span>
              </div>
            </Link>
          </li>
        ))}
      </ul>

      <div className="mx-auto mt-16 max-w-3xl">
        <CtaSiraForm />
      </div>
    </main>
    <SiteFooter />
    </>
  );
}
