import type { CSSProperties, ReactNode } from "react";
import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";
import { demoIcerik as c } from "../lib/demo-icerik";
import { Fonts } from "./Fonts";

const colors = { paper: "#f3f1e7", ink: "#243d32", accent: "#35624c", sage: "#dce4d4", line: "#bfcdbd" };
const serif = '"Tasnora Serif", serif';
const sans = '"Tasnora Sans", sans-serif';
const title: CSSProperties = { margin: 0, fontFamily: serif, fontSize: 60, lineHeight: 1.16, fontWeight: 400, letterSpacing: -1.8 };

function Card({ index, children, style }: { index: number; children: ReactNode; style?: CSSProperties }) {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig();
  const enter = spring({ fps, frame: Math.max(0, frame - 8 - index * 6), config: { damping: 200, stiffness: 150 } });
  return <div style={{ padding: 28, background: "#fffdf6", border: `1px solid ${colors.line}`, borderRadius: 12, opacity: interpolate(frame, [8 + index * 6, 17 + index * 6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), transform: `translateY(${(1 - enter) * 35}px)`, ...style }}>{children}</div>;
}

function Scene({ index }: { index: number }) {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const dark = index === 3;
  const opacity = dark ? interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" }) : interpolate(frame, [0, 12, 82, 89], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  const enter = spring({ frame, fps, config: { damping: 200, stiffness: 130 } });
  return <AbsoluteFill style={{ background: dark ? colors.ink : colors.paper, color: dark ? "#fffdf6" : colors.ink, fontFamily: sans }}>
    <div style={{ position: "absolute", top: 76, left: 128, fontFamily: serif, fontSize: 32 }}>{c.marka} /</div>
    <div style={{ position: "absolute", top: 88, right: 128, fontSize: 19 }}>0{index + 1} / 04</div>
    <div style={{ position: "absolute", inset: "174px 128px 140px", opacity, transform: `translateY(${(1 - enter) * 22}px)` }}>
      {index === 0 && <div style={{ display: "grid", gridTemplateColumns: "1fr 250px", gap: 36, alignItems: "center" }}>
        <div><p style={{ fontSize: 19, letterSpacing: 1.5, margin: "0 0 25px" }}>{c.hero.etiket}</p><h1 style={title}>{c.hero.baslik}<br /><span style={{ color: colors.accent }}>{c.hero.vurgu}</span></h1><p style={{ fontSize: 23, marginTop: 30 }}>{c.urun}</p></div>
        <Card index={0} style={{ background: colors.sage, height: 300 }}><div style={{ fontSize: 16, letterSpacing: 1.5 }}>TASNORA / 01</div><h2 style={{ fontFamily: serif, fontSize: 30, fontWeight: 400, marginTop: 30 }}>{c.kartlar[0].ad}</h2>{c.kartlar[0].alanlar.map(text => <p key={text} style={{ fontSize: 17, borderBottom: "1px solid #8da68d", paddingBottom: 10 }}>{text}</p>)}</Card>
      </div>}
      {index === 1 && <><h2 style={{ ...title, fontSize: 47 }}>Küçük bir düzen. Daha çok alan.</h2><div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }}>{c.ozellikler.map((feature, i) => <Card index={i} key={feature.id} style={{ height: 265 }}><span style={{ fontSize: 24, color: colors.accent }}>{feature.sembol}</span><h3 style={{ fontFamily: serif, fontSize: 28, fontWeight: 400, margin: "24px 0 16px", lineHeight: 1.25 }}>{feature.baslik}</h3><p style={{ fontSize: 20, lineHeight: 1.5, margin: 0 }}>{feature.ozet}</p></Card>)}</div></>}
      {index === 2 && <><h2 style={{ ...title, fontSize: 48 }}>İhtiyacın kadar alan.</h2><div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 32 }}>{c.planlar.map((plan, i) => <Card index={i} key={plan.id} style={{ height: 275, background: i === 1 ? colors.sage : "#fffdf6" }}><h3 style={{ fontFamily: serif, fontSize: 28, fontWeight: 400, margin: 0 }}>{plan.ad}</h3><p style={{ fontFamily: serif, fontSize: 59, margin: "23px 0" }}>{plan.fiyat} <span style={{ fontSize: 26 }}>₺</span></p><p style={{ fontSize: 20, lineHeight: 1.5, margin: 0 }}>{plan.aciklama}</p></Card>)}</div></>}
      {index === 3 && <div style={{ paddingTop: 32 }}><h2 style={{ ...title, fontSize: 68 }}>{c.hero.vurgu}</h2><div style={{ display: "inline-block", marginTop: 42, padding: "18px 30px", background: colors.paper, color: colors.ink, fontSize: 26, borderRadius: 6 }}>{c.hero.eylem} ↗</div><p style={{ marginTop: 28, fontSize: 23 }}>{c.marka} / {c.urun}</p></div>}
    </div>
    <p style={{ position: "absolute", left: 128, bottom: 65, fontSize: 19, margin: 0 }}>Kurgusal dijital set · örnek fiyatlar · gerçek satış yapılmaz</p>
    <div style={{ position: "absolute", bottom: 0, left: 0, height: 5, width: `${interpolate(frame, [0, 89], [0, 100], { extrapolateRight: "clamp" })}%`, background: dark ? "#bfcdbd" : colors.accent }} />
  </AbsoluteFill>;
}

export function Tasnora() {
  return <AbsoluteFill style={{ background: colors.paper }}><Fonts />{[0, 1, 2, 3].map(index => <Sequence key={index} from={index * 90} durationInFrames={90}><Scene index={index} /></Sequence>)}</AbsoluteFill>;
}