import React from "react";
import {AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig} from "remotion";
import {loadFont as loadBesley} from "@remotion/google-fonts/Besley";
import {loadFont as loadInter} from "@remotion/google-fonts/Inter";

const besley = loadBesley().fontFamily;
const inter = loadInter().fontFamily;

const PETROL = "#20383A", PETROL2 = "#0e1d1f", LIME = "#94c11f", LIME_D = "#6f9216";
const TEAL = "#298294", TEALL = "#9bd0d6", INK = "#20383A", RED = "#c0492f", AMBER = "#b07f1e", GREY = "#8a938f";

const reveal = (f: number, s: number) => ({
  opacity: interpolate(f, [s, s + 9], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"}),
  transform: `translateY(${interpolate(f, [s, s + 12], [16, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"})}px)`,
});
const fade = (f: number, s: number, e: number, d = 12) => interpolate(f, [s, s + d, e - d, e], [0, 1, 1, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
const win = (f: number, a: number, b: number) => interpolate(f, [a, a + 14, b - 14, b], [0, 1, 1, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
const app = (f: number, a: number) => interpolate(f, [a, a + 12], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});

// ---------- rail ----------
type ItemDef = {label: string; appear: number; green?: number; red?: number; detail?: string};
const Check: React.FC<{f: number; it: ItemDef}> = ({f, it}) => {
  if (f < it.appear) return null;
  let state: "pending" | "red" | "green" = "pending";
  if (it.red && f >= it.red && (!it.green || f < it.green)) state = "red";
  if (it.green && f >= it.green) state = "green";
  const change = state === "green" ? it.green! : state === "red" ? it.red! : it.appear;
  const pop = interpolate(f, [change, change + 7], [0.55, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  const box = state === "green" ? LIME_D : state === "red" ? RED : "transparent";
  const bord = state === "pending" ? "2px solid #b9c2bd" : "none";
  return (
    <div style={{display: "flex", alignItems: "flex-start", gap: 16, margin: "13px 0", ...reveal(f, it.appear)}}>
      <div style={{width: 36, height: 36, borderRadius: 9, background: box, border: bord, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 25, fontWeight: 700, transform: `scale(${pop})`, flex: "none", marginTop: 1, boxShadow: state === "red" ? `0 0 0 5px rgba(192,73,60,.18)` : "none"}}>{state === "green" ? "✓" : state === "red" ? "✕" : ""}</div>
      <div>
        <div style={{fontFamily: inter, fontSize: 26, color: state === "red" ? RED : state === "green" ? INK : "#65706b", fontWeight: state === "pending" ? 400 : 600}}>{it.label}{state === "red" && <span style={{color: RED, fontWeight: 700}}> - caught</span>}</div>
        {state === "red" && it.detail && <div style={{fontFamily: inter, fontSize: 20, color: RED, marginTop: 4, lineHeight: 1.28}}>{it.detail}</div>}
      </div>
    </div>
  );
};
const PRE: ItemDef[] = [
  {label: "Right tool for this data?", appear: 118, green: 240},
  {label: "Stripped the sensitive bits?", appear: 268, green: 390},
  {label: "Briefed it properly?", appear: 418, green: 505},
  {label: "Gave it the source?", appear: 532, green: 622},
];
const POST: ItemDef[] = [
  {label: "Facts verified?", appear: 962, green: 1130},
  {label: "Nothing invented?", appear: 1160, red: 1240, green: 1360, detail: "“4,200” isn’t in your source"},
  {label: "Sounds like us?", appear: 1384, red: 1470, green: 1590, detail: "“transformational”, “dramatically”"},
  {label: "Would you sign it?", appear: 1608, green: 1786},
];

// ---------- visual-card primitives ----------
const card: React.CSSProperties = {background: "#fbfaf7", borderRadius: 16, padding: "26px 32px", boxShadow: "0 20px 60px rgba(0,0,0,.3)", width: 800};
const Caption: React.FC<{children: React.ReactNode}> = ({children}) => <div style={{fontFamily: besley, fontWeight: 700, fontSize: 38, color: "#f5f2ec", marginBottom: 24}}>{children}</div>;
const VisCard: React.FC<{caption: string; children: React.ReactNode}> = ({caption, children}) => <div><Caption>{caption}</Caption><div style={card}>{children}</div></div>;
const StatusRow: React.FC<{f: number; at: number; text: string; ok: boolean; note: string}> = ({f, at, text, ok, note}) => {
  const m = app(f, at);
  return (
    <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, padding: "14px 0", borderBottom: "1px solid #eee7da", ...reveal(f, at - 6)}}>
      <span style={{fontFamily: inter, fontSize: 25, color: INK, fontWeight: 600}}>{text} <span style={{color: ok ? LIME_D : RED, fontWeight: 500, fontSize: 22, opacity: m}}>- {note}</span></span>
      <span style={{width: 34, height: 34, borderRadius: 8, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 700, fontSize: 21, background: ok ? LIME_D : RED, opacity: m}}>{ok ? "✓" : "✕"}</span>
    </div>
  );
};

// PRE visuals
const VTool: React.FC<{f: number}> = ({f}) => {
  const rows = [{t: "ChatGPT - free, personal login", ok: false, at: 130}, {t: "Your private Claude account", ok: false, at: 152}, {t: "Microsoft Copilot - company · EU-hosted", ok: true, at: 176}];
  return (<VisCard caption="1 · The right tool for this data?">{rows.map((r, i) => {const m = app(f, r.at + 40); return (
    <div key={i} style={{display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, padding: "14px 16px", margin: "8px 0", borderRadius: 10, border: r.ok ? `2px solid ${LIME_D}` : "2px solid #e6e1d6", background: r.ok ? `rgba(111,146,22,${0.08 * m})` : "#fff", ...reveal(f, r.at)}}>
      <span style={{fontFamily: inter, fontSize: 25, color: r.ok ? INK : "#9a9a90", textDecoration: !r.ok && m > 0.4 ? "line-through" : "none", fontWeight: r.ok ? 700 : 400}}>{r.t}</span>
      <span style={{width: 34, height: 34, borderRadius: 8, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 700, fontSize: 21, background: r.ok ? LIME_D : RED, opacity: m}}>{r.ok ? "✓" : "✕"}</span>
    </div>);})}</VisCard>);
};
const FieldRow: React.FC<{f: number; label: string; value: string; maskAt?: number; keep?: boolean}> = ({f, label, value, maskAt, keep}) => {
  const m = maskAt ? app(f, maskAt) : 0;
  return (<div style={{display: "flex", alignItems: "center", gap: 20, padding: "13px 0", borderBottom: "1px solid #eee7da"}}>
    <span style={{fontFamily: inter, fontSize: 21, color: GREY, width: 180, textTransform: "uppercase", letterSpacing: 1, fontWeight: 600}}>{label}</span>
    <span style={{flex: 1, position: "relative", fontFamily: inter, fontSize: 26, color: INK, fontWeight: 600}}>
      <span style={{opacity: keep ? 1 : 1 - m}}>{value}</span>{!keep && <span style={{position: "absolute", left: 0, opacity: m, color: PETROL, letterSpacing: 3}}>•••••••••</span>}
    </span>
    {keep ? <span style={{fontSize: 20, color: LIME_D, fontWeight: 700}}>keep</span> : <span style={{fontSize: 19, color: LIME_D, fontWeight: 700, opacity: m, border: `1px solid ${LIME_D}`, borderRadius: 99, padding: "3px 12px"}}>anonymised</span>}
  </div>);
};
const VData: React.FC<{f: number}> = ({f}) => <VisCard caption="2 · Stripped the sensitive bits?"><FieldRow f={f} label="Beneficiary" value="Maria Schmidt" maskAt={322} /><FieldRow f={f} label="Budget" value="€480,000" maskAt={352} /><FieldRow f={f} label="Partner org" value="Caritas Berlin" keep /></VisCard>;
const VBrief: React.FC<{f: number}> = ({f}) => {
  const tags = [["Role", "a sceptical CFO", 430], ["Audience", "the board", 452], ["Format", "5 bullets", 474]] as const;
  return (<div><Caption>3 · Briefed it properly?</Caption><div style={{...card, display: "flex", flexWrap: "wrap", gap: 14}}>{tags.map(([k, v, at], i) => (
    <span key={i} style={{display: "inline-flex", gap: 8, alignItems: "baseline", padding: "12px 18px", borderRadius: 10, background: "#eef3e6", ...reveal(f, at as number)}}><b style={{fontFamily: inter, fontSize: 19, color: TEAL, textTransform: "uppercase", letterSpacing: 1}}>{k}</b><span style={{fontFamily: inter, fontSize: 25, color: INK, fontWeight: 600}}>{v}</span></span>
  ))}<div style={{width: "100%", fontFamily: inter, fontSize: 22, color: GREY, marginTop: 6, ...reveal(f, 496)}}>A clear brief - not a vague ask.</div></div></div>);
};
const VSource: React.FC<{f: number}> = ({f}) => <div><Caption>4 · Gave it the source?</Caption><div style={{...card, display: "flex", alignItems: "center", gap: 22}}>
  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke={TEAL} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flex: "none"}}><path d="M21 11.5l-8.5 8.5a5 5 0 01-7-7l8.5-8.5a3.3 3.3 0 014.7 4.7L9 17.5a1.7 1.7 0 01-2.3-2.3L14 8" /></svg>
  <div style={{flex: 1}}><div style={{fontFamily: inter, fontSize: 26, color: INK, fontWeight: 700}}>Q3-impact-notes.pdf</div><div style={{fontFamily: inter, fontSize: 21, color: GREY, marginTop: 4}}>It reads your notes - it doesn't guess.</div></div>
  <span style={{fontFamily: inter, fontSize: 21, color: LIME_D, fontWeight: 700, border: `1px solid ${LIME_D}`, borderRadius: 99, padding: "6px 16px", opacity: app(f, 614)}}>attached ✓</span></div></div>;

// THE DRAFT
const VDraft: React.FC<{f: number}> = ({f}) => <VisCard caption="The first draft">
  <div style={{fontFamily: inter, fontSize: 21, color: GREY, marginBottom: 6}}>You · Draft a CSRD impact paragraph - concise and factual.</div>
  <div style={{height: 1, background: "#eee7da", margin: "16px 0 20px"}} />
  <div style={{fontFamily: inter, fontSize: 29, lineHeight: 1.55, color: INK}}>Our flagship programme delivered <span style={{color: app(f, 720) > 0.5 ? AMBER : INK}}>transformational</span> impact, reaching <span style={{color: app(f, 760) > 0.5 ? RED : INK, fontWeight: app(f, 760) > 0.5 ? 700 : 400}}>4,200</span> beneficiaries and <span style={{color: app(f, 800) > 0.5 ? AMBER : INK}}>dramatically improving lives</span> across the community.</div>
</VisCard>;

// POST visuals
const PFacts: React.FC<{f: number}> = ({f}) => <VisCard caption="Facts verified?">
  <StatusRow f={f} at={1000} text="14 partner organisations" ok note="in your notes" />
  <StatusRow f={f} at={1030} text="building digital skills" ok note="in your notes" />
  <StatusRow f={f} at={1062} text="4,200 beneficiaries" ok={false} note="not in your notes" />
</VisCard>;
const PInvented: React.FC<{f: number}> = ({f}) => <VisCard caption="Nothing invented?">
  <div style={{fontFamily: inter, fontSize: 30, lineHeight: 1.5, color: INK}}>“…reaching <span style={{color: RED, textDecoration: "line-through", fontWeight: 700}}>4,200</span> beneficiaries…”</div>
  <div style={{display: "flex", alignItems: "center", gap: 16, marginTop: 24, ...reveal(f, 1255)}}>
    <span style={{fontSize: 19, color: "#fff", background: RED, fontWeight: 700, borderRadius: 99, padding: "5px 14px"}}>removed</span>
    <span style={{fontFamily: inter, fontSize: 24, color: INK}}>the figure was never supplied → <b style={{color: AMBER}}>[figure needed]</b></span>
  </div>
</VisCard>;
const PTone: React.FC<{f: number}> = ({f}) => <VisCard caption="Sounds like us?">
  <div style={{fontFamily: inter, fontSize: 27, lineHeight: 1.5, color: GREY}}>“…delivered <span style={{color: AMBER, textDecoration: "line-through"}}>transformational</span> impact … <span style={{color: AMBER, textDecoration: "line-through"}}>dramatically improving lives</span>…”</div>
  <div style={{display: "flex", alignItems: "center", gap: 14, margin: "22px 0", color: TEAL, fontSize: 26}}>↓</div>
  <div style={{fontFamily: inter, fontSize: 28, lineHeight: 1.5, color: INK, ...reveal(f, 1500)}}>“…supported participants in building digital skills.” <span style={{color: LIME_D, fontWeight: 700, fontSize: 22}}>our factual house tone</span></div>
</VisCard>;
const PSign: React.FC<{f: number}> = ({f}) => <VisCard caption="Would you sign it?">
  <div style={{fontFamily: inter, fontSize: 30, lineHeight: 1.55, color: INK}}>In 2025 the programme supported participants in building digital skills; final reach figures are pending verification from our monitoring data.</div>
  <div style={{display: "flex", alignItems: "center", gap: 14, marginTop: 24, ...reveal(f, 1720)}}>
    <span style={{width: 30, height: 30, borderRadius: 8, background: LIME_D, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 19}}>✓</span>
    <span style={{fontFamily: inter, fontSize: 25, color: INK, fontWeight: 600}}>Yes - you could put your name on this.</span>
  </div>
</VisCard>;

export const Demo: React.FC = () => {
  const f = useCurrentFrame();
  const {fps} = useVideoConfig();
  const introO = fade(f, 0, 92, 14);
  const splitO = interpolate(f, [92, 112, 1800, 1826], [0, 1, 1, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  const signO = interpolate(f, [1826, 1858, 2240, 2270], [0, 1, 1, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  const sigDraw = interpolate(f, [1960, 2035], [1400, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  const sent = f >= 2156;
  const closeO = fade(f, 2270, 2766, 18);

  return (
    <AbsoluteFill style={{fontFamily: inter, background: `radial-gradient(130% 130% at 82% 8%, #2c5054 0%, ${PETROL} 48%, ${PETROL2} 100%)`}}>
      <div style={{position: "absolute", top: 42, left: 56, fontFamily: besley, fontWeight: 700, fontSize: 32, color: "#f5f2ec", opacity: 0.9, zIndex: 5}}>PHINEO<span style={{color: LIME}}>.</span></div>

      {f < 110 && (
        <AbsoluteFill style={{justifyContent: "center", alignItems: "flex-start", padding: "0 130px", opacity: introO}}>
          <div style={{fontWeight: 700, letterSpacing: 6, fontSize: 26, color: TEALL, textTransform: "uppercase"}}>Live demo</div>
          <div style={{fontFamily: besley, fontWeight: 700, fontSize: 100, color: "#f5f2ec", lineHeight: 1.04, marginTop: 18}}>The checklist<br />does the work.</div>
          <div style={{width: 150, height: 9, background: LIME, borderRadius: 3, margin: "32px 0 24px"}} />
          <div style={{fontFamily: besley, fontStyle: "italic", fontSize: 38, color: LIME}}>AI drafts. Your guardrails decide.</div>
        </AbsoluteFill>
      )}

      {f >= 92 && f < 1826 && (
        <AbsoluteFill style={{flexDirection: "row", opacity: splitO, padding: "118px 56px 56px"}}>
          {/* left: visual stage */}
          <div style={{flex: 1, display: "flex", alignItems: "center", justifyContent: "center", paddingRight: 44}}>
            <div style={{position: "relative", width: 800, height: 540}}>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 112, 256)}}><VTool f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 268, 406)}}><VData f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 418, 520)}}><VBrief f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 532, 650)}}><VSource f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 662, 952)}}><VDraft f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 962, 1148)}}><PFacts f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 1160, 1372)}}><PInvented f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 1384, 1596)}}><PTone f={f} /></div>
              <div style={{position: "absolute", inset: 0, opacity: win(f, 1608, 1800)}}><PSign f={f} /></div>
            </div>
          </div>
          {/* right: rail */}
          <div style={{width: 640, background: "#fbfaf7", borderRadius: 20, padding: "30px 34px", boxShadow: "0 30px 70px rgba(0,0,0,.35)", alignSelf: "stretch", display: "flex", flexDirection: "column"}}>
            <div style={{fontFamily: besley, fontWeight: 700, fontSize: 36, color: PETROL}}>Your guardrails</div>
            <div style={{fontFamily: inter, fontSize: 22, color: LIME_D, fontWeight: 600, marginBottom: 8}}>the part WE bring - not the AI</div>
            <div style={{fontFamily: inter, fontSize: 20, letterSpacing: 2, color: TEAL, textTransform: "uppercase", fontWeight: 700, marginTop: 14}}>Pre-flight</div>
            {PRE.map((it, i) => <Check key={i} f={f} it={it} />)}
            <div style={{fontFamily: inter, fontSize: 20, letterSpacing: 2, color: TEAL, textTransform: "uppercase", fontWeight: 700, marginTop: 14}}>Post-flight</div>
            {POST.map((it, i) => <Check key={i} f={f} it={it} />)}
          </div>
        </AbsoluteFill>
      )}

      {/* SIGN & SEND */}
      {f >= 1823 && f < 2274 && (
        <AbsoluteFill style={{justifyContent: "center", alignItems: "center", opacity: signO}}>
          <div style={{width: 1180, background: "#fbfaf7", borderRadius: 20, boxShadow: "0 40px 90px rgba(0,0,0,.42)", padding: "44px 56px", ...reveal(f, 1858)}}>
            <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
              <div style={{fontFamily: inter, fontSize: 22, letterSpacing: 2, textTransform: "uppercase", color: TEAL, fontWeight: 700}}>Final draft</div>
              <div style={{fontFamily: inter, fontSize: 22, color: LIME_D, fontWeight: 700, display: "flex", alignItems: "center", gap: 12}}><span style={{width: 26, height: 26, borderRadius: 8, background: LIME_D, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17}}>✓</span>Cleared by every check</div>
            </div>
            <div style={{fontFamily: inter, fontSize: 33, lineHeight: 1.5, color: INK, marginTop: 26}}>In 2025 the programme supported participants in building digital skills; final reach figures are pending verification from our monitoring data.</div>
            <div style={{height: 1, background: "#e3ded3", margin: "34px 0 24px"}} />
            <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
              <div>
                <div style={{fontFamily: inter, fontSize: 19, color: GREY, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700, marginBottom: 2}}>Signed</div>
                <svg width="340" height="84" viewBox="0 0 340 84" fill="none"><path d="M12,58 C44,10 78,8 96,50 C108,78 132,80 150,48 C168,14 206,10 236,54 C252,78 286,68 332,26" stroke={INK} strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1400" strokeDashoffset={sigDraw} /></svg>
                <div style={{fontFamily: inter, fontSize: 21, color: INK, fontWeight: 600, opacity: app(f, 2055)}}>K. Tesch · 11 Jun 2026</div>
              </div>
              {f >= 2092 && (
                <div style={reveal(f, 2092)}>
                  {!sent ? (
                    <div style={{display: "flex", alignItems: "center", gap: 14, background: TEAL, color: "#fff", fontFamily: inter, fontWeight: 700, fontSize: 28, padding: "16px 34px", borderRadius: 14}}>Send<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13" /><path d="M22 2l-7 20-4-9-9-4 20-7z" /></svg></div>
                  ) : (
                    <div style={{display: "flex", alignItems: "center", gap: 14, background: LIME_D, color: "#fff", fontFamily: inter, fontWeight: 700, fontSize: 28, padding: "16px 34px", borderRadius: 14, ...reveal(f, 2156)}}>Sent<span style={{fontSize: 24}}>✓</span></div>
                  )}
                </div>
              )}
            </div>
          </div>
          <div style={{fontFamily: besley, fontStyle: "italic", fontSize: 46, color: "#f5f2ec", marginTop: 50, opacity: app(f, 2196)}}>You decide. You sign. You send.</div>
        </AbsoluteFill>
      )}

      {/* CLOSING - sober, deck register */}
      {f >= 2270 && (
        <AbsoluteFill style={{justifyContent: "center", alignItems: "center", opacity: closeO}}>
          <div style={{textAlign: "center", maxWidth: 1500}}>
            <div style={{width: 90, height: 5, background: LIME, borderRadius: 2, margin: "0 auto 44px"}} />
            <div style={{fontFamily: besley, fontWeight: 700, fontSize: 74, color: "#f5f2ec", lineHeight: 1.13, letterSpacing: "-.01em"}}>AI advises - you decide,<br />and you <span style={{color: LIME}}>sign.</span></div>
          </div>
        </AbsoluteFill>
      )}
    </AbsoluteFill>
  );
};
