// AI receptionist live call demo with waveform + transcript

const CALL_TRANSCRIPT = [
  { speaker: 'ai', text: "Bonjour, vous êtes en ligne avec l'assistant de l'Atelier Moreau, plomberie chauffage. Comment puis-je vous aider ?", t: '00:01' },
  { speaker: 'caller', text: "Bonjour, ma chaudière est en panne, plus d'eau chaude depuis ce matin.", t: '00:08' },
  { speaker: 'ai', text: "Je comprends, c'est désagréable. Pouvez-vous me donner votre nom et votre code postal s'il vous plaît ?", t: '00:13' },
  { speaker: 'caller', text: "Oui, Pierre Lambert, 75011 Paris.", t: '00:19' },
  { speaker: 'ai', text: "Merci M. Lambert. La chaudière fait-elle un bruit inhabituel, ou il y a juste une absence de production ?", t: '00:23' },
  { speaker: 'caller', text: "Aucun bruit, juste plus rien qui chauffe.", t: '00:30' },
  { speaker: 'ai', text: "Compris, je classe en intervention prioritaire. Un technicien peut passer aujourd'hui à 16h ou demain à 9h. Que préférez-vous ?", t: '00:34' },
  { speaker: 'caller', text: "16h ce serait parfait.", t: '00:42' },
  { speaker: 'ai', text: "Parfait. C'est noté pour aujourd'hui 16h. Vous recevrez un SMS de confirmation et un autre 30 minutes avant l'arrivée du technicien. Bonne journée M. Lambert.", t: '00:46' },
];

function AIReceptionist() {
  const [seconds, setSeconds] = useState(56);
  const [visibleLines, setVisibleLines] = useState(CALL_TRANSCRIPT.length);

  useEffect(() => {
    const i = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(i);
  }, []);

  const fmtTime = (s) => `${Math.floor(s/60).toString().padStart(2, '0')}:${(s%60).toString().padStart(2, '0')}`;

  return (
    <section className="section" id="receptionist">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Standard IA · 24/7</span>
          <h2 className="h-section">Aucun appel manqué.<br/><span className="serif">Aucun client perdu.</span></h2>
          <p>LeadCustom décroche en 2 sonneries, dialogue naturellement, qualifie l'urgence, prend les coordonnées et planifie le rappel. Vous recevez un brief ; pas un appel à rappeler.</p>
        </div>

        <div className="ai-call reveal">
          <div className="ai-call-header">
            <div className="ai-call-status">
              <span className="pulse-dot"></span>
              <div>
                <div className="ai-call-title">Appel entrant · M. Lambert</div>
                <div className="ai-call-sub">+33 6 24 88 17 02 · transcrit en direct</div>
              </div>
            </div>
            <div className="ai-call-time">{fmtTime(seconds)}</div>
          </div>

          <div className="ai-call-body">
            <div className="ai-waveform">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '4px 8px', fontSize: 11, color: 'var(--text-dim)', fontFamily: 'Geist Mono, monospace', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                <span>Audio en direct</span>
                <span>14 langues détectées</span>
              </div>
              <div className="wave-vis">
                {Array.from({ length: 60 }).map((_, i) => {
                  const h = 20 + Math.abs(Math.sin(i * 0.7)) * 60 + (Math.random() * 12);
                  return (
                    <span key={i} className="wave-bar" style={{
                      height: `${h}%`,
                      animationDelay: `${i * 0.04}s`,
                      animationDuration: `${1 + (i % 3) * 0.2}s`,
                    }}></span>
                  );
                })}
              </div>
              <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
                <button className="btn btn-ghost" style={{ padding: '8px 12px', fontSize: 12 }}>
                  <Icon.Mic size={12} /> Écouter
                </button>
                <button className="btn btn-ghost" style={{ padding: '8px 12px', fontSize: 12, whiteSpace: 'nowrap' }}>
                  Reprendre l'appel
                </button>
              </div>
            </div>

            <div className="transcript">
              {CALL_TRANSCRIPT.slice(0, visibleLines).map((line, i) => (
                <div key={i} className="t-line">
                  <span className={`t-speaker ${line.speaker}`}>
                    {line.speaker === 'ai' ? 'IA' : 'Client'}
                    <div className="t-meta">{line.t}</div>
                  </span>
                  <div className="t-text">{line.text}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="ai-call-footer">
            <div className="detected">
              <div className="detected-label">Catégorie</div>
              <div className="detected-value">Panne chaudière</div>
            </div>
            <div className="detected">
              <div className="detected-label">Urgence</div>
              <div className="detected-value" style={{ color: 'var(--amber)' }}>Prioritaire</div>
            </div>
            <div className="detected">
              <div className="detected-label">RDV programmé</div>
              <div className="detected-value match">✓ 27 avr · 16:00</div>
            </div>
            <div className="detected">
              <div className="detected-label">Devis estimé</div>
              <div className="detected-value">95 € · diagnostic</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AIReceptionist = AIReceptionist;