const VideoSection = () => {
  return (
    <section className="py-16 md:py-24 bg-secondary/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-8 md:mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            Momentos que ficam pra sempre ✨
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Veja um pouco da magia que acontece aqui
          </p>
        </div>
        
        <div className="max-w-4xl mx-auto">
          <div className="relative aspect-video rounded-2xl overflow-hidden shadow-2xl bg-muted">
            {/* Placeholder para o vídeo - substitua o src pelo vídeo real */}
            <video
              className="w-full h-full object-cover"
              controls
              poster="/placeholder.svg"
              preload="metadata"
            >
              {/* Adicione a source do vídeo aqui */}
              {/* <source src="seu-video.mp4" type="video/mp4" /> */}
              <p className="absolute inset-0 flex items-center justify-center text-muted-foreground">
                Seu navegador não suporta vídeos HTML5.
              </p>
            </video>
            
            {/* Overlay decorativo quando não há vídeo */}
            <div className="absolute inset-0 flex flex-col items-center justify-center bg-gradient-to-br from-primary/20 to-accent/20 pointer-events-none">
              <div className="w-20 h-20 rounded-full bg-white/90 flex items-center justify-center shadow-lg mb-4">
                <svg 
                  className="w-8 h-8 text-primary ml-1" 
                  fill="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
              <p className="text-foreground/80 font-medium text-lg">
                Adicione seu vídeo aqui
              </p>
              <p className="text-muted-foreground text-sm mt-2">
                Substitua pelo vídeo das festas
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { VideoSection };
