// Scenes 1-4: Intro, Import, Enrichment, CRM Sync

// ── SCENE 1: INTRO (0-6s) ───────────────────────────────────────────────────
function SceneIntro() {
  const { localTime, progress } = useSprite();
  const t = localTime;

  // Logo mark scale-in
  const logoScale = Easing.easeOutBack(clamp(t / 0.8, 0, 1));
  const logoOpacity = clamp(t / 0.5, 0, 1);

  // Title slides up
  const titleY = interpolate([0.4, 1.0], [30, 0], Easing.easeOutCubic)(t);
  const titleOp = clamp((t - 0.4) / 0.5, 0, 1);
  const subOp = clamp((t - 0.9) / 0.5, 0, 1);

  // Exit fade
  const exitOp = t > 5 ? 1 - (t - 5) / 1 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      {/* Logo mark */}
      <div style={{
        position: 'absolute', left: 960, top: 420,
        transform: `translate(-50%, -50%) scale(${logoScale})`,
        opacity: logoOpacity,
      }}>
        <div style={{
          width: 110, height: 110,
          borderRadius: 26,
          background: D1.gradPrimary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'white',
          fontFamily: D1.font,
          fontSize: 52, fontWeight: 800,
          letterSpacing: '-0.04em',
          boxShadow: D1.shadowGlowStrong,
        }}>
          D1
        </div>
      </div>

      {/* Wordmark */}
      <div style={{
        position: 'absolute', left: 960, top: 570,
        transform: `translate(-50%, ${titleY}px)`,
        opacity: titleOp,
        textAlign: 'center',
        fontFamily: D1.font,
      }}>
        <div style={{
          color: D1.text,
          fontSize: 88, fontWeight: 800,
          letterSpacing: '-0.03em',
          lineHeight: 1,
        }}>
          D1 Leads
        </div>
      </div>

      {/* Tagline */}
      <div style={{
        position: 'absolute', left: 960, top: 690,
        transform: 'translateX(-50%)',
        opacity: subOp,
        textAlign: 'center',
        fontFamily: D1.mono,
        color: D1.textMuted,
        fontSize: 18,
        letterSpacing: '0.3em',
        textTransform: 'uppercase',
      }}>
        Le parcours d'un lead, de bout en bout
      </div>
    </div>
  );
}

// ── SCENE 2: IMPORT (6-15s) ────────────────────────────────────────────────
function SceneImport() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 9;

  // Browser window slides in
  const browserY = interpolate([0, 0.6], [40, 0], Easing.easeOutCubic)(t);
  const browserOp = clamp(t / 0.6, 0, 1);

  // Chrome extension popup
  const extOp = clamp((t - 1.2) / 0.5, 0, 1);
  const extScale = Easing.easeOutBack(clamp((t - 1.2) / 0.6, 0, 1));

  // Lead cards "fly" from browser to D1 panel
  const leadProgress = clamp((t - 2.5) / 3, 0, 1);

  // D1 panel reveals
  const d1PanelOp = clamp((t - 1.8) / 0.6, 0, 1);

  // Counter animates
  const count = Math.floor(interpolate([2.5, 6.5], [0, 247], Easing.easeOutCubic)(t));

  // Exit
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={1} label="Import" />

      {/* Sales Navigator browser mock (left) */}
      <div style={{
        position: 'absolute', left: 100, top: 180,
        width: 760, height: 560,
        background: D1.bgPanelSolid,
        border: `1px solid ${D1.border}`,
        borderRadius: 14,
        overflow: 'hidden',
        opacity: browserOp,
        transform: `translateY(${browserY}px)`,
        boxShadow: D1.shadowCard,
      }}>
        {/* Browser chrome */}
        <div style={{
          height: 38, background: '#0d1126',
          borderBottom: `1px solid ${D1.border}`,
          display: 'flex', alignItems: 'center', gap: 6, padding: '0 14px',
        }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }}/>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }}/>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }}/>
          <div style={{
            marginLeft: 16, flex: 1, height: 22,
            background: '#1a2042', borderRadius: 6,
            fontFamily: D1.mono, fontSize: 11,
            color: D1.textMuted, padding: '0 10px',
            display: 'flex', alignItems: 'center',
          }}>
            sales-navigator · search results
          </div>
          {/* Extension icon */}
          <div style={{
            width: 26, height: 26, borderRadius: 6,
            background: D1.gradPrimary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontWeight: 800, fontSize: 11,
            border: t > 1.0 ? `2px solid ${D1.cyan}` : 'none',
            boxShadow: t > 1.0 ? `0 0 12px ${D1.cyan}` : 'none',
          }}>D1</div>
        </div>

        {/* Search filters bar */}
        <div style={{
          padding: '14px 18px', display: 'flex', gap: 8, flexWrap: 'wrap',
          borderBottom: `1px solid ${D1.border}`,
        }}>
          {['CMO', 'France', 'SaaS', '50-200 emp.', 'Série A+'].map((f, i) => (
            <span key={i} style={{
              fontSize: 11, fontFamily: D1.font,
              padding: '5px 10px',
              background: 'rgba(91,141,255,0.12)',
              border: `1px solid ${D1.border}`,
              borderRadius: 4,
              color: D1.text,
            }}>{f}</span>
          ))}
        </div>

        {/* Result rows */}
        <div style={{ padding: 14 }}>
          {[
            { n: 'Marie Laurent', r: 'CMO · Acme Corp' },
            { n: 'Thomas Roy', r: 'Head of Growth · Nordstack' },
            { n: 'Camille Petit', r: 'VP Marketing · Helio' },
            { n: 'Julien Marx', r: 'CMO · Verdant.io' },
            { n: 'Sofia Bey', r: 'Marketing Lead · Brixly' },
            { n: 'Léa Vidal', r: 'Growth · Pulsewave' },
          ].map((p, i) => {
            const flyT = clamp((t - 2.5 - i * 0.18) / 0.6, 0, 1);
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 8px',
                borderBottom: `1px solid ${D1.border}`,
                opacity: 1 - flyT * 0.4,
                transform: `translateX(${flyT * 200}px)`,
                transition: 'none',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: '50%',
                  background: `oklch(60% 0.12 ${(i*40+200)%360})`,
                }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ color: D1.text, fontSize: 13, fontWeight: 600, fontFamily: D1.font }}>{p.n}</div>
                  <div style={{ color: D1.textMuted, fontSize: 11, fontFamily: D1.font }}>{p.r}</div>
                </div>
                <div style={{
                  width: 14, height: 14, borderRadius: 3,
                  border: `1.5px solid ${D1.blue}`,
                  background: flyT > 0.1 ? D1.blue : 'transparent',
                }}/>
              </div>
            );
          })}
        </div>
      </div>

      {/* Extension popup */}
      <div style={{
        position: 'absolute', left: 740, top: 215,
        opacity: extOp,
        transform: `scale(${extScale})`,
        transformOrigin: 'top right',
        zIndex: 5,
      }}>
        <div style={{
          width: 220,
          background: D1.bgPanelSolid,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 10,
          padding: 14,
          boxShadow: D1.shadowGlowStrong,
        }}>
          <div style={{
            fontFamily: D1.mono, fontSize: 10, color: D1.blue,
            letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 8,
          }}>Extension D1</div>
          <div style={{ color: D1.text, fontSize: 14, fontWeight: 600, fontFamily: D1.font, marginBottom: 10 }}>
            Importer 247 leads
          </div>
          <div style={{
            background: D1.gradPrimary,
            color: 'white', fontWeight: 600, fontSize: 12,
            fontFamily: D1.font,
            textAlign: 'center', padding: '8px 0', borderRadius: 6,
          }}>
            → D1 Leads
          </div>
        </div>
      </div>

      {/* D1 application panel (right) */}
      <div style={{
        position: 'absolute', left: 990, top: 220,
        width: 820, height: 480,
        background: D1.bgPanel,
        border: `1px solid ${D1.borderBright}`,
        borderRadius: 14,
        opacity: d1PanelOp,
        boxShadow: D1.shadowGlow,
        overflow: 'hidden',
      }}>
        <div style={{
          padding: '18px 22px', borderBottom: `1px solid ${D1.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: D1.gradPrimary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 800, fontSize: 14, fontFamily: D1.font,
            }}>D1</div>
            <div style={{ color: D1.text, fontWeight: 700, fontSize: 16, fontFamily: D1.font }}>
              Leads · Import
            </div>
          </div>
          <div style={{
            fontFamily: D1.mono, fontSize: 24, fontWeight: 700,
            color: D1.cyan,
            fontVariantNumeric: 'tabular-nums',
          }}>
            +{count}
          </div>
        </div>

        {/* Imported leads list */}
        <div style={{ padding: 16 }}>
          {[0,1,2,3,4,5,6].map(i => {
            const arriveT = clamp((t - 3.0 - i * 0.22) / 0.5, 0, 1);
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px',
                background: arriveT > 0.5 ? 'rgba(91,141,255,0.05)' : 'transparent',
                borderRadius: 6,
                marginBottom: 4,
                opacity: arriveT,
                transform: `translateX(${(1-arriveT) * -40}px)`,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: `oklch(60% 0.12 ${(i*40+200)%360})`,
                }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ color: D1.text, fontSize: 13, fontWeight: 600, fontFamily: D1.font }}>
                    {['Marie L.','Thomas R.','Camille P.','Julien M.','Sofia B.','Léa V.','Hugo C.'][i]}
                  </div>
                  <div style={{ color: D1.textMuted, fontSize: 11, fontFamily: D1.mono }}>
                    Importé · Sales Nav
                  </div>
                </div>
                <div style={{
                  fontFamily: D1.mono, fontSize: 10,
                  color: D1.green, padding: '3px 8px',
                  background: 'rgba(74,222,128,0.12)',
                  border: `1px solid rgba(74,222,128,0.3)`,
                  borderRadius: 3,
                }}>NEW</div>
              </div>
            );
          })}
        </div>
      </div>

      <SceneTitle kicker="Étape 01 · Import" title="Sales Navigator → D1 via extension Chrome" />
    </div>
  );
}

// ── SCENE 3: ENRICHMENT (15-23s) ───────────────────────────────────────────
function SceneEnrichment() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 8;

  const cardOp = clamp(t / 0.5, 0, 1);
  const cardY = interpolate([0, 0.6], [20, 0], Easing.easeOutCubic)(t);
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={2} label="Enrichissement" />

      {/* Center: lead card with fields filling in */}
      <div style={{
        position: 'absolute', left: 960, top: 470,
        transform: `translate(-50%, calc(-50% + ${cardY}px))`,
        opacity: cardOp,
      }}>
        <div style={{
          width: 540,
          background: D1.bgPanelSolid,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 16,
          padding: 28,
          boxShadow: D1.shadowGlowStrong,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%',
              background: D1.gradPrimary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 700, fontSize: 24, fontFamily: D1.font,
            }}>ML</div>
            <div>
              <div style={{ color: D1.text, fontSize: 22, fontWeight: 700, fontFamily: D1.font }}>
                Marie Laurent
              </div>
              <div style={{ color: D1.textMuted, fontSize: 14, fontFamily: D1.font, marginTop: 4 }}>
                CMO · Acme Corp
              </div>
            </div>
          </div>

          {/* Fields */}
          {[
            { label: 'Email', value: 'marie.laurent@acme.io', appearAt: 1.5, color: D1.blue },
            { label: 'Téléphone', value: '+33 6 12 34 56 78', appearAt: 3.0, color: D1.violet },
            { label: 'LinkedIn', value: 'linkedin.com/in/marielaurent', appearAt: 4.5, color: D1.cyan },
          ].map((f, i) => {
            const fillT = clamp((t - f.appearAt) / 0.4, 0, 1);
            const checkT = clamp((t - f.appearAt - 0.4) / 0.3, 0, 1);
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 0',
                borderTop: i === 0 ? `1px solid ${D1.border}` : 'none',
                borderBottom: `1px solid ${D1.border}`,
              }}>
                <div style={{
                  width: 100, color: D1.textMuted, fontSize: 12,
                  fontFamily: D1.mono, textTransform: 'uppercase', letterSpacing: '0.08em',
                }}>{f.label}</div>
                <div style={{
                  flex: 1,
                  fontFamily: D1.mono, fontSize: 15, color: D1.text,
                }}>
                  {fillT < 1 ? (
                    <span style={{ color: D1.textDim }}>
                      {'·'.repeat(Math.floor(20 * (1 - fillT)))}
                    </span>
                  ) : f.value}
                </div>
                <div style={{
                  width: 22, height: 22, borderRadius: '50%',
                  background: checkT > 0.5 ? f.color : 'transparent',
                  border: `1.5px solid ${f.color}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  opacity: checkT,
                  transform: `scale(${0.5 + checkT * 0.5})`,
                }}>
                  {checkT > 0.5 && (
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                      <path d="M2 6l3 3 5-6" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Tool tags on right */}
      <div style={{ position: 'absolute', right: 100, top: 320, opacity: clamp((t-1)/0.5, 0, 1) }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 11, color: D1.textMuted,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14,
        }}>Sources</div>
        {[
          { name: 'Kaspr', color: D1.violet, at: 1.4 },
          { name: 'Lusha', color: D1.cyan, at: 3.0 },
        ].map((tool, i) => {
          const tt = clamp((t - tool.at) / 0.4, 0, 1);
          return (
            <div key={i} style={{
              padding: '14px 20px',
              marginBottom: 12,
              background: D1.bgPanelSolid,
              border: `1px solid ${tool.color}`,
              borderRadius: 10,
              color: D1.text,
              fontFamily: D1.font, fontWeight: 600, fontSize: 16,
              display: 'flex', alignItems: 'center', gap: 12,
              opacity: tt,
              transform: `translateX(${(1-tt) * 30}px)`,
              boxShadow: `0 0 24px color-mix(in oklab, ${tool.color} 30%, transparent)`,
            }}>
              <div style={{
                width: 10, height: 10, borderRadius: 2,
                background: tool.color,
                boxShadow: `0 0 8px ${tool.color}`,
              }}/>
              {tool.name}
              <span style={{
                marginLeft: 'auto',
                fontFamily: D1.mono, fontSize: 11, color: tool.color,
              }}>API</span>
            </div>
          );
        })}
      </div>

      <SceneTitle kicker="Étape 02 · Enrichissement" title="Email + téléphone récupérés automatiquement" />
    </div>
  );
}

// ── SCENE 4: CRM SYNC (23-30s) ─────────────────────────────────────────────
function SceneCRM() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 7;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={3} label="Synchronisation ERP" />

      {/* Two panels with sync arrows */}
      <div style={{ position: 'absolute', inset: 0 }}>
        {/* D1 panel left */}
        <div style={{
          position: 'absolute', left: 200, top: 280,
          width: 480, height: 380,
          background: D1.bgPanel,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 16,
          padding: 24,
          opacity: clamp(t/0.5, 0, 1),
          transform: `translateX(${interpolate([0,0.6],[-30,0],Easing.easeOutCubic)(t)}px)`,
          boxShadow: D1.shadowGlow,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: D1.gradPrimary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 800, fontSize: 14, fontFamily: D1.font,
            }}>D1</div>
            <div style={{ color: D1.text, fontSize: 18, fontWeight: 700, fontFamily: D1.font }}>
              D1 Leads
            </div>
          </div>
          {['Statut: Contacté','Score: 72','Prochaine action: RDV','Owner: T. Martin'].map((row,i) => (
            <div key={i} style={{
              padding: '12px 14px', marginBottom: 6,
              background: 'rgba(91,141,255,0.06)',
              borderRadius: 6,
              fontFamily: D1.mono, fontSize: 13, color: D1.text,
              opacity: clamp((t - 0.8 - i*0.15)/0.4, 0, 1),
            }}>{row}</div>
          ))}
        </div>

        {/* CRM panel right */}
        <div style={{
          position: 'absolute', right: 200, top: 280,
          width: 480, height: 380,
          background: D1.bgPanel,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 16,
          padding: 24,
          opacity: clamp(t/0.5, 0, 1),
          transform: `translateX(${interpolate([0,0.6],[30,0],Easing.easeOutCubic)(t)}px)`,
          boxShadow: D1.shadowGlow,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: D1.violet,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 800, fontSize: 14, fontFamily: D1.mono,
            }}>ERP</div>
            <div style={{ color: D1.text, fontSize: 18, fontWeight: 700, fontFamily: D1.font }}>
              Votre ERP
            </div>
          </div>
          {['Statut: Contacté','Score: 72','Prochaine action: RDV','Owner: T. Martin'].map((row,i) => (
            <div key={i} style={{
              padding: '12px 14px', marginBottom: 6,
              background: 'rgba(160,112,255,0.06)',
              borderRadius: 6,
              fontFamily: D1.mono, fontSize: 13, color: D1.text,
              opacity: clamp((t - 1.5 - i*0.15)/0.4, 0, 1),
            }}>{row}</div>
          ))}
        </div>

        {/* Sync arrows in middle */}
        <div style={{
          position: 'absolute', left: 960, top: 470,
          transform: 'translate(-50%, -50%)',
          opacity: clamp((t-1)/0.5, 0, 1),
          display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center',
        }}>
          {[0,1].map(i => {
            const flow = (t * 1.5 + i * 0.5) % 2;
            return (
              <div key={i} style={{
                width: 240, height: 38, position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', inset: '50% 0 auto 0',
                  height: 2, marginTop: -1,
                  background: i === 0 ? D1.blue : D1.violet,
                  opacity: 0.3,
                }}/>
                <div style={{
                  position: 'absolute', top: '50%', left: `${(flow / 2) * 100}%`,
                  transform: 'translate(-50%,-50%)',
                  width: 14, height: 14, borderRadius: '50%',
                  background: i === 0 ? D1.blue : D1.violet,
                  boxShadow: `0 0 16px ${i === 0 ? D1.blue : D1.violet}`,
                }}/>
                {/* arrow tip */}
                <div style={{
                  position: 'absolute', top: '50%',
                  right: i === 0 ? 0 : 'auto',
                  left: i === 1 ? 0 : 'auto',
                  transform: `translateY(-50%) ${i === 1 ? 'rotate(180deg)' : ''}`,
                  borderLeft: `8px solid ${i === 0 ? D1.blue : D1.violet}`,
                  borderTop: '6px solid transparent',
                  borderBottom: '6px solid transparent',
                }}/>
              </div>
            );
          })}
          <div style={{
            fontFamily: D1.mono, fontSize: 11, color: D1.textMuted,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            marginTop: 4,
          }}>Sync bidirectionnelle</div>
        </div>
      </div>

      <SceneTitle kicker="Étape 03 · ERP" title="Vision unifiée entre D1 et votre ERP" />
    </div>
  );
}

Object.assign(window, { SceneIntro, SceneImport, SceneEnrichment, SceneCRM });