"use client";

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

export default function About() {
    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>

                    {/* Parallax Image Container */}
                    {/* Parallax Image Container - Visible on all screens */}
                    <div
                        className="h-[400px] md:h-[500px] w-full rounded-2xl shadow-2xl overflow-hidden"
                        style={{
                            backgroundImage: "url('/assets/images/home/where.webp')",
                            backgroundAttachment: "fixed",
                            backgroundPosition: "center",
                            backgroundRepeat: "no-repeat",
                            backgroundSize: "cover"
                        }}
                    >
                        {/* Empty container for the image background */}
                    </div>
                </div>
            </div>
        </section>
    );
}
