// reel-scenes.jsx — Timed scenes composed of screens.
// 22-second reel. Each <Sprite> renders only inside its window.

// Helper — render a scene with hard-cut transitions (no crossfade).
function SceneCut({ children }) {
  return (
    <div style={{ position: 'absolute', inset: 0, width: 1080, height: 1920 }}>
      {children}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 1 · Hook (0–3 s)
// ──────────────────────────────────────────────────────────────
function SceneHook() {
  return (
    <Sprite start={0} end={3.0}>
      {({ localTime }) => {
        // Line 1 ("Was sieht Google") — appears 0.2s
        const l1 = Math.max(0, Math.min(1, (localTime - 0.2) / 0.5));
        // Line 2 ("wirklich…") — appears 1.2s
        const l2 = Math.max(0, Math.min(1, (localTime - 1.2) / 0.55));
        // Subhead — 2.0s
        const sub = Math.max(0, Math.min(1, (localTime - 2.0) / 0.5));
        // Vignette glow scale
        const glow = Easing.easeOutCubic(Math.min(1, localTime / 1.8));

        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0, background: SA.bg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column',
            }}>
              {/* radial vignette / accent glow */}
              <div style={{
                position: 'absolute', inset: 0,
                background: `radial-gradient(ellipse at 50% 50%, rgba(63,185,80,${0.08*glow}) 0%, transparent 60%)`,
                pointerEvents: 'none',
              }} />
              {/* dot grid */}
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `radial-gradient(rgba(230,237,243,0.05) 1px, transparent 1px)`,
                backgroundSize: '28px 28px',
              }} />

              <div style={{
                position: 'relative', textAlign: 'center', padding: '0 56px',
                fontFamily: 'var(--sans)', fontWeight: 800,
                fontSize: 140, lineHeight: 0.92, letterSpacing: '-0.045em',
                color: SA.text,
              }}>
                <div style={{
                  opacity: l1, transform: `translateY(${(1-l1)*18}px)`,
                }}>
                  Was sieht
                </div>
                <div style={{
                  opacity: l2, transform: `translateY(${(1-l2)*18}px)`,
                  color: SA.accent2, marginTop: 14,
                }}>
                  Google
                </div>
                <div style={{
                  opacity: l2, transform: `translateY(${(1-l2)*18}px)`,
                  marginTop: 14, transitionDelay: '120ms',
                }}>
                  wirklich?
                </div>
              </div>

              <div style={{
                position: 'absolute', bottom: 200, left: 0, right: 0,
                textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 28,
                color: SA.textDim, letterSpacing: '0.06em',
                opacity: sub, transform: `translateY(${(1-sub)*10}px)`,
              }}>
                Wir prüfen bis zu 124 Punkte. In ~30 Sekunden.
              </div>

              {/* small audit dot bottom center */}
              <div style={{
                position: 'absolute', bottom: 120, left: '50%', transform: 'translateX(-50%)',
                width: 14, height: 14, borderRadius: '50%', background: SA.pass,
                boxShadow: `0 0 0 ${4 + Math.sin(localTime*4)*3}px rgba(63,185,80,0.25)`,
                opacity: sub,
              }} />
            </div>
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 2 · siteauditor.de + URL typing (3–6.5 s)
// ──────────────────────────────────────────────────────────────
function SceneSiteAuditor() {
  return (
    <Sprite start={3.0} end={6.5}>
      {({ localTime, progress }) => {
        const elapsed = localTime;
        // URL types from t=1.0 to t=2.7 inside this scene
        const typeStart = 1.0, typeEnd = 2.7;
        const tT = Math.max(0, Math.min(1, (elapsed - typeStart) / (typeEnd - typeStart)));
        const typed = typeAt('musterstudio.de', tT);
        // Button press at the very end
        const pressT = Math.max(0, Math.min(1, (elapsed - 3.05) / 0.3));
        // Scale-in entry
        const entry = Easing.easeOutCubic(Math.min(1, elapsed / 0.5));

        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0,
              transform: `scale(${0.96 + 0.04*entry})`,
              opacity: entry,
              transformOrigin: 'center',
            }}>
              <SiteAuditorHome
                typedUrl={typed}
                showCursor={tT > 0 && tT < 1}
                time={localTime}
                buttonPress={pressT}
              />
            </div>
            {/* Cursor visual at end — small pointer near the "Jetzt prüfen" button */}
            {elapsed > 2.8 && (
              <div style={{
                position: 'absolute',
                top: 1230 + Math.max(0, 1 - pressT*4) * -20,
                left: 580,
                transition: 'top 80ms',
                pointerEvents: 'none',
                zIndex: 20,
              }}>
                <svg width="46" height="56" viewBox="0 0 46 56" fill="none">
                  <path d="M3 3l16 42 7-18 18-7L3 3z" fill="#fff" stroke="#0d1117" strokeWidth="2.5" strokeLinejoin="round"/>
                </svg>
              </div>
            )}
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 3 · Audit running (6.5–10.5 s)
// ──────────────────────────────────────────────────────────────
function SceneRunning() {
  return (
    <Sprite start={6.5} end={10.5}>
      {({ localTime, duration }) => {
        // Progress 0→1 across the scene with a slight ease-in
        const progress = Easing.easeInOutQuad(Math.min(1, localTime / 3.6));
        const entry = Easing.easeOutCubic(Math.min(1, localTime / 0.35));
        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0,
              opacity: entry, transform: `scale(${0.985 + 0.015*entry})`,
            }}>
              <AuditRunning progress={progress} time={localTime} />
            </div>
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 4 · Results dashboard (10.5–15.5 s)
// ──────────────────────────────────────────────────────────────
function SceneResults() {
  return (
    <Sprite start={10.5} end={15.5}>
      {({ localTime, duration }) => {
        // Number of checks animates up 0 → 84 over 1.4s
        const countT = Easing.easeOutCubic(Math.min(1, localTime / 1.4));
        const checks = Math.round(countT * 84);
        // Check rows reveal sequentially 0.6–3.2s
        const revealT = Math.max(0, Math.min(1, (localTime - 0.6) / 2.0));
        const entry = Easing.easeOutCubic(Math.min(1, localTime / 0.35));

        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0,
              opacity: entry, transform: `scale(${0.985 + 0.015*entry})`,
            }}>
              <AuditResults checksAnalyzed={checks} reveal={revealT} />
            </div>
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 5 · /info page (15.5–18.5 s)
// ──────────────────────────────────────────────────────────────
function SceneInfo() {
  return (
    <Sprite start={15.5} end={18.5}>
      {({ localTime }) => {
        const reveal = Easing.easeOutCubic(Math.min(1, localTime / 2.0));
        const entry = Easing.easeOutCubic(Math.min(1, localTime / 0.35));
        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0,
              opacity: entry, transform: `scale(${0.985 + 0.015*entry})`,
            }}>
              <InfoPage reveal={reveal} />
            </div>
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Scene 6 · CTA (18.5–22 s)
// ──────────────────────────────────────────────────────────────
function SceneCTA() {
  return (
    <Sprite start={18.5} end={22.0}>
      {({ localTime }) => {
        const t1 = Math.max(0, Math.min(1, (localTime - 0.0) / 0.5));   // status pill
        const t2 = Math.max(0, Math.min(1, (localTime - 0.3) / 0.6));   // headline
        const t3 = Math.max(0, Math.min(1, (localTime - 0.9) / 0.5));   // URL card
        const t4 = Math.max(0, Math.min(1, (localTime - 1.6) / 0.5));   // small line
        // Pulse on the arrow
        const arrowPulse = 1 + Math.sin(localTime * 5) * 0.04;

        return (
          <SceneCut>
            <div style={{
              position: 'absolute', inset: 0, background: SA.bg,
              display: 'flex', flexDirection: 'column', justifyContent: 'center',
              padding: '0 56px', gap: 36,
            }}>
              {/* radial glow */}
              <div style={{
                position: 'absolute', inset: 0,
                background: `radial-gradient(ellipse at 50% 60%, rgba(63,185,80,0.14) 0%, transparent 60%)`,
                pointerEvents: 'none',
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `radial-gradient(rgba(230,237,243,0.05) 1px, transparent 1px)`,
                backgroundSize: '28px 28px',
              }} />

              {/* status pill */}
              <div style={{
                opacity: t1, transform: `translateY(${(1-t1)*12}px)`,
                display: 'flex', justifyContent: 'center', position: 'relative', zIndex: 1,
              }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  padding: '10px 18px', borderRadius: 999,
                  border: `1px solid rgba(63,185,80,0.35)`, background: SA.passBg,
                  fontFamily: 'var(--mono)', fontSize: 22, color: SA.pass, fontWeight: 600,
                  letterSpacing: '0.06em',
                }}>
                  <span style={{
                    width: 12, height: 12, borderRadius: '50%', background: SA.pass,
                    boxShadow: `0 0 0 ${4 + Math.sin(localTime*5)*3}px rgba(63,185,80,0.22)`,
                  }} />
                  PUBLIC BETA · KOSTENLOS
                </div>
              </div>

              {/* Headline */}
              <h1 style={{
                margin: 0, textAlign: 'center', position: 'relative', zIndex: 1,
                fontFamily: 'var(--sans)', fontWeight: 800,
                fontSize: 130, lineHeight: 0.92, letterSpacing: '-0.045em', color: SA.text,
                opacity: t2, transform: `translateY(${(1-t2)*14}px)`,
              }}>
                Jetzt<br/>
                <span style={{ color: SA.pass }}>prüfen.</span>
              </h1>

              {/* URL card */}
              <div style={{
                position: 'relative', zIndex: 1,
                background: SA.bgCard, border: `1px solid ${SA.border}`,
                borderLeft: `6px solid ${SA.pass}`,
                borderRadius: 14, padding: '32px 36px',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 24, opacity: t3, transform: `translateY(${(1-t3)*20}px)`,
              }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 18, color: SA.textDim,
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                  }}>$ ihre URL eingeben →</span>
                  <span style={{
                    fontFamily: 'var(--sans)', fontWeight: 800, fontSize: 70,
                    letterSpacing: '-0.035em', color: SA.text,
                  }}>siteauditor.de</span>
                </div>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 82, color: SA.pass, fontWeight: 700,
                  transform: `scale(${arrowPulse})`,
                  display: 'inline-block', transformOrigin: 'center',
                }}>→</span>
              </div>

              {/* meta line */}
              <div style={{
                position: 'relative', zIndex: 1, textAlign: 'center',
                fontFamily: 'var(--mono)', fontSize: 22, color: SA.textDim,
                letterSpacing: '0.06em',
                opacity: t4, transform: `translateY(${(1-t4)*10}px)`,
              }}>
                124 Punkte · 9 Kategorien · ohne Anmeldung
              </div>
            </div>
          </SceneCut>
        );
      }}
    </Sprite>
  );
}

// ──────────────────────────────────────────────────────────────
// Tiny progress dots at the very top (slide indicator-style)
// to give the reel a constant "alive" element.
// ──────────────────────────────────────────────────────────────
function SceneIndicator() {
  const time = useTime();
  const scenes = [
    { start: 0, end: 3.0,  label: 'Frage' },
    { start: 3.0, end: 6.5, label: 'Eingeben' },
    { start: 6.5, end: 10.5, label: 'Prüfen' },
    { start: 10.5, end: 15.5, label: 'Bericht' },
    { start: 15.5, end: 18.5, label: 'Was wird geprüft' },
    { start: 18.5, end: 22.0, label: 'Testen' },
  ];
  return (
    <div style={{
      position: 'absolute', top: 36, left: 36, right: 36,
      display: 'flex', gap: 10, zIndex: 100, pointerEvents: 'none',
    }}>
      {scenes.map((s, i) => {
        const active = time >= s.start && time <= s.end;
        const past = time > s.end;
        return (
          <div key={i} style={{
            flex: 1, height: 4, borderRadius: 2,
            background: active ? SA.pass : past ? 'rgba(63,185,80,0.4)' : 'rgba(230,237,243,0.18)',
            transition: 'background 200ms',
          }} />
        );
      })}
    </div>
  );
}

Object.assign(window, {
  SceneHook, SceneSiteAuditor, SceneRunning, SceneResults,
  SceneInfo, SceneCTA, SceneIndicator,
});