import type { ReactNode } from "react";
import { AbsoluteFill, Easing, Sequence, interpolate, useCurrentFrame } from "remotion";
import { Ikon, type IkonAdi } from "./ikonlar";
import { SahneImleci, TakipKamera, imlecKonumu, type Durak } from "./imlec";
import { PikselKonturDolgu, PikselSheen } from "./kinetik";
import { LogoMark } from "./logo";
import { RiskEtiketi, Sahne, TuruncuCta, useDuzen } from "./ortak";
import { Eyebrow, Wordmark } from "./piksel";
import { vurguStil } from "./sahneler-1";
import { Kamera, MaskeSatir, OdakDisiPikseller } from "./sinema";
import { FONT, R, ara, hash, trSayi, yay, zipla } from "./tema";
import { VURUSLAR } from "./vurus";
import ZAMAN from "./zaman.json";

/* ------------------------------------------------------------------ */
/* Off — sessizlik: "Off. Kafan mı karıştı?" imleç kararsız dolanır      */
/* ------------------------------------------------------------------ */
export function Off() {
  const { dikey, w, h } = useDuzen();
  const cx = w / 2 + (dikey ? 170 : 330);
  const cy = h / 2 + (dikey ? 160 : 90);
  // Kararsız imleç: küçük kıvrımlar, sonra kadrajın ortasına (lens buradan patlar)
  const duraklar: Durak[] = [
    { f: 14, x: cx, y: cy },
    { f: 22, x: cx - 40, y: cy + 20, g: 8 },
    { f: 30, x: cx + 26, y: cy - 24, g: 8 },
    { f: 38, x: cx - 18, y: cy + 30, g: 8 },
    { f: 58, x: w / 2, y: h / 2, g: 14 },
  ];
  return (
    <Sahne zemin={R.beyaz}>
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", textAlign: "center", gap: 20 }}>
        <div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 170 : 180, color: R.slate300, lineHeight: 1 }}>
          <MaskeSatir gecikme={2} sure={16}>
            Off.
          </MaskeSatir>
        </div>
        <div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 76 : 80, color: R.slate500 }}>
          <MaskeSatir gecikme={18} sure={18}>
            Kafan mı karıştı?
          </MaskeSatir>
        </div>
      </AbsoluteFill>
      <SahneImleci duraklar={duraklar} gorunur={[14, 64]} boy={dikey ? 76 : 64} />
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Danışman — BAM: DanışmanlaKonuş                                       */
/* ------------------------------------------------------------------ */
function DanismanlaKonus({ boy }: { boy: number }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: boy * 0.08, fontFamily: FONT.vurgu, fontSize: boy, letterSpacing: "-0.05em", color: R.slate900, whiteSpace: "nowrap" }}>
      <LogoMark boy={boy * 1.25} varyant="nabiz" turuncu girisYok />
      <span>
        <span style={{ fontWeight: 300 }}>Danışmanla</span>
        <span style={{ fontWeight: 600 }}>Konuş</span>
      </span>
    </span>
  );
}

export function Danisman() {
  const frame = useCurrentFrame();
  const { dikey, w, h } = useDuzen();
  // BAM (15. kare, lens kesmesi) anında büyükten oturur
  const otur = interpolate(frame, [15, 26], [1.3, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  // Patlayan pikseller
  const kareler: ReactNode[] = [];
  const d = frame - 15;
  if (d >= 0 && d < 40) {
    for (let n = 0; n < 28; n++) {
      const aci = (n / 28) * Math.PI * 2 + hash(n, 2, 7);
      const uz = (dikey ? 260 : 300) + Easing.out(Easing.cubic)(Math.min(1, d / 30)) * (dikey ? 420 : 620) * (0.5 + hash(n, 3, 1) * 0.5);
      const G = 24;
      const x = Math.round((w / 2 + Math.cos(aci) * uz) / G) * G;
      const y = Math.round((h / 2 - 40 + Math.sin(aci) * uz * 0.7) / G) * G;
      const b = 30 * (1 - d / 42);
      kareler.push(<rect key={n} x={x - b / 2} y={y - b / 2} width={b} height={b} rx={b * 0.27} fill={[R.turuncu, R.logoSeftali, R.primary][n % 3]} fillOpacity={1 - d / 40} />);
    }
  }
  return (
    <Sahne zemin={R.beyaz}>
      <OdakDisiPikseller seed={61} adet={8} />
      <Kamera anahtarlar={[{ f: 0, s: 1.05 }, { f: 80, s: 1.12 }]} vuruslar={VURUSLAR.danisman}>
        <svg width={w} height={h} style={{ position: "absolute", inset: 0 }}>
          {kareler}
        </svg>
        <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", textAlign: "center", gap: 46 }}>
          <div style={{ transform: `scale(${otur})` }}>
            <DanismanlaKonus boy={dikey ? 110 : 150} />
          </div>
          <PikselSheen gecikme={28} fontSize={dikey ? 90 : 100}>
            Aklına takılanı sor.
          </PikselSheen>
          <div style={{ fontSize: dikey ? 40 : 40, color: R.slate500 }}>
            <MaskeSatir gecikme={40}>Gece 3'te bile. Sıkılmaz, yargılamaz.</MaskeSatir>
          </div>
        </AbsoluteFill>
      </Kamera>
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Sohbet — tam ekran danışman; imleç yalnız yazarken/gönderirken         */
/* ------------------------------------------------------------------ */
// Gerçek YÖK Atlas 2026 verisi: İzmir, İngilizce Bilgisayar Mühendisliği, devlet
const SONUCLAR = [
  { uni: "Ege Üniversitesi", taban: 44589, risk: "riskli" as const },
  { uni: "Dokuz Eylül Üniversitesi", taban: 52071, risk: "az-riskli" as const },
  { uni: "İzmir Katip Çelebi Üniversitesi", taban: 71833, risk: "guvenli" as const },
];
const TS = ZAMAN.tiklar.sohbet; // [girdi1, gönder1, girdi2, gönder2]
const YS = ZAMAN.yazma.sohbet;

type Mesaj =
  | { tur: "kullanici"; metin: string; yaz: number[]; gonder: number }
  | { tur: "arac"; ad: string; detay: string; bas: number; bitis: number }
  | { tur: "cevap"; bas: number; tahmin: number; Icerik: () => ReactNode };

function SonucListesi({ olcek }: { olcek: number }) {
  const frame = useCurrentFrame();
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 * olcek }}>
      <div>Sıralamana göre İzmir'de üç devlet seçeneği var:</div>
      {SONUCLAR.map((s, i) => {
        const g = yay(frame, 100 + i * 7, 16);
        return (
          <div key={s.uni} style={{ display: "flex", alignItems: "center", gap: 20 * olcek, background: R.beyaz, border: `3px solid ${R.slate200}`, borderRadius: 24 * olcek, padding: `${16 * olcek}px ${22 * olcek}px`, opacity: g, transform: `translateY(${(1 - g) * 14}px)` }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, color: R.slate900 }}>{s.uni}</div>
              <div style={{ fontSize: "0.72em", color: R.slate500 }}>Bilgisayar Mühendisliği · Devlet</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
              <RiskEtiketi risk={s.risk} olcek={2 * olcek} />
              <span style={{ fontSize: "0.72em", color: R.slate500 }}>
                Taban <b style={{ color: R.slate900 }}>{trSayi(s.taban)}</b>
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export function Sohbet() {
  const frame = useCurrentFrame();
  const { dikey, w, h } = useDuzen();
  const o = dikey ? 1 : 0.86; // ölçek
  const L = dikey
    ? { x: 50, w: 980, ustY: 80, ustH: 130, altY: 1630, altH: 170 }
    : { x: 260, w: 1400, ustY: 30, ustH: 110, altY: 900, altH: 130 };
  const gonderX = L.x + L.w - L.altH / 2 - 10;
  const altMerkez = L.altY + L.altH / 2;

  const SENARYO: Mesaj[] = [
    { tur: "kullanici", metin: "İzmir'de İngilizce bilgisayar mühendisliği var mı?", yaz: YS[0], gonder: TS[1] },
    { tur: "arac", ad: "program_ara", detay: "İzmir · İngilizce", bas: TS[1] + 6, bitis: TS[1] + 32 },
    { tur: "cevap", bas: 90, tahmin: 620 * o, Icerik: () => <SonucListesi olcek={o} /> },
    { tur: "kullanici", metin: "Aslında İzmir dışına çıkmak istemiyorum.", yaz: YS[1], gonder: TS[3] },
    { tur: "arac", ad: "profil_guncelle", detay: "şehir: İzmir", bas: TS[3] + 6, bitis: TS[3] + 22 },
    {
      tur: "cevap",
      bas: 224,
      tahmin: 260 * o,
      Icerik: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
          <div>Tamam, profilini güncelledim. Yeni listende yalnız İzmir'deki programlar olacak.</div>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 10, height: 64 * o, padding: `0 ${24 * o}px`, borderRadius: 999, background: R.primary, color: R.beyaz, fontWeight: 600, fontSize: "0.85em", transform: `scale(${Math.max(0, zipla(frame, 242))})`, transformOrigin: "left center" }}>
            <Ikon ad="konum" boy={28 * o} />
            Şehir: İzmir
            <Ikon ad="tik" boy={28 * o} kalinlik={3} />
          </span>
        </div>
      ),
    },
  ];

  const yazilan = (() => {
    for (const m of SENARYO) {
      if (m.tur !== "kullanici") continue;
      if (frame >= m.yaz[0] && frame < m.gonder) {
        const n = Math.floor(ara(frame, [m.yaz[0], m.yaz[1]], [0, m.metin.length], (t) => t));
        return m.metin.slice(0, n);
      }
    }
    return "";
  })();
  const basis = TS.some((t, i) => i % 2 === 1 && frame >= t - 2 && frame < t + 3);

  const girdiX = L.x + 260;
  const imlec1: Durak[] = [
    { f: 8, x: w * 0.72, y: altMerkez - 260 },
    { f: TS[0], x: girdiX, y: altMerkez + 10, g: 12 },
    { f: TS[1], x: gonderX, y: altMerkez, g: 12 },
    { f: 72, x: gonderX - 60, y: altMerkez - 220, g: 12 },
  ];
  const imlec2: Durak[] = [
    { f: 156, x: w * 0.7, y: altMerkez - 300 },
    { f: TS[2], x: girdiX, y: altMerkez + 10, g: 10 },
    { f: TS[3], x: gonderX, y: altMerkez, g: 12 },
    { f: 216, x: gonderX - 80, y: altMerkez - 240, g: 12 },
  ];
  const nokta = (f: number) => (f < 120 ? imlecKonumu(imlec1, f) : imlecKonumu(imlec2, f));

  return (
    <Sahne>
      <TakipKamera
        nokta={nokta}
        vuruslar={VURUSLAR.sohbet}
        anahtarlar={[
          { f: 0, s: 1, t: 0 },
          { f: TS[0], s: 1.3, t: 0.8 },
          { f: TS[1] + 4, s: 1.3, t: 0.8 },
          { f: 80, s: 1.02, t: 0 },
          { f: 150, s: 1.04, t: 0 },
          { f: TS[2], s: 1.3, t: 0.8 },
          { f: TS[3] + 4, s: 1.3, t: 0.8 },
          { f: 214, s: 1.02, t: 0 },
          { f: 300, s: 1.06, t: 0 },
        ]}
      >
        {/* Üst şerit */}
        <div style={{ position: "absolute", left: L.x, top: L.ustY, width: L.w, height: L.ustH, display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: `3px solid ${R.slate200}` }}>
          <DanismanlaKonus boy={dikey ? 52 : 50} />
          <span style={{ display: "inline-flex", alignItems: "center", height: 64 * o, padding: `0 ${26 * o}px`, borderRadius: 999, border: `3px solid ${R.slate200}`, fontSize: 28 * o, fontWeight: 600, color: R.slate700 }}>
            {frame >= TS[3] ? 58 : frame >= TS[1] ? 59 : 60} soru hakkı
          </span>
        </div>
        {/* Mesajlar */}
        <div
          style={{
            position: "absolute",
            left: L.x,
            width: L.w,
            top: L.ustY + L.ustH + 20,
            height: L.altY - (L.ustY + L.ustH + 20) - 20,
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-end",
            gap: 26 * o,
            overflow: "hidden",
            fontSize: 40 * o,
            lineHeight: 1.4,
          }}
        >
          {SENARYO.map((m, i) => {
            const bas = m.tur === "kullanici" ? m.gonder : m.bas;
            if (frame < bas) return null;
            const g = yay(frame, bas, 16);
            const tahmin = m.tur === "kullanici" ? 200 * o : m.tur === "arac" ? 90 * o : m.tahmin;
            const kap = { maxHeight: g >= 0.999 ? undefined : g * tahmin, overflow: "hidden" as const, flexShrink: 0 };
            if (m.tur === "kullanici") {
              return (
                <div key={i} style={{ ...kap, display: "flex", justifyContent: "flex-end" }}>
                  <div style={{ maxWidth: "82%", background: R.primary, color: R.beyaz, padding: `${22 * o}px ${30 * o}px`, borderRadius: 34 * o, fontWeight: 600, opacity: g, transform: `translateY(${(1 - g) * 20}px)` }}>{m.metin}</div>
                </div>
              );
            }
            if (m.tur === "arac") {
              const bitti = frame >= m.bitis;
              return (
                <div key={i} style={{ ...kap, display: "flex", alignItems: "center", gap: 16 }}>
                  <span style={{ width: 64 * o, height: 64 * o, borderRadius: 999, border: `3px solid ${R.slate200}`, background: R.beyaz, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <LogoMark boy={40 * o} varyant={bitti ? "duruk" : "nabiz"} girisYok />
                  </span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 12, height: 60 * o, padding: `0 ${24 * o}px`, borderRadius: 999, background: R.slate50, border: `3px solid ${R.slate200}`, fontSize: 26 * o, fontWeight: 600, color: R.slate600, opacity: g, whiteSpace: "nowrap" }}>
                    {bitti ? <Ikon ad="tik" boy={26 * o} renk={R.guvenliYazi} kalinlik={3} /> : <Ikon ad="arama" boy={26 * o} renk={R.primary} />}
                    <span style={{ fontFamily: FONT.vurgu, color: R.primary }}>{m.ad}</span>
                    <span>· {m.detay}</span>
                    {!bitti ? <span style={{ color: R.slate400 }}>· YÖK Atlas'ta arıyor{".".repeat(1 + (Math.floor(frame / 6) % 3))}</span> : null}
                  </span>
                </div>
              );
            }
            return (
              <div key={i} style={{ ...kap, paddingLeft: 80 * o }}>
                <div style={{ maxWidth: "94%", background: R.slate100, color: R.slate800, padding: `${24 * o}px ${30 * o}px`, borderRadius: 34 * o, opacity: g, transform: `translateY(${(1 - g) * 20}px)` }}>
                  <m.Icerik />
                </div>
              </div>
            );
          })}
        </div>
        {/* Yazma kutusu */}
        <div
          style={{
            position: "absolute",
            left: L.x,
            top: L.altY,
            width: L.w,
            height: L.altH,
            display: "flex",
            alignItems: "center",
            gap: 20,
            borderRadius: 48 * o,
            border: `4px solid ${yazilan ? R.primary : R.slate200}`,
            boxShadow: yazilan ? "0 0 0 10px rgba(59,130,246,0.16)" : undefined,
            background: R.beyaz,
            padding: `0 16px 0 ${44 * o}px`,
            fontSize: 42 * o,
          }}
        >
          <span style={{ flex: 1, color: yazilan ? R.slate900 : R.slate400, whiteSpace: "nowrap", overflow: "hidden" }}>
            {yazilan || "Listen hakkında bir şey sor…"}
            {yazilan && Math.floor(frame / 8) % 2 === 0 ? <span style={{ color: R.primary }}>|</span> : null}
          </span>
          <span style={{ width: L.altH - 36, height: L.altH - 36, borderRadius: 999, background: basis ? R.turuncuKoyu : R.turuncu, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${basis ? 0.93 : 1})`, flexShrink: 0 }}>
            <Ikon ad="ok" boy={56 * o} renk={R.beyaz} kalinlik={2.6} style={{ transform: "rotate(-90deg)" }} />
          </span>
        </div>
        <div style={{ position: "absolute", left: 0, width: w, top: dikey ? h - 100 : h - 50, display: "flex", justifyContent: "center", opacity: yay(frame, 262, 16) }}>
          <Eyebrow olcek={dikey ? 2.3 : 2}>Havuz dışına çıkamaz, uydurma bölüm önermez</Eyebrow>
        </div>
        <SahneImleci duraklar={imlec1} tiklar={[TS[0], TS[1]]} gorunur={[8, 74]} boy={dikey ? 76 : 64} />
        <SahneImleci duraklar={imlec2} tiklar={[TS[2], TS[3]]} gorunur={[156, 218]} boy={dikey ? 76 : 64} />
      </TakipKamera>
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Paket — Apple hızlı kesmeleri: trend, PDF, revizyon                   */
/* ------------------------------------------------------------------ */
const TREND = [37831, 27534, 21602, 30797, 42108, 55158]; // AYBÜ Bilgisayar, 2021–2026

function PaketKarti({ ikon, baslik, alt, children }: { ikon: IkonAdi; baslik: string; alt: string; children: ReactNode }) {
  const frame = useCurrentFrame();
  const { dikey } = useDuzen();
  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: dikey ? 60 : 40, flexDirection: dikey ? "column" : "row", padding: dikey ? "0 70px" : "0 160px" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: dikey ? "center" : "flex-start", textAlign: dikey ? "center" : "left", gap: 24, flex: dikey ? undefined : 1 }}>
        <div style={{ width: 120, height: 120, borderRadius: 32, background: "rgba(59,130,246,0.1)", display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Math.max(0, zipla(frame, 0))})` }}>
          <Ikon ad={ikon} boy={58} renk={R.primary} />
        </div>
        <PikselSheen gecikme={2} fontSize={dikey ? 110 : 120}>
          {baslik}
        </PikselSheen>
        <div style={{ fontSize: dikey ? 46 : 46, color: R.slate500, lineHeight: 1.3 }}>
          <MaskeSatir gecikme={10}>{alt}</MaskeSatir>
        </div>
      </div>
      <div style={{ flex: dikey ? undefined : 1, display: "flex", justifyContent: "center" }}>{children}</div>
    </AbsoluteFill>
  );
}

function TrendGorseli() {
  const frame = useCurrentFrame();
  const { dikey } = useDuzen();
  const gW = dikey ? 860 : 760;
  const gH = dikey ? 420 : 440;
  const noktalar = TREND.map((v, i) => [(i / (TREND.length - 1)) * gW, ((v - 15000) / 45000) * gH]);
  const c = ara(frame, [6, 34], [0, 1]);
  const yol = noktalar.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join(" ");
  return (
    <svg width={gW + 40} height={gH + 90} viewBox={`-20 -20 ${gW + 40} ${gH + 90}`}>
      <path d={yol} fill="none" stroke={R.primary} strokeWidth={10} strokeLinecap="round" strokeLinejoin="round" pathLength={1} strokeDasharray={1} strokeDashoffset={1 - c} />
      {noktalar.map((p, i) => (
        <g key={i} opacity={c >= i / (TREND.length - 1) ? 1 : 0}>
          <rect x={p[0] - 16} y={p[1] - 16} width={32} height={32} rx={9} fill={i === TREND.length - 1 ? R.turuncu : R.primary} />
          <text x={p[0]} y={gH + 50} textAnchor="middle" fontSize={28} fontFamily="Clarity City" fontWeight={600} fill={R.slate400}>
            {2021 + i}
          </text>
        </g>
      ))}
    </svg>
  );
}

function PdfGorseli() {
  const frame = useCurrentFrame();
  const { dikey } = useDuzen();
  const k = dikey ? 1.6 : 1.5;
  return (
    <div style={{ position: "relative", width: 330 * k, height: 380 * k }}>
      {[2, 1, 0].map((i) => {
        const s = yay(frame, 4 + (2 - i) * 5, 18);
        return (
          <div
            key={i}
            style={{
              position: "absolute",
              left: (60 + i * 30) * k,
              top: (20 + i * 22) * k,
              width: 220 * k,
              height: 290 * k,
              borderRadius: 26 * k,
              background: R.beyaz,
              border: `3px solid ${R.slate200}`,
              boxShadow: "0 18px 40px rgba(15,23,42,0.08)",
              transform: `rotate(${(i - 1) * 7 * s}deg)`,
              padding: 26 * k,
              display: "flex",
              flexDirection: "column",
              gap: 16 * k,
            }}
          >
            {i === 0 ? (
              <>
                <div style={{ display: "flex", gap: 8 * k }}>
                  {[R.riskli, R.azRiskli, R.guvenli].map((c) => (
                    <span key={c} style={{ width: 24 * k, height: 24 * k, borderRadius: 7 * k, background: c }} />
                  ))}
                </div>
                {[1, 0.8, 0.9, 0.6, 0.75, 0.5].map((wd, j) => (
                  <span key={j} style={{ height: 14 * k, width: `${wd * 100}%`, borderRadius: 7 * k, background: R.slate200 }} />
                ))}
              </>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}

const REVIZYON = [
  { ad: "Ege · Bilgisayar Müh.", renk: R.riskli },
  { ad: "Dokuz Eylül · Bilgisayar Müh.", renk: R.azRiskli },
  { ad: "Katip Çelebi · Bilgisayar Müh.", renk: R.guvenli },
];

function RevizyonGorseli() {
  const frame = useCurrentFrame(); // alt dizi içi kare (0–45)
  const { dikey } = useDuzen();
  const [tut, birak] = ZAMAN.tiklar.paket.map((t) => t - 90);
  const SAT = dikey ? 130 : 120;
  const g = dikey ? 880 : 760;
  const ilerle = ara(frame, [tut, birak], [0, 1], Easing.inOut(Easing.cubic));
  const tutuldu = frame >= tut && frame < birak + 2;
  return (
    <div style={{ position: "relative", width: g, height: 3 * SAT }}>
      {REVIZYON.map((r, i) => {
        const gecis = i === 1 ? (2 * ilerle - 0.5) / 0.8 : (2 * ilerle - 1.3) / 0.7;
        const kay = Easing.inOut(Easing.cubic)(Math.min(1, Math.max(0, gecis)));
        const y = i === 0 ? ilerle * 2 * SAT : (i - kay) * SAT;
        const kalk = i === 0 && tutuldu ? 1 : 0;
        return (
          <div
            key={r.ad}
            style={{
              position: "absolute",
              left: kalk * 24,
              top: y,
              width: "100%",
              height: SAT - 20,
              borderRadius: 30,
              border: `4px solid ${kalk ? R.turuncu : R.slate200}`,
              background: kalk ? "#fff7ed" : R.beyaz,
              display: "flex",
              alignItems: "center",
              gap: 24,
              padding: "0 32px",
              fontSize: dikey ? 40 : 38,
              fontWeight: 600,
              color: R.slate800,
              boxShadow: kalk ? "0 24px 48px rgba(15,23,42,0.16)" : undefined,
              transform: `scale(${1 + kalk * 0.04}) rotate(${kalk * -1.5}deg)`,
              zIndex: i === 0 ? 2 : 1,
            }}
          >
            <span style={{ width: 24, height: 24, borderRadius: 7, background: r.renk }} />
            <span style={{ flex: 1 }}>{r.ad}</span>
            <span style={{ display: "grid", gridTemplateColumns: "repeat(2, 9px)", gap: 6 }}>
              {Array.from({ length: 6 }, (_, k) => (
                <span key={k} style={{ width: 9, height: 9, borderRadius: 3, background: R.slate400 }} />
              ))}
            </span>
          </div>
        );
      })}
    </div>
  );
}

export function Paket() {
  const { dikey, w, h } = useDuzen();
  const [tut, birak] = ZAMAN.tiklar.paket;
  // Revizyon kartında imleç ilk satırı tutup en alta sürükler (kamera takip eder)
  const SAT = dikey ? 130 : 120;
  const gW = dikey ? 880 : 760;
  const kartX = dikey ? (w - gW) / 2 : w * 0.5 + 60 + (w * 0.5 - 220 - gW) / 2;
  const kartY = dikey ? h / 2 + 230 : h / 2 - (3 * SAT) / 2;
  const tutX = kartX + gW - 50;
  const duraklar: Durak[] = [
    { f: 92, x: tutX + 120, y: kartY + 360 },
    { f: tut, x: tutX, y: kartY + (SAT - 20) / 2, g: 8 },
    { f: birak, x: tutX + 24, y: kartY + 2 * SAT + (SAT - 20) / 2, g: birak - tut },
    { f: 134, x: tutX + 90, y: kartY + 2 * SAT + 120, g: 10 },
  ];
  const nokta = (f: number) => imlecKonumu(duraklar, f);
  return (
    <Sahne>
      <OdakDisiPikseller seed={71} adet={6} guc={0.6} />
      <TakipKamera
        nokta={nokta}
        vuruslar={VURUSLAR.paket}
        anahtarlar={[
          { f: 0, s: 1.06, t: 0 },
          { f: 44, s: 1.0, t: 0 },
          { f: 45, s: 1.06, t: 0 },
          { f: 89, s: 1.0, t: 0 },
          { f: 90, s: 1.04, t: 0 },
          { f: tut, s: dikey ? 1.15 : 1.08, t: dikey ? 0.35 : 0.12 },
          { f: birak, s: dikey ? 1.15 : 1.08, t: dikey ? 0.35 : 0.12 },
          { f: 135, s: 1.05, t: 0.1 },
        ]}
      >
        <Sequence durationInFrames={45}>
          <PaketKarti ikon="trend" baslik="6 yıllık trend." alt="Her tercihin geçmişi, tek bakışta.">
            <TrendGorseli />
          </PaketKarti>
        </Sequence>
        <Sequence from={45} durationInFrames={45}>
          <PaketKarti ikon="belge" baslik="PDF rapor." alt="Aile toplantısına hazır.">
            <PdfGorseli />
          </PaketKarti>
        </Sequence>
        <Sequence from={90}>
          <PaketKarti ikon="yenile" baslik="2 revizyon." alt="Fikrin değişir, listen de.">
            <RevizyonGorseli />
          </PaketKarti>
        </Sequence>
        <SahneImleci duraklar={duraklar} tiklar={[tut, birak]} gorunur={[92, 136]} boy={dikey ? 76 : 64} />
      </TakipKamera>
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Dürüstlük — Outline Fill Track: "Çünkü kimse veremez."                */
/* ------------------------------------------------------------------ */
export function Durust() {
  const frame = useCurrentFrame();
  const { dikey, w } = useDuzen();
  const alt = yay(frame, 86, 18);
  return (
    <Sahne zemin={R.beyaz}>
      <Kamera anahtarlar={[{ f: 0, s: 1.02 }, { f: 140, s: 1.12 }]} vuruslar={VURUSLAR.durust}>
        <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", textAlign: "center", gap: 40 }}>
          <div style={{ width: 140, height: 140, borderRadius: 38, background: R.primary, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${Math.max(0, zipla(frame, 0))})` }}>
            <Ikon ad="kalkan" boy={76} renk={R.beyaz} />
          </div>
          <div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 104 : 116, lineHeight: 1.06 }}>
            <MaskeSatir gecikme={6}>Yerleşme garantisi</MaskeSatir>
            <MaskeSatir gecikme={14}>vermiyoruz.</MaskeSatir>
          </div>
          <PikselKonturDolgu on="Çünkü" deger="kimse veremez." fontSize={dikey ? 84 : 100} gecikme={30} genislik={w} />
          <div style={{ opacity: alt, transform: `translateY(${(1 - alt) * 20}px)`, display: "flex", flexDirection: "column", alignItems: "center", gap: 24, marginTop: 10 }}>
            <div style={{ fontSize: 40, color: R.slate600, fontWeight: 600, maxWidth: dikey ? 900 : 1500, lineHeight: 1.4 }}>
              Veren olursa, uzak dur. Biz riski satır satır gösteririz.
            </div>
            <div style={{ display: "flex", gap: 44 }}>
              {(["guvenli", "az-riskli", "riskli"] as const).map((r, i) => (
                <span key={r} style={{ transform: `scale(${Math.max(0, zipla(frame, 94 + i * 5))})` }}>
                  <RiskEtiketi risk={r} olcek={3.2} />
                </span>
              ))}
            </div>
          </div>
        </AbsoluteFill>
      </Kamera>
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Hazır — sessizlik                                                    */
/* ------------------------------------------------------------------ */
export function Hazir() {
  const frame = useCurrentFrame();
  const { dikey } = useDuzen();
  const kare = dikey ? 64 : 56;
  return (
    <Sahne zemin={R.beyaz}>
      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", gap: 50 }}>
        <div style={{ display: "flex", gap: kare * 0.22 }}>
          {[R.logoMavi, R.logoSeftali, R.logoTuruncu].map((c, i) => (
            <div key={c} style={{ width: kare, height: kare, borderRadius: kare * 0.23, background: c, transform: `scale(${Math.max(0, zipla(frame, 4 + i * 6))})` }} />
          ))}
        </div>
        <div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 70 : 66, color: R.slate500 }}>
          <MaskeSatir gecikme={8}>Hazır mısın?</MaskeSatir>
        </div>
      </AbsoluteFill>
    </Sahne>
  );
}

/* ------------------------------------------------------------------ */
/* Final — logo + tipografi + buton; tık → çöküş → boş ekran (döngü)     */
/* ------------------------------------------------------------------ */
export function Final() {
  const frame = useCurrentFrame();
  const { dikey, w, h } = useDuzen();
  const [tik] = ZAMAN.tiklar.final;
  const otur = interpolate(frame, [15, 26], [1.2, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
  const bas = ara(frame, [tik - 2, tik + 1], [0, 1]) * (1 - ara(frame, [tik + 5, tik + 10], [0, 1]));
  const cok = ara(frame, [tik + 4, tik + 30], [0, 1], Easing.bezier(0.7, 0, 0.84, 0));
  // Buton kadrajda sabit bir noktada (imleç ve çöküş kökeni)
  const butonY = dikey ? h / 2 + 350 : h / 2 + 260;
  const duraklar: Durak[] = [
    { f: 84, x: w / 2 + (dikey ? 300 : 520), y: butonY + (dikey ? 380 : 200) },
    { f: tik - 4, x: w / 2 + 60, y: butonY + 8, g: 26 },
    { f: tik, x: w / 2 + 60, y: butonY + 8 },
    { f: 170, x: w / 2, y: h / 2, g: 30 },
  ];
  const nokta = (f: number) => imlecKonumu(duraklar, f);
  return (
    <Sahne>
      <TakipKamera
        nokta={nokta}
        vuruslar={VURUSLAR.final}
        anahtarlar={[
          { f: 0, s: 1.06, t: 0 },
          { f: 90, s: 1, t: 0 },
          { f: tik - 6, s: 1.4, t: 1 },
          { f: tik + 10, s: 1.4, t: 1 },
          { f: tik + 36, s: 1, t: 0 },
        ]}
      >
        <AbsoluteFill
          style={{
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            gap: dikey ? 70 : 54,
            transformOrigin: `50% ${(butonY / h) * 100}%`,
            transform: `scale(${otur * (1 - cok)})`,
            opacity: 1 - ara(frame, [tik + 18, tik + 30], [0, 1]),
            filter: `blur(${cok * 10}px)`,
          }}
        >
          <div style={{ display: "flex", flexDirection: dikey ? "column" : "row", alignItems: "center", gap: dikey ? 14 : 26 }}>
            <LogoMark boy={dikey ? 220 : 180} girisYok rotaBas={24} />
            <Wordmark boy={dikey ? 116 : 116} />
          </div>
          <div style={{ fontFamily: FONT.baslik, fontWeight: 700, fontSize: dikey ? 100 : 108, lineHeight: 1.06 }}>
            <MaskeSatir gecikme={20}>Listeni kur,</MaskeSatir>
            <MaskeSatir gecikme={28}>
              <span style={vurguStil}>panikle</span> değil.
            </MaskeSatir>
          </div>
          <div style={{ transform: `scale(${Math.max(0, zipla(frame, 38))})` }}>
            <TuruncuCta metin="kolaytercih.com" boy={dikey ? 1.25 : 1.15} basili={bas} />
          </div>
        </AbsoluteFill>
        <SahneImleci duraklar={duraklar} tiklar={[tik]} gorunur={[84, 176]} boy={dikey ? 80 : 68} />
      </TakipKamera>
    </Sahne>
  );
}