// Scene1Problem.jsx — 0–16s : deux prompts.
// Prompt 1 : la marque apparaît à des places variables selon le LLM.
// Prompt 2 : la marque est ABSENTE (chips « NON CITÉE » barrés) — concurrents cités, pas vous.

function Scene1Problem() {
  const { localTime } = useSprite();
  const t = localTime;

  const PROMPTS = [
    {
      q: "quel logiciel recommandes-tu ?",
      absent: false,
      llms: [
        { name: 'ChatGPT', color: '#10a37f', brands: ['Concurrent 1', 'VOTRE MARQUE', 'Concurrent 2', 'Concurrent 3'] },
        { name: 'Gemini',  color: '#4285f4', brands: ['VOTRE MARQUE', 'Concurrent 1', 'Concurrent 2', 'Concurrent 3'] },
        { name: 'Claude',  color: '#cc785c', brands: ['Concurrent 1', 'Concurrent 2', 'Concurrent 3', 'VOTRE MARQUE'] },
        { name: 'Mistral', color: '#ff7000', brands: ['Concurrent 1', 'Concurrent 2', 'VOTRE MARQUE', 'Concurrent 3'] },
      ],
    },
    {
      q: "meilleur outil de gestion de projet ?",
      absent: true,
      llms: [
        { name: 'ChatGPT', color: '#10a37f', brands: ['Concurrent 1', 'Concurrent 2', 'Concurrent 3', 'Concurrent 4'] },
        { name: 'Gemini',  color: '#4285f4', brands: ['Concurrent 1', 'Concurrent 2', 'Concurrent 3', 'Concurrent 4'] },
        { name: 'Claude',  color: '#cc785c', brands: ['Concurrent 1', 'Concurrent 2', 'Concurrent 3', 'Concurrent 4'] },
        { name: 'Mistral', color: '#ff7000', brands: ['Concurrent 1', 'Concurrent 2', 'Concurrent 3', 'Concurrent 4'] },
      ],
    },
  ];

  const PHASE = 8.0;               // durée par prompt
  const idx = t < PHASE ? 0 : 1;
  const lt = t - idx * PHASE;      // temps local dans la phase
  const prompt = PROMPTS[idx];

  const labelOp = clamp(t / 0.6, 0, 1);
  // fondu entre les deux prompts
  const blockOp = idx === 0
    ? clamp((7.7 - t) / 0.35, 0, 1)
    : clamp((t - 8.05) / 0.35, 0, 1);

  const promptOpacity = clamp(lt / 0.5, 0, 1);
  const charsShown = Math.floor(animate({ from: 0, to: prompt.q.length, start: 0.1, end: 1.1, ease: Easing.linear })(lt));
  const typed = prompt.q.slice(0, charsShown);
  const showCaret = (Math.floor(lt * 2) % 2 === 0) && lt < 1.3;

  const rowStarts = [2.0, 3.2, 4.2, 5.2];
  const pulseT = clamp((lt - 6.2) / 1.6, 0, 1);
  const pulseOpacity = pulseT > 0 ? 0.4 + 0.6 * Math.abs(Math.sin(pulseT * Math.PI * 3)) : 0;
  const calloutOp = clamp((lt - 6.2) / 0.6, 0, 1) * blockOp;

  const chipBase = {
    flex: 1, minWidth: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    textAlign: 'center',
    padding: '18px 16px',
    borderRadius: 8,
    fontSize: 27,
    fontFamily: 'Inter, system-ui, sans-serif',
    whiteSpace: 'nowrap',
    position: 'relative',
  };

  return (
    <div style={{ position: 'absolute', inset: 0, padding: '70px 100px', color: '#0a0a0a' }}>
      {/* Section label (persistant) */}
      <div style={{
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 22, letterSpacing: '0.18em', color: '#FF6329',
        textTransform: 'uppercase', opacity: labelOp,
        marginBottom: 30,
      }}>
        ▌ 01 — Le problème
      </div>

      {/* Bloc prompt (fondu entre les deux prompts) */}
      <div style={{ opacity: blockOp }}>
        {/* Prompt bar */}
        <div style={{
          background: '#ffffff',
          border: '1px solid rgba(0,0,0,0.12)',
          borderRadius: 12,
          padding: '30px 38px',
          opacity: promptOpacity,
          marginBottom: 60,
          display: 'flex', alignItems: 'center', gap: 24,
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            fontSize: 26, color: 'rgba(0,0,0,0.45)', textTransform: 'uppercase', letterSpacing: '0.1em',
            whiteSpace: 'nowrap',
          }}>
            Prompt ▸
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            fontSize: 50, color: '#0a0a0a', fontWeight: 500,
          }}>
            {typed}
            <span style={{ opacity: showCaret ? 1 : 0, color: '#FF6329' }}>▍</span>
          </div>
        </div>

        {/* LLM rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
          {prompt.llms.map((llm, i) => {
            const rowOp = clamp((lt - rowStarts[i]) / 0.4, 0, 1);
            const rowY = (1 - rowOp) * 16;
            return (
              <div key={llm.name} style={{
                display: 'flex', alignItems: 'center', gap: 40,
                opacity: rowOp, transform: `translateY(${rowY}px)`,
              }}>
                {/* LLM label */}
                <div style={{ width: 250, display: 'flex', alignItems: 'center', gap: 16 }}>
                  <div style={{
                    width: 16, height: 16, borderRadius: 8, background: llm.color,
                    boxShadow: `0 0 12px ${llm.color}88`,
                  }}/>
                  <div style={{
                    fontFamily: 'Inter, system-ui, sans-serif',
                    fontSize: 34, fontWeight: 600, color: '#0a0a0a', letterSpacing: '-0.01em',
                  }}>
                    {llm.name}
                  </div>
                </div>

                {/* Brand chips */}
                <div style={{ display: 'flex', gap: 14, flex: 1 }}>
                  {llm.brands.map((b, j) => {
                    const chipDelay = j * 0.08;
                    const chipOp = clamp((lt - rowStarts[i] - 0.2 - chipDelay) / 0.25, 0, 1);
                    const isYou = b === 'VOTRE MARQUE';
                    return (
                      <div key={j} style={{
                        ...chipBase,
                        fontWeight: isYou ? 700 : 500,
                        background: isYou ? (pulseT > 0 ? 'rgba(255,99,41,0.12)' : 'transparent') : '#f6f1e9',
                        border: isYou ? '1.5px solid #FF6329' : '1px solid rgba(0,0,0,0.12)',
                        color: isYou ? '#FF6329' : 'rgba(0,0,0,0.7)',
                        opacity: isYou ? Math.max(chipOp, pulseT > 0 ? pulseOpacity : chipOp) : chipOp,
                        letterSpacing: isYou ? '0.06em' : '-0.005em',
                        textTransform: isYou ? 'uppercase' : 'none',
                        boxShadow: isYou && pulseT > 0 ? `0 0 16px rgba(255,99,41,${pulseOpacity * 0.5})` : 'none',
                      }}>
                        {b}
                      </div>
                    );
                  })}

                  {/* Chip "NON CITÉE" quand la marque est absente */}
                  {prompt.absent && (function () {
                    const chipDelay = llm.brands.length * 0.08;
                    const chipOp = clamp((lt - rowStarts[i] - 0.2 - chipDelay) / 0.25, 0, 1);
                    return (
                      <div style={{
                        ...chipBase,
                        fontWeight: 700,
                        background: 'transparent',
                        border: '1.5px dashed rgba(255,99,41,0.6)',
                        color: 'rgba(0,0,0,0.4)',
                        textDecoration: 'line-through',
                        textDecorationColor: 'rgba(255,99,41,0.7)',
                        letterSpacing: '0.06em',
                        textTransform: 'uppercase',
                        opacity: Math.max(chipOp, pulseT > 0 ? pulseOpacity : chipOp),
                      }}>
                        VOTRE MARQUE
                        <span style={{
                          position: 'absolute', top: -14, right: -8,
                          fontFamily: 'JetBrains Mono, monospace',
                          fontSize: 13, fontWeight: 700, letterSpacing: '0.1em',
                          color: '#fff', background: '#FF6329',
                          padding: '3px 8px', borderRadius: 4, whiteSpace: 'nowrap',
                          textDecoration: 'none',
                        }}>NON CITÉE</span>
                      </div>
                    );
                  })()}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Callout bas */}
      <div style={{
        position: 'absolute', bottom: 140, left: 100, right: 100,
        opacity: calloutOp,
        display: 'flex', alignItems: 'baseline', gap: 18, flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 46, fontWeight: 700, color: '#FF6329', letterSpacing: '-0.02em',
        }}>
          Vos concurrents sont cités, pas vous.
        </div>
        <div style={{
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 46, fontWeight: 400, color: 'rgba(0,0,0,0.72)', letterSpacing: '-0.02em',
        }}>
          Et vous ne le savez pas !
        </div>
      </div>
    </div>
  );
}

window.Scene1Problem = Scene1Problem;