// ReservAI Landing — Hero responsive
const { useState: useStateH, useEffect: useEffectH } = React;

function useIsMobile() {
  const [m, setM] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return m;
}

function Hero({ onCTA }) {
  const [tick, setTick] = useStateH(0);
  const [visible, setVisible] = useStateH(0);
  const isMobile = useIsMobile();

  useEffectH(() => {
    const t = setInterval(() => setTick(n => n + 1), 50);
    return () => clearInterval(t);
  }, []);

  const MSGS = [
    { from: 'user', text: '¿Tienes disponibilidad mañana a las 3pm?' },
    { from: 'ai',   text: '¡Hola! Claro, tenemos ese horario. ¿Lo confirmo?' },
    { from: 'user', text: 'Sí, confirma por favor.' },
    { from: 'ai',   text: '✅ Cita confirmada · Mañana 3:00 PM' },
  ];

  useEffectH(() => {
    setVisible(0);
    const timers = MSGS.map((_, i) => setTimeout(() => setVisible(i + 1), 600 + i * 900));
    const loop = setInterval(() => {
      setVisible(0);
      MSGS.forEach((_, i) => setTimeout(() => setVisible(i + 1), 600 + i * 900));
    }, 600 + MSGS.length * 900 + 1400);
    return () => { timers.forEach(clearTimeout); clearInterval(loop); };
  }, []);

  const BLUE = '#0983d6';
  const phoneW = isMobile ? 200 : 230;
  const phoneH = isMobile ? 380 : 440;

  return (
    <section style={{ display: 'flex', alignItems: 'center', padding: isMobile ? '28px 0 44px' : '40px 0 80px', position: 'relative' }}>
      {/* Animated light streak */}
      <div style={{ position:'absolute', top:'48%', left:0, right:0, height:1, background:`linear-gradient(90deg, transparent 0%, rgba(9,131,214,${0.15 + Math.sin(tick*.03)*.08}) 40%, rgba(0,174,239,${0.2+Math.sin(tick*.03)*.1}) 55%, transparent 100%)`, pointerEvents:'none' }} />

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px', width: '100%', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 64, alignItems: 'center' }}>

          {/* Text */}
          <div>
            <div style={{ display:'inline-block', background:'rgba(9,131,214,.12)', border:'1px solid rgba(9,131,214,.25)', borderRadius:40, padding:'5px 14px', fontSize:'.75rem', fontWeight:600, color:BLUE, marginBottom:20, letterSpacing:'.06em', textTransform:'uppercase' }}>
              Automatización por WhatsApp
            </div>
            <h1 style={{ fontSize: isMobile ? '2.1rem' : '3.2rem', fontWeight:700, color:'#fff', lineHeight:1.15, marginBottom:20, letterSpacing:'-.02em' }}>
              Convierte mensajes<br />
              <span style={{ color: BLUE }}>en citas,</span> sin mover<br />
              un dedo.
            </h1>
            <p style={{ color:'#A0A0A0', fontSize:'1rem', lineHeight:1.7, marginBottom:32, maxWidth: isMobile ? '100%' : 420 }}>
              La IA atiende tu WhatsApp, agenda automáticamente y sincroniza con Google Calendar. Tú solo apareces a dar el servicio.
            </p>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <button onClick={() => onCTA && onCTA('contacto')} style={{
                background:BLUE, color:'#fff', border:'none', padding:'13px 28px',
                borderRadius:8, fontWeight:700, fontSize:'1rem', cursor:'pointer',
                flex: isMobile ? '1 1 0' : 'none',
              }}>
                Quiero ReservAI
              </button>
              <button onClick={() => onCTA && onCTA('como-funciona')} style={{
                background:'transparent', color:'#fff', border:`2px solid ${BLUE}`,
                padding:'13px 28px', borderRadius:8, fontWeight:700, fontSize:'1rem', cursor:'pointer',
                flex: isMobile ? '1 1 0' : 'none',
              }}>
                Ver cómo funciona
              </button>
            </div>
            <p style={{ color:'#333', fontSize:'.78rem', marginTop:18 }}>Sin tarjeta de crédito · Configuración en minutos</p>
          </div>

          {/* Phone mockup */}
          <div style={{ display:'flex', justifyContent:'center' }}>
            <div style={{ position:'relative', width: phoneW, flexShrink:0 }}>
              <div style={{ position:'absolute', inset:-20, borderRadius:48, background:`radial-gradient(ellipse at 50% 60%, rgba(9,131,214,.22) 0%, transparent 70%)`, pointerEvents:'none' }} />
              <div style={{ width: phoneW, height: phoneH, borderRadius:32, background:'#0a0a0a', border:'2px solid rgba(255,255,255,.12)', boxShadow:'0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08)', overflow:'hidden', display:'flex', flexDirection:'column' }}>
                {/* WA header */}
                <div style={{ background:'#075E54', padding:'10px 14px', display:'flex', alignItems:'center', gap:10, flexShrink:0 }}>
                  <div style={{ width:32, height:32, borderRadius:'50%', background:'#128C7E', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>
                  </div>
                  <div>
                    <div style={{ color:'#fff', fontSize:11, fontWeight:700 }}>Mi Negocio</div>
                    <div style={{ color:'#aed6be', fontSize:9 }}>en línea</div>
                  </div>
                </div>
                {/* Chat */}
                <div style={{ flex:1, background:'#ECE5DD', padding:'10px 8px', display:'flex', flexDirection:'column', gap:6, justifyContent:'flex-end', overflowY:'hidden' }}>
                  {MSGS.slice(0, visible).map((m, i) => (
                    <div key={i} style={{ display:'flex', justifyContent: m.from==='user'?'flex-end':'flex-start', animation:'popIn .3s ease' }}>
                      <div style={{ background: m.from==='user'?'#DCF8C6':'#fff', borderRadius: m.from==='user'?'10px 10px 2px 10px':'10px 10px 10px 2px', padding:'6px 10px', maxWidth:'78%', fontSize:10, color:'#111', lineHeight:1.4, boxShadow:'0 1px 2px rgba(0,0,0,.12)' }}>
                        {m.text}
                      </div>
                    </div>
                  ))}
                </div>
                {/* Input */}
                <div style={{ background:'#F0F0F0', padding:'6px 8px', display:'flex', alignItems:'center', gap:6, flexShrink:0 }}>
                  <div style={{ flex:1, background:'#fff', borderRadius:20, padding:'5px 10px', fontSize:9.5, color:'#999' }}>Mensaje</div>
                  <div style={{ width:28, height:28, borderRadius:'50%', background:'#075E54', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });