---
import { Image } from "astro:assets";
import { ArrowRight, Star, CheckCircle } from "lucide-react";
import painting1 from "../../assets/painting1.png";
---

<section class="relative min-h-[90vh] flex items-center justify-center overflow-hidden py-32 md:py-48 lg:py-64 bg-brand-green">
    <!-- Sticky Background Texture -->
    <div class="absolute inset-0 z-0 pointer-events-none">
        <div class="sticky top-0 h-screen w-full">
            <div 
                class="absolute inset-0 opacity-[0.3] mix-blend-overlay scale-110"
                style="background-image: url('/media/painting1.png'); background-size: cover; background-position: center;"
            ></div>
            <div class="absolute inset-0 bg-gradient-to-b from-brand-dark/40 via-transparent to-brand-dark/60"></div>
        </div>
    </div>

    <div class="container-brand relative z-10">
        <div class="grid-12 items-center">
            <div class="col-span-1 md:col-span-10 md:col-start-2 lg:col-span-8 lg:col-start-3 text-center">
                <!-- Trust Badge -->
                <div class="inline-flex items-center gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2.5 mb-12 opacity-0 translate-y-4 animate-in fade-in slide-in-from-bottom-4 duration-1000 fill-mode-forwards">
                    <div class="flex -space-x-1">
                        {[1, 2, 3, 4, 5].map(() => (
                            <Star size={12} className="text-brand-cream fill-brand-cream" />
                        ))}
                    </div>
                    <span class="text-white text-[10px] font-bold uppercase tracking-[0.3em]">Colorado's Premium Choice</span>
                </div>

                <h1 class="text-6xl sm:text-7xl md:text-9xl font-serif font-medium tracking-tight leading-[0.9] mb-12 text-white">
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line">Masterful</span>
                    </span>
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line italic text-brand-cream">Painting</span>
                    </span>
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line">Services</span>
                    </span>
                </h1>

                <p class="text-xl md:text-2xl text-white/80 mb-16 max-w-2xl mx-auto leading-relaxed font-light italic">
                    Professional wood restoration and premium painting for Colorado Springs. Built on trust, defined by quality.
                </p>

                <div class="flex flex-col sm:flex-row items-center justify-center gap-8 mb-16">
                    <a
                        href="/contact"
                        class="px-12 py-6 bg-brand-cream text-brand-green text-xs font-bold uppercase tracking-[0.3em] rounded-full hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
                    >
                        Free Estimate
                    </a>
                    <a
                        href="#services"
                        class="px-12 py-6 bg-white/5 text-white border border-white/20 backdrop-blur-sm hover:bg-white/10 text-xs font-bold uppercase tracking-[0.3em] rounded-full transition-all group/btn flex items-center gap-3"
                    >
                        View Our Work
                        <ArrowRight size={16} className="group-hover/btn:translate-x-1 transition-transform" />
                    </a>
                </div>

                <div class="flex items-center justify-center gap-12 text-white/40">
                    <div class="flex items-center gap-3">
                        <CheckCircle size={20} className="text-brand-cream/60" />
                        <span class="text-[12px] font-bold uppercase tracking-widest">Licensed & Insured</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <CheckCircle size={20} className="text-brand-cream/60" />
                        <span class="text-[12px] font-bold uppercase tracking-widest">Local Experts</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
