import { Suspense } from "react";
import type { Metadata } from "next";
import { JsonLd, breadcrumbJsonLd } from "@/lib/seo";
import { CtaSiraForm } from "@/features/sihirbaz/components/cta-sira-form";
import { SiteFooter } from "@/components/site-footer";
import { PagePixelDivider } from "@/components/pixel-decor";
import {
  RehberListesi,
  RehberListesiSkeleton,
} from "@/features/rehber/components/rehber-listesi";

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() {
  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" />

        <Suspense fallback={<RehberListesiSkeleton />}>
          <RehberListesi />
        </Suspense>

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