import { Button } from '@/components/Button'
import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'

export function Hero2() {
  return (
    <div className="relative w-full overflow-hidden -mt-3">
      {/* Background Video - Extended to cover header */}
      <video
        className="w-full h-auto block relative z-0"
        autoPlay
        loop
        muted
        playsInline
      >
        <source src="/videos/main.mp4" type="video/mp4" />
      </video>
      
      {/* Black Overlay */}
      <div className="absolute inset-0 bg-black opacity-40"></div>
      
      {/* Content */}
      <div className="absolute inset-0 flex items-center justify-center text-center px-4 sm:px-6 z-20">
        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
          <H1 className="text-creme-200 text-3xl sm:text-4xl md:text-5xl lg:text-6xl">
            Nile Cruises,{' '}
            <span className="relative whitespace-nowrap text-gold-100">
              <svg
                aria-hidden="true"
                viewBox="0 0 418 42"
                className="absolute top-2/3 left-0 h-[0.45em] sm:h-[0.5em] md:h-[0.55em] lg:h-[0.58em] w-full fill-gold-100/80"
                preserveAspectRatio="none"
              >
                <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
              </svg>
              <span className="relative">Reimagined</span>
            </span>{' '}
          </H1>
          <P className="mt-6 sm:mt-8 md:mt-10 leading-normal font-light text-white text-sm sm:text-base md:text-lg">
            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.
          </P>
        </div>
      </div>
    </div>
  )
}
