// Scenes 8-13: Scoring, Companies, Stats NL, Weak signals, CTA outro

// ── SCENE 8: SCORING (72-82s) ──────────────────────────────────────────────
function SceneScoring() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 10;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  // Score climbs from 12 to 87 over scene
  const score = Math.floor(interpolate([0.5, 6], [12, 87], Easing.easeOutCubic)(t));
  const scorePct = score / 100;

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

      {/* Big circular score on left */}
      <div style={{
        position: 'absolute', left: 280, top: 470,
        transform: 'translate(-50%, -50%)',
        opacity: clamp(t/0.4, 0, 1),
      }}>
        <svg width="340" height="340" viewBox="0 0 340 340">
          <circle cx="170" cy="170" r="140" stroke={D1.border} strokeWidth="14" fill="none"/>
          <circle
            cx="170" cy="170" r="140"
            stroke={D1.blue} strokeWidth="14" fill="none"
            strokeLinecap="round"
            strokeDasharray={`${scorePct * 2 * Math.PI * 140} ${2 * Math.PI * 140}`}
            transform="rotate(-90 170 170)"
            style={{ filter: `drop-shadow(0 0 12px ${D1.blue})` }}
          />
        </svg>
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            fontFamily: D1.mono, fontSize: 13, color: D1.textMuted,
            letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 8,
          }}>Score</div>
          <div style={{
            fontFamily: D1.font, fontSize: 96, fontWeight: 800,
            color: D1.text, lineHeight: 1,
            fontVariantNumeric: 'tabular-nums',
            background: D1.gradPrimary,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}>
            {score}
          </div>
          <div style={{
            fontFamily: D1.mono, fontSize: 12, color: score > 70 ? D1.green : D1.amber,
            letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 8, fontWeight: 700,
          }}>
            {score > 70 ? '● Hot lead' : score > 40 ? '● Engagé' : '● Tiède'}
          </div>
        </div>
      </div>

      {/* Contributing signals on right */}
      <div style={{
        position: 'absolute', right: 160, top: 240,
        width: 540,
      }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 12, color: D1.textMuted,
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18,
        }}>
          Interactions détectées
        </div>

        {[
          { label: 'Email ouvert', pts: '+5', at: 1.0 },
          { label: 'Click CTA', pts: '+10', at: 1.7 },
          { label: '3 pages vues', pts: '+15', at: 2.4 },
          { label: 'Page Pricing visitée', pts: '+20', at: 3.1 },
          { label: 'Réponse LinkedIn', pts: '+25', at: 4.0 },
          { label: 'Appel positif · IA', pts: '+30', at: 5.0 },
        ].map((row, i) => {
          const op = clamp((t - row.at) / 0.4, 0, 1);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: '12px 16px',
              marginBottom: 6,
              background: D1.bgPanelSolid,
              border: `1px solid ${D1.border}`,
              borderRadius: 8,
              opacity: op,
              transform: `translateX(${(1-op) * 30}px)`,
            }}>
              <div style={{ flex: 1, color: D1.text, fontSize: 14, fontFamily: D1.font, fontWeight: 500 }}>
                {row.label}
              </div>
              <div style={{
                fontFamily: D1.mono, fontWeight: 700, fontSize: 14,
                color: D1.green,
                padding: '4px 10px',
                background: 'rgba(74,222,128,0.12)',
                border: '1px solid rgba(74,222,128,0.3)',
                borderRadius: 4,
              }}>
                {row.pts}
              </div>
            </div>
          );
        })}
      </div>

      <SceneTitle kicker="Étape 08 · Scoring" title="Chaque interaction nourrit le score du lead" />
    </div>
  );
}

// ── SCENE 9: COMPANIES / ORG (82-90s) ──────────────────────────────────────
function SceneCompanies() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 8;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  const nodes = [
    { id: 'ceo', name: 'CEO', who: 'P. Durand', x: 960, y: 290, at: 0.4, lead: false },
    { id: 'cmo', name: 'CMO', who: 'M. Laurent', x: 760, y: 460, at: 1.0, lead: true },
    { id: 'cto', name: 'CTO', who: 'A. Bernard', x: 1160, y: 460, at: 1.4, lead: false },
    { id: 'gh', name: 'Head of Growth', who: 'T. Roy', x: 600, y: 630, at: 1.8, lead: true },
    { id: 'mar', name: 'Marketing Lead', who: 'S. Bey', x: 800, y: 700, at: 2.2, lead: false },
    { id: 'eng', name: 'VP Eng', who: 'L. Vidal', x: 1080, y: 660, at: 2.6, lead: false },
    { id: 'sal', name: 'VP Sales', who: 'H. Cano', x: 1280, y: 700, at: 3.0, lead: false },
  ];

  const edges = [
    ['ceo','cmo'], ['ceo','cto'],
    ['cmo','gh'], ['cmo','mar'],
    ['cto','eng'], ['cto','sal'],
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={9} label="Sociétés · organigramme" />

      {/* Company header */}
      <div style={{
        position: 'absolute', left: 120, top: 220,
        opacity: clamp(t/0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 12, color: D1.textMuted,
          letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 8,
        }}>Société</div>
        <div style={{ color: D1.text, fontSize: 32, fontWeight: 700, fontFamily: D1.font }}>
          Acme Corp
        </div>
        <div style={{ color: D1.textMuted, fontSize: 13, fontFamily: D1.mono, marginTop: 6 }}>
          SaaS · 142 emp · 12 leads couverts
        </div>
      </div>

      {/* Edges */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {edges.map(([a, b], i) => {
          const na = nodes.find(n => n.id === a);
          const nb = nodes.find(n => n.id === b);
          const op = clamp((t - Math.max(na.at, nb.at) - 0.1) / 0.4, 0, 1);
          return (
            <line key={i} x1={na.x} y1={na.y + 30} x2={nb.x} y2={nb.y - 30}
                  stroke={D1.border} strokeWidth="1.5" opacity={op}/>
          );
        })}
      </svg>

      {/* Nodes */}
      {nodes.map((n, i) => {
        const op = clamp((t - n.at) / 0.4, 0, 1);
        const sc = Easing.easeOutBack(op);
        return (
          <div key={n.id} style={{
            position: 'absolute', left: n.x, top: n.y,
            transform: `translate(-50%, -50%) scale(${sc})`,
            opacity: op,
            padding: '10px 16px',
            background: n.lead ? D1.bgPanelSolid : 'rgba(20,26,50,0.6)',
            border: `1.5px solid ${n.lead ? D1.blue : D1.border}`,
            borderRadius: 10,
            minWidth: 160,
            textAlign: 'center',
            boxShadow: n.lead ? `0 0 24px color-mix(in oklab, ${D1.blue} 40%, transparent)` : 'none',
          }}>
            <div style={{
              fontFamily: D1.mono, fontSize: 10,
              color: n.lead ? D1.blue : D1.textMuted,
              letterSpacing: '0.15em', textTransform: 'uppercase',
            }}>{n.name}</div>
            <div style={{
              color: D1.text, fontSize: 14, fontWeight: 600, fontFamily: D1.font, marginTop: 4,
            }}>{n.who}</div>
            {n.lead && (
              <div style={{
                position: 'absolute', top: -8, right: -8,
                width: 18, height: 18, borderRadius: '50%',
                background: D1.green,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, color: 'white', fontWeight: 800, fontFamily: D1.mono,
                boxShadow: `0 0 8px ${D1.green}`,
              }}>L</div>
            )}
          </div>
        );
      })}

      <SceneTitle kicker="Étape 09 · Sociétés" title="Cartographie complète des entreprises et de leurs équipes" />
    </div>
  );
}

// ── SCENE 10: STATS NL QUERY (90-100s) ─────────────────────────────────────
function SceneStats() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 10;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  const fullQuery = 'Quelle est l\'évolution du nombre de leads ayant visité le site ?';
  const typedLen = Math.floor(clamp((t - 0.4) / 2.5, 0, 1) * fullQuery.length);
  const typed = fullQuery.slice(0, typedLen);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={10} label="Stats en langage naturel" />

      {/* Query bar */}
      <div style={{
        position: 'absolute', left: 200, top: 240, right: 200,
        opacity: clamp(t/0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 12, color: D1.violet,
          letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontSize: 14 }}>✦</span>
          Posez votre question
        </div>
        <div style={{
          padding: '24px 28px',
          background: D1.bgPanelSolid,
          border: `1.5px solid ${D1.violet}`,
          borderRadius: 14,
          boxShadow: `0 0 40px color-mix(in oklab, ${D1.violet} 30%, transparent)`,
          fontFamily: D1.font,
          fontSize: 22,
          fontWeight: 500,
          color: D1.text,
          minHeight: 36,
        }}>
          {typed}
          {typedLen < fullQuery.length && t < 3.0 && (
            <span style={{
              display: 'inline-block', width: 2, height: 24,
              background: D1.violet, marginLeft: 4, verticalAlign: 'middle',
              opacity: Math.sin(t * 8) > 0 ? 1 : 0,
            }}/>
          )}
        </div>
      </div>

      {/* Chart that builds (after t > 3.5) */}
      {t > 3.3 && (
        <div style={{
          position: 'absolute', left: 200, top: 410, right: 200,
          padding: 32,
          background: D1.bgPanel,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 14,
          opacity: clamp((t-3.3)/0.5, 0, 1),
          transform: `translateY(${(1 - clamp((t-3.3)/0.5, 0, 1)) * 20}px)`,
          boxShadow: D1.shadowGlow,
        }}>
          <div style={{
            fontFamily: D1.mono, fontSize: 11, color: D1.textMuted,
            letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18,
          }}>Visites uniques · 30 derniers jours</div>

          {/* Chart */}
          <div style={{ height: 240, position: 'relative', display: 'flex', alignItems: 'flex-end', gap: 6 }}>
            {Array.from({ length: 30 }).map((_, i) => {
              const baseH = 30 + Math.sin(i * 0.4) * 20 + i * 3 + Math.random() * 0; // deterministic-ish
              const seedH = 40 + Math.abs(Math.sin(i * 1.3) * 30) + i * 4;
              const buildT = clamp((t - 3.7 - i * 0.05) / 0.3, 0, 1);
              return (
                <div key={i} style={{
                  flex: 1,
                  height: `${seedH * buildT}px`,
                  background: `linear-gradient(180deg, ${D1.blue} 0%, ${D1.violet} 100%)`,
                  borderRadius: '3px 3px 0 0',
                  opacity: 0.4 + 0.6 * buildT,
                }}/>
              );
            })}
          </div>

          {/* X-axis labels */}
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginTop: 10,
            fontFamily: D1.mono, fontSize: 10, color: D1.textMuted,
          }}>
            <span>J-30</span><span>J-20</span><span>J-10</span><span>Auj.</span>
          </div>

          {/* KPI badge */}
          {t > 6.5 && (
            <div style={{
              position: 'absolute', top: 24, right: 32,
              padding: '10px 16px',
              background: 'rgba(74,222,128,0.12)',
              border: `1px solid ${D1.green}`,
              borderRadius: 8,
              opacity: clamp((t-6.5)/0.4, 0, 1),
            }}>
              <div style={{
                fontFamily: D1.mono, fontSize: 10, color: D1.green,
                letterSpacing: '0.15em', textTransform: 'uppercase',
              }}>Évolution</div>
              <div style={{
                color: D1.green, fontSize: 22, fontWeight: 800, fontFamily: D1.font,
                fontVariantNumeric: 'tabular-nums', marginTop: 2,
              }}>+47%</div>
            </div>
          )}
        </div>
      )}

      <SceneTitle kicker="Étape 10 · Analytics IA" title="Vos questions, traduites en graphiques" />
    </div>
  );
}

// ── SCENE 11: WEAK SIGNALS (100-108s) ──────────────────────────────────────
function SceneSignals() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 8;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  const signals = [
    { txt: 'Acme Corp recrute un Head of RevOps', src: 'LinkedIn', at: 0.8 },
    { txt: 'M. Laurent a changé de poste', src: 'LinkedIn', at: 1.8 },
    { txt: 'Acme a publié un post sur le scaling', src: 'LinkedIn', at: 2.8 },
    { txt: 'Levée série B annoncée · 24M€', src: 'Presse', at: 3.8, hot: true },
  ];

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

      {/* Radar / pulse on left */}
      <div style={{
        position: 'absolute', left: 380, top: 480,
        transform: 'translate(-50%, -50%)',
        opacity: clamp(t/0.4, 0, 1),
      }}>
        {[0, 1, 2].map(i => {
          const phase = (t * 0.6 + i * 0.5) % 2;
          return (
            <div key={i} style={{
              position: 'absolute',
              left: 0, top: 0,
              width: phase * 280, height: phase * 280,
              borderRadius: '50%',
              border: `2px solid ${D1.violet}`,
              transform: 'translate(-50%, -50%)',
              opacity: 1 - phase / 2,
            }}/>
          );
        })}
        <div style={{
          width: 100, height: 100, borderRadius: '50%',
          background: D1.gradPrimary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'white', fontWeight: 800, fontSize: 40, fontFamily: D1.font,
          boxShadow: D1.shadowGlowStrong,
          transform: 'translate(-50%, -50%)',
          position: 'absolute',
        }}>
          ◉
        </div>
        <div style={{
          position: 'absolute', top: 80,
          transform: 'translateX(-50%)', textAlign: 'center',
          fontFamily: D1.mono, fontSize: 11, color: D1.textMuted,
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>Beta · en test</div>
      </div>

      {/* Signals streaming on right */}
      <div style={{
        position: 'absolute', right: 140, top: 280, width: 720,
      }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 12, color: D1.violet,
          letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 18,
        }}>
          Signaux détectés
        </div>
        {signals.map((s, i) => {
          const op = clamp((t - s.at) / 0.5, 0, 1);
          return (
            <div key={i} style={{
              padding: '14px 18px',
              marginBottom: 10,
              background: D1.bgPanelSolid,
              border: s.hot ? `1.5px solid ${D1.violet}` : `1px solid ${D1.border}`,
              borderRadius: 10,
              opacity: op,
              transform: `translateX(${(1-op) * 40}px)`,
              display: 'flex', alignItems: 'center', gap: 14,
              boxShadow: s.hot ? `0 0 30px color-mix(in oklab, ${D1.violet} 30%, transparent)` : 'none',
            }}>
              <div style={{
                width: 8, height: 8, borderRadius: '50%',
                background: s.hot ? D1.violet : D1.blue,
                boxShadow: s.hot ? `0 0 12px ${D1.violet}` : 'none',
                flexShrink: 0,
              }}/>
              <div style={{ flex: 1, color: D1.text, fontSize: 15, fontFamily: D1.font, fontWeight: 500 }}>
                {s.txt}
              </div>
              <div style={{
                fontFamily: D1.mono, fontSize: 10, color: D1.textMuted,
                padding: '3px 8px',
                background: 'rgba(255,255,255,0.04)',
                borderRadius: 3,
                letterSpacing: '0.1em', textTransform: 'uppercase',
              }}>{s.src}</div>
            </div>
          );
        })}
      </div>

      <SceneTitle kicker="Étape 11 · Signaux faibles" title="LinkedIn et autres médias scannés en continu" />
    </div>
  );
}

// ── SCENE 12: CTA OUTRO (108-120s) ─────────────────────────────────────────
function SceneOutro() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 12;

  // Entrance
  const op = clamp(t/0.6, 0, 1);
  const logoScale = Easing.easeOutBack(clamp(t/0.8, 0, 1));

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: op }}>
      {/* Pipeline summary chips floating in */}
      <div style={{
        position: 'absolute', left: 960, top: 280,
        transform: 'translateX(-50%)',
        display: 'flex', gap: 10, flexWrap: 'wrap',
        justifyContent: 'center',
        maxWidth: 1500,
      }}>
        {[
          'Import', 'Enrichissement', 'ERP Sync', 'Téléphonie IA',
          'Suivi commerciaux', 'Email + relances', 'LinkedIn auto', 'Tracking site',
          'Scoring', 'Org sociétés', 'Stats IA', 'Signaux faibles',
        ].map((label, i) => {
          const chipOp = clamp((t - 0.5 - i * 0.08) / 0.3, 0, 1);
          return (
            <div key={i} style={{
              padding: '8px 16px',
              background: D1.bgPanelSolid,
              border: `1px solid ${D1.border}`,
              borderRadius: 100,
              fontFamily: D1.font, fontSize: 13, fontWeight: 600,
              color: D1.text,
              opacity: chipOp,
              transform: `translateY(${(1-chipOp) * 12}px)`,
            }}>
              {label}
            </div>
          );
        })}
      </div>

      {/* Big logo + title */}
      <div style={{
        position: 'absolute', left: 960, top: 530,
        transform: `translate(-50%, -50%) scale(${logoScale})`,
        textAlign: 'center',
      }}>
        <div style={{
          width: 100, height: 100,
          borderRadius: 24,
          background: D1.gradPrimary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'white', fontWeight: 800, fontSize: 46, fontFamily: D1.font,
          letterSpacing: '-0.04em',
          boxShadow: D1.shadowGlowStrong,
          margin: '0 auto 24px',
        }}>D1</div>
        <div style={{
          color: D1.text, fontSize: 78, fontWeight: 800,
          fontFamily: D1.font, letterSpacing: '-0.03em',
          lineHeight: 1,
        }}>
          D1 Leads
        </div>
        <div style={{
          color: D1.textMuted, fontSize: 20, fontFamily: D1.font,
          marginTop: 14, fontWeight: 400,
        }}>
          Toute votre prospection, dans une seule application.
        </div>
      </div>

      {/* CTA button */}
      <div style={{
        position: 'absolute', left: 960, top: 820,
        transform: `translateX(-50%) translateY(${(1 - clamp((t - 1.5)/0.6, 0, 1)) * 20}px)`,
        opacity: clamp((t - 1.5) / 0.5, 0, 1),
      }}>
        <div style={{
          padding: '20px 44px',
          background: D1.gradPrimary,
          color: 'white',
          borderRadius: 12,
          fontWeight: 700, fontSize: 22,
          fontFamily: D1.font,
          boxShadow: `0 12px 40px color-mix(in oklab, ${D1.blue} 50%, transparent), ${D1.shadowGlowStrong}`,
          display: 'inline-flex', alignItems: 'center', gap: 14,
          transform: `scale(${1 + 0.02 * Math.sin(t * 3)})`,
        }}>
          Demander une démo
          <span style={{ fontSize: 22 }}>→</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SceneScoring, SceneCompanies, SceneStats, SceneSignals, SceneOutro,
});