function KometaAI({ accent }) {
  const [step, setStep] = React.useState(0);
  const messages = [
    { role: 'user', text: 'Quels sont les métiers en tension dans le secteur du BTP en Île-de-France ?' },
    { role: 'ai', text: 'En IDF, sur le BTP, 7 métiers ressortent comme structurellement tendus. En tête : charpentiers bois (indice 3,2), couvreurs (2,9) et maçons qualifiés (2,7).', sources: ['DARES · Tensions', 'France Travail · BMO 2024'] },
    { role: 'ai', text: 'Souhaitez-vous une répartition par département ou un comparatif avec la moyenne nationale ?', chips: ['Par département', 'Comparatif national', 'Voir le graphique'] },
  ];

  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % (messages.length + 1)), 2800);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="komete-ai" className="section kometa-section">
      <div className="container kometa-grid">
        <div className="kometa-copy">
          <SectionHead
            kicker="Nouveauté · IA"
            title={<>KoMètA, le <em>GPT</em> de<br />l'emploi-formation.</>}
            lede="Un assistant spécialisé, branché directement sur le socle de données Komète et 10 ans de savoir-faire KYU. Posez vos questions en langage naturel — les réponses sont sourcées et reliées aux graphiques."
          />
          <ul className="kometa-feats">
            <li><Check color={accent.accent} /> Aide à la navigation et à la lecture des indicateurs</li>
            <li><Check color={accent.accent} /> Interroge le socle de données, répond en sourçant</li>
            <li><Check color={accent.accent} /> Croise et analyse, renvoie vers le graphique pertinent</li>
            <li><Check color={accent.accent} /> Mise en lien avec les ressources France compétences</li>
          </ul>
          <div className="kometa-tech">
            <span className="tech-chip">MistralAI</span>
            <span className="tech-chip">RAG · LangChain</span>
            <span className="tech-chip">Infra souveraine</span>
            <span className="tech-chip">Zéro exfiltration</span>
          </div>
        </div>

        <div className="kometa-chat">
          <div className="chat-head">
            <KometeStar size={18} color={accent.accent} />
            <span className="chat-title">KoMètA</span>
            <span className="chat-status">
              <span className="pulse" style={{ background: accent.accent }} /> en ligne
            </span>
          </div>
          <div className="chat-body">
            {messages.slice(0, step).map((m, i) =>
              <div key={i} className={`msg ${m.role}`}>
                {m.role === 'ai' && <KometeStar size={14} color={accent.accent} style={{ flexShrink: 0, marginTop: 4 }} />}
                <div className="msg-bubble" style={m.role === 'user' ? { background: accent.accent, color: '#fff' } : {}}>
                  <div>{m.text}</div>
                  {m.sources && (
                    <div className="msg-sources">
                      {m.sources.map(s => <span key={s} className="src-tag">📄 {s}</span>)}
                    </div>
                  )}
                  {m.chips && (
                    <div className="msg-chips">
                      {m.chips.map(c => <span key={c} className="msg-chip" style={{ borderColor: accent.accent, color: accent.accent }}>{c}</span>)}
                    </div>
                  )}
                </div>
              </div>
            )}
            {step < messages.length && (
              <div className="msg ai">
                <KometeStar size={14} color={accent.accent} style={{ flexShrink: 0, marginTop: 4 }} />
                <div className="msg-bubble typing"><span /><span /><span /></div>
              </div>
            )}
          </div>
          <div className="chat-input">
            <input placeholder="Posez votre question à KoMètA…" readOnly />
            <button style={{ background: accent.accent }}>↑</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Check({ color }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" style={{ display: 'inline-block', verticalAlign: '-3px', marginRight: 10 }}>
      <circle cx="9" cy="9" r="9" fill={color} fillOpacity="0.14" />
      <path d="M5 9.2l2.8 2.8L13 6.8" stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, { KometaAI, Check });