import { Parallax } from "@/components/parallax";
import { Skeleton } from "@/components/ui/skeleton";
import { meraklisinaDemoVerisi } from "../pazarlama-queries";
import {
  DemoKapanisCta,
  DemoKumanda,
  DilimSeridiCanli,
  SiralamaDemo,
} from "./meraklisina-demo";
import { HuniSemasi } from "./huni-semasi";

/**
 * Algoritmanın öğrenci diline çevrilmiş anlatımı. Teknik detay (SQL, çarpan
 * mutfağı) bilerek verilmez; amaç güven: veri gerçek, kurallar şeffaf.
 * Dilim şeridi canlıdır: kullanıcının kayıtlı tercih profilindeki sıralama
 * okunur, şerit o sıralamanın gerçek sayılarıyla güncellenir (bkz.
 * meraklisina-demo.tsx); profil yoksa örnek sıralama gösterilir. Sihirbaz
 * hunisi ise statik bir mermaid şemasıyla anlatılır (bkz. huni-semasi.tsx).
 * Diyagramlar ürünün risk renk dilini kullanır (yeşil/sarı/kırmızı) ve her
 * bölge metinle de etiketlenir — renk tek başına anlam taşımaz.
 */

// Profili olmayan ziyaretçi bu örnek sıralamayı görür; SSR'da gerçek veriyle
// render edilir ki profil olmadan da sayfa anlamlı olsun.
const VARSAYILAN_SIRA = 100_000;

export function MeraklisinaIcerik() {
  const baslangicVeri = meraklisinaDemoVerisi(VARSAYILAN_SIRA);

  return (
    <SiralamaDemo
      baslangicSira={VARSAYILAN_SIRA}
      baslangicVeri={baslangicVeri}
    >
      <Parallax
        fromStart
        strength={4}
        className="mt-8 space-y-10 text-sm leading-7 text-slate-700"
      >
        <section>
          <h2 className="font-heading text-lg font-bold text-slate-900">
            1. Her şey taban sıralamasıyla başlar
          </h2>
          <p className="mt-2">
            Bir bölümün <strong>taban sıralaması</strong>, geçen yıl o bölüme
            yerleşen <em>son</em>{" "}
            öğrencinin Türkiye sıralamasıdır. Senin sıralaman bu sayıdan
            küçükse (yani daha iyiysen), geçen yılın koşullarında o bölüme
            yerleşebilirdin demektir. Sistemde her programın en güncel taban
            sıralaması kayıtlıdır; bir bölümün 2025 verisi henüz oluşmamışsa
            bir önceki yılınki kullanılır.
          </p>
        </section>

        <DemoKumanda />

        <section>
          <h2 className="font-heading text-lg font-bold text-slate-900">
            2. Programlar üç dilime ayrılır
          </h2>
          <p className="mt-2">
            Sıralamanı girdiğinde tüm programlar senin konumuna göre üç kümeye
            ayrılır: tabanı senden <strong>daha iyi</strong> olanlar{" "}
            <span className="font-semibold text-red-600">Hayal</span> (şansını
            denediğin satırlar), tabanı sıralamana{" "}
            <strong>yakın</strong> olanlar{" "}
            <span className="font-semibold text-amber-600">Dengeli</span>{" "}
            (listenin bel kemiği — sıralamanın yaklaşık yüzde kırk fazlasına
            kadar pay bırakılır), tabanı{" "}
            <strong>belirgin şekilde altında</strong> kalan her şey ise{" "}
            <span className="font-semibold text-emerald-600">Garanti</span>{" "}
            dilimidir.
          </p>
          <DilimSeridiCanli />
          <p className="mt-4">
            Garanti diliminin bir sonu yok: 87. sıradaki bir adayın da 500
            bininci sıradaki bir adayın da ulaşabildiği <em>bütün</em>{" "}
            programlar listededir. Liste sana en yakın tabandan başlar; aşağı
            indikçe ve &ldquo;Daha fazla göster&rdquo;e bastıkça senden
            uzaklaşan seçenekler gelir. Böylece ilk gördüklerin her zaman en
            isabetli adaylardır ama hiçbir seçenek senden saklanmaz.
          </p>
        </section>

        <section>
          <h2 className="font-heading text-lg font-bold text-slate-900">
            3. Risk renkleri her yerde aynı dili konuşur
          </h2>
          <p className="mt-2">
            Tabloda, haritada ve yapay zekâ listesinde gördüğün nokta ve
            renkler tek bir kurala bağlıdır:{" "}
            <span className="font-semibold text-emerald-600">yeşil</span>{" "}
            tabanı sıralamanın belirgin altında (güvenli),{" "}
            <span className="font-semibold text-amber-600">sarı</span>{" "}
            sıralamana yakın (az riskli),{" "}
            <span className="font-semibold text-red-600">kırmızı</span>{" "}
            tabanı senden iyi (riskli). Renk hangi sayfada olursa olsun aynı
            hesaptan çıkar; bir satır sekme değiştirdi diye renk değiştirmez.
          </p>
        </section>

        <section>
          <h2 className="font-heading text-lg font-bold text-slate-900">
            4. Sihirbaz süzer, yapay zekâ kurar
          </h2>
          <p className="mt-2">
            &ldquo;Yapay Zeka listemi kur&rdquo; sihirbazındaki üç adım birbirinden
            bağımsız değildir. İlk adımda yalnızca{" "}
            <strong>sıralamanla ulaşabildiğin</strong>{" "}
            alanlar listelenir; ikinci adımdaki iller, seçtiğin alanlardaki
            program sayısına göre yeniden hesaplanır; üçüncü adımdaki
            devlet/vakıf sayıları da hem alan hem il seçimini hesaba katar.
            Adımlar bitince elde kalan gerçek programlar bir{" "}
            <strong>aday havuzu</strong>{" "}
            olur ve yapay zekâya öyle gider: ona boş bir sayfa değil, bu havuz
            verilir. Aşağıdaki şema akışın tamamını gösterir — havuz
            24&apos;ün altına düşerse filtrelerin nasıl gevşetildiği, yine de
            yetmezse listenin eldeki programlarla, sana açıkça belirtilerek
            nasıl kurulduğu da dahil.
          </p>
          <HuniSemasi />
        </section>

        <section>
          <h2 className="font-heading text-lg font-bold text-slate-900">
            5. Dürüst olalım: bu bir tahmin aracıdır
          </h2>
          <p className="mt-2">
            Tüm bu hesaplar <strong>geçen yılların</strong>{" "}
            yerleştirme sonuçlarına dayanır. Kontenjanlar, tercih davranışları
            ve puanlar her yıl değişir; geçen yıl &ldquo;garanti&rdquo;
            görünen bir bölüm bu yıl dolabilir. Bu yüzden satırlarda son beş
            yılın taban seyrini de gösteririz — çizgi yukarı tırmanıyorsa
            bölüm zorlaşıyor demektir. KolayTercih karar <em>destek</em>{" "}
            aracıdır; listenin son hâli ve sorumluluğu her zaman sana aittir.
          </p>
        </section>

        <DemoKapanisCta />
      </Parallax>
    </SiralamaDemo>
  );
}

export function MeraklisinaIcerikSkeleton() {
  return (
    <div className="mt-8 space-y-10">
      {Array.from({ length: 3 }, (_, i) => (
        <div key={i}>
          <Skeleton className="h-6 w-72" />
          <Skeleton className="mt-3 h-4 w-full" />
          <Skeleton className="mt-1.5 h-4 w-full" />
          <Skeleton className="mt-1.5 h-4 w-2/3" />
        </div>
      ))}
    </div>
  );
}
