// va-scenes.jsx — Vizalyze product/marketing walkthrough scenes.
// Loaded after va-common.jsx. Each scene renders its own <Sprite>.

const SHOT_W = 1010, SHOT_H = 631, SHOT_Y = 224;
const TOTAL_BEATS = 5;

// ════════════════════════════════════════════════════════════════════════════
// SCENE 1 — Cold open: the VA mark draws itself, then the wordmark + tagline.
// ════════════════════════════════════════════════════════════════════════════
function SceneIntro({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const draw = Easing.easeInOutCubic(clamp((localTime - 0.3) / 2.4, 0, 1));
        const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.6)) / 0.6, 0, 1));
        const lift = -localTime * 4; // very slow drift up
        return (
          <div style={{ position: 'absolute', inset: 0, opacity: 1 - outT }}>
            <BrandBackground glow={clamp(draw + 0.2, 0, 1)} />
            <div style={{
              position: 'absolute', left: '50%', top: '50%',
              transform: `translate(-50%, calc(-50% + ${lift}px))`,
              display: 'flex', flexDirection: 'column', alignItems: 'center',
            }}>
              <div style={{ transform: `scale(${0.9 + 0.1 * draw})`, marginBottom: 6 }}>
                <AnimatedLogo size={236} draw={draw} idSuffix="intro" />
              </div>
              <Reveal start={2.1} dur={0.7} y={20} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 104, letterSpacing: '-0.035em', color: VZ.white, lineHeight: 1 }}>
                  Vizalyze
                </div>
              </Reveal>
              <Reveal start={2.9} dur={0.7} y={16} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontWeight: 400, fontSize: 32, color: VZ.gray, marginTop: 26, letterSpacing: '-0.01em' }}>
                  Test data analysis that <GradientText style={{ fontWeight: 600 }}>engineers actually love.</GradientText>
                </div>
              </Reveal>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 2 — Positioning: 31+ formats + local-first.
// ════════════════════════════════════════════════════════════════════════════
const FORMATS_ALL = ['MDF / MF4', 'TDMS', 'HDF5', 'NetCDF', 'Parquet', 'MATLAB', 'CSV', 'Excel', 'CAN / LIN', 'SQLite', 'mzML', 'JCAMP-DX', '+ more'];

function ScenePositioning({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.5)) / 0.5, 0, 1));
        return (
          <div style={{ position: 'absolute', inset: 0, opacity: 1 - outT }}>
            <BrandBackground glow={0.85} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 120px' }}>
              <Reveal start={0.1} dur={0.6} y={20} fadeOut={0}>
                <div style={{ fontFamily: VZ.mono, fontSize: 17, letterSpacing: '0.28em', color: VZ.grayDim, textTransform: 'uppercase', textAlign: 'center', marginBottom: 26 }}>
                  Built for test engineers
                </div>
              </Reveal>
              <Reveal start={0.25} dur={0.6} y={24} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 78, letterSpacing: '-0.035em', color: VZ.white, textAlign: 'center', lineHeight: 1.05, maxWidth: 1180 }}>
                  Open <GradientText>31+ data formats</GradientText>. One workspace.
                </div>
              </Reveal>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 64, alignItems: 'center', justifyContent: 'center', maxWidth: 1120 }}>
                {FORMATS_ALL.map((f, i) => (
                  <Reveal key={f} start={0.7 + i * 0.06} dur={0.5} y={16} fadeOut={0}>
                    <Chip accent={f === '+ more'}>{f}</Chip>
                  </Reveal>
                ))}
              </div>

              <Reveal start={2.4} dur={0.7} y={22} fadeOut={0} style={{ marginTop: 72 }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, padding: '14px 28px', borderRadius: 999, border: `1px solid ${VZ.border}`, background: 'rgba(255,255,255,0.03)' }}>
                    <span style={{ width: 11, height: 11, borderRadius: '50%', background: VZ.grad, boxShadow: '0 0 14px rgba(106,66,232,0.8)' }} />
                    <span style={{ fontFamily: VZ.font, fontSize: 30, fontWeight: 600, color: VZ.white }}>
                      Your files never leave your machine.
                    </span>
                  </div>
                  <div style={{ fontFamily: VZ.font, fontSize: 22, color: VZ.gray, marginTop: 20 }}>
                    Local-first by design. Sync only what you choose — encrypted, your passphrase.
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// Reusable walkthrough beat: split text + pan-zoom screenshot.
// ════════════════════════════════════════════════════════════════════════════
function WalkBeat({ start, end, index, label, kIndex, kLabel, headline, sub, src, cam, textSide = 'left' }) {
  const shotX = textSide === 'left' ? W - 120 - SHOT_W : 120;
  const textX = textSide === 'left' ? 120 : 120 + SHOT_W + 80;
  const textW = W - SHOT_W - 320;
  return (
    <Sprite start={start} end={end}>
      <BrandBackground glow={0.6} />
      <Shot src={src} x={shotX} y={SHOT_Y} w={SHOT_W} h={SHOT_H} cam={cam} />
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: textX, width: textW, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <Reveal start={0.1} dur={0.55} y={18}>
          <Kicker index={kIndex} label={kLabel} />
        </Reveal>
        <Reveal start={0.22} dur={0.6} y={24}>
          <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 66, letterSpacing: '-0.03em', lineHeight: 1.07, color: VZ.white }}>
            {headline}
          </div>
        </Reveal>
        <Reveal start={0.42} dur={0.6} y={20}>
          <div style={{ fontFamily: VZ.font, fontWeight: 400, fontSize: 26, lineHeight: 1.55, color: VZ.gray, marginTop: 26, maxWidth: 540 }}>
            {sub}
          </div>
        </Reveal>
      </div>
      <FrameChrome index={index} total={TOTAL_BEATS} label={label} />
    </Sprite>
  );
}

// SCENE 3 — Beat 1: Visualize
function SceneVisualize(props) {
  return (
    <WalkBeat {...props} index={1} label="VISUALIZE" kIndex="01" kLabel="Visual Workspace"
      headline={<>From raw signal<br />to <GradientText>insight</GradientText>.</>}
      sub={<>Drag channels onto stacked plots and scrub the timeline. LTTB downsampling renders million-point signals instantly — no waiting, no scripting.</>}
      src="images/hero-main-window.png" textSide="left"
      cam={[{ p: 0, scale: 1.05, fx: 0.5, fy: 0.5 }, { p: 0.45, scale: 1.05, fx: 0.5, fy: 0.5 }, { p: 1, scale: 1.55, fx: 0.5, fy: 0.62 }]}
    />
  );
}

// SCENE 4 — Beat 2: Ask Axy
function SceneAxy(props) {
  return (
    <WalkBeat {...props} index={2} label="AXY AI" kIndex="02" kLabel="AI, built in"
      headline={<>Ask your data,<br />in <GradientText>plain English</GradientText>.</>}
      sub={<>Axy reads your channels and answers — flag braking events, find anomalies, draft a summary. Use the built-in model or bring your own Claude, GPT, Gemini or local key.</>}
      src="images/axy-integration.png" textSide="right"
      cam={[{ p: 0, scale: 1.03, fx: 0.5, fy: 0.5 }, { p: 0.4, scale: 1.03, fx: 0.55, fy: 0.45 }, { p: 1, scale: 1.7, fx: 0.88, fy: 0.4 }]}
    />
  );
}

// SCENE 5 — Beat 3: Signal processing (floating dialog over blurred workspace)
function SceneSignal({ start, end }) {
  const dlgW = 940, dlgH = 634;
  return (
    <Sprite start={start} end={end}>
      <BrandBackground glow={0.55} />
      {/* blurred workspace backdrop */}
      <Sprite start={start} end={end}>
        {({ progress }) => (
          <div style={{ position: 'absolute', inset: 0 }}>
            <Shot src="images/hero-main-window.png" x={460} y={150} w={1320} h={825}
              cam={[{ p: 0, scale: 1.1, fx: 0.5, fy: 0.5 }, { p: 1, scale: 1.18, fx: 0.45, fy: 0.55 }]}
              entry={0.6} exit={0.45} radius={16} />
            <div style={{ position: 'absolute', inset: 0, background: 'rgba(8,9,14,0.62)', backdropFilter: 'blur(3px)' }} />
          </div>
        )}
      </Sprite>
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 110, width: 560, display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 5 }}>
        <Reveal start={0.1} dur={0.55} y={18}><Kicker index="03" label="Signal Processing" /></Reveal>
        <Reveal start={0.22} dur={0.6} y={24}>
          <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 64, letterSpacing: '-0.03em', lineHeight: 1.07, color: VZ.white }}>
            FFT, filters &amp;<br /><GradientText>spectrograms</GradientText>.
          </div>
        </Reveal>
        <Reveal start={0.42} dur={0.6} y={20}>
          <div style={{ fontFamily: VZ.font, fontSize: 26, lineHeight: 1.55, color: VZ.gray, marginTop: 26, maxWidth: 500 }}>
            PSD, STFT, Butterworth and Chebyshev filters, smoothing and curve fitting — with a live preview as you tune every parameter.
          </div>
        </Reveal>
      </div>
      {/* floating FFT dialog */}
      <div style={{ position: 'absolute', right: 110, top: SHOT_Y - 6, width: dlgW, height: dlgH, zIndex: 6 }}>
        <Shot src="images/signal-processing-fft.png" x={0} y={0} w={dlgW} h={dlgH}
          cam={[{ p: 0, scale: 1.02, fx: 0.5, fy: 0.5 }, { p: 1, scale: 1.12, fx: 0.72, fy: 0.5 }]}
          entry={0.55} exit={0.4} radius={14} />
      </div>
      <FrameChrome index={3} total={TOTAL_BEATS} label="SIGNAL PROCESSING" />
    </Sprite>
  );
}

// SCENE 6 — Beat 4: Compare runs
function SceneCompare(props) {
  return (
    <WalkBeat {...props} index={4} label="COMPARE RUNS" kIndex="04" kLabel="Regression hunting"
      headline={<>Spot regressions<br />across <GradientText>every run</GradientText>.</>}
      sub={<>Overlay multiple test files with automatic time-alignment and resampling. Per-channel statistics and deltas surface what changed — instantly.</>}
      src="images/compare-runs.png" textSide="left"
      cam={[{ p: 0, scale: 1.02, fx: 0.5, fy: 0.4 }, { p: 0.45, scale: 1.02, fx: 0.5, fy: 0.4 }, { p: 1, scale: 1.4, fx: 0.42, fy: 0.45 }]}
    />
  );
}

// SCENE 7 — Beat 5: Report (report-builder, with a quick 3D-map flourish cut)
function SceneReport({ start, end }) {
  const cutAt = start + (end - start) * 0.62; // hard cut to 3D map near the end
  return (
    <Sprite start={start} end={end}>
      <BrandBackground glow={0.6} />
      {/* report builder shot for first ~62% */}
      <Sprite start={start} end={cutAt + 0.05}>
        <Shot src="images/report-builder.png" x={120} y={SHOT_Y} w={SHOT_W} h={SHOT_H}
          cam={[{ p: 0, scale: 1.05, fx: 0.55, fy: 0.45 }, { p: 1, scale: 1.45, fx: 0.62, fy: 0.42 }]}
          entry={0.55} exit={0.35} />
      </Sprite>
      {/* 3D map flourish */}
      <Sprite start={cutAt} end={end}>
        <Shot src="images/chart-3d-map.png" x={120} y={SHOT_Y} w={SHOT_W} h={SHOT_H}
          cam={[{ p: 0, scale: 1.02, fx: 0.5, fy: 0.5 }, { p: 1, scale: 1.32, fx: 0.5, fy: 0.5 }]}
          entry={0.4} exit={0.35} />
      </Sprite>

      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 120 + SHOT_W + 80, width: W - SHOT_W - 320, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <Reveal start={0.1} dur={0.55} y={18}><Kicker index="05" label="Batch Reporting" /></Reveal>
        <Reveal start={0.22} dur={0.6} y={24}>
          <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 66, letterSpacing: '-0.03em', lineHeight: 1.07, color: VZ.white }}>
            From data to a<br /><GradientText>finished report</GradientText>.
          </div>
        </Reveal>
        <Reveal start={0.42} dur={0.6} y={20}>
          <div style={{ fontFamily: VZ.font, fontSize: 26, lineHeight: 1.55, color: VZ.gray, marginTop: 26, maxWidth: 540 }}>
            Auto-generate PPTX &amp; PDF reports across dozens of files in one click. Drop in 3D maps and charts — then share results as a secure link.
          </div>
        </Reveal>
      </div>
      <FrameChrome index={5} total={TOTAL_BEATS} label="REPORTING" />
    </Sprite>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 8 — Why switch: power vs cost.
// ════════════════════════════════════════════════════════════════════════════
const RIVALS = [
  { name: 'NI DIAdem', price: '$3k–6k / seat / yr' },
  { name: 'MATLAB', price: '$150+/mo + toolboxes' },
  { name: 'AVL Concerto', price: 'Enterprise seat' },
];

function SceneWhy({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const outT = Easing.easeInCubic(clamp((localTime - (duration - 0.5)) / 0.5, 0, 1));
        const strike = Easing.easeInOutCubic(clamp((localTime - 1.8) / 0.7, 0, 1));
        return (
          <div style={{ position: 'absolute', inset: 0, opacity: 1 - outT }}>
            <BrandBackground glow={0.8} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <Reveal start={0.1} dur={0.6} y={22} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 76, letterSpacing: '-0.035em', color: VZ.white, textAlign: 'center', lineHeight: 1.05 }}>
                  All the power.<br /><GradientText>A fraction of the cost.</GradientText>
                </div>
              </Reveal>

              <div style={{ display: 'flex', alignItems: 'stretch', gap: 22, marginTop: 64 }}>
                {RIVALS.map((r, i) => (
                  <Reveal key={r.name} start={0.7 + i * 0.14} dur={0.55} y={20} fadeOut={0}>
                    <div style={{ width: 300, padding: '30px 28px', borderRadius: 18, border: `1px solid ${VZ.border}`, background: 'rgba(255,255,255,0.025)', textAlign: 'center', opacity: 0.72 }}>
                      <div style={{ fontFamily: VZ.font, fontWeight: 600, fontSize: 26, color: VZ.gray }}>{r.name}</div>
                      <div style={{ position: 'relative', display: 'inline-block', marginTop: 16 }}>
                        <span style={{ fontFamily: VZ.mono, fontSize: 19, color: VZ.grayDim }}>{r.price}</span>
                        <span style={{ position: 'absolute', left: -4, right: -4, top: '52%', height: 2, background: VZ.pink, transformOrigin: 'left', transform: `scaleX(${strike})`, opacity: 0.9 }} />
                      </div>
                    </div>
                  </Reveal>
                ))}
                <Reveal start={1.3} dur={0.6} y={20} fadeOut={0}>
                  <div style={{ width: 320, padding: '30px 28px', borderRadius: 18, border: '1px solid rgba(138,107,240,0.55)', background: 'rgba(106,66,232,0.16)', textAlign: 'center', boxShadow: '0 0 50px -10px rgba(106,66,232,0.5)' }}>
                    <div style={{ fontFamily: VZ.font, fontWeight: 700, fontSize: 28 }}><GradientText>Vizalyze</GradientText></div>
                    <div style={{ fontFamily: VZ.mono, fontSize: 21, color: VZ.white, marginTop: 16, fontWeight: 600 }}>Free to start</div>
                  </div>
                </Reveal>
              </div>

              <Reveal start={2.6} dur={0.7} y={20} fadeOut={0} style={{ marginTop: 56 }}>
                <div style={{ fontFamily: VZ.font, fontSize: 27, color: VZ.gray, textAlign: 'center' }}>
                  Up to <span style={{ color: VZ.white, fontWeight: 600 }}>10× cheaper</span> than DIAdem, Concerto &amp; MATLAB — and your data stays yours.
                </div>
              </Reveal>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 9 — Outro: logo + CTA.
// ════════════════════════════════════════════════════════════════════════════
function SceneOutro({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime }) => {
        const draw = Easing.easeInOutCubic(clamp((localTime - 0.2) / 1.6, 0, 1));
        return (
          <div style={{ position: 'absolute', inset: 0 }}>
            <BrandBackground glow={1} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <AnimatedLogo size={150} draw={draw} idSuffix="outro" />
              <Reveal start={1.0} dur={0.7} y={20} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontWeight: 800, fontSize: 72, letterSpacing: '-0.035em', color: VZ.white, marginTop: 18 }}>Vizalyze</div>
              </Reveal>
              <Reveal start={1.3} dur={0.7} y={18} fadeOut={0}>
                <div style={{ fontFamily: VZ.font, fontSize: 30, color: VZ.gray, marginTop: 18, textAlign: 'center' }}>
                  Test data analysis that <GradientText style={{ fontWeight: 600 }}>engineers actually love.</GradientText>
                </div>
              </Reveal>
              <Reveal start={1.9} dur={0.7} y={22} fadeOut={0} style={{ marginTop: 50 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
                  <div style={{ fontFamily: VZ.font, fontWeight: 700, fontSize: 30, color: '#fff', padding: '20px 44px', borderRadius: 16, background: VZ.grad, boxShadow: '0 18px 50px -12px rgba(106,66,232,0.7)' }}>
                    Download free  →  vizalyze.app
                  </div>
                  <div style={{ fontFamily: VZ.mono, fontSize: 18, color: VZ.grayDim, letterSpacing: '0.14em' }}>
                    WINDOWS · MACOS · LINUX
                  </div>
                </div>
              </Reveal>
              <Reveal start={2.5} dur={0.7} y={16} fadeOut={0} style={{ marginTop: 46 }}>
                <div style={{ fontFamily: VZ.font, fontSize: 21, color: VZ.gray, letterSpacing: '0.02em' }}>
                  Local-first · AI-native · Signal processing · Batch reporting
                </div>
              </Reveal>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, {
  SceneIntro, ScenePositioning, SceneVisualize, SceneAxy, SceneSignal,
  SceneCompare, SceneReport, SceneWhy, SceneOutro,
});