"use client";

import { useState, useRef, MouseEvent } from "react";
import Image from "next/image";

import { FloatingHouse, RotatingKey } from "./PropertyAnimations";

export default function Lifestyle() {
    const [zoomProps, setZoomProps] = useState({ x: 0, y: 0, show: false });
    const imageRef = useRef<HTMLDivElement>(null);

    const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
        if (!imageRef.current) return;

        const { left, top, width, height } = imageRef.current.getBoundingClientRect();
        const x = ((e.clientX - left) / width) * 100;
        const y = ((e.clientY - top) / height) * 100;

        setZoomProps({ x, y, show: true });
    };

    const handleMouseLeave = () => {
        setZoomProps((prev) => ({ ...prev, show: false }));
    };

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

            {/* Decorative Animations */}
            <div className="absolute top-20 right-10 opacity-30 hidden lg:block">
                <FloatingHouse />
            </div>
            <div className="absolute bottom-20 left-10 opacity-20 hidden lg:block">
                <RotatingKey />
            </div>

            <div className="max-w-7xl mx-auto px-6 relative z-10">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    {/* Image Side with Zoom Effect */}
                    <div
                        className="order-2 lg:order-1 relative h-[600px] rounded-3xl overflow-hidden shadow-2xl group cursor-crosshair"
                        ref={imageRef}
                        onMouseMove={handleMouseMove}
                        onMouseLeave={handleMouseLeave}
                    >
                        <Image
                            src="/assets/images/home/experience.webp"
                            alt="Aurora Lifestyle Clubhouse and Amenities"
                            fill
                            className={`object-cover transition-transform duration-200 ease-out ${zoomProps.show ? 'scale-[2.5]' : 'scale-100'}`}
                            style={{
                                transformOrigin: `${zoomProps.x}% ${zoomProps.y}%`
                            }}
                        />

                        {/* Overlay Text - Hidden on Hover to see details */}
                        <div className={`absolute inset-0 bg-gradient-to-tr from-gray-800/60 to-transparent flex items-center justify-center pointer-events-none transition-opacity duration-300 ${zoomProps.show ? 'opacity-0' : 'opacity-100'}`}>
                            <span className="text-xl font-light tracking-widest uppercase text-white border border-white/30 px-6 py-2 rounded-full backdrop-blur-sm">
                                Clubhouse & Amenities
                            </span>
                        </div>
                    </div>

                    {/* Content Side */}
                    <div className="order-1 lg:order-2 space-y-8">
                        <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground">
                            Experience the <br />
                            <span className="text-primary">Aurora Lifestyle.</span>
                        </h2>

                        <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
                            Designed for those who seek more than just a home. Immerse yourself in a world of leisure, wellness, and community.
                        </p>

                        <ul className="space-y-6 mt-8">
                            {[
                                {
                                    title: "World-Class Clubhouse",
                                    desc: "A sprawling hub for recreation and social gatherings.",
                                },
                                {
                                    title: "Green Spaces",
                                    desc: "Acres of landscaped gardens and breathing spaces.",
                                },
                                {
                                    title: "24/7 Security",
                                    desc: "Advanced surveillance and gated community safety.",
                                },
                            ].map((item, idx) => (
                                <li key={idx} className="flex items-start gap-4">
                                    <div className="mt-1 p-2 bg-white dark:bg-gray-800 rounded-full shadow-sm text-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                                        </svg>
                                    </div>
                                    <div>
                                        <h3 className="text-xl font-semibold text-foreground">{item.title}</h3>
                                        <p className="text-gray-600 dark:text-gray-400">{item.desc}</p>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    );
}