import {
  ArrowRight,
  ArrowUpRight,
  BarChart3,
  Coins,
  Compass,
  FileText,
  ListChecks,
  MessageCircleQuestion,
  RefreshCcw,
  ShieldCheck,
  TrendingUp,
  Wallet,
} from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
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 { SosyalKanitBandi } from "@/features/pazarlama/components/sosyal-kanit";
import { TurkeyPixelMap } from "@/features/pazarlama/components/turkey-pixel-map";
import {
  PixelCorner,
  PixelDivider,
  SectionEyebrow,
} from "@/components/pixel-decor";
import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
import { MAX_REVIZYON, 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 {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { Metadata } from "next";
import {
  JsonLd,
  KATALOG_VERI_TARIHI,
  faqPageJsonLd,
  softwareApplicationJsonLd,
} from "@/lib/seo";
import { KATALOG_TARIH_METNI } from "@/features/katalog/components/veri-kaynagi";
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,
});

const problems = [
  {
    icon: ListChecks,
    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.`,
  },
  {
    icon: TrendingUp,
    title: "Geçen yılın puanı yetmiyor",
    description:
      "Taban sıralamaları her yıl kayıyor; tek yıla bakmak riski gizler.",
  },
  {
    icon: Wallet,
    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.",
  },
];

const steps = [
  {
    icon: Compass,
    step: "1",
    title: "Sıralamanı ve hedeflerini anlat",
    description:
      "YKS başarı sıralamanı gir; sıralamana uygun ilgi alanı, şehir ve üniversite tercihlerini birkaç adımda işaretle.",
  },
  {
    icon: BarChart3,
    step: "2",
    title: `Son ${VERI_YIL_SAYISI} yılın resmî verisi taransın`,
    description:
      "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.",
  },
  {
    icon: ShieldCheck,
    step: "3",
    title: "Dengeli 24'lük listeni al",
    description:
      "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.",
  },
];

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: `${MAX_REVIZYON} liste revizyon hakkı` },
  {
    icon: MessageCircleQuestion,
    text: `${URUNLER.paket.credits} yapay zekâ danışman sorusu`,
  },
] as const;

export default function Home() {
  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
            className="pointer-events-none absolute left-1/2 top-[43%] -z-10 hidden -translate-x-1/2 -translate-y-[37.14%] sm:block"
          >
            {/* 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;
                    mobilde tümüyle gizli. */}
              <TurkeyPixelMap className="w-[min(1665px,82vw)] max-w-none text-primary" />
            </Parallax>
          </div>
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_58%_52%_at_50%_42%,rgba(248,250,252,0.9)_25%,rgba(248,250,252,0)_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="mt-6 flex w-full scroll-mt-28 justify-center"
            >
              <HeroForm />
            </div>
            <div className="mt-3 inline-flex items-center gap-2.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-700 shadow-xs">
              <span>
                <strong className="font-semibold text-slate-900">
                  Veri: YÖK Atlas
                </strong>{" "}
                · son güncelleme{" "}
                <time dateTime={KATALOG_VERI_TARIHI}>
                  {KATALOG_TARIH_METNI}
                </time>
              </span>
            </div>
            {/* Markayı tek cümlede tanımlayan görünür metin: sitedeki SSS ve
                /kosullar ifadelerinin toplamı, yeni vaat yok. Meta/OG'de zaten
                var; yapay zekâ cevap motorları gövde metnini önceliklendirdiği
                için burada da durur (docs/arastirma/2026-09-24-geo-seo). */}
            <p className="mt-5 max-w-2xl text-sm leading-6 text-slate-600">
              KolayTercih, YÖK Atlas&apos;ın resmî yerleştirme verisiyle
              sıralamana uygun 24 tercihlik dengeli liste kuran, yapay zekâ
              destekli bir karar destek aracıdır. ÖSYM ya da YÖK ile bağlantılı
              değildir; yerleşme garantisi vermez.
            </p>
          </Parallax>
        </section>

        {/* Hero → Problem geçişi: border yerine piksel ayraç */}
        <div aria-hidden className="mx-auto w-56">
          <Parallax strength={26}>
            <PixelDivider seed={11} />
          </Parallax>
        </div>

        {/* Problem */}
        <section className="py-20 sm:py-24">
          <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>
            <Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
              {problems.map((p, i) => (
                <Reveal key={p.title} delay={i * 0.08}>
                  <Card className="relative h-full overflow-hidden border-slate-200/70 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5">
                    <PixelCorner className="absolute right-4 top-4" />
                    <CardHeader>
                      <div className="mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10">
                        <p.icon className="size-5 text-primary" aria-hidden />
                      </div>
                      <CardTitle className="font-heading text-xl">
                        {p.title}
                      </CardTitle>
                      <CardDescription className="text-base leading-relaxed">
                        {p.description}
                      </CardDescription>
                    </CardHeader>
                  </Card>
                </Reveal>
              ))}
            </Parallax>
          </div>
        </section>

        {/* Problem → Nasıl çalışır geçişi */}
        <div aria-hidden className="mx-auto w-56">
          <Parallax strength={26}>
            <PixelDivider seed={17} />
          </Parallax>
        </div>

        {/* How it works */}
        <section id="nasil-calisir" className="scroll-mt-24 py-20 sm:py-24">
          <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 items-center gap-1.5 rounded-full bg-orange-500 px-3.5 py-1.5 font-bricolage text-xs font-semibold text-white transition-colors duration-200 hover:bg-orange-600"
                  >
                    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>
            <Parallax strength={7} className="mt-12 grid gap-6 md:grid-cols-3">
              {steps.map((s, i) => (
                <Reveal key={s.step} delay={i * 0.08} className="h-full">
                  <div className="relative h-full rounded-2xl border border-slate-200/70 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-orange-500 hover:shadow-lg hover:shadow-orange-500/5">
                    <span className="absolute -top-4 left-8 flex size-8 items-center justify-center rounded-full bg-orange-500 font-heading text-sm font-bold text-white">
                      {s.step}
                    </span>
                    <PixelCorner className="absolute right-4 top-4" />
                    <s.icon className="size-6 text-primary" aria-hidden />
                    <h3 className="mt-4 font-heading text-xl font-semibold">
                      {s.title}
                    </h3>
                    <p className="mt-2 leading-relaxed text-slate-600">
                      {s.description}
                    </p>
                  </div>
                </Reveal>
              ))}
            </Parallax>

            {/* Veriye dayalı güven + garanti vaadine karşı dürüst konumlandırma */}
            <Parallax strength={10} className="mx-auto mt-12 w-full max-w-3xl">
              <Reveal
                delay={0.1}
                className="overflow-hidden rounded-2xl border border-slate-200/70 bg-white shadow-sm"
              >
                <dl className="grid grid-cols-1 divide-y divide-slate-200 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
                  {[
                    {
                      value: PROGRAM_SAYISI_METNI,
                      label: "Taranan lisans ve önlisans programı",
                    },
                    {
                      value: `${VERI_YIL_SAYISI} yıl`,
                      label: "Taban sıralaması trend verisi",
                    },
                    { value: "%100", label: "Resmî YÖK Atlas kaynağı" },
                  ].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 p-6 text-center"
                    >
                      <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">
                        {stat.value}
                      </dd>
                    </div>
                  ))}
                </dl>

                <div className="flex gap-4 border-t border-slate-200 bg-primary/5 p-6 text-left sm:items-center sm:p-7">
                  <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white shadow-sm">
                    <ShieldCheck className="size-5" aria-hidden />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-primary">
                      Dürüstlük notu
                    </p>
                    <p className="mt-1 font-heading text-lg font-bold text-slate-900 sm:text-xl">
                      Yerleşme garantisi vermiyoruz — çünkü kimse veremez.
                    </p>
                    <p className="mt-1.5 text-sm leading-6 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>
                </div>
              </Reveal>
            </Parallax>
          </div>
        </section>

        {/* Nasıl çalışır → Karşılaştırma geçişi */}
        <div aria-hidden className="mx-auto w-56">
          <Parallax strength={26}>
            <PixelDivider seed={23} />
          </Parallax>
        </div>

        {/* Comparison */}
        <section id="karsilastirma" className="scroll-mt-24 py-20 sm:py-24">
          <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">
              <Reveal delay={0.08}>
                <div className="rounded-2xl border border-slate-200/70 bg-white 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-white/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) => (
                      <li key={row.feature} className="px-3 py-5">
                        <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-white 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) => (
                        <TableRow
                          key={row.feature}
                          className="hover:bg-transparent"
                        >
                          <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 */}
        <div aria-hidden className="mx-auto w-56">
          <Parallax strength={26}>
            <PixelDivider seed={29} />
          </Parallax>
        </div>

        {/* Fiyat */}
        <section id="fiyat" className="scroll-mt-24 py-20 sm:py-24">
          <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:grid-cols-[1fr_auto]"
            >
              <Reveal
                delay={0.08}
                className="rounded-2xl border-2 border-orange-500 bg-white 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
                    className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600"
                  >
                    <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-white 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="outline"
                  className="mt-4 h-11 w-full cursor-pointer"
                >
                  <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>

        {/* Fiyat → SSS geçişi */}
        <div aria-hidden className="mx-auto w-56">
          <Parallax strength={26}>
            <PixelDivider seed={31} />
          </Parallax>
        </div>

        {/* FAQ */}
        <section id="sss" className="scroll-mt-24 py-20 sm:py-24">
          <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-10 rounded-2xl border border-slate-200/70 bg-white px-6 shadow-sm"
                >
                  {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">
          <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>
  );
}