---
import { Image } from "astro:assets";
import { Check, Hammer, Settings, Home, Wrench, Trash2, Box, PenTool, Layout, ArrowRight } from "lucide-react";

const services = [
    { name: "Drywall Repair", icon: Box, stat: "Precise" },
    { name: "Wallpaper Removal", icon: Layout, stat: "Clean" },
    { name: "Trim Installation", icon: PenTool, stat: "Expert" },
    { name: "Gutter Cleaning", icon: Settings, stat: "Reliable" },
    { name: "Plumbing Fixtures", icon: Wrench, stat: "Modern" },
    { name: "TV Mounting", icon: Home, stat: "Secure" },
    { name: "Junk Removal", icon: Trash2, stat: "Efficient" },
    { name: "General Repairs", icon: Hammer, stat: "Holistic" },
];
---

<section class="py-32 md:py-48 lg:py-64 overflow-hidden">
    <div class="container-brand relative">
        <!-- Grid-12 Layout -->
        <div class="grid-12 items-center">
            <!-- Left: Content (Col 1-7) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-7">
                <div class="inline-flex items-center gap-4 px-5 py-2.5 rounded-full bg-brand-green/5 text-brand-green text-[11px] font-bold uppercase tracking-[0.4em] mb-12">
                    <span class="w-2 h-2 rounded-full bg-brand-green animate-pulse" />
                    Complete Home Care
                </div>

                <h2 class="text-6xl md:text-8xl font-serif font-medium tracking-tight mb-12 text-brand-dark leading-[0.85]">
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line">More Than</span>
                    </span>
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line text-brand-green italic font-light">Just Painting</span>
                    </span>
                </h2>
                
                <p class="text-xl md:text-2xl text-brand-dark/60 leading-relaxed mb-16 max-w-2xl font-light italic">
                    We handle the small jobs that make a big difference. From precise drywall repair to seamless fixture installation.
                </p>
                
                <!-- Services Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-16">
                    {services.map((service) => (
                        <div class="flex items-center justify-between p-6 rounded-[2rem] bg-white border border-brand-green/5 hover:bg-brand-cream/30 hover:shadow-xl transition-all group cursor-default">
                            <div class="flex items-center gap-5">
                                <div class="w-12 h-12 rounded-2xl bg-brand-cream flex items-center justify-center shadow-sm group-hover:bg-brand-green group-hover:text-white transition-all duration-500">
                                    <service.icon size={20} />
                                </div>
                                <span class="text-brand-dark font-bold tracking-tight text-base">{service.name}</span>
                            </div>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                                {service.stat}
                            </span>
                        </div>
                    ))}
                </div>

                <a href="/contact" class="inline-flex items-center gap-4 text-brand-green font-bold uppercase tracking-[0.3em] group/link text-xs">
                    <span>Get Cookin' With A Quote</span>
                    <div class="w-12 h-12 rounded-full border border-brand-green/20 flex items-center justify-center group-hover/link:bg-brand-green group-hover/link:text-white transition-all shadow-lg">
                        <ArrowRight size={20} />
                    </div>
                </a>
            </div>

            <!-- Right: Image (Col 8-12) -->
            <div class="col-span-1 md:col-span-12 lg:col-span-5 lg:col-start-8 mt-24 lg:mt-0">
                <div class="relative group">
                    <!-- Layered Textures -->
                    <div class="absolute -top-12 -left-12 w-48 h-48 opacity-10 pointer-events-none z-0 rotate-12">
                        <img src="/media/wall1.png" alt="" class="w-full h-full object-cover rounded-full" />
                    </div>

                    <div class="relative rounded-[4rem] overflow-hidden shadow-2xl transition-transform duration-[10s] group-hover:scale-[1.02] border border-brand-green/10 z-10">
                        <img
                            src="/media/painting2.png"
                            alt="Professional service"
                            class="w-full h-auto aspect-[4/5] object-cover grayscale group-hover:grayscale-0 transition-all duration-1000"
                        />
                        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/60 via-transparent to-brand-dark/20" />
                    </div>

                    <!-- Floating Stat Badge -->
                    <div class="absolute -bottom-12 -right-8 bg-brand-dark text-white p-12 rounded-[3.5rem] shadow-2xl transform -rotate-3 group-hover:rotate-0 transition-transform duration-1000 border border-white/5 z-20">
                        <p class="text-6xl font-serif font-medium mb-2 leading-none">200+</p>
                        <p class="text-[11px] text-brand-cream/40 font-bold uppercase tracking-[0.4em] leading-none">Jobs Completed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
