function Demo() {
  // To embed a real YouTube video later, replace the placeholder
  // markup inside `.video-frame` with:
  //   <iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"
  //     title="Joi · Demo" allow="autoplay; encrypted-media; picture-in-picture"
  //     allowFullScreen></iframe>

  return (
    <section className="demo section" id="demo" data-screen-label="03 Demo">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Demo en vivo</span>
          <h2 className="title">
            <span className="line">Mira cómo Joi califica un lead</span>
            <span className="line accent-text">en tiempo real.</span>
          </h2>
          <p className="lede">
            Conversación real. La cliente nunca sabe que es IA.
          </p>
        </div>

        <div className="video-frame" role="region" aria-label="Video demo de Joi">
          <div className="video-placeholder">
            <span className="vp-corner">
              <span className="dot"></span>
              Video demo
            </span>
            <button className="play-circle" type="button" aria-label="Reproducir video">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
            <span className="vp-label">2 min · Conversación completa con cita agendada</span>
          </div>
        </div>

        <div className="video-caption">
          <span>Lead real</span>
          <span>Sin edición</span>
          <span>Capturado de WhatsApp</span>
        </div>
      </div>
    </section>
  );
}

window.Demo = Demo;