import {
  ArrowRight,
  ArrowUpRight,
  BarChart3,
  CheckCircle2,
  Coins,
  Compass,
  FileText,
  ListChecks,
  MessageCircleQuestion,
  RefreshCcw,
  ShieldCheck,
  TrendingUp,
  Wallet,
  X,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";
import { HeroBaslik } from "@/components/hero-baslik";
import { KapanisCta } from "@/components/hero-focus-button";
import { HeroForm } from "@/components/hero-form";
import { Parallax } from "@/components/parallax";
import { Reveal } from "@/components/landing/reveal";
import { SosyalKanitBandi } from "@/components/landing/sosyal-kanit";
import { TurkeyPixelMap } from "@/components/turkey-pixel-map";
import {
  PixelCorner,
  PixelDivider,
  PixelField,
  SectionEyebrow,
} from "@/components/pixel-decor";
import { MAX_REVIZYON, URUNLER } from "@/lib/credits";
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,
  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,
});

const problems = [
  {
    icon: ListChecks,
    title: "24 tercih, binlerce ihtimal",
    description:
      "23.000'den fazla lisans 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 bakarak yapılan tercih, boşta kalmanın en yaygın sebebi.",
  },
  {
    icon: Wallet,
    title: "Danışman lüks haline geldi",
    description:
      "İyi bir tercih danışmanı 2.000–10.000 TL istiyor. Ücretsiz robotlar ise sadece liste filtreliyor, akıl vermiyor.",
  },
];

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: "Yapay zekâ veriyi tarasın",
    description:
      "Son 4 yılın YÖK Atlas verisi — taban sıralaması trendleri, kontenjan değişimleri, doluluk oranları — senin için analiz edilsin.",
  },
  {
    icon: ShieldCheck,
    step: "3",
    title: "Dengeli 24'lük listeni al",
    description:
      "Hayal, dengeli ve garanti 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 4 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 puan aralığına göre bölüm listeler ve gerisini sana bırakır. KolayTercih ise listenin kendisini kurar: hangi tercihi kaçıncı sıraya, neden koyduğunu açıklar, riskini söyler ve sorularını cevaplar. Yani filtre değil, danışmandır.",
  },
  {
    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/garanti dilimleriyle kurarak boşta kalma ihtimalini en aza indiririz. Tercih listenin son hali ve ÖSYM başvurusu her zaman senin sorumluluğundadı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,
  },
  {
    feature: "Son 4 yılın trend analizi",
    robot: false,
    danisman: true,
    tercihai: true,
  },
  {
    feature: "Gerekçeli, dengeli 24'lük liste",
    robot: false,
    danisman: true,
    tercihai: true,
  },
  {
    feature: "7/24 soru-cevap",
    robot: false,
    danisman: false,
    tercihai: true,
  },
  {
    feature: "Fiyat",
    robot: "Ücretsiz",
    danisman: "2.000–10.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 olasılığı ve risk analizi (son 4 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;

function ComparisonCell({ value }: { value: boolean | string }) {
  if (typeof value === "string") {
    return <span className="text-sm font-medium">{value}</span>;
  }
  return value ? (
    <CheckCircle2 className="mx-auto size-5 text-primary" aria-label="Var" />
  ) : (
    <X className="mx-auto size-5 text-muted-foreground/50" aria-label="Yok" />
  );
}

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 />
            {/* <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
            KolayTercih, gerçek YÖK Atlas verisiyle çalışan yapay zekâ tercih
            danışmanın. İnsan danışmanın binlerce lira aldığı işi — dengeli
            liste, risk analizi, soru-cevap — onda bir fiyatına yapar.
          </p> */}
            <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">
              <Image
                src="/yok-logo.svg"
                alt="Yükseköğretim Kurulu"
                width={68}
                height={33}
                className="h-7 w-auto shrink-0"
              />
              <span className="h-5 w-px shrink-0 bg-slate-200" aria-hidden />
              <span>
                <strong className="font-semibold text-slate-900">
                  YÖK Atlas&apos;ın gerçek verileriyle
                </strong>{" "}
                güvenilir sonuçlar
              </span>
            </div>
          </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-primary/30 hover:shadow-lg hover:shadow-primary/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 text-xs font-semibold uppercase tracking-[0.12em] 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-primary/30 hover:shadow-lg hover:shadow-primary/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: "23.000+", label: "Taranan lisans programı" },
                    {
                      value: "4 yıl",
                      label: "Taban sıralaması trend verisi",
                    },
                    { value: "%100", label: "Resmî YÖK Atlas kaynağı" },
                  ].map((stat) => (
                    <div key={stat.label} className="p-6 text-center">
                      <dt className="text-sm text-slate-500">{stat.label}</dt>
                      <dd className="mt-1 font-heading text-3xl font-bold 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-xs font-semibold uppercase tracking-wider 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">
                  Aynı işi kim, neyle, kaça yapıyor — yan yana bak.
                </p>
              </Reveal>
            </Parallax>
            <Parallax strength={7} className="mt-12">
              <Reveal
                delay={0.08}
                className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white shadow-sm"
              >
                <Table>
                  <TableHeader>
                    <TableRow className="bg-slate-50">
                      <TableHead className="w-[40%]">Özellik</TableHead>
                      <TableHead className="text-center">
                        Ücretsiz robotlar
                      </TableHead>
                      <TableHead className="text-center">
                        İnsan danışman
                      </TableHead>
                      <TableHead className="text-center font-heading font-bold text-primary">
                        KolayTercih
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {comparison.map((row) => (
                      <TableRow key={row.feature}>
                        <TableCell className="font-medium">
                          {row.feature}
                        </TableCell>
                        <TableCell className="text-center">
                          <ComparisonCell value={row.robot} />
                        </TableCell>
                        <TableCell className="text-center">
                          <ComparisonCell value={row.danisman} />
                        </TableCell>
                        <TableCell className="bg-primary/5 text-center">
                          <ComparisonCell value={row.tercihai} />
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </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 2.000–10.000 TL aldığı işi tek seferlik{" "}
                  {PAKET_FIYATI} TL&apos;ye alırsın. Abonelik yok, gizli ücret
                  yok.
                </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">
                      {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">
                    +{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>
              <div className="relative isolate overflow-hidden rounded-3xl bg-primary px-4 py-20 text-white shadow-xl shadow-primary/20 sm:py-24">
                {/* Hero'nun piksel dokusu koyu zeminde: ortası boş, kenarlara doğru yoğun */}
                {/* Piksel zemin panel içinde geride kalır; taşma payı için dikeyde büyütülür */}
                <div
                  aria-hidden
                  className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
                >
                  <Parallax strength={-22} className="h-full">
                    <PixelField seed={8} />
                  </Parallax>
                </div>
                <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
                  <MessageCircleQuestion
                    className="size-10 opacity-80"
                    aria-hidden
                  />
                  <h2 className="mt-6 font-heading text-3xl font-bold sm:text-4xl">
                    Tercih listen, pişmanlık listesi olmasın
                  </h2>
                  <KapanisCta />
                </div>
              </div>
            </Reveal>
          </Parallax>
        </section>
      </main>

      <SiteFooter />
    </div>
  );
}