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

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
      {/* Header */}
      {/* <header className="bg-white shadow-sm">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-blue-600">
            <Image src="/find_deshi transparent.png" alt="FindDeshi Logo" width={140} height={50} />

          </h1>
          <nav className="flex gap-6 items-center">
            <Link href="/matrimonial" className="hover:text-blue-600 text-[#575757]">Matrimonial</Link>
            <Link href="/classifieds" className="hover:text-blue-600 text-[#575757]">Classifieds</Link>
            <Link href="/events" className="hover:text-blue-600 text-[#575757]">Events</Link>
            <Link href="/login" className="hover:text-blue-600 text-[#575757]">Login</Link>
            <Link href="/register" className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
              Sign Up
            </Link>
          </nav>
        </div>
      </header> */}

      {/* Hero Section */}
      <section className="container mx-auto px-4 py-20 text-center">
        <h2 className="text-5xl font-bold text-gray-900 mb-6">
          Find Your Perfect Match, Deal, or Service
        </h2>
        <p className="text-xl text-gray-600 mb-12">
          All-in-one platform for matrimonial, classifieds, and event services
        </p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {/* Matrimonial Card */}
          <Link href="/matrimonial">
            <div className="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition-shadow cursor-pointer">
              <div className="text-5xl mb-4">💑</div>
              <h3 className="text-2xl font-bold mb-3">Matrimonial</h3>
              <p className="text-gray-600 mb-4">
                Find your life partner from verified profiles
              </p>
              <span className="text-blue-600 font-medium">Browse Profiles →</span>
            </div>
          </Link>

          {/* Classifieds Card */}
          <Link href="/classifieds">
            <div className="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition-shadow cursor-pointer">
              <div className="text-5xl mb-4">🛍️</div>
              <h3 className="text-2xl font-bold mb-3">Classifieds</h3>
              <p className="text-gray-600 mb-4">
                Buy, sell, or trade items in your area
              </p>
              <span className="text-blue-600 font-medium">View Ads →</span>
            </div>
          </Link>

          {/* Events Card */}
          <Link href="/events">
            <div className="bg-white rounded-lg shadow-lg p-8 hover:shadow-xl transition-shadow cursor-pointer">
              <div className="text-5xl mb-4">🎉</div>
              <h3 className="text-2xl font-bold mb-3">Event Directory</h3>
              <p className="text-gray-600 mb-4">
                Find caterers, decorators, event planners
              </p>
              <span className="text-blue-600 font-medium">Explore Services →</span>
            </div>
          </Link>
        </div>
      </section>

      {/* Features Section */}
      <section className="bg-white py-20">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-bold text-center mb-12">Why Choose Us?</h3>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <Feature icon="✓" title="Verified Users" desc="All users are verified for safety" />
            <Feature icon="🔒" title="Secure Platform" desc="Your data is protected" />
            <Feature icon="⚡" title="Easy to Use" desc="Simple and intuitive interface" />
            <Feature icon="🆓" title="Free to Join" desc="Create account at no cost" />
          </div>
        </div>
      </section>
    </div>
  );
}

function Feature({ icon, title, desc }) {
  return (
    <div className="text-center">
      <div className="text-4xl mb-3">{icon}</div>
      <h4 className="font-bold mb-2">{title}</h4>
      <p className="text-gray-600 text-sm">{desc}</p>
    </div>
  );
}