/**
 * HeroVSL
 * Placeholder de player de vídeo (VSL) para o lado direito do hero.
 * Para inserir o vídeo real:
 *   - Substitua o <button.hero-vsl-play> por um <video> ou <iframe>
 *   - Mantenha o wrapper .hero-vsl para preservar o styling (frame + glow)
 *
 * Exemplo (vídeo MP4 com autoplay mute):
 *   <video autoPlay muted loop playsInline poster="..." className="hero-vsl-media">
 *     <source src="/video.mp4" type="video/mp4" />
 *   </video>
 *
 * Exemplo (YouTube embed):
 *   <iframe className="hero-vsl-media"
 *           src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1"
 *           allow="autoplay; encrypted-media; picture-in-picture"
 *           allowFullScreen />
 */
const HeroVSL = () => {
  return (
    <div className="hero-vsl">
      <div className="hero-vsl-frame">
        {/* Live badge */}
        <div className="hero-vsl-badge">
          <span className="hero-vsl-dot"></span>
          AO VIVO
        </div>

        {/* Substitua este bloco pelo <video> ou <iframe> quando tiver o vídeo */}
        <button
          type="button"
          className="hero-vsl-play"
          aria-label="Reproduzir vídeo de apresentação"
        >
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M8 5v14l11-7z" />
          </svg>
        </button>

        {/* Caption inferior */}
        <div className="hero-vsl-caption">
          <span className="hero-vsl-label">VSL · Apresentação</span>
          <span className="hero-vsl-duration">02:14</span>
        </div>
      </div>

      <p className="hero-vsl-hint">
        Veja a IA atendendo um lead jurídico do começo ao fim.
      </p>
    </div>
  );
};

window.HeroVSL = HeroVSL;