import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { AbsoluteFill, useCurrentFrame } from "remotion";
import { pushThrough } from "@/components/remocn/push-through";
import { Gren } from "./bilesenler/Gren";
import "./fontlar";
import { useFontlarHazir } from "./fontlar-hazir";
import { pikselDalga } from "./gecisler/piksel-dalga";
import { R } from "./marka";
import { S1Gurultu } from "./sahneler/S1Gurultu";
import { haritaTiklama, S2Harita } from "./sahneler/S2Harita";
import { S3Siralama, siralamaTiklama } from "./sahneler/S3Siralama";
import { havuzTiklama, S4Havuz } from "./sahneler/S4Havuz";
import { danismanDalgaNoktasi, S5Danisman } from "./sahneler/S5Danisman";
import { degerDalgaNoktasi, S6Deger } from "./sahneler/S6Deger";
import { S7Kapanis } from "./sahneler/S7Kapanis";
import { GECIS, SAHNE } from "./zaman";

// Sahnelerin küresel başlangıç kareleri (geçişler üst üste biner)
const SIRA = [
  [SAHNE.gurultu, GECIS.g1],
  [SAHNE.harita, GECIS.g2],
  [SAHNE.siralama, GECIS.g3],
  [SAHNE.havuz, GECIS.g4],
  [SAHNE.danisman, GECIS.g5],
  [SAHNE.deger, GECIS.g6],
] as const;
const BASLAR = SIRA.reduce<number[]>((acc, [s, g]) => [...acc, acc[acc.length - 1] + s - g], [0]);
const KAPANIS_BASI = BASLAR[6];

export const Lansman: React.FC = () => {
  useFontlarHazir();
  const f = useCurrentFrame();
  // Koyu sahnelerde gren daha belirgin ve açık zerreli
  const koyu = f < SAHNE.gurultu - 14 || f > KAPANIS_BASI + 14;

  return (
    <AbsoluteFill style={{ background: R.slate50 }}>
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={SAHNE.gurultu}>
          <S1Gurultu />
        </TransitionSeries.Sequence>
        {/* Tek piksel patlar: koyudan açığa, merkezden */}
        <TransitionSeries.Transition
          presentation={pikselDalga({ bant: 420, hucre: 64, renkler: [R.turuncuLogo, R.seftali, R.mavi] })}
          timing={linearTiming({ durationInFrames: GECIS.g1 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.harita}>
          <S2Harita />
        </TransitionSeries.Sequence>
        {/* İmleç logonun turuncu karesine tıklar → dalga oradan */}
        <TransitionSeries.Transition
          presentation={pikselDalga({ origin: haritaTiklama(), bant: 380, hucre: 60, tohum: 5 })}
          timing={linearTiming({ durationInFrames: GECIS.g2 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.siralama}>
          <S3Siralama />
        </TransitionSeries.Sequence>
        {/* CTA'ya basılır → sahne butonun içinden geçilerek terk edilir */}
        <TransitionSeries.Transition
          presentation={pushThrough({ origin: siralamaTiklama(), zoom: 3.2, blur: 16 })}
          timing={linearTiming({ durationInFrames: GECIS.g3 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.havuz}>
          <S4Havuz />
        </TransitionSeries.Sequence>
        {/* Listedeki satıra tıklanır → satırın içinden danışmana */}
        <TransitionSeries.Transition
          presentation={pushThrough({ origin: havuzTiklama(), zoom: 2.8, blur: 14 })}
          timing={linearTiming({ durationInFrames: GECIS.g4 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.danisman}>
          <S5Danisman />
        </TransitionSeries.Sequence>
        {/* Trendin son (2026) pikselinden dalga */}
        <TransitionSeries.Transition
          presentation={pikselDalga({ origin: danismanDalgaNoktasi(), bant: 400, hucre: 60, tohum: 8 })}
          timing={linearTiming({ durationInFrames: GECIS.g5 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.deger}>
          <S6Deger />
        </TransitionSeries.Sequence>
        {/* Son gösterge karesinden koyu dalga: kapanışın CTA bandına */}
        <TransitionSeries.Transition
          presentation={pikselDalga({
            origin: degerDalgaNoktasi(),
            bant: 440,
            hucre: 64,
            tohum: 11,
            renkler: [R.green600, R.slate700, R.turuncu],
          })}
          timing={linearTiming({ durationInFrames: GECIS.g6 })}
        />
        <TransitionSeries.Sequence durationInFrames={SAHNE.kapanis}>
          <S7Kapanis />
        </TransitionSeries.Sequence>
      </TransitionSeries>
      <Gren guc={koyu ? 0.24 : 0.17} koyu={koyu} />
    </AbsoluteFill>
  );
};