import Image from "next/image";
import Link from "next/link";
import { getAllBolumler } from "@/lib/katalog";

/**
 * 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">
          <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>
  );
}