import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Play, Pause, ArrowRight, ArrowLeft, X } from "lucide-react";

export default function EsportsLanding() {
  const slides = [
    { id: 1, title: "Rise of Champions", subtitle: "Experience the thrill of competitive esports", image: "/assets/slide1.jpg" },
    { id: 2, title: "Unleash Your Power", subtitle: "Train with the best, play like a pro", image: "/assets/slide2.jpg" },
    { id: 3, title: "Glory Awaits", subtitle: "Join our tournaments and claim victory", image: "/assets/slide3.jpg" },
  ];

  const replays = [
    { id: 1, title: "Grand Finals - Game 5", thumb: "/assets/replay1.jpg", video: "/assets/replay1.mp4", duration: "32:11" },
    { id: 2, title: "Semi-Final Highlights", thumb: "/assets/replay2.jpg", video: "/assets/replay2.mp4", duration: "19:45" },
    { id: 3, title: "Epic 1v5 Clutch", thumb: "/assets/replay3.jpg", video: "/assets/replay3.mp4", duration: "05:32" },
  ];

  const [index, setIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(true);
  const [selectedReplay, setSelectedReplay] = useState(null);

  // Auto slide
  useEffect(() => {
    if (!isPlaying) return;
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % slides.length);
    }, 4000);
    return () => clearInterval(timer);
  }, [isPlaying, slides.length]);

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {/* NAVBAR */}
      <header className="p-6 text-3xl font-bold text-center">ISTANA ESPORTS</header>

      {/* HERO SLIDER */}
      <section className="relative w-full h-[400px] overflow-hidden flex items-center justify-center">
        <img
          src={slides[index].image}
          alt={slides[index].title}
          className="w-full h-full object-cover absolute inset-0"
        />
        <div className="relative z-10 text-center">
          <h1 className="text-4xl font-bold">{slides[index].title}</h1>
          <p className="text-lg">{slides[index].subtitle}</p>
        </div>
        {/* Controls */}
        <button
          onClick={() => setIndex((index - 1 + slides.length) % slides.length)}
          className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/40 p-2 rounded-full hover:bg-black/70"
        >
          <ArrowLeft />
        </button>
        <button
          onClick={() => setIndex((index + 1) % slides.length)}
          className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/40 p-2 rounded-full hover:bg-black/70"
        >
          <ArrowRight />
        </button>
        <button
          onClick={() => setIsPlaying(!isPlaying)}
          className="absolute bottom-4 right-4 bg-black/50 p-2 rounded-full hover:bg-black/70"
        >
          {isPlaying ? <Pause /> : <Play />}
        </button>
      </section>

      {/* MATCH REPLAYS */}
      <section className="p-8">
        <h2 className="text-2xl font-bold mb-4">Match Replays</h2>
        <p className="mb-4">Watch the best moments</p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {replays.map((rp) => (
            <div
              key={rp.id}
              className="cursor-pointer bg-gray-800 p-4 rounded-lg hover:bg-gray-700"
              onClick={() => setSelectedReplay(rp)}
            >
              <img src={rp.thumb} alt={rp.title} className="w-full h-40 object-cover rounded-lg mb-2" />
              <h3 className="font-bold">{rp.title}</h3>
              <p className="text-sm text-gray-400">{rp.duration}</p>
            </div>
          ))}
        </div>
      </section>

      {/* VIDEO MODAL */}
      <AnimatePresence>
        {selectedReplay && (
          <motion.div
            className="fixed inset-0 bg-black/80 flex items-center justify-center z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <div className="relative bg-gray-900 p-6 rounded-xl max-w-3xl w-full">
              <button
                onClick={() => setSelectedReplay(null)}
                className="absolute top-2 right-2 bg-white/10 p-2 rounded-full hover:bg-white/20"
              >
                <X />
              </button>
              <h3 className="text-xl font-bold mb-2">{selectedReplay.title}</h3>
              <video src={selectedReplay.video} controls className="w-full rounded-lg" />
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* FOOTER */}
      <footer className="p-6 text-center mt-8 border-t border-gray-700">
        <h4 className="font-bold mb-2">About Us</h4>
        <p className="text-sm mb-4">
          We are a competitive esports team striving for excellence and inspiring gamers worldwide.
        </p>
        <p>Contact: <a href="mailto:info@istanalogin.online" className="underline">info@istanalogin.online</a></p>
        <p className="mt-2">© {new Date().getFullYear()} Istana Esports. All Rights Reserved.</p>
      </footer>
    </div>
  );
}