import {Video} from "@rixl/media-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}
        theme="hideUI"
        soundDisabled={true}
      />

      {/* 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>
  );
}