"use client";

import Link from "next/link";
import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";

export default function About() {
    const containerRef = useRef(null);
    const { scrollYProgress } = useScroll({
        target: containerRef,
        offset: ["start end", "end start"]
    });

    // Parallax effect: Moving the image vertically as the user scrolls
    // The image height is significantly larger than the container
    // We move from 0% (top aligned) to a negative percentage to reveal the bottom
    const y = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]);

    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 lg: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>

                    {/* Parallax Image Container */}
                    <div
                        ref={containerRef}
                        className="
                            h-[400px] 
                            w-full 
                            mx-auto 
                            rounded-2xl 
                            shadow-2xl 
                            overflow-hidden 
                            relative
                        "
                    >
                        <motion.div
                            style={{ y }}
                            className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform"
                        >
                            <img
                                src="/assets/images/home/where.webp"
                                alt="Where Sky Meets Soil"
                                className="w-full h-full object-cover"
                            />
                        </motion.div>
                    </div>
                </div>
            </div>
        </section>
    );
}