"use client";

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

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

export default function About() {
    const [rotation, setRotation] = useState({ x: -10, y: 0 });
    const [isHovering, setIsHovering] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);

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

        const rect = containerRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const width = rect.width;
        const height = rect.height;

        // Calculate rotation based on mouse position
        // Y-axis rotation (horizontal mouse movement): -180 to 180 degrees
        const rotateY = ((x / width) * 360) - 180;

        // X-axis rotation (vertical mouse movement): -90 (top view) to 90 (bottom view)
        // Inverting Y so top of screen corresponds to seeing the top face
        const rotateX = -(((y / height) * 180) - 90);

        setRotation({ x: rotateX, y: rotateY });
    };

    const handleMouseEnter = () => {
        setIsHovering(true);
    };

    const handleMouseLeave = () => {
        setIsHovering(false);
        setRotation({ x: -10, y: 0 }); // Reset to default angle
    };

    return (
        <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">

            {/* Decorative Animation */}
            <div className="absolute top-10 left-10 opacity-30 hidden lg:block">
                <FloatingHouse />
            </div>
            <div className="absolute bottom-20 right-10 opacity-20 hidden lg:block">
                <RotatingKey />
            </div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-10 pointer-events-none hidden lg:block">
                <GrowingBuilding className="scale-150" />
            </div>

            <div className="max-w-7xl mx-auto px-6 relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
                    {/* Text Content */}
                    <div className="space-y-8 z-10">
                        <h2 className="text-4xl font-bold tracking-tight text-foreground">
                            Where the Sky Meets <br />
                            <span className="text-accent dark:text-accent">The Soil.</span>
                        </h2>

                        <div className="space-y-6 text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
                            <p>
                                At Sky and Soil, we curate exceptional living spaces that harmonize with nature. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.
                            </p>
                            <p>
                                Our mission is to connect you with homes that offer not just a roof over your head, but a lifestyle grounded in luxury and elevated by nature. From North Bengaluru to Sarjapur, discover a life of abundance.
                            </p>
                        </div>

                        <Link href="/about" className="text-primary font-medium hover:text-blue-700 transition-colors flex items-center gap-2 group">
                            Learn More About Us
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-4 h-4 group-hover:translate-x-1 transition-transform">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                            </svg>
                        </Link>
                    </div>

                    {/* 3D Cube Container */}
                    <div
                        className="h-[500px] w-full flex items-center justify-center perspective-container cursor-move"
                        ref={containerRef}
                        onMouseMove={handleMouseMove}
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                    >
                        <div
                            className={`cube relative w-64 h-64 md:w-80 md:h-80 transform-style-3d ${!isHovering ? 'animate-spin-slow' : ''}`}
                            style={isHovering ? { transform: `rotateX(${rotation.x}deg) rotateY(${rotation.y}deg)` } : {}}
                        >
                            {/* Front Face */}
                            <div className="absolute inset-0 transform translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
                                <Image
                                    src="/assets/images/home/front.webp"
                                    alt="Front View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Front View</div>
                            </div>

                            {/* Back Face */}
                            <div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
                                <Image
                                    src="/assets/images/home/back.webp"
                                    alt="Back View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Back View</div>
                            </div>

                            {/* Right Face */}
                            <div className="absolute inset-0 transform rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
                                <Image
                                    src="/assets/images/home/right.webp"
                                    alt="Right View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Right View</div>
                            </div>

                            {/* Left Face */}
                            <div className="absolute inset-0 transform -rotate-y-90 translate-z-32 md:translate-z-40 bg-white shadow-xl border border-white/20">
                                <Image
                                    src="/assets/images/home/left.webp"
                                    alt="Left View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Left View</div>
                            </div>

                            {/* Top Face */}
                            <div className="absolute inset-0 transform rotate-x-90 translate-z-32 md:translate-z-40 bg-gray-100 border border-white/20 flex items-center justify-center">
                                <Image
                                    src="/assets/images/home/top.webp"
                                    alt="Top View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Top View</div>
                            </div>

                            {/* Bottom Face */}
                            <div className="absolute inset-0 transform -rotate-x-90 translate-z-32 md:translate-z-40 bg-gray-100 border border-white/20 flex items-center justify-center shadow-2xl">
                                <Image
                                    src="/assets/images/home/bottom.webp"
                                    alt="Bottom View"
                                    fill
                                    className="object-cover"
                                />
                                <div className="absolute bottom-4 left-4 bg-black/70 text-white text-xs px-2 py-1 rounded">Bottom View</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <style jsx global>{`
                .perspective-container {
                    perspective: 1000px;
                }
                .transform-style-3d {
                    transform-style: preserve-3d;
                    transition: transform 0.1s ease-out; /* Smooth transition for mouse movement */
                }
                .translate-z-32 {
                    transform: rotateY(0deg) translateZ(8rem);
                }
                .translate-z-40 {
                    transform: rotateY(0deg) translateZ(10rem);
                }
                
                /* Custom transforms for faces */
                .cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(128px); }
                .cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(128px); }
                .cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(128px); }
                .cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(128px); }
                .cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(128px); }
                .cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(128px); }

                @media (min-width: 768px) {
                    .cube > div:nth-child(1) { transform: rotateY(0deg) translateZ(160px); }
                    .cube > div:nth-child(2) { transform: rotateY(180deg) translateZ(160px); }
                    .cube > div:nth-child(3) { transform: rotateY(90deg) translateZ(160px); }
                    .cube > div:nth-child(4) { transform: rotateY(-90deg) translateZ(160px); }
                    .cube > div:nth-child(5) { transform: rotateX(90deg) translateZ(160px); }
                    .cube > div:nth-child(6) { transform: rotateX(-90deg) translateZ(160px); }
                }

                @keyframes spin-slow {
                    from { transform: rotateX(-10deg) rotateY(0deg); }
                    to { transform: rotateX(-10deg) rotateY(360deg); }
                }
                .animate-spin-slow {
                    animation: spin-slow 20s linear infinite;
                }
            `}</style>
        </section>
    );
}