// en-vivo.jsx — Unified "En vivo" section (replaces Tension + Reframe + Agents247)
// Gladia-style layout. Continues the dark block from HowItWorks. Closes with light gradient.

function EnVivoSection() {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setVisible(true);
    }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const bullets = [
    'Contesta llamadas en cualquier idioma, sin acento robótico',
    'Cierra citas por WhatsApp y las agenda en tu calendario',
    'Llama a clientes inactivos y los trae de vuelta',
  ];

  return (
    <section data-dark-section style={{
      background: '#0A0A0F',
      position: 'relative',
      overflow: 'hidden',
      paddingBottom: 'clamp(120px, 14vw, 200px)',
    }}>
      <div ref={ref} style={{
        display: 'grid',
        minHeight: '80vh',
        padding: 'clamp(80px, 10vw, 140px) 24px 0',
        maxWidth: 1200, margin: '0 auto',
      }} className="hiw-step-row">

        {/* Left — text */}
        <div style={{
          paddingTop: 'clamp(40px, 6vw, 80px)',
          paddingBottom: 'clamp(48px, 6vw, 80px)',
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(28px)',
          transition: 'opacity 500ms var(--ease-out), transform 500ms var(--ease-out)',
        }} className="hiw-step-text">
          {/* LIVE Badge — green with pulsing dot */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: 'rgba(20,184,112,0.10)',
            border: '1px solid rgba(20,184,112,0.22)',
            fontSize: 11, fontWeight: 600,
            color: '#14B870',
            letterSpacing: '0.18em', textTransform: 'uppercase',
            fontFamily: "'General Sans', 'Inter', sans-serif",
            marginBottom: 24,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: '#14B870',
              boxShadow: '0 0 0 3px rgba(20,184,112,0.20)',
              animation: 'pulse-dot 2s ease-in-out infinite',
            }}></span>
            Ahora mismo
          </div>

          <h3 className="heading-display" style={{
            fontSize: 'clamp(36px, 5vw, 56px)',
            color: '#fff', marginBottom: 18, lineHeight: 1.05,
          }}>
            Tu sistema nunca para
          </h3>

          <p style={{
            fontSize: 'clamp(15px, 1.4vw, 17px)',
            color: 'rgba(255,255,255,0.55)',
            lineHeight: 1.65, marginBottom: 32,
            maxWidth: 500,
          }}>
            Cada llamada y cada mensaje, atendido en segundos, en cualquier idioma, a cualquier hora.{' '}
            <span style={{ color: 'rgba(255,255,255,0.92)', fontWeight: 500 }}>Sin enfermarse, sin cansarse, sin renunciar</span>
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 36 }}>
            {bullets.map((b, j) => (
              <div key={j} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                opacity: visible ? 1 : 0,
                transform: visible ? 'translateY(0)' : 'translateY(12px)',
                transition: `opacity 420ms var(--ease-out) ${300 + j * 60}ms, transform 420ms var(--ease-out) ${300 + j * 60}ms`,
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                  <path d="M5.5 9.2L7.8 11.5L12.5 6.5" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span style={{
                  fontSize: 'clamp(14px, 1.2vw, 16px)',
                  color: 'rgba(255,255,255,0.62)',
                  lineHeight: 1.55,
                }}>{b}</span>
              </div>
            ))}
          </div>

          {/* CTAs */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            <a href="/register" className="btn-primary" style={{ fontSize: 15 }}>
              Probar gratis 14 días
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
            </a>
          </div>
        </div>

        {/* Vertical divider (desktop only) */}
        <div className="hiw-divider" style={{
          display: 'none',
          background: 'linear-gradient(to bottom, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent)',
        }}></div>

        {/* Right — 3 stacked live cards */}
        <div style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          gap: 16, padding: 'clamp(24px, 4vw, 48px) 0',
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(20px)',
          transition: 'opacity 540ms var(--ease-out) 180ms, transform 540ms var(--ease-out) 180ms',
        }} className="hiw-step-illus">

          {/* Card 1: Voice call active */}
          <div style={{
            borderRadius: 14, padding: 20,
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.07)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#14B870',
                boxShadow: '0 0 0 3px rgba(20,184,112,0.20)',
                animation: 'pulse-dot 2s ease-in-out infinite',
              }}></span>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.65)' }}>Llamada activa</span>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, marginLeft: 'auto' }}>
                {[12, 18, 8, 22, 14, 20, 10, 16].map((h, i) => (
                  <div key={i} style={{
                    width: 2, background: 'var(--accent)', borderRadius: 1,
                    height: h, opacity: 0.7,
                    animation: `waveform ${1 + (i % 3) * 0.2}s ease-in-out infinite`,
                    animationDelay: `${i * 0.08}s`,
                  }} />
                ))}
              </div>
            </div>
            <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.78)', fontWeight: 500, marginBottom: 4 }}>
              Restaurante La Esquina · <span style={{ color: 'rgba(255,255,255,0.45)' }}>🇪🇸 ES</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>
              Reserva para 4 personas. <span style={{ color: '#14B870' }}>Confirmada ✓</span>
            </div>
          </div>

          {/* Card 2: WhatsApp chat */}
          <div style={{
            borderRadius: 14, padding: 20,
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.07)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#25D366',
              }}></span>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.65)' }}>WhatsApp</span>
              <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.30)', marginLeft: 'auto' }}>hace 2s</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 6 }}>
              <div style={{
                maxWidth: '80%', padding: '8px 12px', borderRadius: 10,
                fontSize: 12.5, lineHeight: 1.45,
                background: 'rgba(255,255,255,0.05)',
                color: 'rgba(255,255,255,0.55)',
              }}>
                ¿Tienen disponibilidad mañana?
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 6 }}>
              <div style={{
                maxWidth: '80%', padding: '8px 12px', borderRadius: 10,
                fontSize: 12.5, lineHeight: 1.45,
                background: 'rgba(47,125,255,0.10)',
                border: '1px solid rgba(47,125,255,0.16)',
                color: 'rgba(255,255,255,0.78)',
              }}>
                Tengo a las 10:00 y 14:30. ¿Cuál prefieres?
                <span style={{
                  display: 'inline-block', width: 6, height: 14, marginLeft: 4,
                  background: 'var(--accent)', verticalAlign: 'middle',
                  animation: 'blink-cursor 1s steps(2) infinite',
                }}></span>
              </div>
            </div>
            <div style={{ fontSize: 11, color: '#14B870', textAlign: 'right', marginTop: 4 }}>
              ✓ Enviado
            </div>
          </div>

          {/* Card 3: Outbound calling */}
          <div style={{
            borderRadius: 14, padding: 20,
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.07)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#7C5CFF',
              }}></span>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.65)' }}>Llamada saliente</span>
              <div style={{ position: 'relative', width: 18, height: 18, marginLeft: 'auto' }}>
                <span style={{
                  position: 'absolute', inset: 0, borderRadius: '50%',
                  border: '2px solid rgba(124,92,255,0.4)',
                  animation: 'pulse-ring-expand 1.6s ease-out infinite',
                }}></span>
                <span style={{
                  position: 'absolute', inset: 0, borderRadius: '50%',
                  border: '2px solid rgba(124,92,255,0.4)',
                  animation: 'pulse-ring-expand 1.6s ease-out infinite',
                  animationDelay: '0.8s',
                }}></span>
                <span style={{
                  position: 'absolute', inset: '35%', borderRadius: '50%',
                  background: '#7C5CFF',
                }}></span>
              </div>
            </div>
            <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.78)', fontWeight: 500, marginBottom: 4 }}>
              Carrito abandonado · <span style={{ color: 'rgba(255,255,255,0.45)' }}>hace 2h</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>
              Llamando a Juan Pérez...
            </div>
          </div>

          {/* Footer pill — Tu sistema trabajando ahora mismo */}
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 8 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 20px', borderRadius: 999,
              background: 'rgba(20,184,112,0.12)',
              border: '1px solid rgba(20,184,112,0.30)',
              color: '#14B870', fontSize: 13, fontWeight: 600,
              boxShadow: '0 0 24px rgba(20,184,112,0.18)',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>
              Tu sistema trabajando ahora mismo
            </div>
          </div>
        </div>
      </div>

      {/* Smooth gradient transition dark → light for next section */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        height: 'clamp(120px, 16vw, 240px)',
        background: 'linear-gradient(to bottom, transparent, #fff)',
        pointerEvents: 'none',
      }} />
    </section>
  );
}

Object.assign(window, { EnVivoSection });