// Video 1 — "Build" — 1:1 square (1080×1080)
// Fully automatic auto-train. Drop Excel → Add Postgres → 5-pane auto-train cascade → first answer
//
// Timing (total ~50s):
//   0–6    Scene 1  Data scattered
//   6–14   Scene 2  Drop Excel
//   14–20  Scene 3  Add Postgres
//   20–38  Scene 4  Auto-train cascade (HERO, 18s)
//   38–46  Scene 5  First answer
//   46–50  Scene 6  Hand-off card

// ═══════════════════════════════════════════════════════════════════════════
// Scene 1 — Data scattered (square version, tighter)
// ═══════════════════════════════════════════════════════════════════════════
function V1S1({ 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;

        // Square-optimized positions — 1080×1080, keep center open for headline
        const sources = [
          { kind: 'excel',  label: 'Production_Q3.xlsx',    x: 90,  y: 120, delay: 0.2, rot: -3 },
          { kind: 'pdf',    label: 'Ops_Manual.pdf',        x: 580, y: 90,  delay: 0.35, rot: 3 },
          { kind: 'sheets', label: 'Sales · Sheets',         x: 820, y: 180, delay: 0.5, rot: -2 },
          { kind: 'db',     label: 'finance_db',            x: 80,  y: 320, delay: 0.45, rot: 2 },
          { kind: 'api',    label: 'SAP · ebitda',          x: 780, y: 380, delay: 0.7, rot: -2 },
          { kind: 'csv',    label: 'farmgate.csv',          x: 120, y: 820, delay: 0.6, rot: 3 },
          { kind: 'notion', label: 'Regulations · Notion',  x: 720, y: 870, delay: 0.85, rot: -4 },
          { kind: 'slack',  label: '#ops threads',          x: 420, y: 920, delay: 0.95, rot: 2 },
        ];

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

            {sources.map((s, i) => {
              const t = Easing.easeOutQuart(Math.min(1, Math.max(0, (localTime - s.delay) / 0.7)));
              const phase = (localTime + i * 0.7) * 0.6;
              return (
                <SourceChip
                  key={s.label}
                  kind={s.kind}
                  label={s.label}
                  x={s.x + Math.cos(phase * 0.8) * 2}
                  y={s.y + Math.sin(phase) * 4}
                  rot={s.rot}
                  opacity={t}
                />
              );
            })}

            {/* Centered headline */}
            <Sprite start={start + 1.0} end={end - 0.3}>
              {({ localTime: lt }) => {
                const t = Easing.easeOutQuart(Math.min(1, lt / 0.6));
                return (
                  <div style={{
                    position: 'absolute',
                    left: '50%', top: '50%',
                    transform: `translate(-50%, -50%) translateY(${(1 - t) * 16}px)`,
                    opacity: t,
                    fontFamily: N2.serif,
                    fontSize: 84,
                    fontWeight: 350,
                    lineHeight: 0.98,
                    letterSpacing: '-0.03em',
                    color: N2.fg,
                    textAlign: 'center',
                    width: 900,
                  }}>
                    Your answers live{' '}
                    <em style={{ color: N2.gold, fontStyle: 'italic' }}>everywhere.</em>
                  </div>
                );
              }}
            </Sprite>
          </div>
        );
      }}
    </Sprite>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// Scene 2 — Drop Excel
// ═══════════════════════════════════════════════════════════════════════════
function V1S2({ 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;

        // Drop timeline — tightened
        const dropStart = 0.3;
        const dropEnd = 1.3;
        const dropT = Easing.easeInOutCubic(
          Math.min(1, Math.max(0, (localTime - dropStart) / (dropEnd - dropStart)))
        );
        const landed = localTime > dropEnd;
        const glowT = landed ? Math.min(1, (localTime - dropEnd) / 0.3) : 0;
        const schemaT = landed ? Math.min(1, Math.max(0, (localTime - dropEnd - 0.15) / 0.4)) : 0;

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT * (1 - exitT),
          }}>
            <V2Kicker text="step 01 · connect" x={60} y={50} />

            <div style={{
              position: 'absolute', left: 60, top: 110,
              fontFamily: N2.serif, fontSize: 56, fontWeight: 350,
              letterSpacing: '-0.025em', lineHeight: 1.02,
              color: N2.fg, maxWidth: 900,
            }}>
              Drop in your file.
            </div>

            {/* Upload tile — square-centered */}
            <div style={{
              position: 'absolute',
              left: 90, top: 260,
              width: 900, height: 440,
              background: N2.bgRaised,
              border: `2px dashed ${landed ? N2.gold : N2.borderStrong}`,
              borderRadius: 20,
              boxShadow: `0 0 0 ${glowT * 12}px rgba(184,146,74,${glowT * 0.1})`,
              overflow: 'visible',
              transition: 'border-color 300ms',
            }}>
              {/* Dropping file */}
              <div style={{
                position: 'absolute',
                left: '50%', top: '50%',
                width: 260, height: 210,
                transform: `translate(-50%, calc(-50% + ${-200 + dropT * 200}px)) scale(${0.8 + dropT * 0.2})`,
                opacity: Math.min(1, Math.max(0, (localTime - 0.3) / 0.4)),
              }}>
                <div style={{
                  width: '100%', height: '100%',
                  background: '#fff',
                  borderRadius: 10,
                  boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
                  overflow: 'hidden',
                  display: 'flex', flexDirection: 'column',
                }}>
                  <div style={{
                    height: 32, background: '#107C41', color: '#fff',
                    display: 'flex', alignItems: 'center', padding: '0 12px',
                    fontFamily: N2.sans, fontSize: 12, fontWeight: 500,
                  }}>
                    <div style={{
                      width: 18, height: 18, borderRadius: 4,
                      background: 'rgba(255,255,255,0.2)', marginRight: 10,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700, fontSize: 10,
                    }}>X</div>
                    Production_Q3.xlsx
                  </div>
                  <div style={{ flex: 1, padding: 12, display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 4 }}>
                    {Array.from({ length: 35 }).map((_, i) => (
                      <div key={i} style={{
                        height: 18, background: i < 5 ? '#f0f0eb' : '#fafaf7',
                        borderRadius: 2, padding: '0 4px',
                        fontFamily: N2.mono, fontSize: 8,
                        display: 'flex', alignItems: 'center',
                        color: i < 5 ? '#444' : '#888',
                      }}>{i < 5 ? ['ctr','mort','weight','fcr','date'][i] : (Math.random()*100).toFixed(0)}</div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Caption */}
              <div style={{
                position: 'absolute', left: 0, right: 0, bottom: 28,
                textAlign: 'center',
                fontFamily: N2.mono, fontSize: 14,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: landed ? N2.gold : N2.fgFaint,
                transition: 'color 200ms',
              }}>
                {landed ? '✓ production_q3.xlsx · 12,480 rows · 12 cols' : 'drop excel or csv'}
              </div>
            </div>

            {/* Schema pill that appears on land */}
            {schemaT > 0 && (
              <div style={{
                position: 'absolute', left: '50%', top: 740,
                transform: `translateX(-50%) translateY(${(1 - schemaT) * 16}px)`,
                opacity: schemaT,
                display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center',
                maxWidth: 900,
              }}>
                {['center_code', 'mort_weekly', 'avg_weight_gr', 'fcr', 'date', 'biomass_kg'].map((c, i) => (
                  <div key={c} style={{
                    padding: '6px 14px',
                    background: 'rgba(242,237,228,0.06)',
                    border: `1px solid ${N2.border}`,
                    borderRadius: 9999,
                    fontFamily: N2.mono, fontSize: 13,
                    color: N2.fgMuted,
                    opacity: Math.min(1, Math.max(0, schemaT * 3 - i * 0.2)),
                  }}>{c}</div>
                ))}
              </div>
            )}
          </div>
        );
      }}
    </Sprite>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// Scene 3 — Add Postgres
// ═══════════════════════════════════════════════════════════════════════════
function V1S3({ 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;

        const fields = [
          { label: 'host',     value: 'db.internal.earlyshift.ai', delay: 0.3 },
          { label: 'database', value: 'production',                delay: 0.8 },
          { label: 'user',     value: 'norami_reader',             delay: 1.3 },
        ];
        const connected = localTime > 2.4;
        const connT = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - 2.4) / 0.5)));
        const tablesT = Math.min(1, Math.max(0, (localTime - 2.9) / 0.8));

        const tables = ['mortality', 'centers', 'cycles', 'biomass_daily', 'samplings'];

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: N2.bg,
            opacity: entryT * (1 - exitT),
          }}>
            <V2Kicker text="step 01 · connect · +postgres" x={60} y={50} />

            <div style={{
              position: 'absolute', left: 60, top: 110,
              fontFamily: N2.serif, fontSize: 56, fontWeight: 350,
              letterSpacing: '-0.025em', lineHeight: 1.02,
              color: N2.fg, maxWidth: 900,
            }}>
              Connect your database.
            </div>

            {/* Form panel */}
            <div style={{
              position: 'absolute',
              left: 90, top: 260,
              width: 900,
              background: N2.bgRaised,
              border: `1px solid ${N2.border}`,
              borderRadius: 20,
              padding: 32,
              fontFamily: N2.sans,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24,
              }}>
                <SourceIcon kind="db" />
                <div style={{ fontSize: 18, fontWeight: 600, color: N2.fg }}>PostgreSQL</div>
                {connected && (
                  <div style={{
                    marginLeft: 'auto',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '4px 10px',
                    background: 'rgba(74,222,128,0.1)',
                    border: '1px solid rgba(74,222,128,0.3)',
                    borderRadius: 9999,
                    fontFamily: N2.mono, fontSize: 11,
                    color: N2.greenAccent,
                    opacity: connT,
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: N2.greenAccent }}/>
                    connected
                  </div>
                )}
              </div>

              {fields.map((f) => {
                const fieldAppear = Easing.easeOutCubic(Math.min(1, Math.max(0, (localTime - f.delay) / 0.3)));
                const typeT = Math.min(1, Math.max(0, (localTime - f.delay - 0.1) / 0.7));
                const chars = Math.floor(typeT * f.value.length);
                const typing = typeT < 1 && typeT > 0;

                return (
                  <div key={f.label} style={{
                    marginBottom: 14,
                    opacity: fieldAppear,
                    transform: `translateY(${(1 - fieldAppear) * 8}px)`,
                  }}>
                    <div style={{
                      fontFamily: N2.mono, fontSize: 10,
                      letterSpacing: '0.12em', textTransform: 'uppercase',
                      color: N2.fgFaint, marginBottom: 5,
                    }}>{f.label}</div>
                    <div style={{
                      padding: '12px 16px',
                      background: 'rgba(242,237,228,0.04)',
                      border: `1px solid ${N2.border}`,
                      borderRadius: 10,
                      fontFamily: N2.mono, fontSize: 15,
                      color: N2.fg,
                      minHeight: 22,
                    }}>
                      {f.value.slice(0, chars)}
                      {typing && (
                        <span style={{
                          display: 'inline-block', width: 2, height: 16,
                          background: N2.cream, marginLeft: 2,
                          verticalAlign: 'text-bottom',
                          animation: 'blink 0.8s step-end infinite',
                        }}/>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Detected tables */}
            {tablesT > 0 && (
              <div style={{
                position: 'absolute', left: 90, top: 720, width: 900,
                opacity: tablesT,
              }}>
                <div style={{
                  fontFamily: N2.mono, fontSize: 11,
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  color: N2.fgFaint, marginBottom: 10,
                }}>5 tables detected</div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {tables.map((t, i) => {
                    const ta = Math.min(1, Math.max(0, tablesT * 3 - i * 0.3));
                    return (
                      <div key={t} style={{
                        padding: '8px 14px',
                        background: 'rgba(242,237,228,0.05)',
                        border: `1px solid ${N2.border}`,
                        borderRadius: 9999,
                        fontFamily: N2.mono, fontSize: 13,
                        color: N2.fgMuted,
                        opacity: ta,
                        transform: `scale(${0.9 + ta * 0.1})`,
                      }}>{t}</div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { V1S1, V1S2, V1S3 });