import Image from "next/image";
import Link from "next/link";
import { Amiri_Quran } from "next/font/google";
import { PixelMark } from "@/components/pixel-decor";
import { getAllBolumler } from "@/lib/katalog";
import { cn } from "@/lib/utils";

// Yalnız footer'daki âyet için (DESIGN.md §3). Önceden yüklenmez: Arapça
// alt kümesi (~45 KB) âyet çizilirken bir kez iner, sonra önbellekten gelir.
const amiriQuran = Amiri_Quran({
  weight: "400",
  subsets: ["arabic"],
  preload: false,
});

/**
 * Site footer'ı: yasal metin + SEO iç link kolonları. Server component —
 * popüler bölümler listesi build sırasında katalogdan gelir. Layout'a değil
 * sayfalara eklenir; yazdırma çıktısı (rapor/yazdir) hariç her sayfada bu
 * footer kullanılır.
 */
export function SiteFooter() {
  const populerBolumler = [...getAllBolumler()]
    .sort((a, b) => b.programSayisi - a.programSayisi)
    .slice(0, 8);

  return (
    <footer className="border-t border-slate-200/70 pb-32 pt-12">
      <div className="mx-auto max-w-6xl px-4">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
          <nav aria-label="Popüler bölümler">
            <h2 className="text-sm font-semibold text-slate-900">
              Popüler Bölümler
            </h2>
            <ul className="mt-3 grid grid-cols-1 gap-1.5">
              {populerBolumler.map((b) => (
                <li key={b.slug}>
                  <Link
                    href={`/bolum/${b.slug}`}
                    className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                  >
                    {b.ad} Taban Puanları
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Keşfet">
            <h2 className="text-sm font-semibold text-slate-900">
              Keşfet
            </h2>
            <ul className="mt-3 space-y-1.5">
              <li>
                <Link
                  href="/#hero-form"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  YKS Tercih Robotu 2026
                </Link>
              </li>
              <li>
                <Link
                  href="/bolumler"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Bölüm Taban Puanları
                </Link>
              </li>
              <li>
                <Link
                  href="/universiteler"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Üniversite Taban Puanları
                </Link>
              </li>
              <li>
                <Link
                  href="/rehber"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Tercih Rehberi
                </Link>
              </li>
              <li>
                <Link
                  href="/meraklisina"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Meraklısına: Nasıl çalışır?
                </Link>
              </li>
            </ul>
          </nav>

          <nav aria-label="Rehber yazıları">
            <h2 className="text-sm font-semibold text-slate-900">
              Rehberden
            </h2>
            <ul className="mt-3 space-y-1.5">
              <li>
                <Link
                  href="/rehber/tercih-listesi-nasil-yapilir"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Tercih Listesi Nasıl Yapılır?
                </Link>
              </li>
              <li>
                <Link
                  href="/rehber/kac-siralama-ile-hangi-bolume-girebilirim"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Kaç Sıralama ile Hangi Bölüme Girebilirim?
                </Link>
              </li>
              <li>
                <Link
                  href="/rehber/olu-tercih-nedir"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Ölü Tercih Nedir?
                </Link>
              </li>
              <li>
                <Link
                  href="/rehber/ek-yerlestirme-2026"
                  className="text-sm text-slate-600 transition-colors hover:text-orange-500 hover:underline"
                >
                  Ek Yerleştirme Rehberi
                </Link>
              </li>
            </ul>
          </nav>
        </div>

        <div className="mt-10 border-t border-slate-200/70 pt-6 text-center text-sm leading-relaxed text-slate-500">
          {/* Hz. Mûsâ'nın göreve çıkarken ettiği dua (Tâhâ 25–26); sınav
              öncesi okunan dua da budur. "İşimi kolaylaştır" sitenin adıyla
              aynı dilekten. Arapça Diyanet mushafından, meal Diyanet İşleri
              mealinden harfi harfine; dua olarak okunduğu gibi baştaki
              "kâle" (dedi ki) alınmadı. */}
          <figure className="mx-auto mb-8 max-w-md">
            <blockquote>
              <p
                lang="ar"
                dir="rtl"
                className={cn(
                  amiriQuran.className,
                  "text-2xl leading-loose text-slate-900",
                )}
              >
                رَبِّ اشْرَحْ لٖي صَدْرٖيۙ وَيَسِّرْ لٖٓي اَمْرٖيۙ
              </p>
              <p className="mt-1 text-slate-600">
                “Rabbim! Gönlüme ferahlık ver. İşimi bana kolaylaştır.”
              </p>
            </blockquote>
            <figcaption className="mt-2 inline-flex items-center gap-1.5 text-xs text-slate-400">
              <PixelMark className="text-primary" />
              Tâhâ Sûresi 25–26 · Diyanet İşleri meali
            </figcaption>
          </figure>
          <p>
            © 2026 KolayTercih. Veriler resmî YÖK Atlas kaynağından derlenir;
            KolayTercih, ÖSYM veya YÖK ile bağlantılı değildir.
          </p>
          <p className="mt-2">
            KolayTercih bir karar destek aracıdır, yerleşme garantisi vermez.
            Tercih listenizin son hali ve başvuru sorumluluğu size aittir.
          </p>
          <nav
            aria-label="Yasal sayfalar"
            className="mt-4 flex flex-wrap items-center justify-center gap-4"
          >
            <Link
              href="/gizlilik"
              className="hover:text-slate-700 hover:underline"
            >
              Gizlilik & KVKK
            </Link>
            <Link
              href="/kosullar"
              className="hover:text-slate-700 hover:underline"
            >
              Kullanım & iade koşulları
            </Link>
            <Link
              href="/iletisim"
              className="hover:text-slate-700 hover:underline"
            >
              İletişim
            </Link>
          </nav>
          {/* iyzico işyeri sözleşmesi gereği: "iyzico ile Öde" + kart logoları
              sitede görünür olmalı. Resmî logo bandı (iyzico logo paketi). */}
          <Image
            src="/odeme/iyzico-logo-band.svg"
            alt="iyzico ile Öde — Mastercard, Visa, American Express ve Troy ile güvenli ödeme"
            width={429}
            height={32}
            className="mx-auto mt-6 h-6 w-auto"
          />
        </div>
      </div>
    </footer>
  );
}