const { useState, useEffect, useRef } = React;

const HERO_CONV = [
  { who: 'them', t: '14:32', text: 'Hola, vi el anuncio del Tucson 2026. ¿Sigue disponible?' },
  { who: 'me',   t: '14:33', text: '¡Hola! Sí, disponible. Soy Joi de Hyundai Puebla. ¿Me regalas tu nombre?' },
  { who: 'them', t: '14:34', text: 'Andrés Camargo' },
  { who: 'me',   t: '14:34', text: 'Mucho gusto, Andrés. ¿La buscas para uso familiar o personal?' },
  { who: 'them', t: '14:36', text: 'Familiar, somos 4' },
  { who: 'me',   t: '14:36', text: 'Te recomiendo la Tucson Limited Híbrida. ¿Te agendo un test drive este sábado?' },
];

function HeroBubble({ msg }) {
  return (
    <div className={`bubble ${msg.who}`}>
      {msg.text}
      <span className="meta">
        <span className="time">{msg.t}</span>
        {msg.who === 'me' && <span className="ticks">✓✓</span>}
      </span>
    </div>
  );
}

function HeroPhone() {
  const [count, setCount] = useState(1);
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    const tick = async () => {
      while (!cancelled) {
        for (let i = 1; i <= HERO_CONV.length; i++) {
          if (cancelled) return;
          await new Promise(r => setTimeout(r, 1500));
          if (cancelled) return;
          const next = HERO_CONV[i];
          if (next && next.who === 'me') {
            setTyping(true);
            await new Promise(r => setTimeout(r, 950));
            if (cancelled) return;
            setTyping(false);
          }
          setCount(i + 1 > HERO_CONV.length ? HERO_CONV.length : i + 1);
        }
        await new Promise(r => setTimeout(r, 2800));
        if (cancelled) return;
        setCount(1);
      }
    };
    tick();
    return () => { cancelled = true; };
  }, []);

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

  return (
    <div className="phone-wrap">
      <div className="phone-shadow"></div>

      <div className="phone">
        <span className="phone-btn phone-btn-power"></span>
        <span className="phone-btn phone-btn-vol1"></span>
        <span className="phone-btn phone-btn-vol2"></span>
        <span className="phone-btn phone-btn-mute"></span>

        <div className="phone-screen">
          <div className="dynamic-island">
            <span className="di-camera"></span>
          </div>

          <div className="ios-statusbar">
            <span className="ios-time">9:41</span>
            <div className="ios-icons">
              <span className="ios-signal"><i></i><i></i><i></i><i></i></span>
              <span className="ios-wifi">
                <svg viewBox="0 0 16 12" width="14" height="11"><path d="M8 11.5a1 1 0 100-2 1 1 0 000 2zM4.2 8.3a5.4 5.4 0 017.6 0l1-1a6.8 6.8 0 00-9.6 0l1 1zM1.4 5.5a9.4 9.4 0 0113.2 0l1-1a10.8 10.8 0 00-15.2 0l1 1z" fill="#fff"/></svg>
              </span>
              <span className="ios-battery"><span className="ios-battery-fill"></span></span>
            </div>
          </div>

          <div className="wa-screen">
            <div className="wa-header">
              <span className="wa-back">‹</span>
              <div className="wa-avatar"><span>HD</span></div>
              <div className="wa-meta">
                <span className="wa-name">Joi · Hyundai Puebla</span>
                <span className="wa-status">en línea</span>
              </div>
              <div className="wa-icons">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#aebac1" strokeWidth="1.6"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#aebac1" strokeWidth="1.6"><path d="M22 16.92v3a2 2 0 01-2.18 2A19.79 19.79 0 0111 18.5a19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z"/></svg>
              </div>
            </div>

            <div className="wa-body" ref={bodyRef}>
              <div className="wa-day-sep">HOY</div>
              {HERO_CONV.slice(0, count).map((m, i) => <HeroBubble key={i} msg={m} />)}
              {typing && (
                <div className="bubble me bubble-typing">
                  <span className="typing"><span></span><span></span><span></span></span>
                </div>
              )}
            </div>

            <div className="wa-footer">
              <div className="wa-input">
                <span className="wa-input-emoji"></span>
                <span className="wa-input-text"></span>
                <span className="wa-input-attach"></span>
              </div>
              <div className="wa-mic">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="#fff"><path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 006 6.93V21h2v-3.07A7 7 0 0019 11h-2z"/></svg>
              </div>
            </div>
          </div>

          <div className="ios-home"></div>
        </div>
      </div>

      <div className="float-tag t1">
        <span className="tag-dot"></span>
        <div>
          <div className="tag-k">Respuesta</div>
          <div className="tag-v">en 47 s</div>
        </div>
      </div>
      <div className="float-tag t2">
        <span className="tag-check">✓</span>
        <div>
          <div className="tag-k">Test drive</div>
          <div className="tag-v">Agendado</div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero section" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-inner">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <span className="dot"></span>
              Para concesionarias · México
            </div>
            <h1 className="display">
              <span className="line">Tu mejor vendedor.</span>
              <span className="line accent-text">Sin descansos.</span>
            </h1>
            <p className="hero-lede">
              Joi responde cada lead de WhatsApp en menos de 2 minutos,
              lo califica, y agenda el test drive.
            </p>
            <div className="hero-cta-row">
              <button className="btn btn-primary">Solicitar acceso</button>
              <button className="btn btn-ghost">Demo en acción</button>
            </div>
            <div className="hero-stats">
              <div className="hero-stat">
                <span className="num">&lt;2 min</span>
                <span className="label">Respuesta</span>
              </div>
              <div className="hero-stat">
                <span className="num">3.4×</span>
                <span className="label">Más test drives</span>
              </div>
              <div className="hero-stat">
                <span className="num">24/7</span>
                <span className="label">Sin pausas</span>
              </div>
            </div>
          </div>
          <HeroPhone />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;