import Image from "next/image";

export default function ContactMap() {
    return (
        <section className="w-full h-[500px] relative bg-light-bg border-t border-border-light">
            <Image
                src="/images/contact/map-placeholder.png"
                alt="Map view of Aasi Tech office in Islamabad, Pakistan"
                fill
                sizes="100vw"
                className="object-cover grayscale opacity-90 transition-opacity duration-700 hover:grayscale-0 hover:opacity-100"
                loading="lazy"
            />
            {/* Location Pin Overlay */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center drop-shadow-2xl cursor-pointer hover:-translate-y-6 transition-transform duration-300">
                <span className="material-symbols-outlined text-6xl text-primary animate-bounce">
                    location_on
                </span>
                <div className="bg-white/95 backdrop-blur-sm border border-border-light px-6 py-3 rounded-xl shadow-xl mt-2 font-bold text-text-main text-sm whitespace-nowrap hidden md:block">
                    Aasi Tech HQ
                </div>
            </div>
        </section>
    );
}
