// Video scenes for CoreMind Vault landing page.
// 30s, 1920x1080. Dark muted navy · institutional calm · something always moving.
//
// Positioning (from coremindx.com / Marc's authentic voice):
//   "Overblik over alt det I ved I skal. AI der styrker jeres rådgivning."
//   AI is the advisor's tool — rådgiveren bestemmer.

const V = {
  bg0: 'oklch(0.18 0.015 255)',
  bg1: 'oklch(0.215 0.018 255)',
  bg2: 'oklch(0.245 0.020 255)',
  bg3: 'oklch(0.28 0.022 255)',
  line: 'oklch(0.32 0.018 255)',
  lineSoft: 'oklch(0.26 0.018 255)',
  fg0: 'oklch(0.96 0.006 80)',
  fg1: 'oklch(0.82 0.008 80)',
  fg2: 'oklch(0.66 0.010 80)',
  fg3: 'oklch(0.52 0.012 255)',
  // Brand colors from coremindx.com favicon: #3366cc / #222266 / #00ffff
  primary: 'oklch(0.58 0.16 265)',     // #3366cc-ish
  primaryStrong: 'oklch(0.70 0.17 255)',
  primaryDeep: 'oklch(0.30 0.14 275)', // #222266-ish (logo body)
  primarySoft: 'oklch(0.28 0.06 255)',
  primaryFg: 'oklch(0.98 0.01 255)',
  cyan: 'oklch(0.88 0.18 200)',        // #00ffff accent
  green: 'oklch(0.74 0.14 160)',
  blue: 'oklch(0.72 0.14 235)',
  amber: 'oklch(0.80 0.14 82)',
  red: 'oklch(0.60 0.20 25)',
  font: '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
  mono: '"IBM Plex Mono", ui-monospace, monospace',
};

// ───────── CoreMind logo (from coremindx.com/favicon.svg) ─────────
// Octahedron/diamond: top triangle #3366cc, body #222266, cyan outline.

function CMLogoMark({ size = 40, glow = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128"
      style={{ filter: glow ? `drop-shadow(0 0 12px color-mix(in oklch, ${V.cyan} 60%, transparent))` : 'none' }}>
      {/* top face */}
      <polygon points="64,8 116,36 64,64 12,36" fill="#3366cc"/>
      {/* body (mid + bottom) */}
      <polygon points="12,36 64,64 116,36 116,92 64,120 12,92" fill="#222266"/>
      {/* cyan outline */}
      <polygon points="64,8 116,36 116,92 64,120 12,92 12,36"
        fill="none" stroke="#00ffff" strokeWidth="3" strokeLinejoin="round"/>
      {/* interior seam (visible vertical edge) */}
      <line x1="64" y1="64" x2="64" y2="120" stroke="#00ffff" strokeWidth="1.5" opacity="0.55"/>
      <line x1="12" y1="36" x2="64" y2="64" stroke="#00ffff" strokeWidth="1" opacity="0.35"/>
      <line x1="116" y1="36" x2="64" y2="64" stroke="#00ffff" strokeWidth="1" opacity="0.35"/>
    </svg>
  );
}

function CMLogo({ size = 40, withText = true, textColor, sub = 'Vault', glow = false }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.38 }}>
      <CMLogoMark size={size} glow={glow}/>
      {withText && (
        <div style={{ display: 'flex', alignItems: 'baseline', gap: size * 0.18 }}>
          <span style={{
            fontFamily: V.font, fontWeight: 600, fontSize: size * 0.56,
            color: textColor || V.fg0, letterSpacing: '-0.015em',
          }}>CoreMind</span>
          <span style={{
            fontFamily: V.mono, fontWeight: 500, fontSize: size * 0.36,
            color: V.cyan, letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>{sub}</span>
        </div>
      )}
    </div>
  );
}

function Shield({ size = 28 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.22,
      background: `linear-gradient(180deg, ${V.primary}, ${V.primaryDeep})`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: `0 0 0 1px color-mix(in oklch, ${V.cyan} 30%, transparent) inset`,
      flexShrink: 0,
    }}>
      <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" fill="none" stroke={V.cyan} strokeWidth="2">
        <path d="M12 2 4 5v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V5z"/>
        <path d="m9 12 2 2 4-4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// ───────── SCENE 1 · Problem (0 – 4.5) ─────────
// Reframe: the advisor facing a mountain of rules — not replaced by AI.

function Scene1Problem() {
  const { localTime } = useSprite();
  const full = 'Hvilken procedure gælder her?';
  const typeStart = 0.4, typeEnd = 2.2;
  const nChars = Math.floor(clamp((localTime - typeStart) / (typeEnd - typeStart), 0, 1) * full.length);
  const shown = full.slice(0, nChars);
  const cursorOn = localTime < typeEnd ? (Math.floor(localTime * 2) % 2 === 0) : true;

  const stackOp = animate({ from: 0, to: 1, start: 0.05, end: 0.7, ease: Easing.easeOutCubic })(localTime);
  const bubbleOpacity = animate({ from: 0, to: 1, start: 0.3, end: 0.55, ease: Easing.easeOutCubic })(localTime);
  const bubbleY = animate({ from: 18, to: 0, start: 0.3, end: 0.8, ease: Easing.easeOutBack })(localTime);
  const exitOpacity = animate({ from: 1, to: 0, start: 4.1, end: 4.5, ease: Easing.easeInCubic })(localTime);

  // "Documents tower" — stacked doc rects that keep multiplying slowly
  const docs = [
    { label: 'Overenskomst 2024', x: -380, y: -60, r: -6 },
    { label: 'ATEX-procedure §4', x: -240, y: -100, r: 3 },
    { label: 'GDPR-vejledning', x: -120, y: -80, r: -2 },
    { label: 'Kemi-datablade', x: 40, y: -120, r: 5 },
    { label: 'Arbejdsmiljølov', x: 180, y: -90, r: -4 },
    { label: 'Intern-instruks 17', x: 300, y: -70, r: 2 },
    { label: 'Revisionsrapport Q3', x: -300, y: 60, r: 4 },
    { label: 'Audit-log 2023', x: -140, y: 80, r: -3 },
    { label: 'Brandprocedure', x: 20, y: 60, r: 2 },
    { label: 'Personalehåndbog', x: 200, y: 80, r: -5 },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 50%, ${V.bg1} 0%, ${V.bg0} 60%)`,
      opacity: exitOpacity,
    }}>
      {/* soft grid backdrop */}
      <svg style={{ position: 'absolute', inset: 0, opacity: 0.25 }} width="100%" height="100%">
        <defs>
          <pattern id="grid1" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M 80 0 L 0 0 0 80" fill="none" stroke={V.lineSoft} strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid1)"/>
      </svg>

      {/* document tower — you know what you should, you just can't hold it all */}
      <div style={{
        position: 'absolute', left: '50%', top: '46%',
        transform: 'translate(-50%, -50%)',
        opacity: stackOp,
      }}>
        {docs.map((d, i) => {
          const entry = animate({ from: 0, to: 1, start: 0.1 + i * 0.06, end: 0.6 + i * 0.06, ease: Easing.easeOutBack })(localTime);
          const settle = Math.sin(localTime * 0.8 + i) * 2;
          return (
            <div key={i} style={{
              position: 'absolute', left: d.x, top: d.y + settle,
              width: 180, height: 120, borderRadius: 6,
              background: V.bg2, border: `1px solid ${V.lineSoft}`,
              transform: `rotate(${d.r * entry}deg) scale(${entry})`,
              opacity: entry * 0.9,
              padding: '12px 14px',
              boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
            }}>
              <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
                {[0,1,2].map(j => <div key={j} style={{ width: 28, height: 3, borderRadius: 1.5, background: V.line }}/>)}
              </div>
              <div style={{ fontFamily: V.mono, fontSize: 10, color: V.fg3, marginBottom: 8, lineHeight: 1.2 }}>{d.label}</div>
              {[0,1,2,3,4].map(j => (
                <div key={j} style={{
                  height: 2, borderRadius: 1, background: V.line, marginBottom: 4,
                  width: `${90 - j * 9}%`, opacity: 0.6,
                }}/>
              ))}
            </div>
          );
        })}
      </div>

      {/* question bubble floating above */}
      <div style={{
        position: 'absolute', left: '50%', top: '18%',
        transform: `translate(-50%, ${bubbleY}px)`,
        opacity: bubbleOpacity,
        background: V.bg2, color: V.fg0,
        padding: '22px 32px',
        borderRadius: '18px 18px 18px 4px',
        fontFamily: V.font, fontSize: 40, fontWeight: 500,
        letterSpacing: '-0.015em',
        border: `1px solid ${V.line}`,
        boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
        maxWidth: 900, minWidth: 600,
      }}>
        <div style={{
          fontFamily: V.mono, fontSize: 13, color: V.fg3,
          textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8,
        }}>Rådgiver · Kommunal forvaltning</div>
        {shown}
        <span style={{
          display: 'inline-block', width: 3, height: 34,
          background: V.fg1, marginLeft: 4, verticalAlign: 'middle',
          opacity: cursorOn ? 1 : 0,
        }}/>
      </div>

      {/* caption */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 90,
        transform: 'translateX(-50%)',
        fontFamily: V.font, fontSize: 22, color: V.fg2,
        letterSpacing: '0.01em', textAlign: 'center',
        opacity: animate({ from: 0, to: 1, start: 2.6, end: 3.2 })(localTime),
      }}>
        Du ved det. Et sted i de 4.000 sider.
      </div>
    </div>
  );
}

// ───────── SCENE 2 · Product reveal (4.2 – 8.0) ─────────
// New headline: "Overblik over alt det I ved I skal."
// Supporting:   "AI der styrker jeres rådgivning."

function Scene2Reveal() {
  const { localTime } = useSprite();
  const logoScale = animate({ from: 0.6, to: 1, start: 0.15, end: 0.85, ease: Easing.easeOutBack })(localTime);
  const logoOpacity = animate({ from: 0, to: 1, start: 0.15, end: 0.6 })(localTime);
  const taglineOp = animate({ from: 0, to: 1, start: 0.9, end: 1.5, ease: Easing.easeOutCubic })(localTime);
  const taglineY = animate({ from: 24, to: 0, start: 0.9, end: 1.5, ease: Easing.easeOutCubic })(localTime);
  const subOp = animate({ from: 0, to: 1, start: 1.7, end: 2.3 })(localTime);
  const exitOp = animate({ from: 1, to: 0, start: 3.4, end: 3.8, ease: Easing.easeInCubic })(localTime);

  // Logo spins gently on its vertical axis (faux 3D via scaleX)
  const spin = Math.cos(localTime * 0.9) * 0.08 + 0.92;

  // Cyan spark particles drifting up
  const particles = Array.from({ length: 14 }, (_, i) => {
    const seed = i * 137.5;
    const x = (seed % 1920);
    const offset = (i * 0.3) % 4;
    const p = ((localTime + offset) % 4) / 4;
    return { x, y: 1080 - p * 1080, op: Math.sin(p * Math.PI) * 0.45 };
  });

  return (
    <div style={{ position: 'absolute', inset: 0, background: V.bg0, opacity: exitOp }}>
      {particles.map((pt, i) => (
        <div key={i} style={{
          position: 'absolute', left: pt.x, top: pt.y,
          width: 2, height: 2, borderRadius: 1,
          background: V.cyan, opacity: pt.op,
          boxShadow: `0 0 8px ${V.cyan}`,
        }}/>
      ))}

      {/* halo */}
      <div style={{
        position: 'absolute', left: '50%', top: '40%',
        width: 600, height: 600, marginLeft: -300, marginTop: -300,
        background: `radial-gradient(circle, color-mix(in oklch, ${V.primary} 18%, transparent) 0%, transparent 60%)`,
        opacity: logoOpacity,
      }}/>

      <div style={{
        position: 'absolute', left: '50%', top: '36%',
        transform: `translate(-50%, -50%) scale(${logoScale}) scaleX(${spin})`,
        opacity: logoOpacity,
      }}>
        <CMLogoMark size={180} glow/>
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: '55%',
        transform: `translate(-50%, ${taglineY}px)`,
        opacity: logoOpacity,
        fontFamily: V.font, fontSize: 30, fontWeight: 500,
        color: V.fg0, letterSpacing: '-0.005em', textAlign: 'center',
        whiteSpace: 'nowrap',
      }}>
        CoreMind <span style={{ color: V.cyan, fontFamily: V.mono, fontWeight: 500, letterSpacing: '0.06em' }}>VAULT</span>
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: '66%',
        transform: `translate(-50%, ${taglineY}px)`,
        opacity: taglineOp,
        fontFamily: V.font, fontSize: 64, fontWeight: 600,
        color: V.fg0, letterSpacing: '-0.025em', textAlign: 'center',
        whiteSpace: 'nowrap', lineHeight: 1.05,
      }}>
        Overblik over alt det<br/>
        <span style={{ color: V.fg0 }}>I ved I skal.</span>
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: '87%',
        transform: 'translateX(-50%)',
        opacity: subOp,
        fontFamily: V.font, fontSize: 24, color: V.fg2, letterSpacing: '0.005em',
        textAlign: 'center',
      }}>
        AI der styrker jeres rådgivning — ikke erstatter den.
      </div>
    </div>
  );
}

Object.assign(window, { V, CMLogo, CMLogoMark, Shield, Scene1Problem, Scene2Reveal });