// "use client";

// import Image from "next/image";
// import { useEffect, useRef, useState } from "react";
// import { motion, AnimatePresence } from "framer-motion";
// import { ChevronLeft, ChevronRight } from "lucide-react";

// type Slide = {
//   type: "image" | "video";
//   src: string;
//   alt?: string;
//   content: {
//     title: string;
//     description: string;
//     buttonText: string;
//   };
// };

// const slides: Slide[] = [
//   {
//     type: "video",
//     src: "/videos/intro.mp4",
//     content: {
//       title: "Sustainable Energy\nEmpowering The\nCustomers",
//       description:
//         "Leading the way in renewable energy solutions for a brighter tomorrow",
//       buttonText: "Watch Our Story",
//     },
//   },
//   {
//     type: "image",
//     src: "/images/1.webp",
//     alt: "Sustainable Energy 1",
//     content: {
//       title: "Smart Grid\nTechnology\nInnovation",
//       description:
//         "Revolutionizing power distribution with intelligent solutions",
//       buttonText: "Explore Technology",
//     },
//   },
//   {
//     type: "image",
//     src: "/images/2.webp",
//     alt: "Sustainable Energy 2",
//     content: {
//       title: "Solar Power\nClean Energy\nSolutions",
//       description: "Harnessing the sun's power for a sustainable future",
//       buttonText: "Go Solar Today",
//     },
//   },
//   {
//     type: "image",
//     src: "/images/3.webp",
//     alt: "Sustainable Energy 3",
//     content: {
//       title: "Wind Energy\nPowering\nTomorrow",
//       description: "Efficient and clean wind power solutions for your needs",
//       buttonText: "Learn More",
//     },
//   },
// ];

// const Hero = () => {
//   const [currentSlide, setCurrentSlide] = useState(0);
//   const videoRef = useRef<HTMLVideoElement>(null);

//   const goToNextSlide = () => {
//     setCurrentSlide((prev) => (prev + 1) % slides.length);
//   };

//   const goToPreviousSlide = () => {
//     setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
//   };

//   useEffect(() => {
//     let timer: NodeJS.Timeout;

//     const handleSlideChange = () => {
//       if (slides[currentSlide].type === "video" && videoRef.current) {
//         // Reset and play video
//         videoRef.current.currentTime = 0;
//         videoRef.current.play().catch((error) => {
//           console.error("Video playback failed:", error);
//           goToNextSlide();
//         });
//       } else {
//         // Set timer for images
//         timer = setTimeout(goToNextSlide, 8000);
//       }
//     };

//     handleSlideChange();

//     // Add video end event listener if current slide is video
//     if (slides[currentSlide].type === "video" && videoRef.current) {
//       const video = videoRef.current;
//       const handleVideoEnd = () => goToNextSlide();
//       video.addEventListener("ended", handleVideoEnd);
//       return () => {
//         if (video) {
//           video.removeEventListener("ended", handleVideoEnd);
//           video.pause();
//         }
//         clearTimeout(timer);
//       };
//     }

//     return () => clearTimeout(timer);
//   }, [currentSlide, goToNextSlide]);

//   return (
//     <section className="relative h-screen overflow-hidden group">
//       <AnimatePresence mode="wait">
//         {slides[currentSlide].type === "image" ? (
//           <motion.div
//             key={`image-${currentSlide}`}
//             initial={{ opacity: 0 }}
//             animate={{ opacity: 1 }}
//             exit={{ opacity: 0 }}
//             transition={{ duration: 0.7 }}
//             className="absolute inset-0"
//           >
//             <Image
//               src={slides[currentSlide].src}
//               alt={slides[currentSlide].alt || ""}
//               fill
//               className="object-cover"
//               priority
//             />
//           </motion.div>
//         ) : (
//           <motion.div
//             key="video"
//             initial={{ opacity: 0 }}
//             animate={{ opacity: 1 }}
//             exit={{ opacity: 0 }}
//             transition={{ duration: 0.7 }}
//             className="absolute inset-0"
//           >
//             <video
//               ref={videoRef}
//               className="h-full w-full object-cover"
//               muted
//               playsInline
//               autoPlay
//             >
//               <source src={slides[currentSlide].src} type="video/mp4" />
//             </video>
//           </motion.div>
//         )}
//       </AnimatePresence>

//       {/* Navigation Buttons */}
//       <button
//         onClick={goToPreviousSlide}
//         className="absolute left-4 top-1/2 -translate-y-1/2 z-20 p-2 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/50"
//         aria-label="Previous slide"
//       >
//         <ChevronLeft className="w-6 h-6" />
//       </button>
//       <button
//         onClick={goToNextSlide}
//         className="absolute right-4 top-1/2 -translate-y-1/2 z-20 p-2 rounded-full bg-black/30 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/50"
//         aria-label="Next slide"
//       >
//         <ChevronRight className="w-6 h-6" />
//       </button>

//       {/* Gradient Overlays */}
//       <div className="absolute inset-0 hero-gradient" />
//       {/* Bottom fade to black gradient */}
//       <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-black" />

//       {/* Content */}
//       <div className="relative z-10 h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
//         <AnimatePresence mode="wait">
//           <motion.div
//             key={`content-${currentSlide}`}
//             initial={{ opacity: 0, y: 20 }}
//             animate={{ opacity: 1, y: 0 }}
//             exit={{ opacity: 0, y: -20 }}
//             transition={{ duration: 0.5 }}
//             className="max-w-3xl"
//           >
//             <h1 className="heading-xl text-white mb-4">
//               {slides[currentSlide].content.title.split("\n").map((line, i) => (
//                 <span key={i} className="block">
//                   {line}
//                 </span>
//               ))}
//             </h1>
//             <p className="text-lg text-white/80 mb-6">
//               {slides[currentSlide].content.description}
//             </p>
//             <button className="btn-primary w-fit">
//               {slides[currentSlide].content.buttonText}
//             </button>
//           </motion.div>
//         </AnimatePresence>

//         {/* Slide Indicators */}
//         <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex gap-2">
//           {slides.map((_, index) => (
//             <button
//               key={index}
//               onClick={() => setCurrentSlide(index)}
//               className={`w-2 h-2 rounded-full transition-all duration-300 ${
//                 currentSlide === index
//                   ? "bg-white w-6"
//                   : "bg-white/50 hover:bg-white/80"
//               }`}
//               aria-label={`Go to slide ${index + 1}`}
//             />
//           ))}
//         </div>
//       </div>
//     </section>
//   );
// };

// export default Hero;