"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";

import { ArrowRight } from "lucide-react";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";


interface Banner {
  id: number;
  title: string;
  image: string;
  link?: string;
}

export default function HeroBanner() {
  const [banners, setBanners] = useState<Banner[]>([]);

  useEffect(() => {
    fetchBanners();
  }, []);

  const fetchBanners = async () => {
    try {
      const res = await api.get("/banners");
      setBanners(res.data.data || []);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <section className="relative bg-[#f6fff7] overflow-hidden">
      <div className="max-w-7xl mx-auto px-4">
        <Swiper
          modules={[Autoplay, Pagination, Navigation]}
          autoplay={{
            delay: 4000,
            disableOnInteraction: false,
          }}
          loop
          pagination={{
            clickable: true,
          }}
          navigation
          className="heroSwiper rounded-[36px] overflow-hidden"
        >
          {banners.map((banner) => (
            <SwiperSlide key={banner.id}>
              <div className="relative h-[520px] sm:h-[600px] lg:h-[720px] overflow-hidden">

                {/* Background Image */}
                <img src={banner.image} alt={banner.title} 
                  className="absolute inset-0 w-full h-full object-cover"
                />

                {/* Overlay */}
                <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent" />

                {/* Content */}
                <div className="relative z-10 h-full flex items-center">
                  <div className="max-w-2xl px-4 sm:px-8 lg:px-16 py-10 sm:py-0">

                    <span className="inline-flex items-center bg-green-500/20 backdrop-blur-md border border-white/20 text-white px-5 py-2 rounded-full text-sm font-semibold mb-6">
                      Smart Shopping Made Simple
                    </span>

                    <h1 className="text-4xl lg:text-7xl font-black text-white leading-tight">
                      {banner.title}
                    </h1>

                    <p className="mt-6 text-lg lg:text-xl text-white/80 leading-8 max-w-xl">
                      Premium daily essentials, carefully selected and delivered to your doorstep.
                    </p>

                    <div className="mt-10 flex flex-wrap gap-4">

                      <button className="group bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-2xl font-bold transition-all flex items-center gap-3 shadow-2xl shadow-green-500/30">
                        Shop Now

                        <ArrowRight
                          size={20}
                          className="group-hover:translate-x-1 transition"
                        />
                      </button>

                      <button className="bg-white/10 backdrop-blur-md border border-white/20 hover:bg-white/20 text-white px-8 py-4 rounded-2xl font-bold transition-all">
                        View Offers
                      </button>

                    </div>

                  </div>
                </div>

              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}