// v2 Scenes 1 & 2 — Data-everywhere cold open + Setup-once montage

// ── Scene V1: Data everywhere ──────────────────────────────────────────────
// Not just Excel. Floating source icons scattered across the canvas, then
// they converge on a central point to reveal the product.
function V2Scene1({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryT = Easing.easeOutCubic(Math.min(1, localTime / 0.5));
        const exitStart = duration - 0.6;
        const exitT = localTime > exitStart
          ? Easing.easeInCubic(Math.min(1, (localTime - exitStart) / 0.6))
          : 0;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT * (1 - exitT),
            overflow: 'hidden',
          }}>
            <V2Kicker text="the problem" color={N2.fgSubtle} />

            <DataEverywhereField localTime={localTime} duration={duration} />

            {/* Headline */}
            <div style={{
              position: 'absolute', left: 96, bottom: 120, right: 96,
            }}>
              <Sprite start={start + 1.0} end={end - 0.4}>
                {({ localTime: lt }) => {
                  const t = Easing.easeOutQuart(Math.min(1, lt / 0.7));
                  return (
                    <div style={{
                      fontFamily: N2.serif,
                      fontSize: 104,
                      fontWeight: 350,
                      lineHeight: 0.98,
                      letterSpacing: '-0.03em',
                      color: N2.fg,
                      opacity: t,
                      transform: `translateY(${(1 - t) * 20}px)`,
                      textWrap: 'pretty',
                      maxWidth: 1600,
                    }}>
                      Your answers live{' '}
                      <em style={{ color: N2.gold, fontStyle: 'italic' }}>
                        everywhere.
                      </em>
                    </div>
                  );
                }}
              </Sprite>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

// Floating, semi-transparent source nodes scattered across the viewport.
// Each labeled with the real kind of source it represents.
function DataEverywhereField({ localTime, duration }) {
  // positions carefully spread; kept away from the bottom headline zone.
  const sources = [
    { kind: 'excel',    label: 'Production_Q3.xlsx',    x: 180,  y: 180, delay: 0.2, rot: -4 },
    { kind: 'pdf',      label: 'Operations_Manual.pdf', x: 520,  y: 140, delay: 0.35, rot: 3 },
    { kind: 'sheets',   label: 'Sales · Google Sheets', x: 920,  y: 200, delay: 0.5, rot: -2 },
    { kind: 'db',       label: 'finance_db · postgres', x: 1320, y: 150, delay: 0.65, rot: 2 },
    { kind: 'notion',   label: 'Regulations · Notion',  x: 1600, y: 260, delay: 0.8, rot: -3 },
    { kind: 'excel',    label: 'Mortality_weekly.xlsx', x: 140,  y: 420, delay: 0.45, rot: 2 },
    { kind: 'pdf',      label: 'Contracts_2024.pdf',   x: 480,  y: 460, delay: 0.6, rot: -3 },
    { kind: 'csv',      label: 'farmgate_prices.csv',  x: 840,  y: 460, delay: 0.75, rot: 4 },
    { kind: 'api',      label: 'SAP · ebitda_monthly', x: 1240, y: 440, delay: 0.9, rot: -2 },
    { kind: 'slack',    label: '#ops · pinned threads', x: 1560, y: 480, delay: 1.05, rot: 3 },
  ];

  return (
    <>
      {sources.map((s, i) => {
        const appearT = Easing.easeOutQuart(
          Math.min(1, Math.max(0, (localTime - s.delay) / 0.7))
        );

        // Gentle float animation
        const phase = (localTime + i * 0.7) * 0.6;
        const floatY = Math.sin(phase) * 4;
        const floatX = Math.cos(phase * 0.8) * 2;

        return (
          <SourceChip
            key={s.label}
            kind={s.kind}
            label={s.label}
            x={s.x + floatX}
            y={s.y + floatY}
            rot={s.rot}
            opacity={appearT}
          />
        );
      })}
    </>
  );
}

function SourceChip({ kind, label, x, y, rot = 0, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 18px 12px 14px',
      background: N2.bgRaised,
      border: `1px solid ${N2.border}`,
      borderRadius: 12,
      boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
      fontFamily: N2.sans,
      fontSize: 14,
      color: N2.fgMuted,
      transform: `rotate(${rot}deg) translateY(${(1 - opacity) * 20}px) scale(${0.9 + opacity * 0.1})`,
      opacity,
      whiteSpace: 'nowrap',
    }}>
      <SourceIcon kind={kind} />
      {label}
    </div>
  );
}

function SourceIcon({ kind }) {
  const size = 22;
  if (kind === 'excel') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#107C41',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 11, fontWeight: 700, fontFamily: N2.sans,
    }}>X</div>
  );
  if (kind === 'pdf') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#D93025',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 9, fontWeight: 700, fontFamily: N2.sans,
      letterSpacing: '-0.02em',
    }}>PDF</div>
  );
  if (kind === 'sheets') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#0F9D58',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 11, fontWeight: 700, fontFamily: N2.sans,
    }}>G</div>
  );
  if (kind === 'db') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#336791',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff',
    }}>
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <ellipse cx="7" cy="3.5" rx="4.5" ry="1.5" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M2.5 3.5v7c0 .83 2 1.5 4.5 1.5s4.5-.67 4.5-1.5v-7" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M2.5 7c0 .83 2 1.5 4.5 1.5s4.5-.67 4.5-1.5" stroke="currentColor" strokeWidth="1.3"/>
      </svg>
    </div>
  );
  if (kind === 'notion') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#000',
      border: '1px solid #fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 13, fontWeight: 700, fontFamily: N2.serif,
    }}>N</div>
  );
  if (kind === 'csv') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#6b7280',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 8, fontWeight: 700, fontFamily: N2.sans,
    }}>CSV</div>
  );
  if (kind === 'api') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#0a66c2',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontFamily: N2.mono, fontSize: 9, fontWeight: 700,
    }}>API</div>
  );
  if (kind === 'slack') return (
    <div style={{
      width: size, height: size, borderRadius: 5,
      background: '#4A154B',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontSize: 12, fontWeight: 900,
    }}>#</div>
  );
  return null;
}

// ── Scene V2: Setup once ───────────────────────────────────────────────────
// Quick 4-second montage: scattered sources → converge into a single node.
// Not the hero; just a bridging beat showing one-time ingest happens.
function V2Scene2({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryT = Easing.easeOutCubic(Math.min(1, localTime / 0.4));
        const exitStart = duration - 0.5;
        const exitT = localTime > exitStart
          ? Easing.easeInCubic(Math.min(1, (localTime - exitStart) / 0.5))
          : 0;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT * (1 - exitT),
          }}>
            <V2Kicker text="setup · once" color={N2.fgSubtle} />

            <ConvergenceAnimation localTime={localTime} duration={duration} />

            {/* Caption at bottom */}
            <div style={{
              position: 'absolute', left: 96, right: 96, bottom: 130,
            }}>
              <Sprite start={start + 0.4} end={end - 0.2}>
                {({ localTime: lt }) => {
                  const t = Easing.easeOutQuart(Math.min(1, lt / 0.6));
                  return (
                    <div style={{
                      fontFamily: N2.serif,
                      fontSize: 72,
                      fontWeight: 350,
                      letterSpacing: '-0.025em',
                      lineHeight: 1.02,
                      color: N2.fg,
                      opacity: t,
                      transform: `translateY(${(1 - t) * 16}px)`,
                      textWrap: 'pretty',
                      maxWidth: 1400,
                    }}>
                      Connect your stack.{' '}
                      <em style={{ color: N2.gold, fontStyle: 'italic' }}>
                        Once.
                      </em>
                    </div>
                  );
                }}
              </Sprite>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

function ConvergenceAnimation({ localTime, duration }) {
  // Sources start at scattered positions, converge to center as animation progresses.
  const sources = [
    { kind: 'excel',  startX: 280,  startY: 260 },
    { kind: 'pdf',    startX: 600,  startY: 200 },
    { kind: 'sheets', startX: 960,  startY: 240 },
    { kind: 'db',     startX: 1320, startY: 220 },
    { kind: 'notion', startX: 1620, startY: 300 },
    { kind: 'csv',    startX: 360,  startY: 480 },
    { kind: 'api',    startX: 780,  startY: 520 },
    { kind: 'slack',  startX: 1220, startY: 500 },
  ];

  const centerX = 960;
  const centerY = 380;

  // Timeline: 0–0.5 all visible scattered. 0.8–2.2 converge. 2.2+ hub pulses.
  const convergeStart = 0.8;
  const convergeEnd = 2.2;

  return (
    <>
      {sources.map((s, i) => {
        const progress = Math.min(1, Math.max(0,
          (localTime - convergeStart - i * 0.03) / (convergeEnd - convergeStart)
        ));
        const t = Easing.easeInOutCubic(progress);

        const x = s.startX + (centerX - s.startX) * t;
        const y = s.startY + (centerY - s.startY) * t;
        const scale = 1 - t * 0.7;
        const opacity = 1 - t * 0.8;

        return (
          <div key={i} style={{
            position: 'absolute',
            left: x - 20, top: y - 20,
            transform: `scale(${scale})`,
            opacity,
          }}>
            <SourceChip kind={s.kind} label="" x={0} y={0} opacity={1} />
          </div>
        );
      })}

      {/* Central hub — appears as sources converge */}
      <CentralHub localTime={localTime} centerX={centerX} centerY={centerY} />
    </>
  );
}

function CentralHub({ localTime, centerX, centerY }) {
  const appearStart = 1.6;
  const appearT = Easing.easeOutBack(
    Math.min(1, Math.max(0, (localTime - appearStart) / 0.5))
  );

  // Pulse animation after appearing
  const pulse = localTime > 2.2
    ? 1 + Math.sin((localTime - 2.2) * 3) * 0.04
    : 1;

  return (
    <div style={{
      position: 'absolute',
      left: centerX - 60, top: centerY - 60,
      width: 120, height: 120,
      borderRadius: '50%',
      background: 'radial-gradient(circle at center, rgba(184,146,74,0.25), rgba(184,146,74,0.05) 60%, transparent)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      opacity: appearT,
      transform: `scale(${(0.6 + appearT * 0.4) * pulse})`,
    }}>
      <div style={{
        width: 72, height: 72,
        borderRadius: '50%',
        background: N2.bgRaised,
        border: `1.5px solid ${N2.gold}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: `0 0 40px rgba(184,146,74,${appearT * 0.3})`,
      }}>
        <div style={{
          fontFamily: N2.serif,
          fontSize: 32,
          fontWeight: 350,
          color: N2.gold,
          letterSpacing: '-0.05em',
          lineHeight: 1,
        }}>n</div>
      </div>
    </div>
  );
}

Object.assign(window, { V2Scene1, V2Scene2, SourceChip, SourceIcon });