import {
  ArrowRight,
  ArrowUpRight,
  Coins,
  FileText,
  ListChecks,
  MessageCircleQuestion,
  RefreshCcw,
  ShieldCheck,
} from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
import { AdimAkisi } from "@/features/pazarlama/components/adim-akisi";
import { BolumGecisi } from "@/features/pazarlama/components/bolum-gecisi";
import { ComparisonCell } from "@/features/pazarlama/components/landing-parcalari";
import { HeroBaslik } from "@/features/pazarlama/components/hero-baslik";
import { KapanisCta } from "@/features/pazarlama/components/hero-focus-button";
import { HeroForm } from "@/features/sihirbaz/components/hero-form";
import { Parallax } from "@/components/parallax";
import { Reveal } from "@/features/pazarlama/components/reveal";
import { SayanSayi } from "@/features/pazarlama/components/sayan-sayi";
import { SorunSahnesi } from "@/features/pazarlama/components/sorun-sahneleri";
import { SosyalKanitBandi } from "@/features/pazarlama/components/sosyal-kanit";
import { TurkeyPixelMap } from "@/features/pazarlama/components/turkey-pixel-map";
import { SuzulenHaplar } from "@/features/pazarlama/components/suzulen-haplar";
import { VeriAkisi } from "@/features/pazarlama/components/veri-akisi";
import { katalogHaplari } from "@/features/pazarlama/landing-verisi";
import { SectionEyebrow } from "@/components/pixel-decor";
import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
import { URUNLER } from "@/lib/credits";
import {
  PROGRAM_SAYISI_CUMLE,
  PROGRAM_SAYISI_METNI,
  VERI_YIL_SAYISI,
} from "@/lib/veri-kapsami";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { Metadata } from "next";
import {
  JsonLd,
  faqPageJsonLd,
  softwareApplicationJsonLd,
} from "@/lib/seo";
import { SiteFooter } from "@/components/site-footer";

export const metadata: Metadata = {
  alternates: { canonical: "/" },
};

const PAKET_FIYATI = (URUNLER.paket.amountKurus / 100).toLocaleString("tr-TR", {
  maximumFractionDigits: 0,
});
const TOPUP_FIYATI = (URUNLER.topup.amountKurus / 100).toLocaleString("tr-TR", {
  maximumFractionDigits: 0,
});

// Bölüm ritmi (DESIGN.md §5.1; Bilal, 11 Eki 2026: "section'lar arası es yok,
// her şey çok sıkışık"). Bölümler arasında piksel şeridi durur (§4.38) ve
// çevresinde boşluk ister: şerit üst bölümün içeriğinden uzak, alt bölümün
// rozetine yakındır — bir bölümü bitirip sıradakine iner. Alt boşluk bu yüzden
// üsttekinden bir kademe büyük. Şerit geçiş çizgisinin iki yanına telefonda
// 56, sm'den itibaren 75 px taşar; kalan nefes telefonda 56/40, sm'de 85/53,
// lg'de 101/69 px (üst bölüme/alt bölüme).
const BOLUM_BOSLUGU = "pt-24 pb-28 sm:pt-32 sm:pb-40 lg:pt-36 lg:pb-44";

// Sorun kartlarının piksel sahneleri (DESIGN.md §4.31, §4.38): hero haritasıyla
// aynı ızgara dili. Her biri kartın söylediğini hareketle çizer: binlerce
// programın içinde ısınıp sönen tam 24 seçim; her yıl bir sola kayan, sağdan
// başka boyda gelen çubuklar; basamak basamak tırmanan fiyat. Izgaralar
// `sorun-sahneleri.tsx`te.
const problems = [
  {
    sahne: "ihtimal",
    title: "24 tercih, binlerce ihtimal",
    description: `${PROGRAM_SAYISI_CUMLE} lisans ve önlisans programı arasından sana uyan 24 tanesini doğru sırayla dizmek, tablolarla boğuşarak günler alıyor.`,
  },
  {
    sahne: "yillar",
    title: "Geçen yılın puanı yetmiyor",
    description:
      "Taban sıralamaları her yıl kayıyor; tek yıla bakmak riski gizler.",
  },
  {
    sahne: "fiyat",
    title: "Danışman lüks haline geldi",
    description:
      "Armut'ta tercih danışmanlığı ilanları ortalama 1.000–3.000 TL (Eylül 2026). Ücretsiz robotların çoğu ise yalnızca liste filtreliyor; listeyi kurup gerekçesini yazmıyor.",
  },
] as const;

const steps = [
  {
    no: 1,
    baslik: "Sıralamanı ve hedeflerini anlat",
    aciklama:
      "YKS başarı sıralamanı gir; sıralamana uygun ilgi alanı, şehir ve üniversite tercihlerini birkaç adımda işaretle.",
  },
  {
    no: 2,
    baslik: `Son ${VERI_YIL_SAYISI} yılın resmî verisi taransın`,
    aciklama:
      "YÖK Atlas'ın taban sıralaması trendleri, kontenjan değişimleri ve doluluk oranları sıralamana göre elensin; yapay zekâ yalnızca bu havuzdan seçer, dışına çıkamaz.",
  },
  {
    no: 3,
    baslik: "Dengeli 24'lük listeni al",
    aciklama:
      "Hayal, dengeli ve güvenli dilimlerine dağıtılmış, her satırı gerekçeli tercih listeni indir; aklına takılanı listen üzerinden yapay zekâya sor.",
  },
] as const;

// "Nasıl çalışır"da akışın yanında duran üç sayı (DESIGN.md §4.28).
const veriSayilari = [
  { value: PROGRAM_SAYISI_METNI, label: "Taranan lisans ve önlisans programı" },
  {
    value: String(VERI_YIL_SAYISI),
    birim: "yıl",
    label: "Taban sıralaması trend verisi",
  },
  { value: "%100", label: "Resmî YÖK Atlas kaynağı" },
];

const faqs = [
  {
    question: "KolayTercih'in önerileri neye dayanıyor?",
    answer: `Tüm öneriler YÖK Atlas'ın resmî verisine dayanır: son ${VERI_YIL_SAYISI} yılın taban başarı sıralamaları, kontenjanlar, yerleşme istatistikleri ve doluluk oranları. Yapay zekâ bu veriyi yorumlar; veri olmadan tahmin yürütmez.`,
  },
  {
    question: "Ücretsiz tercih robotlarından farkı ne?",
    answer:
      "Ücretsiz robotların çoğu puan aralığına göre bölüm listeler ve gerisini sana bırakır; bazıları yapay zekâ sohbeti de sunar. KolayTercih listenin kendisini kurar: hangi tercihi kaçıncı sıraya, neden koyduğunu açıklar, riskini geçmiş taban verisinden hesaplar ve sorularını cevaplar. Yapay zekâ yalnızca sıralamanla açılan gerçek programlardan seçer; bu havuzun dışına çıkamaz.",
  },
  {
    question: "Yerleşme garantisi veriyor musunuz?",
    answer:
      "Hayır — ve verdiğini iddia eden herkesten uzak dur. Taban sıralamaları her yıl adayların davranışına göre değişir; kimse garanti veremez. Biz riski şeffaf gösterir, listeyi hayal/dengeli/güvenli dilimleriyle kurarak boşta kalma riskini satır satır görünür kılarız. Tercih listenin son hali ve ÖSYM başvurusu her zaman senin sorumluluğundadır.",
  },
  {
    question: "KolayTercih ücretsiz mi?",
    answer:
      "Katalog ücretsiz: bölüm, üniversite ve il sayfalarındaki taban puanları, sıralamalar ve kontenjanlar herkese açık, üye olmadan da bakılır. Sıralamana göre programları görmek de ücretsiz. Ücretli olan tek şey yapay zekâ destekli 24'lük liste, gerekçeleri ve soru hakkı paketi.",
  },
  {
    question: "KolayTercih güvenilir mi, ÖSYM ya da YÖK ile bağlantısı var mı?",
    answer:
      "KolayTercih bağımsız bir üründür; ÖSYM ya da YÖK ile hiçbir bağlantısı yoktur. Veri kaynağı herkese açık YÖK Atlas yerleştirme sonuçlarıdır ve her katalog sayfasında kaynak ile son güncelleme tarihi yazılır. Yerleşme garantisi vermez, riski satır satır gösterir. Resmî bilgi için tek kaynak ÖSYM kılavuzu ve duyurularıdır.",
  },
  {
    question: "Fiyatlandırma nasıl çalışıyor?",
    answer: `Abonelik yok. Tercih dönemi boyunca geçerli tek seferlik ${PAKET_FIYATI} TL'lik paket alırsın: yapay zekâ destekli kişisel 24'lük liste, risk analizi, liste revizyonları ve ${URUNLER.paket.credits} soru hakkı dahil. Soru hakların biterse ${TOPUP_FIYATI} TL'ye +${URUNLER.topup.credits} soru ekleyebilirsin. Temel program arama ise herkes için ücretsiz.`,
  },
];

const comparison = [
  {
    feature: "Sıralamana uygun program listesi",
    robot: true,
    danisman: true,
    tercihai: true,
  },
  // Rakip hücreleri genelleme yapmaz: bazı ücretsiz robotlar artık yapay zekâ
  // sohbeti/dengeli liste de sunuyor, bazı danışmanlar 7/24 yazışıyor. Emin
  // olmadığımız yerde ✗ yerine metin ("Bazılarında" vb.) kullanılır.
  {
    feature: `Son ${VERI_YIL_SAYISI} yılın taban trendi, her tercihte`,
    robot: "Bazılarında",
    danisman: true,
    tercihai: true,
  },
  {
    feature: "Gerekçeli, dengeli 24'lük liste",
    robot: "Bazılarında",
    danisman: true,
    tercihai: true,
  },
  {
    feature: "Her öneri resmî YÖK Atlas kaydına dayanır (uydurma bölüm yok)",
    robot: "Sohbet botlarında belirsiz",
    danisman: true,
    tercihai: true,
  },
  {
    feature: "Nasıl çalıştığı herkese açık yazılı",
    robot: "Genelde yok",
    danisman: "Danışmana göre",
    tercihai: true,
  },
  {
    feature: "7/24 soru-cevap",
    robot: "Bazılarında",
    danisman: "Danışmana göre",
    tercihai: true,
  },
  {
    feature: "Fiyat",
    robot: "Ücretsiz",
    danisman: "1.000–3.000 TL*",
    tercihai: `${PAKET_FIYATI} TL · tek seferlik`,
  },
];

const paketOzellikleri = [
  {
    icon: ListChecks,
    text: "Sıralamana özel, gerekçeli 24 tercihlik dengeli liste",
  },
  {
    icon: ShieldCheck,
    text: `Her tercih için yerleşme riski ve trend analizi (son ${VERI_YIL_SAYISI} yıl)`,
  },
  { icon: FileText, text: "Veliyle paylaşılabilir PDF rapor" },
  { icon: RefreshCcw, text: "Liste revizyonu sayısı sınırsız (sohbetten; her istek 1 sohbet kredisi)" },
  {
    icon: MessageCircleQuestion,
    text: `${URUNLER.paket.credits} yapay zekâ danışman sorusu`,
  },
] as const;

export default function Home() {
  // Katalog hapları gerçek veriden (landing-verisi.ts); veri okunamazsa
  // bölüm çizilmez.
  const haplar = katalogHaplari();

  return (
    <div
      id="top"
      className="flex min-h-screen flex-col bg-slate-50 text-slate-900"
    >
      <main className="flex-1">
        <JsonLd data={faqPageJsonLd(faqs)} />
        <JsonLd data={softwareApplicationJsonLd()} />
        {/* Hero */}
        <section className="relative isolate overflow-hidden">
          <div
            aria-hidden
            // SVG altta 9 hücrelik serpinti payı taşıdığı için silüet merkezi
            // yüksekliğin %37,1'inde; -1/2 yerine bu oranla hizalanır
            // Telefonda harita gizlenmez (DESIGN.md §11.2-9): ekrandan taşacak
            // kadar iri durur, başlığın üstündeki boşluğu doldurur ve serpinti
            // başlığa doğru dökülür.
            className="kt-hero-harita pointer-events-none absolute left-1/2 top-[27%] -z-10 -translate-x-1/2 -translate-y-[37.14%] sm:top-[43%]"
          >
            {/* Arka katman: harita scroll'un gerisinde kalır, derinlik verir */}
            <Parallax fromStart strength={-52}>
              {/* Harita orta ekranlarda nefes payı bırakır, ekranla birlikte
                    ölçeklenir ve çok geniş ekranda 1665px tavanına oturur;
                    telefonda ekranın 1,7 katı (kenarlardan taşar, kırpılır). */}
              <TurkeyPixelMap className="w-[170vw] max-w-none text-primary sm:w-[min(1665px,82vw)]" />
            </Parallax>
          </div>
          <div
            aria-hidden
            // Okunurluk perdesi: telefonda başlık daha aşağıda ve dar, perde ona göre
            className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_95%_38%_at_50%_62%,color-mix(in_oklab,var(--color-slate-50)_92%,transparent)_35%,transparent_80%)] sm:bg-[radial-gradient(ellipse_58%_52%_at_50%_42%,color-mix(in_oklab,var(--color-slate-50)_90%,transparent)_25%,transparent_75%)]"
          />
          <Parallax
            fromStart
            strength={14}
            className="mx-auto flex min-h-[calc(100svh-5.5rem)] max-w-6xl flex-col items-center justify-center px-4 pb-4 pt-12 text-center sm:pb-36 sm:pt-4"
          >
            <HeroBaslik />
            <div
              id="hero-form"
              className="kt-hero-gir mt-6 flex w-full scroll-mt-28 justify-center"
              style={{ "--sira": 2 } as React.CSSProperties}
            >
              <HeroForm />
            </div>
          </Parallax>
        </section>

        {/* Hero → Problem geçişi: border ya da ayraç yerine piksel şeridi.
            Haritanın serpintisinden başlar, kaydırdıkça turuncuya ısınarak
            bölümden bölüme iner (DESIGN.md §4.38). */}
        <BolumGecisi tohum={11} ust={6} ustTelefon={6} ustKisaTelefon={3} />

        {/* Problem */}
        <section className={BOLUM_BOSLUGU}>
          <div className="mx-auto max-w-6xl px-4">
            {/* Başlık gövdeden hafif hızlı akar — katman derinliği */}
            <Parallax strength={16}>
              <Reveal className="flex flex-col items-center gap-4 text-center">
                <SectionEyebrow>Sorun</SectionEyebrow>
                <h2 className="font-heading text-3xl font-bold sm:text-4xl">
                  Tercih dönemi neden bu kadar stresli?
                </h2>
                <p className="max-w-xl text-lg leading-relaxed text-slate-600">
                  Her yıl iki milyondan fazla aday aynı üç duvara çarpıyor.
                </p>
              </Reveal>
            </Parallax>
            {/* Sahne kartı (DESIGN.md §4.31): üstte hero'nun piksel diliyle
                kartın söylediğini çizen sahne, altında başlık ve metin.
                Sahneler sırayla oynar; karta gelince o sahne hemen oynar
                (`data-sahne-karti`, sorun-sahneleri.tsx). */}
            <Parallax strength={7} className="mt-12 grid gap-6 sm:mt-16 md:grid-cols-3">
              {problems.map((p, i) => (
                <Reveal key={p.title} delay={i * 0.08} className="h-full">
                  <div
                    data-sahne-karti=""
                    className="flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200/70 bg-card shadow-sm transition-[translate,border-color,box-shadow] duration-300 hover:-translate-y-1 motion-reduce:hover:translate-y-0 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5"
                  >
                    <div className="border-b border-slate-100 bg-slate-50 px-6 py-8">
                      <SorunSahnesi tur={p.sahne} sira={i} />
                    </div>
                    <div className="p-6">
                      <h3 className="font-heading text-xl font-bold text-balance">
                        {p.title}
                      </h3>
                      <p className="mt-2 text-base leading-relaxed text-slate-600">
                        {p.description}
                      </p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </Parallax>
          </div>
        </section>

        {/* Problem → Nasıl çalışır geçişi */}
        <BolumGecisi tohum={17} />

        {/* How it works */}
        <section id="nasil-calisir" className={`scroll-mt-24 ${BOLUM_BOSLUGU}`}>
          <div className="mx-auto max-w-6xl px-4">
            <Parallax strength={16}>
              <Reveal className="flex flex-col items-center gap-4 text-center">
                <div className="flex flex-wrap items-center justify-center gap-2">
                  <SectionEyebrow>Nasıl çalışır?</SectionEyebrow>
                  {/* Kuralların şeffaf anlatımına köprü: /meraklisina */}
                  <Link
                    href="/meraklisina"
                    className="group inline-flex min-h-8 items-center gap-1 rounded-full px-2 text-sm font-semibold text-slate-600 transition-colors duration-200 hover:text-orange-500"
                  >
                    Meraklısına
                    <ArrowUpRight
                      className="size-3.5 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
                      aria-hidden
                    />
                  </Link>
                </div>
                <h2 className="font-heading text-3xl font-bold sm:text-4xl">
                  Üç adımda listen hazır
                </h2>
                <p className="max-w-xl text-lg leading-relaxed text-slate-600">
                  Sıralamandan dengeli 24&apos;lük listeye giden yol üç adım
                  sürer.
                </p>
              </Reveal>
            </Parallax>
            {/* Adımlar kartsız (DESIGN.md §4.32): numara hero'nun piksel
                diliyle iri rakam; her rakam sırayla adımının biçimine dönüşüp
                geri toplanır, md'den itibaren aradaki düz çizgi dolar. */}
            <Parallax strength={7} className="mt-12 sm:mt-16">
              <AdimAkisi adimlar={steps} yilSayisi={VERI_YIL_SAYISI} />
            </Parallax>

            {/* Veri akışı + veriye dayalı güven + dürüstlük notu (DESIGN.md
                §4.28). Üçü de kartsız, sayfa zemininde açıkta durur: geniş
                ekranda solda dürüstlük notu (sola yaslı), ortada animasyon,
                sağda (YÖK Atlas girdilerinin yanında) üç sayı (sağa yaslı).
                lg altında hepsi ortalı; sıra: animasyon → sayılar → not. */}
            <Parallax strength={10} className="mt-24 sm:mt-32">
              <Reveal
                delay={0.1}
                className="grid items-center gap-16 lg:grid-cols-[minmax(0,1fr)_22rem_minmax(0,1fr)] lg:gap-8 xl:grid-cols-[minmax(0,1fr)_24rem_minmax(0,1fr)] xl:gap-12"
              >
                <VeriAkisi className="lg:order-2" />

                <dl className="mx-auto grid w-full max-w-3xl grid-cols-1 gap-8 text-center sm:grid-cols-3 lg:order-3 lg:mx-0 lg:grid-cols-1 lg:gap-10 lg:text-right">
                  {veriSayilari.map((stat) => (
                    // Sayı kahramandır (DESIGN.md §1.1): iri sayı üstte, etiket
                    // altında; dt anlam için DOM'da önce, görsel sıra order ile.
                    <div key={stat.label} className="flex flex-col">
                      <dt className="order-2 mt-2 text-sm font-semibold text-slate-500">
                        {stat.label}
                      </dt>
                      <dd className="order-1 font-heading text-4xl font-bold leading-none tracking-tight text-primary sm:text-5xl">
                        <SayanSayi deger={stat.value} />
                        {stat.birim ? (
                          <span className="ml-1.5 font-sans text-base font-semibold tracking-normal text-slate-400">
                            {stat.birim}
                          </span>
                        ) : null}
                      </dd>
                    </div>
                  ))}
                </dl>

                <div className="mx-auto flex w-full max-w-xl flex-col items-center text-center lg:order-1 lg:mx-0 lg:max-w-xs lg:items-start lg:text-left">
                  <SectionEyebrow>Dürüstlük notu</SectionEyebrow>
                  <h3 className="mt-4 font-heading text-2xl font-bold text-balance text-slate-900">
                    Yerleşme garantisi vermiyoruz —{" "}
                    <span className="font-bricolage font-bold tracking-tighter text-primary italic">
                      çünkü kimse veremez.
                    </span>
                  </h3>
                  <p className="mt-3 text-base leading-relaxed text-slate-600">
                    Taban sıralamaları her yıl değişir. Biz sonuç vaadi satmak
                    yerine riski satır satır gösterir, daha güvenli bir liste
                    kurmana yardımcı oluruz.
                  </p>
                </div>
              </Reveal>
            </Parallax>
          </div>
        </section>

        {/* Nasıl çalışır → Karşılaştırma geçişi */}
        <BolumGecisi tohum={23} />

        {/* Comparison */}
        <section id="karsilastirma" className={`scroll-mt-24 ${BOLUM_BOSLUGU}`}>
          <div className="mx-auto max-w-4xl px-4">
            <Parallax strength={16}>
              <Reveal className="flex flex-col items-center gap-4 text-center">
                <SectionEyebrow>Karşılaştır</SectionEyebrow>
                <h2 className="font-heading text-3xl font-bold sm:text-4xl">
                  Robot mu, danışman mı, KolayTercih mi?
                </h2>
                <p className="max-w-xl text-lg leading-relaxed text-slate-600">
                  Kim ne yapıyor, neyle, kaça — yan yana bak.
                </p>
              </Reveal>
            </Parallax>
            {/* Tablo yatay kaydırmaz (DESIGN.md §5.1): lg altında her özellik
                kendi satırında, üç cevap altında üç sütun; sütun adları
                üstte yapışık durur (site başlığının hemen altında: telefonda 96 px,
                sm'den itibaren 128 px — ölçüldü).
                lg'de klasik dört sütunlu tablo. */}
            <Parallax strength={7} className="mt-12 sm:mt-16">
              <Reveal delay={0.08}>
                <div className="rounded-2xl border border-slate-200/70 bg-card shadow-sm lg:hidden">
                  <div
                    aria-hidden
                    className="sticky top-24 z-10 grid grid-cols-3 sm:top-32 gap-2 rounded-t-2xl border-b border-slate-100 bg-card/95 px-3 py-3 text-center text-sm font-semibold text-slate-500 backdrop-blur"
                  >
                    <span>Robotlar ve botlar</span>
                    <span>İnsan danışman</span>
                    <span className="font-heading font-bold text-primary">
                      KolayTercih
                    </span>
                  </div>
                  <ul className="divide-y divide-slate-100">
                    {comparison.map((row, i) => (
                      <li
                        key={row.feature}
                        className="px-3 py-5"
                        style={{ "--tik-g": `${i * 70}ms` } as React.CSSProperties}
                      >
                        <p className="px-1 text-center text-base font-semibold leading-snug text-slate-900">
                          {row.feature}
                        </p>
                        <dl className="mt-3 grid grid-cols-3 items-center gap-2 text-center">
                          <div>
                            <dt className="sr-only">Robotlar ve botlar</dt>
                            <dd>
                              <ComparisonCell value={row.robot} />
                            </dd>
                          </div>
                          <div>
                            <dt className="sr-only">İnsan danışman</dt>
                            <dd>
                              <ComparisonCell value={row.danisman} />
                            </dd>
                          </div>
                          <div className="rounded-xl bg-primary/5 py-2">
                            <dt className="sr-only">KolayTercih</dt>
                            <dd>
                              <ComparisonCell value={row.tercihai} vurgu />
                            </dd>
                          </div>
                        </dl>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="hidden overflow-hidden rounded-2xl border border-slate-200/70 bg-card shadow-sm lg:block">
                  <Table>
                    <TableHeader>
                      <TableRow className="bg-slate-50 hover:bg-slate-50">
                        <TableHead className="h-12 w-[40%] pl-5 text-sm font-semibold text-slate-500">
                          Özellik
                        </TableHead>
                        <TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
                          Robotlar ve sohbet botları
                        </TableHead>
                        <TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
                          İnsan danışman
                        </TableHead>
                        <TableHead className="h-12 text-center font-heading text-base font-bold text-primary">
                          KolayTercih
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {comparison.map((row, i) => (
                        <TableRow
                          key={row.feature}
                          className="hover:bg-transparent"
                          style={{ "--tik-g": `${i * 70}ms` } as React.CSSProperties}
                        >
                          <TableCell className="whitespace-normal py-4 pl-5 text-base font-semibold text-slate-900">
                            {row.feature}
                          </TableCell>
                          <TableCell className="whitespace-normal py-4 text-center">
                            <ComparisonCell value={row.robot} />
                          </TableCell>
                          <TableCell className="whitespace-normal py-4 text-center">
                            <ComparisonCell value={row.danisman} />
                          </TableCell>
                          <TableCell className="whitespace-normal bg-primary/5 py-4 text-center">
                            <ComparisonCell value={row.tercihai} vurgu />
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
                <p className="mt-3 text-xs text-slate-500">
                  * Danışman fiyat aralığı: Armut ortalama fiyatı, Eylül 2026.
                </p>
              </Reveal>
            </Parallax>
          </div>
        </section>

        {/* Karşılaştırma → Fiyat geçişi */}
        <BolumGecisi tohum={29} />

        {/* Fiyat */}
        <section id="fiyat" className={`scroll-mt-24 ${BOLUM_BOSLUGU}`}>
          <div className="mx-auto max-w-4xl px-4">
            <Parallax strength={16}>
              <Reveal className="flex flex-col items-center gap-4 text-center">
                <SectionEyebrow>Tek seferlik · Abonelik yok</SectionEyebrow>
                <h2 className="font-heading text-3xl font-bold sm:text-4xl">
                  Ne kadar? Ne dahil?
                </h2>
                <p className="max-w-xl text-lg leading-relaxed text-slate-600">
                  İnsan danışmanın 1.000–3.000 TL aldığı işi tek seferlik{" "}
                  {PAKET_FIYATI} TL&apos;ye alırsın. Abonelik yok, gizli ücret
                  yok.
                </p>
                <p className="text-xs text-slate-500">
                  Danışman fiyat aralığı: Armut ortalama fiyatı, Eylül 2026.
                </p>
              </Reveal>
            </Parallax>

            <Parallax
              strength={7}
              className="mt-12 grid gap-6 sm:mt-16 sm:grid-cols-[1fr_auto]"
            >
              <Reveal
                delay={0.08}
                className="rounded-2xl border-2 border-orange-500 bg-card p-8 shadow-sm"
              >
                <div className="flex flex-wrap items-baseline justify-between gap-2">
                  <h3 className="font-heading text-xl font-bold">
                    {URUNLER.paket.label}
                  </h3>
                  <p className="font-heading text-3xl font-bold">
                    {PAKET_FIYATI} TL
                  </p>
                </div>
                <ul className="mt-6 space-y-3">
                  {paketOzellikleri.map((o) => (
                    <li
                      key={o.text}
                      className="flex items-start gap-3 text-sm text-slate-700"
                    >
                      <o.icon
                        className="mt-0.5 size-4 shrink-0 text-emerald-600"
                        aria-hidden
                      />
                      {o.text}
                    </li>
                  ))}
                </ul>

                {/* Boşluk sarmalayıcıda: sosyal kanıt eşik altında kalıp hiç
                    çizilmediğinde buton yine listeden mt-8 uzakta durur. */}
                <div className="mt-8 flex flex-col gap-4">
                  {/* Karar butonun başında veriliyor; kanıt da orada dursun.
                      İstek anında okunuyor, o yüzden Suspense içinde. */}
                  <Suspense fallback={null}>
                    <SosyalKanitBandi />
                  </Suspense>

                  <Button asChild size="lg" variant="cta" className="w-full">
                    <Link href="/paket?kaynak=fiyat_paket">
                      {PAKET_FIYATI} TL — Paketi incele
                      <ArrowRight className="size-4" aria-hidden />
                    </Link>
                  </Button>

                  <p className="text-center text-xs text-slate-500">
                    Temel program arama herkes için ücretsiz · iyzico güvenli
                    ödeme
                  </p>
                </div>
              </Reveal>

              <Reveal
                delay={0.16}
                className="flex h-fit flex-col rounded-2xl border border-slate-200/70 bg-card p-6 shadow-sm sm:w-56"
              >
                <div className="flex items-center gap-2">
                  <Coins className="size-4 text-amber-500" aria-hidden />
                  <h3 className="font-heading font-bold">Kredi bitti mi?</h3>
                </div>
                <p className="mt-2 flex-1 text-sm leading-relaxed text-slate-600">
                  +{URUNLER.topup.credits} soru hakkı, {TOPUP_FIYATI} TL. Pakete
                  ek olarak, istediğin zaman.
                </p>
                <Button asChild variant="ikincil" className="mt-4 h-11 w-full">
                  <Link href="/paket?kaynak=fiyat_kredi">
                    +{URUNLER.topup.credits} kredi — {TOPUP_FIYATI} TL
                    <ArrowRight className="size-4" aria-hidden />
                  </Link>
                </Button>
              </Reveal>
            </Parallax>
          </div>
        </section>

        {/* Katalog: süzülen haplar (DESIGN.md §4.30) */}
        {haplar.length >= 6 ? (
          <>
            <BolumGecisi tohum={41} />
            <section id="katalog" className={`scroll-mt-24 ${BOLUM_BOSLUGU}`}>
              <div className="mx-auto max-w-6xl px-4">
                <Parallax strength={16}>
                  <Reveal className="flex flex-col items-center gap-4 text-center">
                    <SectionEyebrow>Katalog ücretsiz</SectionEyebrow>
                    <h2 className="font-heading text-3xl font-bold text-balance sm:text-4xl">
                      Önce bir bakmak ister misin?
                    </h2>
                    <p className="max-w-xl text-lg leading-relaxed text-slate-600">
                      Taban sıralamaları ve kontenjanlar herkese açık. Üye
                      olmadan bölüm bölüm, şehir şehir gez.
                    </p>
                  </Reveal>
                </Parallax>
                <SuzulenHaplar haplar={haplar} className="mt-6" />
                <div className="mt-4 flex justify-center">
                  <Button
                    asChild
                    size="lg"
                    variant="ikincil"
                  >
                    <Link href="/bolumler">
                      Tüm bölümleri gör
                      <ArrowRight className="size-4" aria-hidden />
                    </Link>
                  </Button>
                </div>
              </div>
            </section>
          </>
        ) : null}

        {/* Fiyat → SSS geçişi */}
        <BolumGecisi tohum={31} />

        {/* FAQ */}
        <section id="sss" className={`scroll-mt-24 ${BOLUM_BOSLUGU}`}>
          <div className="mx-auto max-w-3xl px-4">
            <Parallax strength={16}>
              <Reveal className="flex flex-col items-center gap-4 text-center">
                <SectionEyebrow>SSS</SectionEyebrow>
                <h2 className="font-heading text-3xl font-bold sm:text-4xl">
                  Sık sorulan sorular
                </h2>
              </Reveal>
            </Parallax>
            <Parallax strength={7}>
              <Reveal delay={0.08}>
                <Accordion
                  type="single"
                  collapsible
                  className="mt-12 rounded-2xl border border-slate-200/70 bg-card px-6 shadow-sm sm:mt-16"
                >
                  {faqs.map((faq) => (
                    <AccordionItem
                      key={faq.question}
                      value={faq.question}
                      className="last:border-b-0"
                    >
                      <AccordionTrigger className="cursor-pointer text-left font-sans text-base font-semibold">
                        {faq.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-base leading-relaxed text-slate-600">
                        {faq.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </Reveal>
            </Parallax>
          </div>
        </section>

        {/* Final CTA — tam genişlik bant yerine yüzen, köşeleri yumuşak panel */}
        <section className="px-4 pb-24 pt-6 sm:px-6 sm:pb-32">
          <Parallax strength={12} className="mx-auto max-w-6xl">
            <Reveal>
              {/* Kapanış yüzeyi (DESIGN.md §10.8): koyu kart + 24'lük
                  listenin interaktif kreatifi. Bilal'in kararı (24 Eyl 2026):
                  bu yüzey yalnız burada; diğer CTA'lar mavi CtaBandi. */}
              <PikselCtaYuzeyi seed={7}>
                <h2 className="font-heading text-3xl font-bold text-balance sm:text-4xl">
                  Tercih listen, pişmanlık listesi olmasın
                </h2>
                <KapanisCta />
              </PikselCtaYuzeyi>
            </Reveal>
          </Parallax>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}