// Interactive WhatsApp chatbot demo
const SCENARIOS = {
  fuite: [
    { from: 'them', text: "Bonjour, j'ai une fuite sous mon évier depuis ce matin 😟" },
    { from: 'us', text: "Bonjour Mme Ferrand 👋 Je suis l'assistant LeadCustom de l'Atelier Moreau. Pouvez-vous m'envoyer une photo de la fuite ?" },
    { from: 'them', text: "[photo envoyée]" },
    { from: 'us', text: "Merci. C'est un raccord flexible défaillant. Je vous propose une intervention dès demain :\n• 9h00 : créneau matin\n• 14h00 : créneau après-midi\nIntervention estimée : 95 €", quoted: true },
    { from: 'them', text: "Demain 9h ça me va !" },
    { from: 'us', text: "Parfait, c'est noté ✅ Devis envoyé par email, RDV confirmé.\nSerge sera chez vous à 9h00.\nVous recevrez un SMS 30 min avant son arrivée." },
  ],
  devis: [
    { from: 'them', text: "Salut, je voudrais un devis pour repeindre mon salon (~22m²)" },
    { from: 'us', text: "Bonjour ! Avec plaisir 🎨 Quelques questions rapides :\n• Hauteur sous plafond ?\n• Murs + plafond, ou murs seulement ?\n• Couleur en tête ?" },
    { from: 'them', text: "2,60m, murs + plafond, blanc cassé" },
    { from: 'us', text: "Merci. Voici votre devis chiffré :", quoted: true },
    { from: 'us', text: "**Devis #2108**\n22m² · Murs + plafond\nPeinture mate qualité pro\n2 couches · préparation incluse\n\n**Total : 1 240 € TTC**\n\n👉 Validez en cliquant : link.leadcustom.fr/d2108" },
    { from: 'them', text: "C'est validé, on peut commencer quand ?" },
    { from: 'us', text: "Génial ! Premier créneau dispo : **lundi 4 mai**. Je le bloque ? 📅" },
  ],
  rdv: [
    { from: 'them', text: "Bonjour, je voulais juste savoir si quelqu'un peut passer voir ma chaudière qui fait du bruit 🔧" },
    { from: 'us', text: "Bonjour 👋 Bien sûr. Pour préparer la visite :\n• Marque/modèle de la chaudière ?\n• Depuis quand le bruit ?\n• Bruit constant ou intermittent ?" },
    { from: 'them', text: "Une Saunier Duval, depuis 3 jours, intermittent" },
    { from: 'us', text: "Parfait. Diagnostic estimé 65 €, déduits si réparation. Créneaux dispos cette semaine :\n• Mer 30 avril, 10h\n• Jeu 1 mai, 14h\n• Ven 2 mai, 9h" },
    { from: 'them', text: "Mer 10h" },
    { from: 'us', text: "C'est noté ✅ Mercredi 30 avril, 10h00.\nAdresse confirmée ?" },
  ],
};

function WhatsAppDemo() {
  const [scenario, setScenario] = useState('fuite');
  const [visibleCount, setVisibleCount] = useState(1);
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);

  const messages = SCENARIOS[scenario];

  useEffect(() => {
    setVisibleCount(1);
    setTyping(false);
  }, [scenario]);

  useEffect(() => {
    if (visibleCount >= messages.length) return;
    const next = messages[visibleCount];
    const isUs = next.from === 'us';
    const delay = isUs ? 600 : 1100;

    if (isUs) {
      const t = setTimeout(() => setTyping(true), 200);
      const t2 = setTimeout(() => {
        setTyping(false);
        setVisibleCount(c => c + 1);
      }, delay + 1100);
      return () => { clearTimeout(t); clearTimeout(t2); };
    } else {
      const t = setTimeout(() => setVisibleCount(c => c + 1), delay);
      return () => clearTimeout(t);
    }
  }, [visibleCount, scenario, messages]);

  useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [visibleCount, typing]);

  const formatText = (text) => {
    return text.split('\n').map((line, i) => {
      const parts = line.split(/(\*\*[^*]+\*\*)/g);
      return (
        <React.Fragment key={i}>
          {parts.map((p, j) => p.startsWith('**')
            ? <strong key={j} style={{ fontWeight: 600 }}>{p.slice(2, -2)}</strong>
            : p)}
          {i < text.split('\n').length - 1 && <br/>}
        </React.Fragment>
      );
    });
  };

  return (
    <section className="section" id="chatbot" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="demo-split">
          <div className="demo-text reveal">
            <span className="eyebrow" style={{ marginBottom: 20, display: 'inline-flex' }}>Chatbot WhatsApp</span>
            <h2 className="h-section">Vos clients écrivent.<br/><span className="serif">Le bot répond,</span> vous facturez.</h2>
            <p>Connectez WhatsApp Business et Messenger en 2 minutes. LeadCustom comprend la demande, qualifie, propose un créneau, génère le devis et passe le relais à un humain quand c'est utile.</p>

            <ul className="demo-bullets">
              <li>
                <span className="b-check"><Icon.Check size={12} /></span>
                <span className="b-text"><strong>Réponse en moins de 2 secondes</strong>, à toute heure du jour et de la nuit.</span>
              </li>
              <li>
                <span className="b-check"><Icon.Check size={12} /></span>
                <span className="b-text"><strong>Comprend photos et vocaux</strong> pour un diagnostic préliminaire avant intervention.</span>
              </li>
              <li>
                <span className="b-check"><Icon.Check size={12} /></span>
                <span className="b-text"><strong>Passe la main à un humain</strong> dès qu'un cas dépasse son périmètre.</span>
              </li>
              <li>
                <span className="b-check"><Icon.Check size={12} /></span>
                <span className="b-text"><strong>14 langues</strong> incluant FR, EN, AR, ES, PT, IT, NL, DE.</span>
              </li>
            </ul>

            <div style={{ marginTop: 28, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { id: 'fuite', label: 'Urgence plomberie' },
                { id: 'devis', label: 'Devis peinture' },
                { id: 'rdv', label: 'Diagnostic chaudière' },
              ].map(s => (
                <button
                  key={s.id}
                  onClick={() => setScenario(s.id)}
                  className="btn"
                  style={{
                    background: scenario === s.id ? 'var(--accent)' : 'oklch(1 0 0 / 0.04)',
                    border: `1px solid ${scenario === s.id ? 'var(--accent)' : 'var(--border)'}`,
                    color: scenario === s.id ? 'var(--text)' : 'var(--text-muted)',
                    padding: '8px 14px',
                    fontSize: 13,
                  }}>
                  {s.label}
                </button>
              ))}
            </div>
          </div>

          <div className="reveal">
            <div className="phone">
              <div className="phone-screen">
                <div className="wa-status">
                  <span>9:41</span>
                  <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                    <span style={{ width: 14, height: 8, border: '1px solid currentColor', borderRadius: 2, position: 'relative' }}>
                      <span style={{ position: 'absolute', inset: 1, background: 'currentColor', borderRadius: 1 }}></span>
                    </span>
                  </span>
                </div>
                <div className="wa-header">
                  <span className="wa-back">‹</span>
                  <div className="wa-avatar">AM</div>
                  <div>
                    <div className="wa-name">Atelier Moreau</div>
                    <div className="wa-online">en ligne · IA</div>
                  </div>
                </div>
                <div className="wa-body" ref={bodyRef}>
                  {messages.slice(0, visibleCount).map((m, i) => (
                    <div key={`${scenario}-${i}`} className={`wa-msg ${m.from}`}>
                      {m.quoted && (
                        <div className="wa-quote">
                          <div className="wa-quote-label">LeadCustom · IA</div>
                        </div>
                      )}
                      <div>{formatText(m.text)}</div>
                      <div className="wa-time">9:4{i + 1} ✓✓</div>
                    </div>
                  ))}
                  {typing && (
                    <div className="wa-typing">
                      <span></span><span></span><span></span>
                    </div>
                  )}
                </div>
                <div className="wa-input">
                  <div className="wa-input-box">Message</div>
                  <div className="wa-input-send"><Icon.Send size={14} /></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.WhatsAppDemo = WhatsAppDemo;