import { createFileRoute } from "@tanstack/react-router";
import { motion, useScroll, useTransform, useReducedMotion, AnimatePresence } from "framer-motion";
import { useEffect, useRef, useState } from "react";
import {
  MapPin,
  Home,
  Building2,
  Trees,
  Wheat,
  Warehouse,
  Palmtree,
  Castle,
  Factory,
  ShieldCheck,
  FileCheck2,
  Handshake,
  Phone,
  Mail,
  ArrowRight,
  Sparkles,
  Star,
  CheckCircle2,
  Compass,
  Ruler,
  Trophy,
  Landmark,
} from "lucide-react";

import { FadeIn } from "@/components/motion/FadeIn";
import { Reveal } from "@/components/motion/Reveal";
import { ScaleIn } from "@/components/motion/ScaleIn";
import { StaggerContainer } from "@/components/motion/StaggerContainer";
import { StaggerItem } from "@/components/motion/StaggerItem";
import { ScrollProgress } from "@/components/motion/ScrollProgress";
import { CountUp } from "@/components/motion/CountUp";
import { TiltCard } from "@/components/motion/TiltCard";
import { Marquee } from "@/components/motion/Marquee";
import { BlueprintBg } from "@/components/motion/BlueprintBg";
import { WhatsAppIcon } from "@/components/WhatsAppIcon";
import logoAsset from "@/assets/divyanshu-empire-logo.png.asset.json";

const PHONE = "9982744446";
const PHONE_DISPLAY = "+91 99827 44446";
const WHATSAPP_LINK = `https://wa.me/91${PHONE}`;
const TEL_LINK = `tel:+91${PHONE}`;
const ADDRESS = "Westway Heights, SC-141, Narayan Vihar, Jaipur, Rajasthan 302026";
const MAPS_LINK = "https://www.google.com/maps/dir/?api=1&destination=" + encodeURIComponent("Westway Heights, SC-141, Narayan Vihar, Jaipur, Rajasthan 302026");
const BRAND = "Divyanshu Empire LLP";
const DOMAIN = "https://divyanshuempirerealestate.com";
const EMAIL = "contact@divyanshuempirerealestate.com";
const EMAIL_LINK = `mailto:${EMAIL}`;


import heroImg from "@/assets/hero-township.jpg";
import farmhouseImg from "@/assets/farmhouse.jpg";
import plotImg from "@/assets/plot.jpg";
import commercialImg from "@/assets/commercial.jpg";
import agricultureImg from "@/assets/agriculture.jpg";
import residentialFlatsImg from "@/assets/residential-flats.jpg";
import villaImg from "@/assets/villa.jpg";
import industrialLandImg from "@/assets/industrial-land.jpg";

export const Route = createFileRoute("/")({
  component: LandingPage,
  head: () => ({
    links: [{ rel: "canonical", href: `${DOMAIN}/` }],
    meta: [
      {
        title:
          "JDA & Govt Approved Plots in Jaipur | Township, Agriculture Land & Farmhouses — Divyanshu Empire LLP",
      },
      {
        name: "description",
        content:
          "Best property dealer in Jaipur | Divyanshu Empire LLP Real Estate & Developer | Call Us 9982744446",
      },
      {
        property: "og:title",
        content:
          "JDA & Govt Approved Plots, Township Land & Farmhouses in Jaipur — Divyanshu Empire LLP",
      },
      {
        property: "og:description",
        content:
          "Best property dealer in Jaipur | Divyanshu Empire LLP Real Estate & Developer | Call Us 9982744446",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: `${DOMAIN}/` },
      { name: "twitter:card", content: "summary_large_image" },
      {
        name: "twitter:title",
        content: "JDA & Govt Approved Plots, Township Land & Farmhouses — Divyanshu Empire LLP",
      },
      {
        name: "twitter:description",
        content:
          "Best property dealer in Jaipur | Divyanshu Empire LLP Real Estate & Developer | Call Us 9982744446",
      },
    ],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify(FAQ_JSONLD),
      },
    ],
  }),
});


const services = [
  {
    icon: Home,
    title: "JDA Approved Residential Plots",
    desc: "Ready-to-register residential plots with clear JDA / Govt approval, wide roads and full amenities.",
    img: plotImg,
    tag: "Most Popular",
  },
  {
    icon: Building2,
    title: "Commercial Properties",
    desc: "High-footfall commercial plots and shop spaces on prime highways and city arteries.",
    img: commercialImg,
  },
  {
    icon: Trees,
    title: "Township Land",
    desc: "Large-format township land parcels for developers and joint-venture partners.",
    img: heroImg,
  },
  {
    icon: Wheat,
    title: "Agriculture Land",
    desc: "Fertile agricultural land with clean records, water access and road connectivity.",
    img: agricultureImg,
  },
  {
    icon: Warehouse,
    title: "Luxury Farmhouses",
    desc: "Turnkey and custom-built farmhouses in serene, well-connected locations.",
    img: farmhouseImg,
    tag: "Premium",
  },
  {
    icon: Palmtree,
    title: "Resorts & Leisure Land",
    desc: "Scenic resort plots and hospitality-zoned land ideal for weekend retreats, boutique stays and wellness getaways.",
    img: heroImg,
    tag: "New",
  },
  {
    icon: Building2,
    title: "Residential Flats",
    desc: "Ready-to-move and under-construction apartments in approved residential townships with modern amenities and secure titles.",
    img: residentialFlatsImg,
  },
  {
    icon: Castle,
    title: "Villa",
    desc: "Premium independent villas in gated communities and plotted developments for a private, upscale lifestyle.",
    img: villaImg,
    tag: "Premium",
  },
  {
    icon: Factory,
    title: "Industrial Land",
    desc: "Strategic industrial plots near SEZs, logistics hubs and state highway corridors with zoning and approval clarity.",
    img: industrialLandImg,
  },
];

const trustPoints: Array<{ icon: typeof ShieldCheck; num: number; suffix: string; v: string }> = [
  { icon: ShieldCheck, num: 100, suffix: "%", v: "Title Verified" },
  { icon: FileCheck2, num: 3000, suffix: "+", v: "JDA / Govt Layouts" },
  { icon: Handshake, num: 2600, suffix: "+", v: "Happy Families" },
  { icon: Trophy, num: 24, suffix: " yrs", v: "Industry Experience" },
];

const process = [
  {
    step: "01",
    title: "Consult",
    desc: "Share your budget, purpose and preferred locations. We shortlist matching approved parcels.",
  },
  {
    step: "02",
    title: "Site Visit",
    desc: "Guided visits with location intelligence — connectivity, growth corridors, resale outlook.",
  },
  {
    step: "03",
    title: "Due Diligence",
    desc: "Full title search, approval verification and encumbrance report before you commit.",
  },
  {
    step: "04",
    title: "Registration",
    desc: "End-to-end registry, mutation and possession handover with post-sale support.",
  },
];

const testimonials = [
  {
    name: "Rohan Malhotra",
    role: "Business Owner, Jaipur",
    text: "Bought a JDA-approved residential plot in Jaipur through Divyanshu Empire LLP. Their property consultants showed multiple Govt approved plots, every document was title verified, and the registration was smooth. If you need a reliable real estate agent for residential plots, commercial plots or agriculture land in Rajasthan, this is the team to trust.",
  },
  {
    name: "Anita Sharma",
    role: "Doctor, Delhi NCR",
    text: "Their farmhouse and villa team understood exactly what we wanted — a luxury farmhouse near Jaipur with a clear title and JDA approval. The land had proper water supply, road connectivity and patta records. They also guided us on residential flats and villa plots in the same belt. Excellent property dealing experience.",
  },
  {
    name: "Vikram Iyer",
    role: "Developer",
    text: "Sourced 22 acres of township land and industrial land near Jaipur in weeks. Divyanshu Empire LLP is a serious property dealer with real network on the ground for commercial plots, township projects and industrial land in Rajasthan. Title verification and approval clarity made the acquisition fast and safe.",
  },
];

const faqs = [
  {
    q: "What does JDA / Govt approved plot mean in Jaipur, Rajasthan?",
    a: "A JDA approved plot means the residential or commercial layout is sanctioned by the Jaipur Development Authority (or the equivalent state/Govt authority such as UIT or Gram Panchayat with 90B conversion). JDA / Govt approved land in Jaipur is legally safe for construction, eligible for home loans from all leading banks, and easy to resell because the patta, layout plan and land-use conversion are already in place. At Divyanshu Empire LLP, every plot for sale — whether residential plots, commercial plots, industrial land or township land — is screened for title clarity before listing.",
  },
  {
    q: "Why buy JDA approved residential plots instead of unapproved land?",
    a: "Unapproved or agricultural land sold as residential plots cannot get a building permission, bank loan or clean patta. Divyanshu Empire LLP deals only in JDA / Govt approved residential plots, commercial plots, township land, agriculture land, villa plots and farmhouse land with verified titles, so your investment stays secure and appreciates faster. We are a full-service property dealer and real estate consultant in Jaipur, Rajasthan.",
  },
  {
    q: "Do you deal in commercial plots, villa plots and township land for developers?",
    a: "Yes. We offer high-footfall commercial plots, shop spaces and showroom land on prime highways and city arteries, plus large-format township land parcels and villa plots for builders, developers and joint-venture partners. Every township land parcel comes with approved layout drawings, road width details and clear khasra records. Our industrial land options near SEZs and logistics corridors are also popular with investors.",
  },
  {
    q: "Can I buy agriculture land, residential flats and farm house land through Divyanshu Empire LLP?",
    a: "Absolutely. We source fertile agriculture land with clean revenue records, water access and road connectivity, as well as farm house land and turnkey luxury farmhouses near Jaipur. We also list ready-to-move and under-construction residential flats in approved townships. If you plan to develop the agricultural land into a farmhouse, villa or residential township, we assist with 90B / land-use conversion and patta work.",
  },
  {
    q: "Do you handle plot registration, patta and paperwork in Narayan Vihar, Jaipur?",
    a: "Yes — end to end. From our office at Westway Heights, SC-141, Narayan Vihar, Jaipur, Rajasthan 302026, our team manages title search and due diligence, sale deed drafting, stamp duty calculation, sub-registrar registration, patta issuance and mutation (namantaran), so you receive a fully registered, dispute-free property anywhere in Jaipur, Pali, Jodhpur, Ajmer or across Rajasthan.",
  },
  {
    q: "Can NRIs invest in JDA approved plots, residential flats and farmhouses in India?",
    a: "Yes. NRIs can legally buy residential plots, residential flats, commercial property and farmhouse plots (agricultural land has restrictions). We assist NRI investors with remote due diligence, video site visits, POA-based registration and RBI / FEMA compliant remittances. We regularly serve NRI clients looking for JDA approved plots and farmhouses in Jaipur and other Rajasthan cities.",
  },
  {
    q: "Are home loans available on your approved plots and residential flats?",
    a: "All our JDA / Govt approved residential plots, commercial plots and listed residential flats are loan-eligible with leading banks and housing finance companies. We coordinate valuation, legal opinion and the complete plot loan or composite construction loan documentation for you. This makes our approved plots and residential flats accessible to salaried buyers and investors alike.",
  },
  {
    q: "Which areas around Jaipur and Rajasthan do you cover?",
    a: "We deal in approved plots, township land, agriculture land, farmhouses, villas, residential flats and industrial land across Jaipur and its growth corridors — Ajmer Road, Tonk Road, Sikar Road, Agra Road, Delhi Highway, Jagatpura, Kalwar Road and Ring Road belt — along with select projects in Pali, Jodhpur, Ajmer and other Rajasthan districts. As a Rajasthan-based property dealer, we can source verified land statewide.",
  },
  {
    q: "How do I check the price of a JDA approved plot or residential flat?",
    a: "Plot rates and residential flat prices change with location, size, facing and approval status, so we share current pricing on request. Call us on +91 99827 44446 or message on WhatsApp and our advisor will send verified options for JDA approved plots, commercial plots, villa plots, farmhouses, residential flats, agriculture land and industrial land with layout maps the same day.",
  },
];

const FAQ_JSONLD = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faqs.map((f) => ({
    "@type": "Question",
    name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a },
  })),
};


function LandingPage() {
  return (
    <main className="min-h-screen bg-background text-foreground overflow-x-hidden">
      <ScrollProgress />
      <Nav />
      <Hero />
      <LocationMarquee />
      <TrustBar />
      <Services />
      <Featured />
      <Process />
      <Testimonials />
      <FAQ />
      <Contact />
      <Footer />
      <FloatingActions />
    </main>
  );
}

function FloatingActions() {
  return (
    <div className="fixed bottom-[max(1rem,env(safe-area-inset-bottom))] right-4 sm:bottom-6 sm:right-6 z-50 flex flex-col items-center gap-4">
      <motion.a
        href={TEL_LINK}
        aria-label={`Call us at ${PHONE_DISPLAY}`}
        title={`Call us at ${PHONE_DISPLAY}`}
        whileHover={{ scale: 1.08 }}
        whileTap={{ scale: 0.95 }}
        className="relative grid h-14 w-14 place-items-center rounded-full bg-primary text-primary-foreground shadow-elevated transition-colors hover:opacity-90"
      >
        <span className="absolute inset-0 rounded-full bg-primary/30 animate-ping" />
        <Phone size={24} className="relative" />
      </motion.a>

      <motion.a
        href={WHATSAPP_LINK}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Chat on WhatsApp"
        whileHover={{ scale: 1.08 }}
        whileTap={{ scale: 0.95 }}
        className="relative grid h-14 w-14 place-items-center rounded-full bg-[#25D366] text-white shadow-elevated transition-transform"
      >
        <span className="absolute inset-0 rounded-full bg-white/40 animate-ping" />
        <WhatsAppIcon size={26} className="relative" />
      </motion.a>
    </div>
  );
}


function Nav() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <motion.header
      initial={{ y: -30, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
      className="fixed top-0 inset-x-0 z-50 backdrop-blur-md bg-background/70 border-b border-border/60"
    >
      <div className="mx-auto max-w-7xl px-5 sm:px-6 h-16 flex items-center justify-between gap-4">
        <a href="#top" className="flex items-center gap-2.5 font-display text-base md:text-lg font-semibold min-w-0 text-foreground">
          <img src={logoAsset.url} alt="Divyanshu Empire LLP logo" className="h-9 w-auto shrink-0" />
          <span className="text-xs sm:text-base leading-tight">Divyanshu Empire LLP</span>
        </a>

        <nav className="hidden md:flex items-center gap-8 text-sm text-muted-foreground">
          <a href="#services" className="hover:text-foreground transition-colors">Services</a>
          <a href="#featured" className="hover:text-foreground transition-colors">Properties</a>
          <a href="#process" className="hover:text-foreground transition-colors">Process</a>
          <a href="#faq" className="hover:text-foreground transition-colors">FAQ</a>
        </nav>
        <div className="flex items-center gap-2">
          <a
            href={MAPS_LINK}
            target="_blank"
            rel="noopener noreferrer"
            className="hidden lg:inline-flex items-center gap-1.5 text-[11px] uppercase tracking-widest text-muted-foreground border border-border rounded-full px-3 py-1 hover:text-foreground transition-colors"
          >
            <MapPin size={12} /> Narayan Vihar, Jaipur
          </a>
          <a
            href={TEL_LINK}
            className="hidden md:inline-flex items-center gap-2 rounded-full bg-primary text-primary-foreground text-sm font-medium px-5 py-2.5 hover:opacity-90 transition-opacity shadow-soft"
          >
            <Phone size={14} /> Call Us
          </a>
          <button
            onClick={() => setMenuOpen((s) => !s)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            className="md:hidden inline-flex flex-col items-center justify-center gap-[5px] w-10 h-10 rounded-full bg-primary/10 text-primary"
          >
            <span className={`block h-[2px] rounded-full bg-current transition-all duration-300 ${menuOpen ? "w-5 translate-y-[7px] -rotate-45" : "w-5"}`} />
            <span className={`block h-[2px] rounded-full bg-current transition-all duration-300 ${menuOpen ? "w-5 opacity-0" : "w-3.5"}`} />
            <span className={`block h-[2px] rounded-full bg-current transition-all duration-300 ${menuOpen ? "w-5 -translate-y-[7px] rotate-45" : "w-5"}`} />
          </button>
        </div>
      </div>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
            className="md:hidden overflow-hidden border-t border-border/60 bg-background/95 backdrop-blur-md"
          >
            <nav className="flex flex-col px-6 py-4 gap-3 text-sm font-medium text-foreground">
              <a href="#services" onClick={() => setMenuOpen(false)} className="py-2 border-b border-border/40 hover:text-primary transition-colors">Services</a>
              <a href="#featured" onClick={() => setMenuOpen(false)} className="py-2 border-b border-border/40 hover:text-primary transition-colors">Properties</a>
              <a href="#process" onClick={() => setMenuOpen(false)} className="py-2 border-b border-border/40 hover:text-primary transition-colors">Process</a>
              <a href="#faq" onClick={() => setMenuOpen(false)} className="py-2 border-b border-border/40 hover:text-primary transition-colors">FAQ</a>
              <a href="#contact" onClick={() => setMenuOpen(false)} className="py-2 border-b border-border/40 hover:text-primary transition-colors">Contact</a>
              <a
                href={TEL_LINK}
                className="mt-2 inline-flex items-center justify-center gap-2 rounded-full bg-primary text-primary-foreground text-sm font-medium px-5 py-3 hover:opacity-90 transition-opacity shadow-soft"
              >
                <Phone size={14} /> Call {PHONE_DISPLAY}
              </a>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.header>
  );
}


function Hero() {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const y = useTransform(scrollYProgress, [0, 1], [0, reduce ? 0 : 160]);
  const opacity = useTransform(scrollYProgress, [0, 1], [1, 0.2]);

  // Mouse parallax
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  useEffect(() => {
    if (reduce) return;
    const on = (e: MouseEvent) => {
      setMouse({
        x: (e.clientX / window.innerWidth - 0.5) * 2,
        y: (e.clientY / window.innerHeight - 0.5) * 2,
      });
    };
    window.addEventListener("mousemove", on);
    return () => window.removeEventListener("mousemove", on);
  }, [reduce]);

  return (
    <section id="top" ref={ref} className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden">
      {/* Blueprint SVG background */}
      <div className="absolute inset-0 text-primary/40">
        <BlueprintBg />
      </div>
      {/* Cursor-follow gradient blobs */}
      <motion.div
        aria-hidden
        style={{ x: mouse.x * 40, y: mouse.y * 40 }}
        className="absolute -top-10 -left-10 w-72 h-72 rounded-full bg-gradient-gold opacity-25 blur-3xl"
      />
      <motion.div
        aria-hidden
        style={{ x: mouse.x * -60, y: mouse.y * -30 }}
        className="absolute top-40 -right-20 w-[28rem] h-[28rem] rounded-full bg-primary/20 blur-3xl"
      />
      <motion.div
        aria-hidden
        style={{ x: mouse.x * 30, y: mouse.y * -40 }}
        className="absolute bottom-0 left-1/3 w-72 h-72 rounded-full bg-gold/15 blur-3xl"
      />

      <div className="relative mx-auto max-w-7xl px-5 sm:px-6 grid lg:grid-cols-12 gap-12 items-center">
        <motion.div style={{ opacity }} className="lg:col-span-6 space-y-8">
          <FadeIn>
            <motion.span
              whileHover={{ scale: 1.03 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-border bg-card/70 backdrop-blur text-xs uppercase tracking-widest text-muted-foreground shadow-soft"
            >
              <motion.span
                className="w-1.5 h-1.5 rounded-full bg-gold"
                animate={{ scale: [1, 1.6, 1], opacity: [1, 0.4, 1] }}
                transition={{ duration: 1.8, repeat: Infinity }}
              />
              <Sparkles size={14} className="text-gold" />
              JDA & Government Approved Land Specialists
            </motion.span>
          </FadeIn>
          <FadeIn delay={0.1}>
            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-[1.05]">
              Land you can{" "}
              <span className="text-gradient-gold italic">trust.</span>
              <br />
              Homes you'll{" "}
              <span className="relative inline-block">
                <RotatingWord words={["treasure.", "cherish.", "build on.", "invest in."]} />
                <motion.svg
                  aria-hidden
                  viewBox="0 0 300 12"
                  className="absolute -bottom-2 left-0 w-full h-3 text-gold"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 1.4, delay: 0.6, ease: "easeInOut" }}
                >
                  <motion.path
                    d="M2 8 Q 75 2 150 6 T 298 4"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                </motion.svg>
              </span>
            </h1>
          </FadeIn>
          <FadeIn delay={0.2}>
            <p className="text-lg text-muted-foreground max-w-xl leading-relaxed">
              We deal exclusively in <strong className="text-foreground">JDA / Govt approved</strong> residential and commercial plots, township land, agriculture land and luxury farmhouses — every title verified, every step transparent.
            </p>
          </FadeIn>
          <FadeIn delay={0.3}>
            <div className="flex flex-wrap gap-3">
              <motion.a
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
                href="#contact"
                className="group relative inline-flex items-center gap-2 rounded-full bg-primary text-primary-foreground px-6 py-3.5 font-medium shadow-elevated hover:shadow-glow transition-all overflow-hidden"
              >
                <motion.span
                  aria-hidden
                  className="absolute inset-0 bg-gradient-gold opacity-0 group-hover:opacity-100 transition-opacity"
                />
                <span className="relative">Explore Properties</span>
                <ArrowRight size={16} className="relative group-hover:translate-x-1 transition-transform" />
              </motion.a>
              <motion.a
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
                href="#services"
                className="inline-flex items-center gap-2 rounded-full border border-border bg-card/70 backdrop-blur px-6 py-3.5 font-medium hover:bg-surface-2 transition-colors"
              >
                Our Services
              </motion.a>
            </div>
          </FadeIn>

          <FadeIn delay={0.4}>
            <div className="flex items-center gap-6 pt-4">
              <div className="flex -space-x-2">
                {[1, 2, 3, 4].map((i) => (
                  <motion.div
                    key={i}
                    initial={{ scale: 0, opacity: 0 }}
                    animate={{ scale: 1, opacity: 1 }}
                    transition={{ delay: 0.6 + i * 0.08, type: "spring", stiffness: 300 }}
                    className="w-9 h-9 rounded-full border-2 border-background bg-gradient-to-br from-gold to-primary"
                  />
                ))}
              </div>
              <div className="text-sm">
                <div className="flex items-center gap-1 text-gold">
                  {[...Array(5)].map((_, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, rotate: -30 }}
                      animate={{ opacity: 1, rotate: 0 }}
                      transition={{ delay: 0.9 + i * 0.06 }}
                    >
                      <Star size={14} fill="currentColor" />
                    </motion.div>
                  ))}
                </div>
                <p className="text-muted-foreground">
                  <span className="text-foreground font-medium">2,600+ families</span> home-owners since 2007
                </p>
              </div>
            </div>
          </FadeIn>
        </motion.div>

        <motion.div style={{ y }} className="lg:col-span-6 relative">
          <ScaleIn>
            <motion.div
              style={{ x: mouse.x * -12, y: mouse.y * -12 }}
              className="relative rounded-3xl overflow-hidden shadow-elevated"
            >
              <motion.img
                src={heroImg}
                alt="Aerial view of a JDA approved residential township"
                width={1600}
                height={1024}
                className="w-full h-[520px] object-cover"
                initial={{ scale: 1.15 }}
                animate={{ scale: 1 }}
                transition={{ duration: 1.8, ease: [0.22, 1, 0.36, 1] }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-primary/50 via-transparent to-transparent" />

              {/* animated survey pins overlay */}
              <svg aria-hidden viewBox="0 0 400 300" className="absolute inset-0 w-full h-full text-gold">
                <motion.path
                  d="M40 220 L 130 150 L 220 180 L 320 90"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeDasharray="4 6"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{ duration: 2, delay: 1.2, ease: "easeInOut" }}
                />
                {[[40, 220], [130, 150], [220, 180], [320, 90]].map(([cx, cy], i) => (
                  <motion.circle
                    key={i}
                    cx={cx}
                    cy={cy}
                    r="5"
                    fill="currentColor"
                    initial={{ scale: 0 }}
                    animate={{ scale: [0, 1.6, 1] }}
                    transition={{ duration: 0.5, delay: 1.4 + i * 0.15 }}
                  />
                ))}
              </svg>
            </motion.div>
          </ScaleIn>
          {/* floating badge cards */}
          <motion.div
            initial={{ opacity: 0, y: 30, x: -30 }}
            animate={{ opacity: 1, y: 0, x: 0 }}
            transition={{ delay: 1, duration: 0.7 }}
            whileHover={{ y: -4, scale: 1.03 }}
            style={{ x: mouse.x * 8, y: mouse.y * 8 }}
            className="absolute -left-4 md:-left-10 top-10 bg-card rounded-2xl shadow-elevated p-4 flex items-center gap-3 border border-border"
          >
            <div className="relative w-10 h-10 rounded-xl bg-primary-soft grid place-items-center text-primary">
              <ShieldCheck size={20} />
              <motion.span
                aria-hidden
                className="absolute inset-0 rounded-xl border-2 border-primary/40"
                animate={{ scale: [1, 1.5], opacity: [0.6, 0] }}
                transition={{ duration: 2, repeat: Infinity }}
              />
            </div>
            <div className="text-sm">
              <div className="font-semibold">JDA Approved</div>
              <div className="text-muted-foreground text-xs">Verified title chain</div>
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 30, x: 30 }}
            animate={{ opacity: 1, y: 0, x: 0 }}
            transition={{ delay: 1.2, duration: 0.7 }}
            whileHover={{ y: -4, scale: 1.03 }}
            style={{ x: mouse.x * -8, y: mouse.y * -8 }}
            className="absolute -right-2 md:-right-6 bottom-8 bg-card rounded-2xl shadow-elevated p-4 border border-border"
          >
            <div className="flex items-center gap-2 text-xs uppercase tracking-widest text-gold font-semibold">
              <ShieldCheck size={14} /> Title Verified
            </div>
            <div className="font-display text-base font-semibold mt-1">JDA / Govt Approved</div>
            <div className="text-xs text-muted-foreground">Divyanshu Empire LLP</div>

          </motion.div>

          {/* Rotating compass badge */}
          <motion.div
            aria-hidden
            className="hidden md:grid absolute -top-6 right-8 w-16 h-16 rounded-full bg-card border border-border shadow-soft place-items-center text-primary"
            animate={{ rotate: 360 }}
            transition={{ duration: 22, repeat: Infinity, ease: "linear" }}
          >
            <Compass size={28} />
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

function RotatingWord({ words }: { words: string[] }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % words.length), 2400);
    return () => clearInterval(t);
  }, [words.length]);
  return (
    <span className="relative inline-block align-baseline min-w-[6ch]">
      <AnimatePresence mode="wait">
        <motion.span
          key={words[i]}
          initial={{ y: 30, opacity: 0, rotateX: -60 }}
          animate={{ y: 0, opacity: 1, rotateX: 0 }}
          exit={{ y: -30, opacity: 0, rotateX: 60 }}
          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          className="inline-block"
        >
          {words[i]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

function LocationMarquee() {
  const cities = [
    "Jaipur", "Ajmer Road", "Tonk Road", "Sikar Road", "Delhi NCR",
    "Gurgaon", "Manesar", "Neemrana", "Kukas", "Bhankrota",
    "Mahindra SEZ", "Ring Road", "Kalwar Road", "Pali", "Jodhpur",
    "Ajmer", "All Over Rajasthan",
  ];

  return (
    <section aria-label="Locations we serve" className="border-b border-border bg-background py-6">
      <Marquee speed={35}>
        {cities.map((c) => (
          <span
            key={c}
            className="flex items-center gap-2 text-lg font-display text-muted-foreground whitespace-nowrap"
          >
            <MapPin size={16} className="text-gold" />
            {c}
            <span className="mx-6 text-gold/40">✦</span>
          </span>
        ))}
      </Marquee>
    </section>
  );
}


function TrustBar() {
  return (
    <section className="border-y border-border bg-surface relative overflow-hidden">
      <motion.div
        aria-hidden
        className="absolute inset-0 bg-gradient-to-r from-transparent via-gold/5 to-transparent"
        animate={{ x: ["-100%", "100%"] }}
        transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
      />
      <div className="relative mx-auto max-w-7xl px-5 sm:px-6 py-10 md:py-12">
        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
          {trustPoints.map((t) => (
            <StaggerItem key={t.v} className="flex items-center gap-3 sm:gap-4 min-w-0">
              <motion.div
                whileHover={{ rotate: [0, -8, 8, 0], scale: 1.08 }}
                transition={{ duration: 0.5 }}
                className="relative w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-primary-soft grid place-items-center text-primary shrink-0"
              >
                <t.icon size={22} />
                <motion.span
                  aria-hidden
                  className="absolute inset-0 rounded-2xl border-2 border-gold/50"
                  initial={{ scale: 1, opacity: 0.6 }}
                  animate={{ scale: 1.4, opacity: 0 }}
                  transition={{ duration: 2, repeat: Infinity, ease: "easeOut" }}
                />
              </motion.div>
              <div className="min-w-0">
                <div className="font-display text-2xl sm:text-3xl font-semibold">
                  <CountUp to={t.num} suffix={t.suffix} />
                </div>
                <div className="text-sm text-muted-foreground">{t.v}</div>
              </div>

            </StaggerItem>
          ))}
        </StaggerContainer>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="services" className="py-16 sm:py-20 md:py-32 relative grain">
      <div className="mx-auto max-w-7xl px-5 sm:px-6">
        <div className="max-w-2xl mb-16">
          <Reveal>
            <span className="text-xs uppercase tracking-widest text-gold font-medium">What we deal in</span>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="mt-4 text-3xl sm:text-4xl md:text-5xl font-semibold leading-tight">
              Nine categories.{" "}
              <span className="text-gradient-gold italic">One promise</span> — approved land, honest deals.
            </h2>
          </Reveal>
        </div>

        <StaggerContainer stagger={0.08} className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((s) => (
            <StaggerItem key={s.title}>
              <TiltCard className="h-full">
              <motion.article
                whileHover={{ y: -6 }}
                transition={{ type: "spring", stiffness: 260, damping: 22 }}
                className="group relative h-full rounded-3xl overflow-hidden border border-border bg-card shadow-soft hover:shadow-elevated transition-shadow"
              >
                <div className="relative h-56 overflow-hidden">
                  <motion.img
                    src={s.img}
                    alt={s.title}
                    loading="lazy"
                    width={1200}
                    height={900}
                    className="w-full h-full object-cover"
                    whileHover={{ scale: 1.08 }}
                    transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-primary/60 via-transparent to-transparent" />
                  {s.tag && (
                    <span className="absolute top-4 right-4 text-xs font-medium px-3 py-1 rounded-full bg-gradient-gold text-gold-foreground shadow-soft">
                      {s.tag}
                    </span>
                  )}
                  <div className="absolute bottom-4 left-4 w-11 h-11 rounded-xl bg-card/95 backdrop-blur grid place-items-center text-primary shadow-soft">
                    <s.icon size={20} />
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="font-display text-xl font-semibold">{s.title}</h3>
                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{s.desc}</p>
                  <a
                    href="#contact"
                    className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-primary group-hover:gap-3 transition-all"
                  >
                    Enquire now <ArrowRight size={14} />
                  </a>
                </div>
              </motion.article>
              </TiltCard>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </div>
    </section>
  );
}

function Featured() {
  return (
    <section id="featured" className="py-16 sm:py-20 md:py-32 bg-gradient-soft relative overflow-hidden">
      <motion.div
        aria-hidden
        className="absolute top-20 right-10 w-64 h-64 rounded-full bg-gold/20 blur-3xl animate-float"
      />
      <div className="mx-auto max-w-7xl px-5 sm:px-6">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
          <Reveal direction="left">
            <div className="relative">
              <div className="rounded-3xl overflow-hidden shadow-elevated">
                <img
                  src={farmhouseImg}
                  alt="Luxury farmhouse with pool and palm trees"
                  loading="lazy"
                  width={1200}
                  height={900}
                  className="w-full h-[560px] object-cover"
                />
              </div>
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.3, duration: 0.6 }}
                className="absolute -bottom-6 -right-6 bg-card p-6 rounded-2xl shadow-elevated border border-border max-w-xs hidden md:block"
              >
                <div className="text-xs uppercase tracking-widest text-gold font-medium">Featured</div>
                <div className="font-display text-2xl font-semibold mt-1">Emerald Farmhouse Estate</div>
                <div className="text-sm text-muted-foreground mt-1">4 BHK · 1.2 Acres · Pool</div>
                <div className="mt-3 flex items-center justify-between">
                  <span className="text-sm font-medium text-primary">Price on request</span>
                  <ArrowRight size={18} className="text-gold" />
                </div>

              </motion.div>
            </div>
          </Reveal>

          <div className="space-y-6">
            <Reveal>
              <span className="text-xs uppercase tracking-widest text-gold font-medium">Why Divyanshu Empire</span>
            </Reveal>
            <Reveal delay={0.05}>
              <h2 className="text-3xl sm:text-4xl md:text-5xl font-semibold leading-tight">
                Every parcel <span className="italic text-gradient-gold">audited.</span> Every promise honoured.
              </h2>
            </Reveal>
            <Reveal delay={0.1}>
              <p className="text-muted-foreground text-lg leading-relaxed">
                From a 100-yard plot to a 20-acre township, our team runs a 27-point due-diligence check on every property before you even see it.
              </p>
            </Reveal>

            <StaggerContainer stagger={0.08} className="space-y-4 pt-4">
              {[
                "JDA / Govt approval verified in writing",
                "Encumbrance & title chain for last 30 years",
                "Loan-eligible with 20+ leading banks",
                "Post-registration mutation & possession support",
              ].map((line) => (
                <StaggerItem key={line} className="flex items-start gap-3">
                  <CheckCircle2 className="text-gold shrink-0 mt-0.5" size={20} />
                  <span className="text-foreground">{line}</span>
                </StaggerItem>
              ))}
            </StaggerContainer>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section id="process" className="py-16 sm:py-20 md:py-32">
      <div className="mx-auto max-w-7xl px-5 sm:px-6">
        <div className="text-center max-w-2xl mx-auto mb-16">
          <Reveal>
            <span className="text-xs uppercase tracking-widest text-gold font-medium">How it works</span>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="mt-4 text-3xl sm:text-4xl md:text-5xl font-semibold">
              Four steps from{" "}
              <span className="italic text-gradient-gold">enquiry to keys.</span>
            </h2>
          </Reveal>
        </div>

        <div className="relative">
          {/* Animated dashed connector across steps */}
          <svg
            aria-hidden
            className="hidden lg:block absolute top-16 left-0 w-full h-8 text-gold pointer-events-none"
            viewBox="0 0 1200 40"
            preserveAspectRatio="none"
          >
            <motion.path
              d="M 60 20 L 1140 20"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeDasharray="6 8"
              initial={{ pathLength: 0 }}
              whileInView={{ pathLength: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 2, ease: "easeInOut" }}
            />
          </svg>

          <StaggerContainer stagger={0.1} className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
            {process.map((p, i) => (
              <StaggerItem key={p.step}>
                <motion.div
                  whileHover={{ y: -6, scale: 1.02 }}
                  className="relative h-full p-8 rounded-3xl border border-border bg-card shadow-soft"
                >
                  <motion.div
                    className="relative w-14 h-14 mb-4 rounded-2xl bg-gradient-gold grid place-items-center text-gold-foreground shadow-glow"
                    whileHover={{ rotate: 360 }}
                    transition={{ duration: 0.8 }}
                  >
                    <span className="font-display text-xl font-semibold">{i + 1}</span>
                  </motion.div>
                  <div className="font-display text-5xl font-semibold text-gradient-gold opacity-30">{p.step}</div>
                  <h3 className="mt-2 font-display text-xl font-semibold">{p.title}</h3>
                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{p.desc}</p>
                </motion.div>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="py-16 sm:py-20 md:py-32 bg-primary text-primary-foreground relative overflow-hidden">
      <motion.div
        aria-hidden
        className="absolute -top-20 -left-20 w-96 h-96 rounded-full bg-gold/20 blur-3xl animate-float"
      />
      <motion.div
        aria-hidden
        className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-gold/10 blur-3xl animate-float-slow"
      />
      <div className="relative mx-auto max-w-7xl px-5 sm:px-6">
        <div className="max-w-2xl mb-16">
          <Reveal>
            <span className="text-xs uppercase tracking-widest text-gold font-medium">Owner stories</span>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="mt-4 text-3xl sm:text-4xl md:text-5xl font-semibold">
              Trusted by families,{" "}
              <span className="italic text-gradient-gold">chosen by developers.</span>
            </h2>
          </Reveal>
        </div>

        <StaggerContainer stagger={0.1} className="grid md:grid-cols-3 gap-6">
          {testimonials.map((t) => (
            <StaggerItem key={t.name}>
              <motion.blockquote
                whileHover={{ y: -4 }}
                className="h-full p-8 rounded-3xl bg-primary-foreground/5 backdrop-blur border border-primary-foreground/10"
              >
                <div className="flex gap-1 text-gold mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} size={16} fill="currentColor" />
                  ))}
                </div>
                <p className="text-primary-foreground/90 leading-relaxed">"{t.text}"</p>
                <footer className="mt-6 pt-6 border-t border-primary-foreground/10">
                  <div className="font-semibold">{t.name}</div>
                  <div className="text-sm text-primary-foreground/60">{t.role}</div>
                </footer>
              </motion.blockquote>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </div>
    </section>
  );
}

function FAQ() {
  return (
    <section id="faq" className="py-16 sm:py-20 md:py-32">
      <div className="mx-auto max-w-4xl px-5 sm:px-6">
        <div className="text-center mb-16">
          <Reveal>
            <span className="text-xs uppercase tracking-widest text-gold font-medium">Questions, answered</span>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="mt-4 text-3xl sm:text-4xl md:text-5xl font-semibold">
              JDA approved plots & land buying — <span className="italic text-gradient-gold">FAQs</span>
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p className="mt-5 text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Everything buyers ask us about JDA / Govt approved residential and commercial
              plots, township land, agriculture land, farm house plots, patta, registration
              and home loans in Jaipur, Rajasthan.
            </p>
          </Reveal>
        </div>


        <StaggerContainer stagger={0.06} className="space-y-4">
          {faqs.map((f) => (
            <StaggerItem key={f.q}>
              <details className="group rounded-2xl border border-border bg-card p-6 open:shadow-soft transition-shadow">
                <summary className="cursor-pointer list-none flex items-center justify-between gap-4 font-medium">
                  {f.q}
                  <span className="w-8 h-8 rounded-full bg-primary-soft grid place-items-center text-primary transition-transform group-open:rotate-45">
                    +
                  </span>
                </summary>
                <p className="mt-4 text-muted-foreground leading-relaxed">{f.a}</p>
              </details>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="py-12 sm:py-20 md:py-32 bg-gradient-soft grain">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <div className="rounded-2xl sm:rounded-3xl md:rounded-[2rem] bg-card border border-border shadow-elevated p-5 sm:p-8 md:p-14 grid lg:grid-cols-2 gap-8 sm:gap-12 items-center">
          <div>
            <Reveal>
              <span className="text-xs uppercase tracking-widest text-gold font-medium">Get in touch</span>
            </Reveal>
            <Reveal delay={0.05}>
              <h2 className="mt-3 sm:mt-4 text-2xl sm:text-4xl md:text-5xl font-semibold leading-tight">
                Let's find the{" "}
                <span className="italic text-gradient-gold">right land</span> for you.
              </h2>
            </Reveal>
            <Reveal delay={0.1}>
              <p className="mt-3 sm:mt-4 text-muted-foreground text-base sm:text-lg">
                Share your requirement — a specialist will call you back within 2 hours with matching approved parcels.
              </p>
            </Reveal>
            <div className="mt-8 space-y-5">
              <a href={TEL_LINK} className="flex items-center gap-3 min-w-0 hover:text-primary transition-colors">
                <div className="w-10 h-10 shrink-0 rounded-xl bg-primary-soft grid place-items-center text-primary">
                  <Phone size={18} />
                </div>
                <span className="font-medium break-words">{PHONE_DISPLAY}</span>
              </a>
              <a
                href={WHATSAPP_LINK}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 min-w-0 hover:text-primary transition-colors"
              >
                <div className="w-10 h-10 shrink-0 rounded-xl bg-[#25D366]/15 grid place-items-center text-[#25D366]">
                  <WhatsAppIcon size={18} />
                </div>
                <span className="font-medium break-words">WhatsApp {PHONE_DISPLAY}</span>
              </a>
              <a href={EMAIL_LINK} className="flex items-center gap-3 min-w-0 hover:text-primary transition-colors">
                <div className="w-10 h-10 shrink-0 rounded-xl bg-primary-soft grid place-items-center text-primary">
                  <Mail size={18} />
                </div>
                <span className="font-medium break-all">{EMAIL}</span>
              </a>
              <div className="flex items-start gap-3 pt-2">
                <div className="w-10 h-10 shrink-0 rounded-xl bg-gold/15 grid place-items-center text-gold">
                  <MapPin size={18} />
                </div>
                <div className="min-w-0">
                  <address className="not-italic font-medium leading-relaxed break-words">{ADDRESS}</address>
                  <motion.a
                    href={MAPS_LINK}
                    target="_blank"
                    rel="noopener noreferrer"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.97 }}
                    className="mt-3 inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-full bg-primary text-primary-foreground text-sm font-medium px-5 py-2.5 shadow-soft hover:opacity-90 transition-opacity"
                  >
                    <Compass size={16} /> Get Directions
                  </motion.a>
                </div>
              </div>
            </div>

          </div>

          <motion.form
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            onSubmit={(e) => e.preventDefault()}
            className="space-y-4"
          >
            <div className="grid sm:grid-cols-2 gap-4">
              <Field label="Your Name" id="name" placeholder="Full name" />
              <Field label="Phone" id="phone" type="tel" placeholder="+91" />
            </div>
            <Field label="Email" id="email" type="email" placeholder="you@example.com" />
            <div>
              <label htmlFor="interest" className="text-sm font-medium">Interested In</label>
              <select
                id="interest"
                className="mt-1.5 w-full h-12 rounded-xl border border-input bg-background px-4 text-sm"
              >
                <option>JDA / Govt approved residential plot</option>
                <option>Commercial property</option>
                <option>Township land</option>
                <option>Agriculture land</option>
                <option>Farmhouse</option>
              </select>
            </div>
            <div>
              <label htmlFor="msg" className="text-sm font-medium">Message</label>
              <textarea
                id="msg"
                rows={3}
                placeholder="Budget, preferred location, timeline…"
                className="mt-1.5 w-full rounded-xl border border-input bg-background px-4 py-3 text-sm"
              />
            </div>
            <motion.button
              whileTap={{ scale: 0.97 }}
              type="submit"
              className="w-full h-12 rounded-xl bg-primary text-primary-foreground font-medium shadow-soft hover:shadow-elevated transition-shadow"
            >
              Request Callback
            </motion.button>
          </motion.form>
        </div>
      </div>
    </section>
  );
}

function Field({
  label,
  id,
  type = "text",
  placeholder,
}: {
  label: string;
  id: string;
  type?: string;
  placeholder?: string;
}) {
  return (
    <div>
      <label htmlFor={id} className="text-sm font-medium">{label}</label>
      <input
        id={id}
        type={type}
        placeholder={placeholder}
        className="mt-1.5 w-full h-12 rounded-xl border border-input bg-background px-4 text-sm"
      />
    </div>
  );
}

function Footer() {
  return (
    <footer className="bg-primary text-primary-foreground">
      <div className="mx-auto max-w-7xl px-5 sm:px-6 py-12 grid sm:grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
        <div className="md:col-span-2">
          <div className="flex items-center gap-2 font-display text-2xl font-semibold">
            <span className="rounded-lg bg-background px-3 py-2">
              <img src={logoAsset.url} alt="Divyanshu Empire LLP logo" className="h-9 w-auto" />
            </span>
            <span className="sr-only">{BRAND}</span>
          </div>
          <p className="mt-4 text-primary-foreground/70 max-w-md leading-relaxed">
            Specialists in JDA & Government approved residential plots, commercial properties, township land, agriculture land and farmhouses.
          </p>
          <address className="mt-3 not-italic text-sm text-primary-foreground/70">{ADDRESS}</address>
          <a href={MAPS_LINK} target="_blank" rel="noopener noreferrer" className="mt-2 inline-flex items-center gap-1.5 text-xs uppercase tracking-widest text-gold hover:underline">
            <Compass size={13} /> Get Directions
          </a>
        </div>
        <div>
          <div className="font-semibold mb-4">Explore</div>
          <ul className="space-y-2 text-primary-foreground/70 text-sm">
            <li><a href="#services" className="hover:text-gold">Services</a></li>
            <li><a href="#featured" className="hover:text-gold">Properties</a></li>
            <li><a href="#process" className="hover:text-gold">Process</a></li>
            <li><a href="#faq" className="hover:text-gold">FAQ</a></li>
          </ul>
        </div>
        <div>
          <div className="font-semibold mb-4">Contact</div>
          <ul className="space-y-2 text-primary-foreground/70 text-sm">
            <li>
              <a href={TEL_LINK} className="hover:text-gold">{PHONE_DISPLAY}</a>
            </li>
            <li>
              <a href={WHATSAPP_LINK} target="_blank" rel="noopener noreferrer" className="hover:text-gold inline-flex items-center gap-1.5">
                <WhatsAppIcon size={14} /> WhatsApp
              </a>
            </li>
            <li><a href={EMAIL_LINK} className="hover:text-gold">{EMAIL}</a></li>
            <li>Jaipur · Delhi NCR · India</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-primary-foreground/10">
        <div className="mx-auto max-w-7xl px-5 sm:px-6 py-6 text-sm text-primary-foreground/60 flex flex-wrap justify-between gap-4">
          <span>© {new Date().getFullYear()} {BRAND}. All rights reserved.</span>
          <span>Built on trust · Verified titles · Transparent deals</span>
        </div>
      </div>

    </footer>
  );
}