// /src/app/page.js
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { URL } from "./url";
import FilterBar from "./FilterBar";
function toNumber(v, d = undefined) {
  const n = Number(v);
  return Number.isFinite(n) ? n : d;
}
export default function HomePageComponent({ properties }) {
  // console.log(properties);
  const q = properties?.q || "";
  const city = properties?.city || "";
  const type = properties?.type || "";
  const min = toNumber(properties?.min);
  const max = toNumber(properties?.max);
  const page = Math.max(1, toNumber(properties?.page, 1));
  const limit = 9;
  return (
    <main className="bg-gray-50 text-gray-900">
      {/* Hero Section */}
      <section
        // className="relative h-[80vh] flex items-center justify-center bg-cover bg-center"
        className=" h-[80vh] flex items-center justify-center relative text-white bg-fixed bg-center bg-cover text-center"
        // style={{ backgroundImage: "url('/image/properties.avif')" }}

        style={{
          backgroundImage: "url('/image/property-2.jpg')",
          // marginRight: "-20px",
          // marginLeft: "-20px",
        }}
      >
        <div className="absolute inset-0 bg-black/50" />
        <div className="relative z-10 text-center text-white max-w-7xl mx-auto">
          <h1 className="text-2xl sm:text-3xl md:text-6xl font-bold mb-3 sm:mb-4 md:mb-6 mt-3">
            Plots & Flats for Sale in Jaipur
          </h1>
          <p className="text-sm sm:text-base md:text-lg mb-3 sm:mb-4 md:mb-6">
            Buy, sell or rent residential and commercial properties in Jaipur.
            Find your dream home in Mansarovar, Jagatpura, Ajmer Road & more.
          </p>
          <div className="text-black p-6 rounded-2xl ">
            <FilterBar initial={{ q, city, type, min, max }} />
          </div>
          {/* Search Bar */}
          {/* <div className="bg-white rounded-2xl shadow-lg flex flex-col md:flex-row items-center p-4 gap-3">
            <input
              type="text"
              placeholder="Location"
              className="flex-1 p-3 border rounded-xl bg-black text-white"
            />
            <select className="p-3 border rounded-xl bg-black text-white">
              <option>Property Type</option>
              <option value={"plot"}>Plot</option>
              <option value={"flat"}>Flats</option>
              <option value={"house"}>House</option>
              <option value={"apartment"}>Apartment</option>
              <option value={"villa"}>Villa</option>
            </select>
            <select className="p-3 border rounded-xl bg-black text-white">
              <option>Budget</option>
              <option>₹10L - ₹30L</option>
              <option>₹30L - ₹60L</option>
              <option>₹60L+</option>
            </select>
            <button className="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition">
              Search
            </button>
          </div> */}
        </div>
      </section>

      {/* Featured Properties */}
      <section className="py-16 max-w-7xl mx-auto px-6">
        <h2 className="text-3xl font-bold text-center mb-10">
          Featured Properties
        </h2>
        <div className="grid md:grid-cols-3 gap-8">
          {properties?.map((property, i) => (
            <motion.div
              key={i}
              whileHover={{ scale: 1.05 }}
              className="bg-white shadow-lg rounded-2xl overflow-hidden"
            >
              <Image
                src={URL?.API_BASE_URL + property.featureImg}
                alt={`${property.title} in ${property.location?.city}`}
                width={400}
                height={250}
                className="w-full h-56 object-cover"
              />
              <div className="p-5">
                <h3 className="font-semibold text-xl mb-2">{property.title}</h3>
                <p className="text-gray-600 mb-3">
                  {/* 3 BHK • */} {property.size} • {property.location?.city}
                </p>
                {property.price > 0 ? (
                  <p className="text-blue-600 font-bold">₹ {property.price}</p>
                ) : (
                  <p className="text-blue-600 font-bold">--</p>
                )}
                <Link
                
                  href={`/properties/${property.slug}`}
                  className="block mt-4 text-blue-500 hover:underline"
                >
                  View Details
                </Link>
              </div>
            </motion.div>
          ))}
        </div>
        <div className="text-center mt-8">
          <Link href="/properties?page=1">See All Properties →</Link>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-16 bg-gray-100">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h2 className="text-3xl font-bold mb-8">Why Choose Us?</h2>
          <div className="grid md:grid-cols-3 gap-10">
            <div className="p-6 bg-white rounded-xl shadow-md">
              <h3 className="font-semibold text-xl mb-3">Trusted Agents</h3>
              <p>
                Our experienced real estate agents guide you through every step
                of buying or renting properties in Jaipur.
              </p>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-md">
              <h3 className="font-semibold text-xl mb-3">Best Locations</h3>
              <p>
                {" "}
                Explore plots and flats in prime Jaipur locations like
                Mansarovar, Jagatpura, Ajmer Road, and more.
              </p>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-md">
              <h3 className="font-semibold text-xl mb-3">Affordable Deals</h3>
              <p>
                Find residential and commercial plots in Jaipur that fit your
                budget with no hidden costs.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section className="py-16 bg-gray-50">
        <h2 className="text-3xl font-bold text-center mb-10">Popular Cities</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
          {["Jaipur", "Delhi", "Kota", "Ajmer"].map((city, i) => (
            <Link key={i} href={`/properties?city=${city.toLowerCase()}`}>
              <div className="relative h-40 rounded-2xl overflow-hidden group">
                <Image
                  src={`/image/${city.toLowerCase()}.avif`}
                  alt={city}
                  fill
                  className="object-cover group-hover:scale-110 transition"
                />
                <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-white text-xl font-bold">
                  {city}
                </div>
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* <section className="relative bg-gray-900 text-white">
        
        <div className="fixed inset-0">
          <img
            src="/image/properties.avif"
            alt="Plots in Jaipur"
            className="w-full h-full object-cover opacity-40"
             style={{ backgroundAttachment: "fixed" }}
          />
        </div>

        <div className="relative max-w-5xl mx-auto px-6 py-20">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
            Your Perfect Plot Awaits –{" "}
            <span className="text-yellow-400">Update Bharat</span>
          </h2>

          <p className="text-lg text-gray-200 text-center mb-10">
            At <strong>Update Bharat</strong>, we make finding the right
            residential or commercial plot in Jaipur effortless and transparent.
            From prime residential plots to premium commercial land, we connect
            you with trusted sellers and provide insights that make every
            purchase smarter and safer.
          </p>

          <div className="grid gap-8 md:grid-cols-3">
            
            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Verified Listings for Peace of Mind
              </h3>
              <p className="text-gray-100">
                We carefully check every property before it goes live. Only
                plots with clear titles and accurate measurements are published,
                so you can shortlist options confidently.
              </p>
            </div>

            
            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Smart Search & Instant Details
              </h3>
              <p className="text-gray-100">
                Filter plots by size, location, price, or purpose – and explore
                them with HD photos, layouts, and key amenities. Our simple
                interface saves you hours of manual searching.
              </p>
            </div>

           
            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Expert Guidance at Every Step
              </h3>
              <p className="text-gray-100">
                Our advisors help you understand zoning rules, registration
                procedures, and current market trends. Whether you’re buying
                your first plot or planning a big project, we make the process
                hassle-free.
              </p>
            </div>
          </div>

          <div className="mt-12 text-center">
            <p className="text-lg">
              <strong>Update Bharat</strong> blends transparency, technology,
              and local market knowledge to help you find land that matches your
              vision — without stress.
            </p>
          </div>
        </div>
      </section> */}
      <section
        className="relative text-white bg-fixed bg-center bg-cover"
        style={{ backgroundImage: "url('/image/properties.avif')" }}
      >
        {/* Overlay only for this section */}
        <div className="absolute inset-0 bg-black/50"></div>

        <div className="relative max-w-5xl mx-auto px-6 py-20">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-8">
            Your Perfect Plot Awaits –{" "}
            <span className="text-yellow-400">Update Bharat</span>
          </h2>

          <p className="text-lg text-gray-200 text-center mb-10">
            At <strong>Update Bharat</strong>, we make finding the right
            residential or commercial plot in Jaipur effortless and transparent.
            From prime residential plots to premium commercial land, we connect
            you with trusted sellers and provide insights that make every
            purchase smarter and safer.
          </p>

          <div className="grid gap-8 md:grid-cols-3">
            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Verified Listings for Peace of Mind
              </h3>
              <p className="text-gray-100">
                We carefully check every property before it goes live. Only
                plots with clear titles and accurate measurements are published,
                so you can shortlist options confidently.
              </p>
            </div>

            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Smart Search & Instant Details
              </h3>
              <p className="text-gray-100">
                Filter plots by size, location, price, or purpose – and explore
                them with HD photos, layouts, and key amenities. Our simple
                interface saves you hours of manual searching.
              </p>
            </div>

            <div className="bg-white/10 p-6 rounded-xl hover:bg-white/20 transition">
              <h3 className="text-xl font-semibold text-yellow-300 mb-3">
                Expert Guidance at Every Step
              </h3>
              <p className="text-gray-100">
                Our advisors help you understand zoning rules, registration
                procedures, and current market trends. Whether you’re buying
                your first plot or planning a big project, we make the process
                hassle-free.
              </p>
            </div>
          </div>

          <div className="mt-12 text-center">
            <p className="text-lg">
              <strong>Update Bharat</strong> blends transparency, technology,
              and local market knowledge to help you find land that matches your
              vision — without stress.
            </p>
          </div>
        </div>
      </section>

      {/* 
<section className="bg-gray-50 py-12 px-6">
        <h2 className="text-3xl font-bold text-center mb-8">
          Frequently Asked Questions
        </h2>
        <div className="max-w-2xl mx-auto space-y-4">
          {[
            {
              q: "How can I list my plot?",
              a: "You can easily list your plot by registering on our website.",
            },
            {
              q: "Are the listings verified?",
              a: "Yes, all plots are verified before publishing.",
            },
            {
              q: "Do you charge commission?",
              a: "We provide transparent charges, and many listings are free.",
            },
          ].map((faq, i) => (
            <details
              key={i}
              className="border p-4 rounded-lg bg-white shadow"
            >
              <summary className="font-semibold cursor-pointer">
                {faq.q}
              </summary>
              <p className="text-gray-600 mt-2">{faq.a}</p>
            </details>
          ))}
        </div>
      </section> */}
      {/* Testimonials */}
      <section className="py-16 max-w-6xl mx-auto px-6 ">
        <h2 className="text-3xl font-bold text-center mb-8">
          What Our Clients Say
        </h2>
        <div className="grid md:grid-cols-2 gap-8">
          <div className="bg-white p-6 rounded-xl shadow-md">
            <p className="text-gray-600 mb-4">
              “Great service! Found my dream home in just a week.”
            </p>
            <h4 className="font-bold">– Rahul Sharma</h4>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-md">
            <p className="text-gray-600 mb-4">
              “Very professional agents and smooth process.”
            </p>
            <h4 className="font-bold">– Anjali Verma</h4>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section
        // className="py-16 bg-blue-600 text-white text-center"
        className="  relative text-white bg-fixed bg-center bg-cover text-center"
        style={{ backgroundImage: "url('/image/properties.avif')" }}
      >
        <div className="absolute inset-0 bg-black/50"></div>
        <div className="relative max-w-5xl mx-auto px-6 py-20">
          <h2 className="text-3xl text-white font-bold mb-4">
            Ready to Find Your Property?
          </h2>
          <p className="mb-6">
            Contact us today and get expert guidance for your property needs.
          </p>
          <Link
            href="/contact"
            className="bg-white text-blue-600 px-6 py-3 rounded-xl font-semibold hover:bg-gray-100 transition"
          >
            Get in Touch
          </Link>
        </div>
      </section>
    </main>
  );
}
