import { Suspense } from "react";
import Link from "next/link";
import type { Metadata } from "next";
import { SectionEyebrow } from "@/components/pixel-decor";
import { Parallax } from "@/components/parallax";
import { SiteFooter } from "@/components/site-footer";
import {
  PaketSatinAl,
  PaketSatinAlSkeleton,
} from "@/features/odeme/components/paket-satinal";
import { sayfaMetadata } from "@/lib/seo";

export const metadata: Metadata = sayfaMetadata({
  title: "Tercih Dönemi Paketi",
  description:
    "Tek seferlik Tercih Dönemi Paketi: yapay zekâ destekli kişisel 24 tercihlik liste, risk analizi, liste revizyonları ve soru hakkı. Abonelik yok.",
  path: "/paket",
});

export default function PaketPage({
  searchParams,
}: {
  searchParams: Promise<{ hata?: string }>;
}) {
  return (
    <div className="flex min-h-screen flex-col bg-slate-50 text-slate-900">
      <main className="mx-auto w-full max-w-3xl flex-1 px-4 py-16">
        {/* Ödeme callback'i doğrulama hatasında buraya ?hata=token|siparis ile
            döner; hata yokken hiçbir şey çizilmez — fallback bilerek boş. */}
        <Suspense fallback={null}>
          {searchParams.then(({ hata }) =>
            hata === "token" || hata === "siparis" ? (
              <div
                role="alert"
                className="mb-8 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800"
              >
                Ödemen doğrulanamadı. Kartından çekim yapıldıysa kredilerin
                birkaç dakika içinde otomatik tanımlanır; tanımlanmazsa
                aşağıdan tekrar deneyebilirsin — çekim yapılmadıysa hiçbir
                ücret ödemedin.
              </div>
            ) : null,
          )}
        </Suspense>
        <Parallax fromStart strength={12} className="text-center">
          <SectionEyebrow>Tek seferlik ödeme · Abonelik yok</SectionEyebrow>
          <h1 className="mt-4 font-heading text-3xl font-bold sm:text-4xl">
            İnsan danışmanın işini,{" "}
            <span className="text-primary">onda bir fiyatına</span>
          </h1>
          <p className="mx-auto mt-3 max-w-xl text-slate-600">
            Tercih danışmanları bu dönemde 2.000–10.000 TL alıyor. KolayTercih
            aynı işi gerçek YÖK Atlas verisiyle, dakikalar içinde yapar.
          </p>
        </Parallax>

        <Suspense fallback={<PaketSatinAlSkeleton />}>
          <PaketSatinAl />
        </Suspense>

        <p className="mt-10 text-center text-xs leading-relaxed text-slate-500">
          KolayTercih bir karar destek aracıdır; öneriler resmî YÖK Atlas
          verisine dayanır ancak yerleşme garantisi verilmez. Tercih
          listesinin nihai sorumluluğu adaya aittir. Sorun mu var?{" "}
          <Link href="/iletisim" className="underline hover:text-slate-700">
            Bize yaz
          </Link>
          .
        </p>
      </main>
      <SiteFooter />
    </div>
  );
}