---
import { Image } from "astro:assets";
import { Paintbrush, Trees, Hammer, ArrowRight } from "lucide-react";

const services = [
    {
        id: "01",
        icon: Paintbrush,
        title: "Premium Painting",
        chip: "Painting",
        description: "Meticulous interior and exterior painting using premium materials for a lasting finish.",
        image: "/media/mixing1.png",
        accent: "bg-brand-green",
        gridClass: "lg:col-span-8 lg:row-span-2",
    },
    {
        id: "02",
        icon: Trees,
        title: "Wood Restoration",
        chip: "Restoration",
        description: "Expert deck staining and wood preservation.",
        image: "/media/shavings1.png",
        accent: "bg-brand-sage",
        gridClass: "lg:col-span-4 lg:row-span-1",
    },
    {
        id: "03",
        icon: Hammer,
        title: "Handyman Services",
        chip: "Handyman",
        description: "Reliable home repairs and installations.",
        image: "/media/cloth1.png",
        accent: "bg-brand-dark",
        gridClass: "lg:col-span-4 lg:row-span-1",
    },
];
---

<section id="services" class="relative py-32 md:py-48 lg:py-64 overflow-hidden">
    <!-- Floating Connector Shavings -->
    <div class="absolute -top-24 right-[10%] w-64 h-64 opacity-20 pointer-events-none z-0 hidden lg:block rotate-12">
        <img src="/media/shavings2.png" alt="" class="w-full h-full object-contain" />
    </div>

    <div class="container-brand relative z-10">
        <!-- Bento Header -->
        <div class="grid-12 items-end mb-24 md:mb-32">
            <div class="col-span-1 md:col-span-8 lg:col-span-6">
                <h2 class="text-6xl md:text-8xl font-serif font-medium tracking-tight text-brand-dark leading-[0.85] mb-8">
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line">Do it all,</span>
                    </span>
                    <span class="text-reveal-mask">
                        <span class="text-reveal-line italic font-light">paint it all</span>
                    </span>
                </h2>
                <p class="text-xl md:text-2xl text-brand-dark/60 max-w-md font-light italic">
                    If you're detail-curious, you're in the right place — we've got a finish for every surface.
                </p>
            </div>
            <div class="col-span-1 md:col-span-4 lg:col-span-6 flex md:justify-end mt-12 md:mt-0">
                <a 
                    href="/contact" 
                    class="inline-flex items-center gap-4 px-10 py-5 bg-brand-dark text-white rounded-full text-xs font-bold uppercase tracking-[0.3em] hover:bg-brand-green transition-all shadow-xl hover:-translate-y-1"
                >
                    Our Services <ArrowRight size={18} />
                </a>
            </div>
        </div>

        <!-- Structured Bento Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 min-h-[800px]">
            {services.map((service, index) => (
                <a 
                    href="/contact" 
                    class:list={["group relative rounded-[3rem] overflow-hidden bg-brand-cream shadow-2xl transition-all duration-1000 hover:-translate-y-2", service.gridClass]}
                >
                    <!-- Background Image -->
                    <div class="absolute inset-0">
                        <img
                            src={service.image}
                            alt={service.title}
                            class="w-full h-full object-cover transition-transform duration-[10s] group-hover:scale-110 grayscale group-hover:grayscale-0"
                        />
                        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark/90 via-brand-dark/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity" />
                    </div>

                    <!-- Chip -->
                    <div class="absolute top-10 left-10 z-20">
                        <div class="px-5 py-2.5 bg-brand-dark/90 backdrop-blur-md border border-white/10 rounded-full text-[11px] font-bold text-white uppercase tracking-[0.3em]">
                            {service.chip}
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="relative h-full p-12 flex flex-col justify-end text-white">
                        <div class="flex items-center gap-4 mb-6 opacity-60">
                            <span class="font-serif italic text-3xl">/ {service.id}</span>
                        </div>
                        <h3 class="text-4xl md:text-5xl font-serif font-medium mb-6 leading-tight">
                            {service.title}
                        </h3>
                        <p class="text-lg md:text-xl text-white/80 font-light leading-relaxed max-w-xl mb-8 transition-all duration-700 line-clamp-2 group-hover:line-clamp-none">
                            {service.description}
                        </p>
                        <div class="flex items-center gap-4 text-[11px] font-bold uppercase tracking-[0.3em] opacity-0 -translate-x-6 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-700">
                            View Details <ArrowRight size={16} />
                        </div>
                    </div>
                </a>
            ))}
        </div>
    </div>

    <!-- Floating Connector Shavings 2 -->
    <div class="absolute -bottom-32 left-[5%] w-80 h-80 opacity-15 pointer-events-none z-0 hidden lg:block -rotate-12">
        <img src="/media/shavings3.png" alt="" class="w-full h-full object-contain" />
    </div>
</section>
