import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Search } from "lucide-react";

const SLIDES = [
  {
    id: 1,
    videoId: "Fpn1imb9qZg", // Konser
  },
  {
    id: 2,
    videoId: "qqvBnmUBP8g", // Lari
  },
  {
    id: 3,
    videoId: "DK3hsi6NBjw", // Seminar
  },
];

export default function Hero() {
  const [currentSlide, setCurrentSlide] = useState(0);

  // Auto-play
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
    }, 6000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="relative bg-[#ffd700] pt-28 pb-16 lg:pt-36 lg:pb-24 overflow-hidden border-b-4 border-black min-h-[70vh] flex items-center">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
        <div className="lg:grid lg:grid-cols-12 lg:gap-12 items-center">
          {/* Left Content */}
          <div className="lg:col-span-6 mb-16 lg:mb-0 relative z-10">
            {/* Small Label */}
            <div className="inline-flex items-center gap-3 bg-white brutal-border brutal-shadow-sm px-4 py-2 mb-8">
              <div className="w-4 h-3 bg-brutal-pink brutal-border"></div>
              <span className="text-black font-black tracking-widest text-xs uppercase">
                TICKETING MADE SIMPLE
              </span>
            </div>

            <h1 className="text-5xl lg:text-6xl xl:text-7xl font-display font-black text-black tracking-tight leading-[1.1] mb-6">
              Pesan Tiket Event Jadi Lebih Mudah
            </h1>

            <div className="pl-4 border-l-4 border-black mb-10">
              <p className="text-lg font-bold text-black max-w-md">
                Platform ticketing modern untuk konser, seminar, festival, dan
                berbagai event lainnya dengan gaya neo-brutalism yang unik.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row brutal-border shadow-[8px_8px_0_0_#000] bg-white">
              <div className="flex-1 flex items-center px-4 py-3 sm:py-0 border-b-4 sm:border-b-0 sm:border-r-4 border-black">
                <Search className="w-6 h-6 text-gray-500 mr-3 shrink-0" />
                <input
                  type="text"
                  placeholder="Cari konser, seminar, atau festival..."
                  className="w-full bg-transparent outline-none text-black font-bold placeholder-gray-500 h-12"
                />
              </div>
              <button className="px-8 py-4 bg-[#7cb9ff] text-black font-black uppercase hover:bg-[#60A5FA] transition-colors shrink-0">
                Cari Event
              </button>
            </div>
          </div>

          <div className="lg:col-span-6 relative mt-12 lg:mt-7 z-10 translate-y-4 lg:translate-y-8">
            <div className="bg-white p-4 md:p-6 brutal-border shadow-[12px_12px_0_0_#000] lg:shadow-[16px_16px_0_0_#000] rotate-2 hover:rotate-0 transition-transform duration-500 max-w-2xl mx-auto xl:ml-auto">
              <div className="relative w-full aspect-video bg-black brutal-border overflow-hidden">
                {SLIDES.map((slide, idx) => (
                  <iframe
                    key={`video-${slide.id}`}
                    src={`https://www.youtube.com/embed/${slide.videoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${slide.videoId}&modestbranding=1&playsinline=1&rel=0&showinfo=0&disablekb=1&fs=0`}
                    className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] max-w-none pointer-events-none transition-opacity duration-700 ease-in-out ${
                      currentSlide === idx
                        ? "opacity-100 z-10"
                        : "opacity-0 z-0"
                    }`}
                    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
                    frameBorder="0"
                  />
                ))}
                <div className="absolute inset-0 bg-blue-900 mix-blend-multiply opacity-20 pointer-events-none z-20"></div>
              </div>

              {/* Bottom detail for polaroid vibe */}
              <div className="mt-5 flex justify-between items-center px-1">
                <div>
                  <h3 className="text-xl font-black text-black">
                    Live Event Previews
                  </h3>
                  <p className="text-sm font-bold text-gray-600 mt-1 flex items-center gap-2 uppercase tracking-wider">
                    <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                    ON AIR
                  </p>
                </div>
                {/* Decorative squares from reference */}
                <div className="grid grid-cols-2 gap-1 brutal-border p-1 bg-white shadow-[2px_2px_0_0_#000]">
                  <div className="w-3 h-3 bg-black"></div>
                  <div className="w-3 h-3 bg-black"></div>
                  <div className="w-3 h-3 bg-white"></div>
                  <div className="w-3 h-3 bg-black"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}