import { Video } from '@rixl/videosdk-react';

function HeroSection() {
  return (
    <section className="relative h-96 overflow-hidden rounded-xl">
      {/* Background Video */}
      <Video
        id="hero-background-video"
        className="absolute inset-0 w-full h-full object-cover"
        autoPlay={true}
        muted={true}
        loop={true}
        allowPlayPause={false}
        allowFullscreen={false}
        allowPictureInPicture={false}
        theme={"hideUI"}
    />

      {/* Content Overlay */}

      <div
          className={`absolute inset-0 w-full flex
            items-center justify-center bg-black/50`
          }
      >
        <div className="text-center text-white">
          <h1 className="text-4xl font-bold mb-4 text-white">
              Welcome to Our Platform
          </h1>

          <p className="text-xl">
              Experience the future of media delivery
          </p>
        </div>
      </div>
    </section>
  );
}