"use client";

import { useState } from "react";
import Image from "next/image";

export default function HeroVideo() {
  const [isVideoLoaded, setIsVideoLoaded] = useState(false);

  return (
    <div className="absolute inset-0 z-0 bg-dark overflow-hidden pointer-events-none">
      <Image
        src="https://img.youtube.com/vi/V9AhK54xsxY/maxresdefault.jpg"
        alt="Kite Beach Akyaka Video Thumbnail"
        fill
        className={`object-cover transition-opacity duration-1000 ease-in-out ${
          isVideoLoaded ? "opacity-0" : "opacity-80"
        }`}
        priority
      />
      <iframe
        src="https://www.youtube.com/embed/V9AhK54xsxY?autoplay=1&mute=1&loop=1&playlist=V9AhK54xsxY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&start=140&disablekb=1"
        title="Kite Beach Akyaka Video"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        onLoad={() => {
          // Add a slight delay to ensure the video has actually started rendering
          setTimeout(() => setIsVideoLoaded(true), 1500);
        }}
        className={`absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-1000 ${
          isVideoLoaded ? "opacity-80" : "opacity-0"
        }`}
      ></iframe>
      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-dark/90" />
      <div className="absolute inset-0 bg-gradient-to-r from-dark/30 to-transparent" />
    </div>
  );
}