import type { Metadata } from "next";
import { ArrowRight, Mail } from "lucide-react";
import { Parallax } from "@/components/parallax";
import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor";
import { SiteFooter } from "@/components/site-footer";
import { Kbd } from "@/components/ui/kbd";
import { SURUM } from "@/lib/surum";
import { sayfaMetadata } from "@/lib/seo";

export const metadata: Metadata = sayfaMetadata({
  title: "Sürüm notları",
  description:
    "KolayTercih beta sürüm notları: neler değişti, neler geliyor ve geri bildirimini nasıl iletirsin.",
  path: "/surum-notlari",
});

/**
 * Sürüm günlüğü. En yeni en üstte; her sürüm package.json'daki numarayla
 * aynı adı taşır (AGENTS.md "Sürümleme"). Yeni bir sürüm çıkarken buraya bir
 * kayıt eklenir; "Geliyor" listesi bitenlerden arındırılır.
 */
const SURUMLER: {
  surum: string;
  tarih: string;
  baslik: string;
  maddeler: string[];
}[] = [
  {
    surum: "1.1.0",
    tarih: "7 Ekim 2026",
    baslik: "Tema kısayolu ve sürüm notları",
    maddeler: [
      "D tuşu açık / koyu temayı değiştirir; geçiş logodan yayılarak yumuşak oynar.",
      "Bu sayfa: beta durumu, sürüm günlüğü ve geri bildirim adresi. Header'daki Beta rozeti buraya getirir.",
    ],
  },
  {
    surum: "1.0.0",
    tarih: "7 Ekim 2026",
    baslik: "Beta açılışı",
    maddeler: [
      "Sıralama, alan, il ve devlet/vakıf tercihine göre 24 tercihlik dengeli liste: hayal, dengeli ve güvenli dilimler.",
      "Her program için YÖK Atlas verisinden taban sıralama, kontenjan ve yıllara göre eğilim.",
      "Yapay zekâ destekli tercih raporu ve liste üzerinde soru sorabildiğin danışman sohbeti.",
      "Üniversite ve bölüm kataloğu, üniversite sıralamaları, rehber yazıları.",
      "Açık, koyu ve sistem teması.",
    ],
  },
];

const GELIYOR = [
  "Listeni PDF olarak indirme ve paylaşma.",
  "Yerleşme sonuçları açıklandığında listenin gerçekleşme karnesi.",
  "Veli görünümü: listeyi birlikte inceleyip not bırakma.",
];

export default function SurumNotlariPage() {
  return (
    <>
      <main className="mx-auto w-full max-w-2xl px-4 py-16">
        <SectionEyebrow>Beta · v{SURUM}</SectionEyebrow>
        <Parallax fromStart strength={10}>
          <h1 className="mt-4 font-heading text-3xl font-bold">Sürüm notları</h1>
        </Parallax>
        <PagePixelDivider seed={61} className="mt-6" />

        <section
          aria-labelledby="beta-baslik"
          className="mt-6 rounded-2xl border border-slate-200 bg-card p-5 shadow-xs sm:p-6"
        >
          <h2 id="beta-baslik" className="font-heading text-xl font-bold">
            KolayTercih şu an beta sürümünde
          </h2>
          <p className="mt-3 text-sm leading-7 text-slate-700">
            Ürün çalışıyor ve gerçek YÖK Atlas verisiyle liste üretiyor; ama
            hâlâ her gün bir şeyler düzeltiyor, eksik gördüğümüz yerleri
            tamamlıyoruz. Bir hata, yanlış bir sayı, anlaşılmayan bir ekran
            ya da “keşke şöyle olsa” dediğin bir şey görürsen bize yaz: her
            geri bildirim okunur ve çoğu bir sonraki sürüme girer.
          </p>
          <a
            href="mailto:destek@kolaytercih.com?subject=KolayTercih%20beta%20geri%20bildirimi"
            className="mt-5 inline-flex items-center gap-2 rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-slate-50 transition-[background-color,transform] duration-150 hover:bg-slate-700 active:scale-[0.97]"
          >
            <Mail className="size-4" aria-hidden />
            Geri bildirim gönder
            <ArrowRight className="size-4" aria-hidden />
          </a>
          <p className="mt-3 text-xs text-slate-500">
            destek@kolaytercih.com · Hangi sayfada, hangi sıralamayla ne
            gördüğünü yazarsan daha hızlı çözeriz. Kart bilgini asla e-postayla
            paylaşma.
          </p>
        </section>

        <section aria-labelledby="gunluk-baslik" className="mt-12">
          <h2 id="gunluk-baslik" className="font-heading text-xl font-bold">
            Neler değişti
          </h2>
          <ol className="mt-4 space-y-8">
            {SURUMLER.map((s) => (
              <li key={s.surum} className="relative pl-6">
                <span
                  aria-hidden
                  className="absolute top-2 left-0 size-2.5 rounded-[2px] bg-primary"
                />
                <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                  <h3 className="font-heading text-lg font-bold tabular-nums">
                    v{s.surum}
                  </h3>
                  <span className="text-sm font-semibold text-slate-700">
                    {s.baslik}
                  </span>
                  <time className="text-xs text-slate-500">{s.tarih}</time>
                </div>
                <ul className="mt-3 list-disc space-y-1.5 pl-5 text-sm leading-7 text-slate-700">
                  {s.maddeler.map((m) => (
                    <li key={m}>{m}</li>
                  ))}
                </ul>
              </li>
            ))}
          </ol>
        </section>

        <section aria-labelledby="geliyor-baslik" className="mt-12">
          <h2 id="geliyor-baslik" className="font-heading text-xl font-bold">
            Sırada ne var
          </h2>
          <ul className="mt-4 list-disc space-y-1.5 pl-5 text-sm leading-7 text-slate-700">
            {GELIYOR.map((m) => (
              <li key={m}>{m}</li>
            ))}
          </ul>
          <p className="mt-4 text-xs text-slate-500">
            Sıra geri bildirimle değişir; en çok istenen öne alınır.
          </p>
        </section>

        <p className="mt-12 flex flex-wrap items-center gap-1.5 text-xs text-slate-500">
          İpucu: <Kbd>D</Kbd> açık / koyu temayı değiştirir,
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd> aramayı açar.
        </p>
      </main>
      <SiteFooter />
    </>
  );
}