// Scene2Question.jsx — 9–18s
// Manifeste typographique: "EST-CE QUE L'IA RECOMMANDE VOTRE MARQUE ?"
// Mots qui apparaissent en cascade. L'œil BrandSight se révèle en fin de scène.

function Scene2Question() {
  const { localTime, duration } = useSprite();
  const t = localTime;

  const lines = [
    { txt: "EST-CE QUE VOUS SURVEILLEZ", start: 0.2 },
    { txt: "VOS CITATIONS",              start: 1.0, accent: true },
    { txt: "DANS TOUS LES LLMs",         start: 1.8 },
    { txt: "AU MÊME MOMENT ?",            start: 2.6 },
  ];

  // Eye fade-in starts at 4.6
  const eyeOp = clamp((t - 4.6) / 0.9, 0, 1);
  // Sub-line at 5.4
  const subOp = clamp((t - 5.4) / 0.7, 0, 1);

  // Exit fade for whole scene
  const exitT = clamp((t - (duration - 0.5)) / 0.5, 0, 1);
  const globalOp = 1 - exitT;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 0, padding: 80, opacity: globalOp,
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 18, letterSpacing: '0.18em', color: '#FF6329',
        textTransform: 'uppercase', marginBottom: 50,
        opacity: clamp(t / 0.4, 0, 1),
      }}>
        ▌ 02 — La question
      </div>

      <div style={{
        fontFamily: '"Anton", Impact, system-ui, sans-serif',
        fontWeight: 400,
        fontSize: 104,
        lineHeight: 1.08,
        letterSpacing: '0em',
        whiteSpace: 'nowrap',
        textAlign: 'center',
        color: '#0a0a0a',
        textTransform: 'uppercase',
      }}>
        {lines.map((l, i) => {
          const op = clamp((t - l.start) / 0.35, 0, 1);
          const ty = (1 - op) * 30;
          return (
            <div key={i} style={{
              opacity: op,
              transform: `translateY(${ty}px)`,
              color: l.accent ? '#FF6329' : '#0a0a0a',
              willChange: 'transform, opacity',
            }}>
              {l.txt}
            </div>
          );
        })}
      </div>

      {/* Logo removed — keep title clean */}

      <div style={{
        marginTop: 32,
        opacity: subOp,
        fontFamily: 'Inter, system-ui, sans-serif',
        fontSize: 38, fontWeight: 400,
        color: 'rgba(0,0,0,0.72)',
        letterSpacing: '-0.005em',
        textAlign: 'center',
      }}>
        Ce qui n'est pas cité par l'IA n'existe pas dans le nouveau parcours de découverte.
      </div>
    </div>
  );
}

window.Scene2Question = Scene2Question;