"use client";
import { PlayCircle } from "lucide-react";
import { useState } from "react";
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { DialogTitle } from "@radix-ui/react-dialog";

const VideoSection = () => {
  const [videoOpen, setVideoOpen] = useState(false);

  return (
    <section className="py-20 md:py-28 lg:py-36 bg-secondary">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold tracking-tight text-primary sm:text-4xl font-heading">
            Journey Through Time
          </h2>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500">
            Watch our introduction to the Badagry Museum and the powerful
            history it preserves.
          </p>
        </div>
        <div className="relative aspect-w-20 aspect-h-4 max-w-4xl mx-auto rounded-xl overflow-hidden shadow-2xl">
          {/* Video placeholder that opens the video dialog on click */}
          <div
            className="w-full h-0 pb-[56.25%] relative cursor-pointer"
            onClick={() => setVideoOpen(true)}
            style={{
              backgroundImage: "url('./images/IMG_0285_11zon.jpg')",
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
              position: "relative",
              zIndex: 10,
            }}
          >
            {/* Overlay */}
            <div className="absolute inset-0 bg-slate-900 bg-opacity-80 z-10" />

            <div className="absolute inset-0 flex items-center justify-center z-10">
              <div className="text-white text-center transition-transform duration-500 hover:scale-105">
                <PlayCircle className="h-16 w-16 mx-auto mb-4 text-accent" />
                <p className="text-xl">Museum Documentary Video</p>
                <p className="text-sm text-gray-400 mt-2">
                  Click to play video
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Video Dialog */}
      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl p-0 bg-black">
          <DialogHeader>
            <VisuallyHidden>
              <DialogTitle>YouTube Video</DialogTitle>
            </VisuallyHidden>
          </DialogHeader>
          <div className="aspect-w-16 aspect-h-9">
            <iframe
              width="560"
              height="315"
              src="https://www.youtube.com/embed/hXmCclVMdrg"
              title="YouTube video player"
              frameBorder={0}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="w-full h-full"
            ></iframe>
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export default VideoSection;
