"use client";

import Image from "next/image";
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
import { motion } from "framer-motion";

export default function WhyChooseUs() {
    const features = [
        {
            title: "Prime Locations",
            description: "Strategically located in the heart of North Bengaluru's growth corridor.",
            image: "/assets/images/home/why/location.webp",
        },
        {
            title: "Smart Homes",
            description: "Future-ready infrastructure with integrated smart home automation.",
            image: "/assets/images/home/why/smart-home.webp",
        },
        {
            title: "Transparent Deals",
            description: "100% clear documentation and legal compliance for peace of mind.",
            image: "/assets/images/home/why/transparent-deals.webp",
        },
        {
            title: "Customer First",
            description: "Dedicated support team to guide you through every step of the journey.",
            image: "/assets/images/home/why/customer-first.webp",
        },
    ];

    return (
        <section className="py-24 bg-secondary dark:bg-gray-900/50 relative overflow-hidden">

            {/* Decorative Animations */}
            <div className="absolute top-20 left-10 opacity-50 hidden lg:block">
                <FloatingHouse />
            </div>
            <div className="absolute top-1/2 right-10 -translate-y-1/2 opacity-40 hidden lg:block">
                <RotatingKey />
            </div>
            <div className="absolute bottom-10 left-1/4 opacity-30 hidden lg:block">
                <GrowingBuilding />
            </div>

            <div className="max-w-7xl mx-auto px-6 relative z-10">
                <motion.div
                    className="text-center mb-16"
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true, margin: "-100px" }}
                    transition={{ duration: 0.6 }}
                >
                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
                        Why Sky and Soil?
                    </h2>
                    <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                        We bridge the gap between your dreams and reality with premium properties and unmatched service.
                    </p>
                </motion.div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {features.map((feature, index) => (
                        <motion.div
                            key={index}
                            className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-500 flex flex-col items-center text-center group"
                            initial={{ opacity: 0, y: 40 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true, margin: "-50px" }}
                            transition={{ duration: 0.5, delay: index * 0.15 }}
                            whileHover={{ y: -10, transition: { duration: 0.3 } }}
                        >
                            <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-full group-hover:scale-110 group-hover:rotate-6 transition-all duration-300 relative w-20 h-20 flex items-center justify-center">
                                <div className="relative w-[80%] h-[80%]">
                                    <Image
                                        src={feature.image}
                                        alt={feature.title}
                                        fill
                                        className="object-contain"
                                    />
                                </div>
                            </div>
                            <h3 className="text-xl font-semibold text-foreground mb-3">
                                {feature.title}
                            </h3>
                            <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                                {feature.description}
                            </p>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
}
