// demos.jsx — Sección "Demos"

function Demos() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } },
      { threshold: 0.1 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const demos = [
    {
      id: 'ventas',
      tag: 'Demo 01',
      title: 'Agente Ventas Nube',
      desc: 'Gestión de ventas en la nube: clientes, pedidos, stock y reportes en un solo panel, con asistente de IA que agiliza la carga y el seguimiento.',
      src: 'video/agente-ventas-nube.mp4',
      poster: 'video/agente-ventas-nube-poster.jpg',
      dur: '1:28',
    },
    {
      id: 'comercio',
      tag: 'Demo 02',
      title: 'Agente Comercio',
      desc: 'Sistema para comercios: ventas, productos, stock y caja desde cualquier dispositivo, con un asistente de IA que ayuda en el día a día.',
      src: 'video/agente-comercio.mp4',
      poster: 'video/agente-comercio-poster.jpg',
      dur: '1:34',
    },
    {
      id: 'logistica',
      tag: 'Demo 03',
      title: 'Agente Logística',
      desc: 'Hojas de ruta, app del chofer, recepción de mercadería con foto de la factura leída por IA y plano del depósito con alertas de vencimiento.',
      src: 'video/agente-logistica.mp4',
      poster: 'video/agente-logistica-poster.jpg',
      dur: '1:20',
    },
  ];

  return (
    <section className="demos" id="demos" ref={ref} data-screen-label="Demos">
      <div className="shell">
        <div className={`sec-header reveal ${inView ? 'in' : ''}`}>
          <div>
            <div className="label">Demos</div>
            <h2 style={{ marginTop: 24 }}>Miralos <em>funcionando</em>.</h2>
          </div>
          <p className="desc">Recorridos reales por nuestros sistemas, con datos de ejemplo. Así se ve el día a día.</p>
        </div>

        <div className={`demos-grid reveal-stagger ${inView ? 'in' : ''}`}>
          {demos.map((d) => (
            <article key={d.id} className="demo-card">
              <div className="demo-media">
                <video controls playsInline preload="metadata" poster={d.poster}>
                  <source src={d.src} type="video/mp4" />
                </video>
              </div>
              <div className="demo-body">
                <div className="demo-meta">
                  <span className="demo-tag">{d.tag}</span>
                  <span className="demo-dur">{d.dur}</span>
                </div>
                <h3>{d.title}</h3>
                <p>{d.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Demos = Demos;