export default function UmmahCityLandingPage() {
  const properties = [
    {
      title: 'Modern Family Villa',
      location: 'Dhaka, Bangladesh',
      price: '$220,000',
      image:
        'https://images.unsplash.com/photo-1568605114967-8130f3a36994?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Luxury Apartment',
      location: 'Chattogram, Bangladesh',
      price: '$180,000',
      image:
        'https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?q=80&w=1200&auto=format&fit=crop',
    },
    {
      title: 'Elegant Townhouse',
      location: 'Sylhet, Bangladesh',
      price: '$260,000',
      image:
        'https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1200&auto=format&fit=crop',
    },
  ];

  return (
    <div className="min-h-screen bg-white text-gray-900">
      {/* Navbar */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Ummah City</h1>
            <p className="text-xs text-gray-500">ummahcity.com</p>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
            <a href="#home" className="hover:text-gray-600 transition">Home</a>
            <a href="#properties" className="hover:text-gray-600 transition">Properties</a>
            <a href="#about" className="hover:text-gray-600 transition">About</a>
            <a href="#contact" className="hover:text-gray-600 transition">Contact</a>
          </nav>

          <button className="bg-black text-white px-5 py-2 rounded-full text-sm hover:opacity-90 transition">
            Get Started
          </button>
        </div>
      </header>

      {/* Hero Section */}
      <section
        id="home"
        className="relative h-screen flex items-center justify-center overflow-hidden"
      >
        <img
          src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2000&auto=format&fit=crop"
          alt="Luxury Real Estate"
          className="absolute inset-0 w-full h-full object-cover"
        />

        <div className="absolute inset-0 bg-black/55" />

        <div className="relative z-10 text-center text-white max-w-4xl px-6">
          <p className="uppercase tracking-[0.3em] text-sm mb-4 text-gray-200">
            Premium Real Estate Experience
          </p>

          <h2 className="text-5xl md:text-7xl font-bold leading-tight mb-6">
            Find Your Dream Home With Ummah City
          </h2>

          <p className="text-lg md:text-xl text-gray-200 mb-10 max-w-2xl mx-auto">
            Discover modern homes, luxury apartments, and smart investment opportunities designed for families and communities.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <button className="bg-white text-black px-8 py-4 rounded-full font-semibold hover:scale-105 transition">
              Explore Properties
            </button>

            <button className="border border-white text-white px-8 py-4 rounded-full font-semibold hover:bg-white hover:text-black transition">
              Schedule Consultation
            </button>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[
            ['500+', 'Properties Sold'],
            ['1200+', 'Happy Clients'],
            ['15+', 'Years Experience'],
            ['25+', 'Cities Covered'],
          ].map(([number, label]) => (
            <div
              key={label}
              className="bg-white rounded-3xl shadow-sm p-8 border border-gray-100"
            >
              <h3 className="text-4xl font-bold mb-2">{number}</h3>
              <p className="text-gray-500">{label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Featured Properties */}
      <section id="properties" className="py-24">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-16">
            <div>
              <p className="text-sm uppercase tracking-[0.25em] text-gray-500 mb-3">
                Featured Listings
              </p>
              <h2 className="text-4xl md:text-5xl font-bold max-w-2xl">
                Explore Premium Properties
              </h2>
            </div>

            <button className="border border-black px-6 py-3 rounded-full hover:bg-black hover:text-white transition w-fit">
              View All Listings
            </button>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {properties.map((property) => (
              <div
                key={property.title}
                className="group bg-white rounded-[2rem] overflow-hidden shadow-sm border border-gray-100 hover:shadow-xl transition duration-300"
              >
                <div className="overflow-hidden">
                  <img
                    src={property.image}
                    alt={property.title}
                    className="h-72 w-full object-cover group-hover:scale-105 transition duration-500"
                  />
                </div>

                <div className="p-6">
                  <div className="flex items-center justify-between mb-3">
                    <span className="text-sm text-gray-500">{property.location}</span>
                    <span className="font-semibold">{property.price}</span>
                  </div>

                  <h3 className="text-2xl font-bold mb-4">{property.title}</h3>

                  <button className="w-full bg-black text-white py-3 rounded-xl hover:opacity-90 transition">
                    View Details
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-24 bg-black text-white">
        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <p className="uppercase tracking-[0.25em] text-sm text-gray-400 mb-4">
              About Ummah City
            </p>

            <h2 className="text-4xl md:text-5xl font-bold leading-tight mb-8">
              Building Communities With Trust & Excellence
            </h2>

            <p className="text-gray-300 text-lg leading-relaxed mb-8">
              Ummah City is committed to delivering exceptional real estate experiences through modern developments, ethical business practices, and customer-focused solutions.
            </p>

            <div className="grid grid-cols-2 gap-6">
              <div className="border border-white/10 rounded-2xl p-6 bg-white/5">
                <h3 className="text-3xl font-bold mb-2">98%</h3>
                <p className="text-gray-400">Client Satisfaction</p>
              </div>

              <div className="border border-white/10 rounded-2xl p-6 bg-white/5">
                <h3 className="text-3xl font-bold mb-2">24/7</h3>
                <p className="text-gray-400">Customer Support</p>
              </div>
            </div>
          </div>

          <div>
            <img
              src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?q=80&w=1400&auto=format&fit=crop"
              alt="Modern Home"
              className="rounded-[2rem] shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-gray-50">
        <div className="max-w-5xl mx-auto px-6 text-center">
          <div className="bg-white rounded-[2rem] shadow-lg border border-gray-100 p-10 md:p-16">
            <p className="uppercase tracking-[0.25em] text-sm text-gray-500 mb-4">
              Start Your Journey
            </p>

            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              Let’s Find The Perfect Property For You
            </h2>

            <p className="text-lg text-gray-600 mb-10 max-w-2xl mx-auto">
              Whether you're buying, selling, or investing, Ummah City provides expert guidance every step of the way.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <input
                type="email"
                placeholder="Enter your email"
                className="w-full sm:w-80 px-5 py-4 rounded-full border border-gray-200 outline-none focus:ring-2 focus:ring-black"
              />

              <button className="bg-black text-white px-8 py-4 rounded-full font-semibold hover:opacity-90 transition">
                Contact Us
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contact" className="bg-black text-white py-12">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row gap-8 justify-between items-center">
          <div>
            <h3 className="text-2xl font-bold">Ummah City</h3>
            <p className="text-gray-400 mt-2">Premium Real Estate Solutions</p>
          </div>

          <div className="flex gap-6 text-sm text-gray-300">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
            <a href="#">Support</a>
          </div>

          <p className="text-gray-500 text-sm">
            © 2026 ummahcity.com — All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}