// sales-scenes.jsx — EpochCore 90s sales demo scenes (R-Daniel style:
// simulated data flowing behind impactful word overlays + VO-ready captions).
// No internal jargon. Loaded after animations.jsx.

const BG = '#0c0a13';
const INK = '#f3f0fa';
const DIM = 'rgba(243,240,250,0.62)';
const VIOLET = '#7d5bf4';
const VIOLET2 = '#a896f7';
const GREEN = '#2dd881';
const RED = '#ff5675';
const IBMBLUE = '#78a9ff';
const SERIF = 'Newsreader, Georgia, serif';
const MONO = 'JetBrains Mono, ui-monospace, monospace';

const R = (s) => { // deterministic pseudo-random from seed
  let x = Math.sin(s * 99.13) * 43758.5453; return x - Math.floor(x);
};
const HEXCH = '0123456789abcdef';
function hexAt(seed, t) {
  let s = '';
  for (let i = 0; i < 8; i++) s += HEXCH[Math.floor(R(seed + i * 7 + Math.floor(t * 6 + seed)) * 16)];
  return s;
}

// ── Background: columns of flowing hashes / numbers / check glyphs ──────────
function DataRain({ intensity = 1, tint = VIOLET }) {
  const t = useTime();
  const cols = 26, W = 1920, H = 1080, colW = W / cols;
  const items = [];
  for (let c = 0; c < cols; c++) {
    const speed = 30 + R(c) * 70;
    const phase = R(c * 3) * H;
    const rows = 12;
    for (let r = 0; r < rows; r++) {
      const y = ((r * (H / rows) + t * speed + phase) % (H + 60)) - 30;
      const seed = c * 31 + r * 7;
      const lit = R(seed + Math.floor(t * 2)) > 0.86;
      const isCheck = R(seed) > 0.93;
      const op = (lit ? 0.5 : 0.12) * intensity;
      items.push(
        <div key={c + '-' + r} style={{
          position: 'absolute', left: c * colW + 6, top: y,
          fontFamily: MONO, fontSize: 13, letterSpacing: '0.5px',
          color: isCheck ? GREEN : (lit ? tint : INK), opacity: op,
          whiteSpace: 'nowrap', willChange: 'top',
        }}>{isCheck ? '✓ sealed' : hexAt(seed, t)}</div>
      );
    }
  }
  return <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>{items}</div>;
}

// ── Soft vignette + grid wash ───────────────────────────────────────────────
function Backdrop() {
  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(120% 80% at 50% 38%, rgba(125,91,244,0.16), transparent 60%)' }} />
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5,
        background: 'radial-gradient(100% 100% at 50% 50%, transparent 58%, rgba(0,0,0,0.72) 100%)' }} />
    </div>
  );
}

// ── Lower-third caption (VO-ready line) ─────────────────────────────────────
function Caption({ children }) {
  const { progress, duration } = useSprite();
  const inT = Math.min(1, (progress * duration) / 0.4);
  const outT = progress > 0.9 ? (progress - 0.9) / 0.1 : 0;
  const op = Math.min(inT, 1 - outT);
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 92, textAlign: 'center',
      opacity: op, transform: `translateY(${(1 - inT) * 10}px)`,
    }}>
      <span style={{
        fontFamily: SERIF, fontSize: 33, fontWeight: 500, color: INK,
        background: 'rgba(8,6,15,0.55)', padding: '10px 26px', borderRadius: 10,
        boxShadow: '0 8px 30px rgba(0,0,0,0.4)', lineHeight: 1.4,
        maxWidth: 1300, display: 'inline-block', letterSpacing: '-0.01em',
      }}>{children}</span>
    </div>
  );
}

// ── Big center word ─────────────────────────────────────────────────────────
function BigWord({ text, color = INK, size = 150, y = 360, ease = Easing.easeOutBack, sub }) {
  const { progress, duration, localTime } = useSprite();
  const inT = ease(clamp(localTime / 0.5, 0, 1));
  const outT = progress > 0.82 ? Easing.easeInCubic((progress - 0.82) / 0.18) : 0;
  const op = Math.min(inT, 1 - outT);
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, top: y, textAlign: 'center',
      opacity: op, transform: `translateY(${(1 - inT) * 22 - outT * 14}px)` }}>
      <div style={{ fontFamily: SERIF, fontWeight: 800, fontSize: size, color,
        letterSpacing: '-0.04em', lineHeight: 0.95 }}>{text}</div>
      {sub && <div style={{ fontFamily: MONO, fontSize: 20, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: DIM, marginTop: 18 }}>{sub}</div>}
    </div>
  );
}

// ── EpochCore | IBM lockup ──────────────────────────────────────────────────
function Lockup({ scale = 1, showIBM = true }) {
  const { localTime } = useSprite();
  const a = Easing.easeOutBack(clamp(localTime / 0.6, 0, 1));
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, top: 560, display: 'flex',
      alignItems: 'center', justifyContent: 'center', gap: 30, opacity: clamp(localTime / 0.5, 0, 1),
      transform: `scale(${0.9 + 0.1 * a})` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{ width: 38, height: 38, background: `linear-gradient(135deg, ${VIOLET}, ${VIOLET2})`,
          transform: 'rotate(45deg)', borderRadius: 6, boxShadow: `0 0 26px ${VIOLET}88` }} />
        <span style={{ fontFamily: MONO, fontWeight: 700, fontSize: 38, letterSpacing: '1px', color: INK }}>
          Epoch<span style={{ color: VIOLET2 }}>Core</span></span>
      </div>
      {showIBM && <>
        <div style={{ width: 1, height: 42, background: 'rgba(243,240,250,0.25)' }} />
        <span style={{ fontFamily: MONO, fontWeight: 700, fontSize: 34, letterSpacing: '2px',
          color: IBMBLUE }}>IBM watsonx</span>
      </>}
    </div>
  );
}

// ── Count-up stat ───────────────────────────────────────────────────────────
function StatBlock({ x, value, suffix = '', label, color = VIOLET2, decimals = 0 }) {
  const { localTime } = useSprite();
  const p = Easing.easeOutExpo(clamp(localTime / 1.1, 0, 1));
  const shown = (value * p).toFixed(decimals);
  const op = clamp(localTime / 0.4, 0, 1);
  return (
    <div style={{ position: 'absolute', left: x, top: 392, width: 420, textAlign: 'center',
      opacity: op, transform: `translateY(${(1 - op) * 16}px)` }}>
      <div style={{ fontFamily: SERIF, fontWeight: 800, fontSize: 104, color, letterSpacing: '-0.04em',
        lineHeight: 1 }}>{shown}<span style={{ fontSize: 54 }}>{suffix}</span></div>
      <div style={{ fontFamily: MONO, fontSize: 21, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: DIM, marginTop: 16 }}>{label}</div>
    </div>
  );
}

// ── Three-move card (Mark / Seal / Verify) ──────────────────────────────────
function MoveCard({ x, icon, title, desc, active, color = VIOLET }) {
  const { localTime } = useSprite();
  const start = active * 0.5;
  const lt = localTime - start;
  const a = Easing.easeOutBack(clamp(lt / 0.55, 0, 1));
  if (lt < 0) return null;
  return (
    <div style={{ position: 'absolute', left: x, top: 348, width: 500,
      opacity: clamp(lt / 0.4, 0, 1), transform: `translateY(${(1 - a) * 30}px) scale(${0.92 + 0.08 * a})` }}>
      <div style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid ${color}55`, borderRadius: 18,
        padding: '34px 32px', boxShadow: `0 20px 50px -20px ${color}66` }}>
        <div style={{ width: 64, height: 64, borderRadius: 14, background: `${color}22`,
          border: `1px solid ${color}66`, display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 22 }}>{icon}</div>
        <div style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 40, color: INK, letterSpacing: '-0.02em' }}>{title}</div>
        <div style={{ fontFamily: SERIF, fontSize: 22, color: DIM, lineHeight: 1.45, marginTop: 10 }}>{desc}</div>
      </div>
    </div>
  );
}

const IconMark = <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={VIOLET2} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4h18v14H3z"/><path d="M15 12l3 3M13 10l-1.5 1.5"/></svg>;
const IconSeal = <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={VIOLET2} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>;
const IconVerify = <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={GREEN} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></svg>;

// ── The film ────────────────────────────────────────────────────────────────
function SalesFilm() {
  const t = useTime();
  // background intensity ramps with the story
  const rain = interpolate([0, 9, 24, 34, 90], [0.5, 1.1, 1.2, 0.5, 0.6])(t);
  return (
    <div style={{ position: 'absolute', inset: 0, background: BG, overflow: 'hidden' }}>
      <DataRain intensity={rain} />
      <Backdrop />

      {/* S1 — HOOK 0–10 */}
      <Sprite start={0.3} end={5}><BigWord text="REAL?" color={INK} size={210} y={330} /></Sprite>
      <Sprite start={5} end={9.6}><BigWord text="or fake." color={RED} size={150} y={380} /></Sprite>
      <Sprite start={0.6} end={9.6}><Caption>Today, anything can be faked.</Caption></Sprite>

      {/* S2 — PROBLEM 10–24 */}
      <Sprite start={10} end={24}>{() => {
        const lt = useSprite().localTime;
        const words = [['A video.', 0], ['A voice.', 0.9], ['A signed document.', 1.8]];
        return <div>
          {words.map((w, i) => {
            const a = Easing.easeOutBack(clamp((lt - w[1]) / 0.5, 0, 1));
            if (lt < w[1]) return null;
            const struck = lt > 5.4;
            return <div key={i} style={{ position: 'absolute', left: 0, right: 0, top: 250 + i * 130,
              textAlign: 'center', opacity: clamp((lt - w[1]) / 0.4, 0, 1),
              transform: `translateY(${(1 - a) * 24}px)` }}>
              <span style={{ fontFamily: SERIF, fontWeight: 700, fontSize: 92, color: INK,
                letterSpacing: '-0.03em', position: 'relative' }}>{w[0]}
                <span style={{ position: 'absolute', left: -10, right: -10, top: '52%', height: 5,
                  background: RED, borderRadius: 3, transformOrigin: 'left',
                  transform: `scaleX(${struck ? Easing.easeOutExpo(clamp((lt - 5.4) / 0.7, 0, 1)) : 0})` }} /></span>
            </div>;
          })}
        </div>;
      }}</Sprite>
      <Sprite start={10.2} end={16}><Caption>A video. A voice. A signed document.</Caption></Sprite>
      <Sprite start={16} end={24}><Caption>Faked in seconds — and almost no one can tell.</Caption></Sprite>

      {/* S3 — TURN 24–34 */}
      <Sprite start={24} end={34}><BigWord text={"What if your work\ncould prove itself?"} color={INK} size={84} y={360} /></Sprite>
      <Sprite start={24.3} end={34}><Caption>What if every piece of your work could prove itself?</Caption></Sprite>

      {/* S4 — LOGO 34–42 */}
      <Sprite start={34} end={42}>{() => {
        const lt = useSprite().localTime;
        const a = Easing.easeOutBack(clamp(lt / 0.7, 0, 1));
        return <div style={{ position: 'absolute', left: 0, right: 0, top: 380, textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 24,
            transform: `scale(${0.8 + 0.2 * a})`, opacity: clamp(lt / 0.5, 0, 1) }}>
            <div style={{ width: 80, height: 80, background: `linear-gradient(135deg, ${VIOLET}, ${VIOLET2})`,
              transform: `rotate(${45 + (1 - a) * 180}deg)`, borderRadius: 14, boxShadow: `0 0 50px ${VIOLET}` }} />
            <span style={{ fontFamily: MONO, fontWeight: 700, fontSize: 84, letterSpacing: '1px', color: INK }}>
              Epoch<span style={{ color: VIOLET2 }}>Core</span></span>
          </div>
        </div>;
      }}</Sprite>
      <Sprite start={34.4} end={42}><Caption>Meet EpochCore — proof, built in.</Caption></Sprite>

      {/* S5 — THREE MOVES 42–62 */}
      <Sprite start={42} end={62}>
        <MoveCard x={120} active={0} icon={IconMark} title="Mark it" desc="An invisible mark is woven into every file — survives editing, cropping, even screen-recording." color={VIOLET} />
        <MoveCard x={710} active={1} icon={IconSeal} title="Seal it" desc="A tamper-proof seal locks it to this exact moment — unforgeable, and built to outlast tomorrow's threats." color={VIOLET} />
        <MoveCard x={1300} active={2} icon={IconVerify} title="Verify it" desc="Anyone can confirm it's real in seconds — even with no internet, even years later." color={GREEN} />
      </Sprite>
      <Sprite start={42.3} end={48}><Caption>Mark it — an invisible signature, woven right in.</Caption></Sprite>
      <Sprite start={48} end={55}><Caption>Seal it — locked to this moment, impossible to forge.</Caption></Sprite>
      <Sprite start={55} end={62}><Caption>Verify it — proven real in seconds, anywhere.</Caption></Sprite>

      {/* S6 — PROOF STATS 62–76 */}
      <Sprite start={62} end={69}>
        <StatBlock x={300} value={99.2} suffix="%" decimals={1} label="AI clones caught" color={VIOLET2} />
        <StatBlock x={1200} value={1} suffix="s" label="To a sealed proof" color={GREEN} />
      </Sprite>
      <Sprite start={69} end={76}>
        <StatBlock x={300} value={100} suffix="%" label="Works offline" color={VIOLET2} />
        <StatBlock x={1200} value={0} suffix=" MB" label="Your files uploaded" color={GREEN} />
      </Sprite>
      <Sprite start={62.3} end={69}><Caption>Catches AI clones with 99.2% accuracy — proof in under a second.</Caption></Sprite>
      <Sprite start={69} end={76}><Caption>Verifies offline. Your files never leave your device.</Caption></Sprite>

      {/* S7 — WATSONX 76–84 */}
      <Sprite start={76} end={84}>{() => {
        const lt = useSprite().localTime;
        const dots = 18;
        return <div style={{ position: 'absolute', inset: 0 }}>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 300, textAlign: 'center',
            opacity: clamp(lt / 0.5, 0, 1) }}>
            <div style={{ fontFamily: SERIF, fontWeight: 800, fontSize: 76, color: INK, letterSpacing: '-0.03em' }}>
              A whole fleet, working for you.</div>
          </div>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 470, display: 'flex',
            justifyContent: 'center', gap: 18, flexWrap: 'wrap', maxWidth: 1100, margin: '0 auto' }}>
            {Array.from({ length: dots }).map((_, i) => {
              const on = Easing.easeOutBack(clamp((lt - 0.6 - i * 0.07) / 0.4, 0, 1));
              return <div key={i} style={{ width: 54, height: 54, borderRadius: 12,
                background: i % 4 === 0 ? `${GREEN}33` : `${VIOLET}22`,
                border: `1px solid ${i % 4 === 0 ? GREEN : VIOLET}88`,
                transform: `scale(${on})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 8, height: 8, borderRadius: 4, background: i % 4 === 0 ? GREEN : VIOLET2 }} /></div>;
            })}
          </div>
        </div>;
      }}</Sprite>
      <Sprite start={76.3} end={84}><Caption>Built on IBM watsonx — agents that mark, seal, and verify around the clock.</Caption></Sprite>

      {/* S8 — CLOSE 84–90 */}
      <Sprite start={84} end={90}>
        <BigWord text="Seal it. Prove it. Trust it." color={INK} size={70} y={300} />
        <Lockup />
      </Sprite>
    </div>
  );
}

window.SalesFilm = SalesFilm;