export default function PetGroomingLanding() {
    return (
        <main className="bg-white text-neutral-800 font-sans">

            <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-orange-100">
                <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
                    <div className="flex items-center gap-2 font-bold text-lg">
                        🐾 <span>Dwivedi <span className="text-orange-500">Pets</span></span>
                    </div>
                    <a href="#book" className="bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm px-5 py-2.5 rounded-full transition">
                        Book a Groomer
                    </a>
                </div>
            </nav>

            <header className="max-w-6xl mx-auto px-6 pt-16 pb-12 grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <p className="text-orange-500 font-semibold text-sm uppercase tracking-wide mb-3">
                        Home-Based Grooming · Kanpur
                    </p>
                    <h1 className="text-4xl md:text-5xl font-extrabold leading-tight mb-5">
                        Dwivedi Salon-quality grooming, <span className="text-orange-500">at your doorstep.</span>
                    </h1>
                    <p className="text-neutral-600 text-lg mb-8 max-w-md">
                        Our groomers bring the tub, tools, and six years of trust straight
                        to your home — so your dog or cat gets pampered where they feel safest.
                    </p>
                    <div className="flex flex-wrap gap-4 mb-6">
                        <a href="#book" className="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-7 py-3.5 rounded-full transition">
                            Book a Groomer
                        </a>
                        <a href="tel:+919140579874" className="border border-neutral-300 hover:border-neutral-400 font-semibold px-7 py-3.5 rounded-full transition">
                            Call +91 91405 79874
                        </a>
                    </div>
                    <div className="flex flex-wrap gap-5 text-sm font-medium text-neutral-500">
                        <span>🐾 2,200+ happy pet parents</span>
                        <span>🐾 6+ years in Kanpur</span>
                    </div>
                </div>
                <div className="rounded-3xl overflow-hidden shadow-xl `aspect-[4/5]`">
                    <img
                        src="https://dwivedipets.co.in/wp-content/uploads/2025/12/cat-getting-a-bath.webp"
                        alt="Pet grooming at home"
                        className="w-full h-full object-cover"
                    />
                </div>
            </header>

            <section className="bg-neutral-900 text-white py-8">
                <div className="max-w-6xl mx-auto px-6 flex flex-wrap justify-around gap-6 text-center">
                    {[
                        ["2,200+", "Happy Pet Parents"],
                        ["6+ yrs", "Trusted in Kanpur"],
                        ["100%", "Doorstep Service"],
                        ["4.9★", "Average Rating"],
                    ].map(([num, label]) => (
                        <div key={label}>
                            <div className="text-2xl font-extrabold text-orange-400">{num}</div>
                            <div className="text-xs uppercase tracking-wide text-neutral-400 mt-1">{label}</div>
                        </div>
                    ))}
                </div>
            </section>

            <section id="packages" className="max-w-6xl mx-auto px-6 py-20">
                <h2 className="text-3xl font-extrabold text-center mb-2">Our Grooming Menu</h2>
                <p className="text-center text-neutral-500 mb-12">Pick the visit that fits your pet</p>
                <div className="grid md:grid-cols-4 gap-6">
                    {[
                        { name: "Spa Bath", price: "₹799", items: ["Bath with shampoo & conditioner", "Blow dry & combing", "Nail clipping", "Ear & eye cleaning"] },
                        { name: "Bath + Basic Grooming", price: "₹999", items: ["Everything in Spa Bath", "Hygiene haircut & face trim", "Dental spray"], featured: true },
                        { name: "Full Grooming", price: "₹1,299", items: ["Full body + hygiene haircut", "Teeth brushing", "Body massage"] },
                        { name: "Trans-fur-mation", price: "₹1,099", items: ["Full body haircut", "Nail clipping", "Ear & eye cleaning"] },
                    ].map((p) => (
                        <div
                            key={p.name}
                            className={`rounded-2xl p-6 flex flex-col border ${p.featured ? "bg-orange-500 text-white border-orange-500" : "bg-white border-neutral-200"
                                }`}
                        >
                            <p className={`text-xs font-bold uppercase tracking-wide mb-2 ${p.featured ? "text-orange-100" : "text-orange-500"}`}>
                                {p.name}
                            </p>
                            <p className="text-2xl font-extrabold mb-4">{p.price}</p>
                            <ul className="text-sm space-y-2 mb-6 flex-1">
                                {p.items.map((i) => (
                                    <li key={i} className="flex gap-2">
                                        <span>✓</span> {i}
                                    </li>
                                ))}
                            </ul>
                            <a
                                href={`https://api.whatsapp.com/send?phone=+919140579874&text=${encodeURIComponent(
                                    `Hi, I'd like to book the ${p.name} (${p.price}) grooming package.`
                                )}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className={`text-center font-semibold py-2.5 rounded-full transition ${p.featured ? "bg-white text-orange-600" : "border border-neutral-300 hover:border-neutral-400"
                                    }`}
                            >
                                Book This
                            </a>
                        </div>
                    ))}
                </div>
            </section>

            <section id="book" className="bg-orange-500 text-white text-center py-20 px-6">
                <h2 className="text-3xl md:text-4xl font-extrabold mb-3">Let's give your pet a spa day.</h2>
                <p className="text-orange-100 mb-8 max-w-md mx-auto">
                    Message us on WhatsApp with your pet's breed and preferred time.
                </p>
                <a
                    href="https://api.whatsapp.com/send?phone=+919140579874&text=Hi%2C+I%27d+like+to+book+a+grooming+session"
                    className="bg-white text-orange-600 font-bold px-8 py-3.5 rounded-full inline-block"
                >
                    Book on WhatsApp
                </a>
            </section>

            {/* FOOTER */}
            <footer className="pt-16 pb-8" style={{ backgroundColor: "#2B1B47" }}>
                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-5 gap-10 mb-12">
                    {/* Brand + description — stays on the left */}
                    <div className="md:col-span-2">
                        <div className="flex items-center gap-2 font-bold text-lg text-white mb-4">
                            🐾 Dwivedi <span className="text-orange-500">Pets</span>
                        </div>
                        <p className="text-sm text-purple-200/70 leading-relaxed max-w-sm">
                            Trusted for 6 years! Dwivedi Pets is Kanpur's leading Pet Shop & Home
                            Care Specialist. We provide Pure Bred Pets, premium Home-Based Pet
                            Grooming, Dog Training, Pet Hostel, Day Care, and specialized Aquarium
                            Maintenance services — all brought to your home!
                        </p>
                        <div className="flex gap-3 mt-6">
                            <a href="https://www.facebook.com/share/1BUSnjUkdy/" target="_blank" rel="noopener noreferrer"
                                className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-800 font-bold hover:bg-orange-500 hover:text-white transition">f</a>
                            <a href="https://youtube.com/@dwivedipetshopkanpur" target="_blank" rel="noopener noreferrer"
                                className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-800 font-bold hover:bg-orange-500 hover:text-white transition">▶</a>
                            <a href="https://www.instagram.com/officials_dwivedipetshop" target="_blank" rel="noopener noreferrer"
                                className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-800 font-bold hover:bg-orange-500 hover:text-white transition">IG</a>
                        </div>
                    </div>

                    <div>
                        <h4 className="text-white font-bold text-lg mb-4">Working Hours</h4>
                        <div className="text-sm text-purple-200/70 space-y-3">
                            <div><p className="text-purple-300/60">Monday – Friday</p><p className="text-white font-medium">9:00 am – 10:00pm</p></div>
                            <div><p className="text-purple-300/60">Saturday</p><p className="text-white font-medium">9:00 am – 10:00pm</p></div>
                            <div><p className="text-purple-300/60">Sunday</p><p className="text-white font-medium">9:00 am – 10:00pm</p></div>
                        </div>
                    </div>

                    <div>
                        <h4 className="text-white font-bold text-lg mb-4">Navigation</h4>
                        <ul className="text-sm space-y-2.5 text-purple-200/70">
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="https://dwivedipets.co.in/about/" className="hover:text-orange-400">About Us</a></li>
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="https://dwivedipets.co.in/contact/" className="hover:text-orange-400">Contact Us</a></li>
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="https://dwivedipets.co.in/pricing/" className="hover:text-orange-400">Packages</a></li>
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="https://dwivedipets.co.in/terms-and-condition/" className="hover:text-orange-400">Term & Conditions</a></li>
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="https://dwivedipets.co.in/privacy-policy/" className="hover:text-orange-400">Privacy Policy</a></li>
                            <li className="flex items-center gap-2"><span className="text-orange-400">➔</span><a href="#faq" className="hover:text-orange-400">FAQ</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 className="text-white font-bold text-lg mb-4">Contact Us</h4>
                        <p className="text-white text-sm font-medium mb-1">Address:</p>
                        <p className="text-sm text-purple-200/70 mb-4">
                            1322, Bara Sirohi, IIT, Kalyanpur, Kanpur, Uttar Pradesh 208016
                        </p>
                        <p className="text-white text-sm font-medium mb-1">Email:</p>
                        <p className="text-sm text-purple-200/70">Dwivedipets208016@gmail.com</p>
                    </div>
                </div>

                <div className="text-center text-xs text-purple-300/50 border-t border-white/10 pt-6 max-w-6xl mx-auto px-6">
                    Copyright © Dwivedi Pet Shop & Fish Aquariums 2026. All rights reserved.
                </div>
            </footer>
        </main>
    );
}