import Link from "next/link";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Pagination, Autoplay,EffectFade  } from "swiper/modules";

export default function HeroSlider() {
  const slides = [
    {
      title: "One Platform for",
      subTitle: "- Marriage, Market & Events",
      desc: "Discover trusted matrimonial matches, local classified ads, and verified event service providers — all in one secure platform.",
      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
      cta1: { text: "Get Started Free", href: "/register" },
      cta2: { text: "Explore Platform", href: "/matrimonial" },
    },
    {
      title: "Matrimonial",
      subTitle: "- Search, Find Your True Matches",
      desc: "Verified profiles, smart filters, and privacy-focused matchmaking to help you find your perfect life partner.",
      image: "/diana-shchurova-THEJX2MIVPI-unsplash.jpg",
      cta1: { text: "Explore Matrimonial", href: "/matrimonial" },
    },
    {
      title: "Classified Ads",
      subTitle: "- Buy, Sell, Trade",
      desc: "Post or browse local ads easily. Buy, sell, or trade items and services securely in your community.",
      image: "/denisse-leon-0k795_HZzns-unsplash.jpg",
      cta1: { text: "View Classifieds", href: "/classifieds" },
    },
    {
      title: "Event Directory",
      subTitle: "- Find, Compare And Plan With Ease",
      desc: "Find verified vendors for weddings, parties, and corporate events to make your event planning stress-free.",
      image: "/event mng.jpeg",
      cta1: { text: "Explore Events", href: "/events" },
    },
  ];

  return (
    <Swiper
      modules={[Pagination, Autoplay,EffectFade]}
      pagination={{ clickable: true }}
      loop
       effect="creative"
      autoplay={{ delay: 5000, disableOnInteraction: false }}
      className="h-screen"
    >
      {slides.map((slide, index) => (
        <SwiperSlide key={index}>
          <section className="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-blue-600 h-screen">
            <div className="container mx-auto px-6 py-28 grid grid-cols-1 md:grid-cols-2 gap-14 items-center h-full">

              {/* Text container - animate on mount */}
              <div className="text-white space-y-6 opacity-0 animate-fadeInUp">
                <h1 className="text-5xl md:text-6xl font-extrabold leading-tight mb-6">
                  {slide.title} <br />
                  <span className="text-yellow-300">{slide.subTitle}</span>
                </h1>

                <p className="text-lg md:text-xl text-blue-100">
                  {slide.desc}
                </p>

                <div className="flex flex-wrap gap-4">
                  {slide.cta1 && (
                    <Link
                      href={slide.cta1.href}
                      className="bg-white text-indigo-600 px-7 py-4 rounded-xl font-semibold shadow-lg hover:scale-105 transition transform"
                    >
                      {slide.cta1.text}
                    </Link>
                  )}
                  {slide.cta2 && (
                    <Link
                      href={slide.cta2.href}
                      className="border border-white px-7 py-4 rounded-xl font-semibold hover:bg-white hover:text-indigo-600 transition transform"
                    >
                      {slide.cta2.text}
                    </Link>
                  )}
                </div>
              </div>

              {/* Image - animate on mount */}
              <div className="relative group opacity-0 scale-95 animate-scaleUp">
                <div className="absolute inset-0 bg-white/20 rounded-3xl blur-3xl transition"></div>
                <Image
                  src={slide.image}
                  alt={slide.title}
                  width={800}
                  height={500}
                  style={{
                    width: "800px",
                    height: "500px",
                    objectFit: "cover",
                    objectPosition: "center",
                  }}
                  className="relative rounded-3xl shadow-2xl"
                />
              </div>
            </div>
          </section>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}
