
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'

export function Hero() {
  return (
    <section className="relative w-full h-screen -lg:mt-12 mt-0">
      {/* Background Video */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-white opacity-60"
      >
        <source src="/videos/hero.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      
      {/* Welcome Content Overlay */}
      <div className="bg-[#FEFFF6] py-6 mt-0 absolute -bottom-16 left-0 right-0 z-10">
        <div className="mx-auto max-w-7xl px-6 lg:px-6">
          <div className="mx-auto max-w-5xl lg:mx-0">
            <h2 className="mt-2 text-2xl font-medium tracking-[-0.05em] text-darkgr lg:text-3xl">Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
</h2>
          </div>
           <div className="mx-auto max-w-3xl lg:mx-0">
            <p className="mt-6 text-3xl font-semibold tracking-[-0.05em] text-darkgr lg:text-4xl">
              Nile Cruises, Reimagined. 
            </p>
              <p className="mt-4 mb-12  font-normal text-pretty text-gray-950 sm:text-lg">
              
            </p>
            </div>
          </div>
        </div>
    </section>
  )
}
