import Image from 'next/image'

const gradientOverlayClass =
  'pointer-events-none absolute inset-0 z-[1] bg-gradient-to-b from-black/30 via-transparent to-black/40'

/** Sam obraz jak w BoatHero — gradient dodaj przez `HeroBackgroundGradient` przy zoomie albo przez `HeroBackdrop`. */
export function HeroBackgroundImageLayers({ priority = false }: { priority?: boolean }) {
  return (
    <div className="relative h-full w-full">
      <Image
        src="/images/main_image.jpg"
        alt=""
        fill
        sizes="100vw"
        priority={priority}
        quality={90}
        className="object-cover"
        aria-hidden
      />
    </div>
  )
}

/** Nakładka pod hotspoty na stronie głównej — pozostaje na pełnym hero podczas zoomu obrazka. */
export function HeroBackgroundGradient() {
  return <div className={gradientOverlayClass} aria-hidden />
}

type HeroBackdropProps = {
  priority?: boolean
  className?: string
}

/**
 * Pełna warstwa tła jak na stronie głównej (łódka + gradient). Używane m.in. na logowanie/rejestrację
 * przy `fixed`/pełnym ekranie; gradient jest na obrazku.
 */
export default function HeroBackdrop({ priority = false, className = '' }: HeroBackdropProps) {
  return (
    <div className={`absolute inset-0 overflow-hidden ${className}`.trim()}>
      <HeroBackgroundImageLayers priority={priority} />
      <HeroBackgroundGradient />
    </div>
  )
}