// pages/index.jsx
import Link from "next/link";
import Image from "next/image";

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 ================= */}
      <section className="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-blue-600">
        <div className="container mx-auto px-6 py-28 grid grid-cols-1 md:grid-cols-2 gap-14 items-center">

          {/* Text */}
          <div className="text-white">
            <h1 className="text-5xl md:text-6xl font-extrabold leading-tight mb-6">
              One Platform for <br />
              <span className="text-yellow-300">Marriage, Market & Events</span>
            </h1>

            <p className="text-lg md:text-xl text-blue-100 mb-10">
              Discover trusted matrimonial matches, local classified ads,
              and verified event service providers — all in one secure platform.
            </p>

            <div className="flex flex-wrap gap-4">
              <Link
                href="/register"
                className="bg-white text-indigo-600 px-7 py-4 rounded-xl font-semibold shadow-lg hover:scale-105 transition"
              >
                Get Started Free
              </Link>

              <Link
                href="/matrimonial"
                className="border border-white px-7 py-4 rounded-xl font-semibold hover:bg-white hover:text-indigo-600 transition"
              >
                Explore Platform
              </Link>
            </div>
          </div>

          {/* Image */}
          <div className="relative group">
            <div className="absolute inset-0 bg-white/20 rounded-3xl blur-3xl group-hover:blur-2xl transition"></div>
            <Image
              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f"
              alt="Community platform"
              width={700}
              height={500}
              className="relative rounded-3xl shadow-2xl object-cover"
            />
          </div>
        </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
            title="Matrimonial"
            desc="Verified profiles, smart filters, and privacy-focused matchmaking."
            image="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e"
            link="/matrimonial"
          />

          <Module
            reverse
            title="Classified Ads"
            desc="Buy, sell, and promote locally with trusted users."
            image="https://images.unsplash.com/photo-1515169067865-5387ec356754"
            link="/classifieds"
          />

          <Module
            title="Event Directory"
            desc="Find caterers, decorators, and planners for any occasion."
            image="https://images.unsplash.com/photo-1519225421980-715cb0215aed"
            link="/events"
          />
        </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="bg-gradient-to-r from-indigo-600 to-blue-600 text-white py-24">
        <div className="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-indigo-600 px-8 py-4 rounded-xl font-semibold hover:scale-105 transition"
          >
            Join Today – It’s Free
          </Link>
        </div>
      </section>
    </div>
  );
}

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

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>
  );
}

function Module({ title, desc, image, link, reverse }) {
  return (
    <div className={`grid grid-cols-1 md:grid-cols-2 gap-12 items-center ${reverse ? "md:flex-row-reverse" : ""}`}>
      <div>
        <h3 className="text-3xl font-bold mb-4">{title}</h3>
        <p className="text-gray-600 mb-6">{desc}</p>
        <Link href={link} className="text-indigo-600 font-semibold hover:underline">
          Explore {title} →
        </Link>
      </div>

      <Image
        src={image}
        alt={title}
        width={600}
        height={400}
        className="rounded-2xl shadow-lg hover:scale-105 transition"
      />
    </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>
  );
}
