// pages/index.jsx
import Link from "next/link";
import Image from "next/image";
import dynamic from "next/dynamic";
// import HeroSlider from "@/components/common/HeroSlider";
import HeroCarosoul from "@/components/common/HeroCarosoul";

import { useState, useEffect } from 'react';

const HeroSlider = dynamic(() => import("../components/common/HeroSlider"), {
  ssr: false, // <- important: render only on client
});


export default function Home() {
  return (
    <div className="bg-slate-50 text-slate-800 overflow-x-hidden min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">

      {/* ================= HERO SECTION ================= */}
      <HeroCarosoul />
      {/* <HeroSlider /> */}
      <section className="relative overflow-hidden bg-gradient-to-br from-indigo-50 via-purple-50 to-blue-50">
        <div className="container mx-auto px-4 py-24 text-center relative z-10">

          {/* <h2 className="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6">
            One Platform for
            <span className="block text-brand-green">
              Love, Local Deals & Events
            </span>
          </h2>

          <p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-600 mb-0">
            Find trusted matrimonial matches, discover local classified ads,
            and connect with verified event service providers — all in one secure,
            easy-to-use platform.
          </p>

          <div className="max-w-3xl mx-auto mb-7">
            <form action="#" method="GET" className="mt-6">
              <div className="flex items-center bg-white rounded-xl border border-gray-200 overflow-hidden focus-within:ring-2 focus-within:ring-indigo-500 transition">
                <input
                  type="text"
                  name="search"
                  placeholder="What are you looking for?"
                  className="flex-1 px-4 py-3 text-sm text-gray-700 outline-none"
                />
                <button
                  type="submit"
                  className="px-4 py-3 bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition"
                >
                  Search
                </button>
              </div>
            </form>
          </div> */}


          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">



            {/* Classifieds */}
            <div className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-indigo-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition"></div>

              <div className="relative z-10 text-center">
                <div className="text-5xl mb-5">🛍️</div>
                <h3 className="text-2xl font-bold mb-3">Classifieds</h3>
                <p className="text-gray-600">
                  Buy, sell, or trade items and services locally with ease and
                  confidence.
                </p>

                {/* <CardSearch
            action="/classifieds"
            placeholder="Search products, services, categories..."
          /> */}

                <Link href="/classifieds" className="inline-block mt-5 text-indigo-600 font-semibold">
                  View Ads →
                </Link>
              </div>
            </div>

            {/* Matrimonial */}
            <div className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-pink-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition"></div>

              <div className="relative z-10 text-center">
                <div className="text-5xl mb-5">💑</div>
                <h3 className="text-2xl font-bold mb-3">Matrimonial</h3>
                <p className="text-gray-600">
                  Find your life partner from verified profiles with smart filters,
                  privacy controls, and serious matchmaking.
                </p>


                <Link href="/matrimonial" className="inline-block mt-5 text-pink-600 font-semibold text-left">
                  Browse Profiles →
                </Link>
              </div>
            </div>

            {/* Events */}
            <div className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-emerald-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition"></div>

              <div className="relative z-10 text-center">
                <div className="text-5xl mb-5">🎉</div>
                <h3 className="text-2xl font-bold mb-3">Event Directory</h3>
                <p className="text-gray-600">
                  Find trusted vendors for weddings, parties, and corporate events
                  — all in one place.
                </p>



                <Link href="/events" className="inline-block mt-5 text-emerald-600 font-semibold">
                  Explore Services →
                </Link>
              </div>
            </div>

          </div>
        </div>

        {/* Background blur */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-indigo-300/30 rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 -right-24 w-96 h-96 bg-purple-300/30 rounded-full blur-3xl"></div>
      </section>



      {/* ================= TRUST STATS ================= */}
      <section className="bg-white py-16">
        <div className="container mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          <Stat number="50K+" label="Active Users" />
          <Stat number="10K+" label="Successful Matches" />
          <Stat number="25K+" label="Ads Posted" />
          <Stat number="5K+" label="Event Vendors" />
        </div>
      </section>

      {/* ================= HOW IT WORKS ================= */}
      <section className="container mx-auto px-6 py-24">
        <h2 className="text-4xl font-bold text-center mb-14">
          How It Works
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
          <Step
            icon="📝"
            title="Create Profile"
            desc="Sign up and set up your profile in minutes."
          />
          <Step
            icon="🔍"
            title="Explore Modules"
            desc="Browse matrimonial, classifieds, or event services."
          />
          <Step
            icon="🤝"
            title="Connect Securely"
            desc="Chat, shortlist, and connect with confidence."
          />
        </div>
      </section>

      {/* ================= MODULE HIGHLIGHTS ================= */}
      <section className="bg-slate-100 py-24">
        <div className="container mx-auto px-6 space-y-28">



          <Module
            reverse
            title="Classified Ads"
            tagline="Buy, Sell & Trade With Trusted Community"
            desc="A fast and easy classifieds marketplace where users can post ads, discover
    local deals, and connect directly with buyers or sellers — without hidden fees."
            image="/denisse-leon-0k795_HZzns-unsplash.jpg"
            link="/classifieds"
            features={[
              "Post ads in multiple categories: electronics, property, jobs & services",
              "Location-based browsing to find deals near you",
              "Direct chat between buyers and sellers — no middleman",
              "Spam protection and user reporting for a safe marketplace"
            ]}
            clr="green"
            featured_text="Ads"
            featuredProducts={[
              {
                id: 1,
                title: 'Marketing Manager - Digital Focus',
                price: '$2,500',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'Featured'
              },
              {
                id: 2,
                title: 'Luxury Car for Rent',
                price: '$150/day',
                image: '/denisse-leon-0k795_HZzns-unsplash.jpg',
                badge: 'Hot Deal'
              },
              {
                id: 3,
                title: 'Modern 2 Bedroom Flat in Chittagong',
                price: '$800',
                image: '/event mng.jpeg',
                badge: 'Popular'
              },
              {
                id: 4,
                title: '11th Gen HP Laptop',
                price: '$1,200',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'New'
              }
            ]}

          />

          <Module
            title="Event Directory"
            tagline="Plan Events With Verified Service Providers"
            desc="A curated event directory to help you discover trusted vendors for weddings,
    parties, and corporate events — all in one place, with transparent pricing."
            image="/event-mng.jpeg"
            link="/events"
            features={[
              "Verified vendors: caterers, decorators, photographers & planners",
              "Compare services, portfolios, pricing & availability",
              "Direct inquiry & booking requests with vendors",
              "Reviews and ratings to choose with confidence"
            ]}
            clr="indigo"
            featured_text="Services"
            featuredProducts={[
              {
                id: 1,
                title: 'Premium Wedding Package',
                price: '$2,500',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'Featured'
              },
              {
                id: 2,
                title: 'Event Decoration Service',
                price: '$150/day',
                image: '/denisse-leon-0k795_HZzns-unsplash.jpg',
                badge: 'Hot Deal'
              },
              {
                id: 3,
                title: 'Photography Services',
                price: '$800',
                image: '/event mng.jpeg',
                badge: 'Popular'
              },
              {
                id: 4,
                title: 'Caterer Service',
                price: '$1,200',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'New'
              }
            ]}
            flip
          />

          <Module
            title="Matrimonial"
            tagline="Find Your Life Partner With Confidence"
            desc="A secure and privacy-first matrimonial platform designed to help you find
    meaningful, long-term relationships. Every profile is carefully verified
    to ensure trust, authenticity, and safety."
            image="/diana-shchurova-THEJX2MIVPI-unsplash.jpg"
            link="/matrimonial"
            features={[
              "Verified profiles with identity and contact validation",
              "Advanced filters by age, profession, religion, location & preferences",
              "Privacy controls to hide photos or contact details until you’re ready",
              "Secure chat & interest system to connect at your own pace"
            ]}
            clr="pink"
            featured_text="Profiles"
            featuredProducts={[
              {
                id: 1,
                title: 'Anika Narayan',
                price: '22 yr',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'Featured'
              },
              {
                id: 2,
                title: 'Samir Patel',
                price: '27 yr',
                image: '/denisse-leon-0k795_HZzns-unsplash.jpg',
                badge: 'Hot Deal'
              },
              {
                id: 3,
                title: 'Marcela Avila',
                price: '28 yr',
                image: '/event mng.jpeg',
                badge: 'Popular'
              },
              {
                id: 4,
                title: 'John Smith',
                price: '25 yr',
                image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
                badge: 'New'
              }
            ]}
          />
        </div>
      </section>

      {/* ================= TESTIMONIALS ================= */}
      <section className="container mx-auto px-6 py-24">
        <h2 className="text-4xl font-bold text-center mb-14">
          What Our Users Say
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <Testimonial
            name="Ayesha Rahman"
            text="I found my life partner here. Very genuine profiles!"
          />
          <Testimonial
            name="Tanvir Ahmed"
            text="Sold my bike within 2 days. Smooth and easy experience."
          />
          <Testimonial
            name="Nusrat Jahan"
            text="Found an amazing wedding planner through this platform."
          />
        </div>
      </section>

      {/* ================= BLOG PREVIEW ================= */}
      <section className="bg-white py-24">
        <div className="container mx-auto px-6">
          <h2 className="text-4xl font-bold text-center mb-14">
            From Our Blog
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <BlogCard title="Tips for a Successful Marriage" />
            <BlogCard title="How to Write a Perfect Classified Ad" />
            <BlogCard title="Planning Events Without Stress" />
          </div>
        </div>
      </section>

      {/* ================= ABOUT + CTA ================= */}
      <section className="relative text-white py-24">
        {/* Gradient background */}
        <div className="absolute inset-0 bg-gradient-to-r from-green-500 via-red-500 to-green-500"></div>

        {/* Dark overlay */}
        <div className="absolute inset-0 bg-black/50"></div>

        {/* Content */}
        <div className="relative container mx-auto px-6 text-center max-w-3xl">
          <h2 className="text-4xl font-bold mb-6">About Our Platform</h2>
          <p className="text-lg text-blue-100 mb-10">
            We aim to simplify life’s important moments by bringing trusted
            people, services, and opportunities together in one place.
          </p>

          <Link
            href="/register"
            className="inline-block bg-white text-brand-green-dark px-8 py-4 rounded-xl font-semibold hover:scale-105 transition"
          >
            Join Today – It’s Free
          </Link>
        </div>
      </section>

      {/* CTA Section */}
            <div className="bg-gray-50 py-12">
              <div className="container mx-auto px-4 text-center">
                <h3 className="text-xl font-semibold text-gray-800 mb-2">
                  Do you have anything to sell or rent?
                </h3>
                <p className="text-[#575757] mb-6">
                  Sell your products and services online FOR FREE. It is easier than you think!
                </p>
                <Link
                  href="/classifieds"
                  className="inline-block px-8 py-3 bg-yellow-400 text-black font-semibold rounded hover:bg-yellow-500 transition"
                >
                  Start Now!
                </Link>
              </div>
            </div>

    </div>
  );
}

/* ================= COMPONENTS ================= */

function CardSearch({ action, placeholder }) {
  return (
    <form action={action} method="GET" className="mt-6">
      <div className="flex items-center bg-white rounded-xl border border-gray-200 overflow-hidden focus-within:ring-2 focus-within:ring-indigo-500 transition">
        <input
          type="text"
          name="search"
          placeholder={placeholder}
          className="flex-1 px-4 py-3 text-sm text-gray-700 outline-none"
        />
        <button
          type="submit"
          className="px-4 py-3 bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition"
        >
          Search
        </button>
      </div>
    </form>
  );
}


function Stat({ number, label }) {
  return (
    <div className="hover:scale-105 transition">
      <p className="text-4xl font-bold text-indigo-600">{number}</p>
      <p className="text-gray-600">{label}</p>
    </div>
  );
}

function Step({ icon, title, desc }) {
  return (
    <div className="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition text-center">
      <div className="text-5xl mb-4">{icon}</div>
      <h4 className="text-xl font-semibold mb-2">{title}</h4>
      <p className="text-gray-600">{desc}</p>
    </div>
  );
}






















// Featured Product Slider Component
function FeaturedSlider({ clr, featured_text, featuredProducts }) {
  const [currentSlide, setCurrentSlide] = useState(0);

  // Sample featured products - replace with your actual data
  // const featuredProducts = [
  //   {
  //     id: 1,
  //     title: 'Premium Wedding Package',
  //     price: '$2,500',
  //     image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
  //     badge: 'Featured'
  //   },
  //   {
  //     id: 2,
  //     title: 'Luxury Car for Rent',
  //     price: '$150/day',
  //     image: '/denisse-leon-0k795_HZzns-unsplash.jpg',
  //     badge: 'Hot Deal'
  //   },
  //   {
  //     id: 3,
  //     title: 'Photography Services',
  //     price: '$800',
  //     image: '/event mng.jpeg',
  //     badge: 'Popular'
  //   },
  //   {
  //     id: 4,
  //     title: 'Event Decoration',
  //     price: '$1,200',
  //     image: '/diana-shchurova-THEJX2MIVPI-unsplash.jpg',
  //     badge: 'New'
  //   }
  // ];

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % featuredProducts.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) =>
      prev === 0 ? featuredProducts.length - 1 : prev - 1
    );
  };

  const goToSlide = (index) => {
    setCurrentSlide(index);
  };

  // Auto-slide effect
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % featuredProducts.length);
    }, 2300); // Change slide every 4 seconds

    return () => clearInterval(timer);
  }, [featuredProducts.length]);

  return (
    <div className="mt-6">
      <h4 className="text-lg font-semibold text-gray-800 mb-3">
        Featured {featured_text}
      </h4>

      <div className="relative bg-white rounded-xl shadow-md overflow-hidden">
        {/* Slider Container */}
        <div className="relative h-64">
          {featuredProducts.map((product, index) => (
            <div
              key={product.id}
              className={`absolute inset-0 transition-opacity duration-500 ${index === currentSlide ? 'opacity-100' : 'opacity-0'
                }`}
            >
              <div className="flex h-full">
                {/* Product Image */}
                <div className="relative w-2/5 h-full">
                  <Image
                    src={product.image}
                    alt={product.title}
                    fill
                    style={{ objectFit: 'cover' }}
                  />
                  <span className={`absolute top-3 left-3 bg-${clr}-600 text-white text-xs font-semibold px-3 py-1 rounded-full`}>
                    {product.badge}
                  </span>
                </div>

                {/* Product Info */}
                <div className="w-3/5 p-6 flex flex-col justify-center">
                  <h5 className="text-xl font-bold text-gray-800 mb-2">
                    {product.title}
                  </h5>
                  <p className={`text-2xl font-bold text-${clr}-600 mb-4`}>
                    {product.price}
                  </p>
                  <Link
                    href="#"
                    className={`inline-flex items-center justify-center px-4 py-2 bg-${clr}-600 text-white rounded-lg hover:bg-${clr}-700 transition text-sm font-semibold`}
                  >
                    View Details →
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Navigation Arrows */}
        <button
          onClick={prevSlide}
          className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-gray-800 w-8 h-8 rounded-full shadow-lg flex items-center justify-center transition z-10"
          aria-label="Previous slide"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </button>

        <button
          onClick={nextSlide}
          className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-gray-800 w-8 h-8 rounded-full shadow-lg flex items-center justify-center transition z-10"
          aria-label="Next slide"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>

        {/* Dots Indicator */}
        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-10">
          {featuredProducts.map((_, index) => (
            <button
              key={index}
              onClick={() => goToSlide(index)}
              className={`w-2 h-2 rounded-full transition-all ${index === currentSlide
                  ? `bg-${clr}-600 w-6`
                  : 'bg-gray-300 hover:bg-gray-400'
                }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      </div>
    </div>
  );
}






function Module({ title, desc, image, link, reverse, tagline, features, clr, featured_text, featuredProducts, flip = false, }) {
  return (
    <div className={`grid grid-cols-1 md:grid-cols-2 gap-12 items-center ${reverse ? "md:flex-row-reverse" : ""}`}>
      {!flip ?
        <>

          <div className="space-y-4">
            <span className={`inline-block text-sm font-semibold text-${clr}-600 bg-${clr}-50 px-3 py-1 rounded-full`}>
              {title} Module
            </span>

            <h3 className="text-3xl font-extrabold leading-tight">
              {tagline}
            </h3>

            <p className="text-gray-600 text-lg leading-relaxed">
              {desc}
            </p>

            {/* <ul className="space-y-2 text-gray-600">
              {features.map((feature, index) => (
                <li className="flex gap-2">
                  <span className={`text-${clr}-600 mt-1`}>✔</span>
                  {feature}
                </li>
              ))}

            </ul> */}

            {/* Featured Product Slider */}
            <FeaturedSlider clr={clr} featured_text={featured_text} featuredProducts={featuredProducts} />

            <Link
              href={link}
              className={`inline-flex items-center gap-2 text-${clr}-600 font-semibold hover:underline`}
            >
              Explore {title} →
            </Link>
          </div>

          <Image src={image} alt={title}
            // width={600}
            // height={400}
            width={700} height={500}
            style={{ width: "700px", height: "500px", objectFit: "cover", objectPosition: "center", }}
            className="hidden md:block rounded-2xl shadow-lg hover:scale-105 transition" />
        </>
        :
        <>
          <Image src={image} alt={title}
            // width={600}
            // height={400}
            width={700} height={500}
            style={{ width: "700px", height: "500px", objectFit: "cover", objectPosition: "center", }}
            className="hidden md:block rounded-2xl shadow-lg hover:scale-105 transition" />

          <div className="space-y-4">
            <span className={`inline-block text-sm font-semibold text-${clr}-600 bg-${clr}-50 px-3 py-1 rounded-full`}>
              {title} Module
            </span>

            <h3 className="text-3xl font-extrabold leading-tight">
              {tagline}
            </h3>

            <p className="text-gray-600 text-lg leading-relaxed">
              {desc}
            </p>

            {/* <ul className="space-y-2 text-gray-600">
              {features.map((feature, index) => (
                <li className="flex gap-2">
                  <span className={`text-${clr}-600 mt-1`}>✔</span>
                  {feature}
                </li>
              ))}

            </ul> */}

            {/* Featured Product Slider */}
            <FeaturedSlider clr={clr} featured_text={featured_text} featuredProducts={featuredProducts} />

            <Link
              href={link}
              className={`inline-flex items-center gap-2 text-${clr}-600 font-semibold hover:underline`}
            >
              Explore {title} →
            </Link>
          </div>


        </>}

    </div>
  );
}

function Testimonial({ name, text }) {
  return (
    <div className="bg-white p-8 rounded-2xl shadow hover:shadow-xl transition">
      <p className="text-gray-600 mb-4">“{text}”</p>
      <p className="font-semibold">{name}</p>
    </div>
  );
}

function BlogCard({ title }) {
  return (
    <div className="bg-slate-100 p-6 rounded-xl hover:shadow-lg transition">
      <h4 className="font-semibold mb-3">{title}</h4>
      <p className="text-sm text-gray-600">
        Read insights, tips, and guides from our experts.
      </p>
    </div>
  );
}
