---
import { Image } from "astro:assets";
import { MapPin, Navigation, ArrowRight } from "lucide-react";
import mountainsImg from "../../assets/mountains.png";

const areas = [
    "Colorado Springs",
    "Monument",
    "Black Forest",
    "Woodland Park",
    "Manitou Springs",
    "Falcon",
];
---

<section id="areas" class="relative py-32 md:py-48 lg:py-64 overflow-hidden bg-brand-dark mask-soft-edges">
    <!-- Background Texture & Wall Mask -->
    <div class="absolute inset-0 z-0 opacity-[0.1] pointer-events-none mix-blend-overlay scale-110" style="background-image: url('/media/wall2.png'); background-size: cover; background-position: center;"></div>
    <div class="absolute inset-0 brush-texture opacity-[0.05] pointer-events-none z-0"></div>

    <div class="container-brand relative z-10">
        <div class="grid-12 items-center">
            <!-- Left: Media (Atmospheric Mountain) (Col 1-6) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-6 relative">
                <div class="relative rounded-[4rem] overflow-hidden shadow-2xl group border border-white/5 reveal-item transition-all duration-1000">
                    <div class="absolute inset-0 bg-brand-green/30 mix-blend-multiply z-10"></div>
                    <Image 
                        src={mountainsImg} 
                        alt="Pikes Peak mountains landscape" 
                        class="w-full aspect-[4/5] object-cover transition-transform duration-[15s] group-hover:scale-110 grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100"
                    />
                    
                    <!-- Floating Map Marker Overlay -->
                    <div class="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
                        <div class="relative scale-75 md:scale-100">
                            <div class="absolute inset-0 bg-brand-green/40 rounded-full blur-3xl opacity-50 animate-pulse"></div>
                            <div class="relative w-32 h-32 rounded-[3.5rem] bg-white/95 backdrop-blur-xl flex items-center justify-center shadow-2xl rotate-12 group-hover:rotate-0 transition-transform duration-1000 border border-white">
                                <MapPin size={48} className="text-brand-green" />
                            </div>
                        </div>
                    </div>

                    <!-- Video-like overlay effect -->
                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-transparent to-brand-dark opacity-60 pointer-events-none z-10"></div>
                </div>
            </div>

            <!-- Right: Content (Col 8-12) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-5 lg:col-start-8 flex flex-col items-center lg:items-start text-center lg:text-left mt-24 lg:mt-0">
                <div class="inline-flex items-center gap-4 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-white/40 text-[11px] font-bold uppercase tracking-[0.5em] mb-12">
                    <Navigation size={16} />
                    Locate the service
                </div>

                <h2 class="text-6xl md:text-8xl font-serif font-medium text-white mb-12 tracking-tight leading-[0.85]">
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line">Locate</span>
                    </span>
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line italic text-brand-cream font-light">the summit</span>
                    </span>
                </h2>

                <p class="text-xl md:text-2xl text-white/60 leading-relaxed mb-16 max-w-xl font-light italic">
                    Satisfy your project needs with a name worth trusting. We serve our neighbors with pride and professional excellence.
                </p>

                <!-- Area Chips -->
                <div class="flex flex-wrap justify-center lg:justify-start gap-4 mb-16">
                    {areas.map((area) => (
                        <div class="px-8 py-4 rounded-2xl bg-white/5 border border-white/10 text-white/80 text-sm md:text-base font-bold tracking-tight hover:bg-brand-green hover:border-brand-green hover:text-white transition-all cursor-default shadow-xl">
                            {area}
                        </div>
                    ))}
                </div>

                <a 
                    href="/contact" 
                    class="inline-flex items-center gap-4 px-12 py-6 bg-brand-cream text-brand-green rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
                >
                    Where to Buy <ArrowRight size={18} />
                </a>
            </div>
        </div>
    </div>
</section>
