import { Suspense } from "react";
import type { Metadata } from "next";
import { Parallax } from "@/components/parallax";
import { PagePixelDivider, SectionEyebrow } from "@/components/pixel-decor";
import { SiteFooter } from "@/components/site-footer";
import {
  MeraklisinaIcerik,
  MeraklisinaIcerikSkeleton,
} from "@/features/pazarlama/components/meraklisina-icerik";
import { sayfaMetadata } from "@/lib/seo";

export const metadata: Metadata = sayfaMetadata({
  title: "Meraklısına: KolayTercih nasıl çalışır?",
  path: "/meraklisina",
  description:
    "Sıralamanı girdiğinde arka planda ne oluyor? Dilimler, risk renkleri ve sihirbazın adım adım daralan filtreleri — öğrenci diliyle, sıralamana göre hesaplanan canlı görsellerle.",
});

export default function MeraklisinaPage() {
  return (
    <>
      <main className="mx-auto w-full max-w-2xl px-4 py-16">
        <Parallax fromStart strength={10}>
          <SectionEyebrow>Meraklısına</SectionEyebrow>
          <h1 className="mt-3 font-heading text-3xl font-bold">
            Sıralamanı girince arka planda ne oluyor?
          </h1>
          <p className="mt-3 text-slate-600">
            Sihir yok, kara kutu yok: KolayTercih&apos;in önerdiği her satır resmî
            YÖK Atlas verisinden gelir ve hangi kurala göre önüne geldiği bellidir.
            Bu sayfa o kuralları öğrenci diliyle anlatır — üstelik görseller
            canlı: sıralamanı girdiysen sayılar sana göre hesaplanır.
          </p>
        </Parallax>

        <PagePixelDivider seed={73} className="mt-6" />

        <Suspense fallback={<MeraklisinaIcerikSkeleton />}>
          <MeraklisinaIcerik />
        </Suspense>
      </main>
      <SiteFooter />
    </>
  );
}