import Link from "next/link";

export default function Hero() {
    return (
        <section className="relative h-screen flex flex-col items-center justify-center overflow-hidden">
            {/* Video Background */}
            <div className="absolute inset-0 z-0">
                <video
                    autoPlay
                    loop
                    muted
                    playsInline
                    className="absolute inset-0 w-full h-full object-cover"
                    poster="/assets/images/aerial-view.mov" // Fallback image
                    aria-label="Aerial view of Bangalore showcasing premium real estate locations"
                >
                    <source src="/assets/images/aerial-view.mov" type="video/mp4" />
                    {/* Note: This is a placeholder video. Replace with your Bangalore drone shot. */}
                </video>


            </div>

            {/* Location Pins (Decorative) */}
            <div className="absolute inset-0 z-10 pointer-events-none hidden md:block">
                {/* Pin 1: Hebbal */}
                <div className="absolute top-[30%] left-[20%] animate-bounce" style={{ animationDuration: '3s' }}>
                    <div className="flex flex-col items-center">
                        <div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
                            <span className="text-xs font-bold text-black">Hebbal</span>
                        </div>
                        <div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
                            <div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
                        </div>
                        <div className="h-16 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
                    </div>
                </div>

                {/* Pin 2: Airport */}
                <div className="absolute top-[20%] right-[25%] animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
                    <div className="flex flex-col items-center">
                        <div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
                            <span className="text-xs font-bold text-black">Airport</span>
                        </div>
                        <div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
                            <div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
                        </div>
                        <div className="h-24 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
                    </div>
                </div>

                {/* Pin 3: Whitefield */}
                <div className="absolute bottom-[30%] right-[15%] animate-bounce" style={{ animationDuration: '3.5s', animationDelay: '0.5s' }}>
                    <div className="flex flex-col items-center">
                        <div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
                            <span className="text-xs font-bold text-black">Whitefield</span>
                        </div>
                        <div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
                            <div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
                        </div>
                        <div className="h-12 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
                    </div>
                </div>
            </div>

            <div className="relative z-20 max-w-5xl mx-auto px-6 text-center">
                <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-6 animate-fade-in drop-shadow-lg">
                    Sky and Soil <br className="hidden md:block" />
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300">
                        Bangalore.
                    </span>
                </h1>

                {/* <p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
                    Premium properties in North Bengaluru. Experience the perfect blend of nature and luxury.
                </p> */}


            </div>

            {/* Scroll Indicator */}
            <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-20">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-white/80">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </div>
        </section>
    );
}