import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { BANNERS } from "@/constants/data";
import heroBanner from "@/assets/hero-banner.jpg";

export default function HeroBanner() {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % BANNERS.length);
    }, 4500);
    return () => clearInterval(timer);
  }, []);

  const banner = BANNERS[current];

  return (
    <div className="relative overflow-hidden rounded-2xl mx-4 md:mx-0 mt-4">
      {/* Background image */}
      <div className="relative h-64 md:h-96 lg:h-[420px]">
        <img
          src={heroBanner}
          alt="بانر المتجر"
          className="absolute inset-0 w-full h-full object-cover"
        />
        {/* Gradient overlay */}
        <div className={`absolute inset-0 bg-gradient-to-l ${banner.bg} opacity-85`} />

        {/* Content */}
        <div className="absolute inset-0 flex items-center">
          <div className="px-8 md:px-16 max-w-lg animate-fade-in-up" key={current}>
            <span className="inline-block bg-white/20 backdrop-blur-sm text-white text-sm font-bold px-4 py-1.5 rounded-full mb-4 border border-white/30">
              ✨ {banner.badge}
            </span>
            <h1 className="text-2xl md:text-4xl font-black text-white leading-tight mb-4">
              {banner.title}
            </h1>
            <p className="text-white/90 text-sm md:text-base mb-6 leading-relaxed">
              {banner.subtitle}
            </p>
            <Link
              to="/products"
              className="inline-block bg-white text-orange-600 font-black px-8 py-3 rounded-xl hover:bg-orange-50 transition-all duration-200 shadow-lg hover:shadow-xl active:scale-95"
            >
              {banner.cta} ←
            </Link>
          </div>
        </div>

        {/* Navigation */}
        <button
          onClick={() => setCurrent((prev) => (prev - 1 + BANNERS.length) % BANNERS.length)}
          className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/40 transition-colors"
        >
          <ChevronRight size={20} />
        </button>
        <button
          onClick={() => setCurrent((prev) => (prev + 1) % BANNERS.length)}
          className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/40 transition-colors"
        >
          <ChevronLeft size={20} />
        </button>

        {/* Dots */}
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
          {BANNERS.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`rounded-full transition-all duration-300 ${
                i === current ? "w-6 h-2.5 bg-white" : "w-2.5 h-2.5 bg-white/50"
              }`}
            />
          ))}
        </div>
      </div>
    </div>
  );
}
