---
import { Image } from "astro:assets";
import { Phone, Mail, MapPin, ArrowRight, Instagram, Facebook, Share2 } from "lucide-react";

const currentYear = new Date().getFullYear();

const services = [
    { label: "Interior Painting", href: "/contact" },
    { label: "Exterior Painting", href: "/contact" },
    { label: "Deck Restoration", href: "/contact" },
    { label: "Handyman Services", href: "/contact" },
];

const company = [
    { label: "Our Expertise", href: "#services" },
    { label: "Service Areas", href: "#areas" },
    { label: "Contact Us", href: "/contact" },
    { label: "About Our Craft", href: "#why-us" },
];
---

<footer class="footer relative pb-20 overflow-hidden">
    <div class="max-w-brand mx-auto px-6 relative z-10">
        <!-- Footer Top: Social Bar -->
        <div class="flex flex-col md:flex-row items-center justify-between py-12 border-b border-brand-green/10 mb-20">
            <h3 class="text-3xl md:text-4xl font-serif font-medium text-brand-dark mb-8 md:mb-0">Like us wherever you like</h3>
            <div class="flex items-center gap-6">
                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
                    <Instagram size={24} />
                </a>
                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
                    <Facebook size={24} />
                </a>
                <a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
                    <Share2 size={24} />
                </a>
            </div>
        </div>

        <!-- Footer Middle: Pill CTA + Hybrid Layout -->
        <div class="relative mb-32">
            <!-- Unified Footer CTA - The "Pill" -->
            <div class="relative rounded-[4rem] bg-brand-green p-12 md:p-20 mb-24 overflow-hidden group shadow-2xl">
                <!-- Brush Texture -->
                <div class="absolute inset-0 opacity-[0.2] pointer-events-none mix-blend-overlay bg-[url('/media/brush1.png')] bg-cover bg-center" />
                
                <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
                    <div class="max-w-2xl text-center lg:text-left">
                        <span class="inline-block text-[11px] font-bold uppercase tracking-[0.4em] text-brand-cream/60 mb-8">Start Your Transformation</span>
                        <h2 class="text-5xl md:text-7xl font-serif font-medium text-white mb-8 tracking-tight leading-[0.9]">
                            Quality That <br /> <span class="italic text-brand-cream font-light">Speaks For Itself</span>
                        </h2>
                        <p class="text-white/60 text-lg md:text-xl font-light max-w-xl">
                            Experience the difference of meticulous attention to detail and premium materials.
                        </p>
                    </div>
                    <div class="flex flex-col sm:flex-row items-center gap-6">
                        <a
                            href="/contact"
                            class="px-12 py-6 bg-brand-cream text-brand-green rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
                        >
                            Get Free Quote
                        </a>
                        <a
                            href="tel:3124567890"
                            class="px-10 py-6 bg-white/5 text-white border border-white/20 backdrop-blur-md rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white/10 transition-all flex items-center justify-center gap-3"
                        >
                            <Phone size={18} />
                            (312) 456-7890
                        </a>
                    </div>
                </div>
            </div>

            <!-- The Hybrid Link Grid -->
            <div class="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
                <!-- Brand Centerpiece (Mobile: Top, Desktop: Left) -->
                <div class="md:col-span-4 flex flex-col items-center md:items-start text-center md:text-left">
                    <picture>
                        <source srcset="/media/logo-col.webp" type="image/webp" />
                        <img
                            src="/media/logo-col.png"
                            alt="Summit Painting Logo"
                            class="w-24 h-24 mb-10 opacity-90 transition-transform group-hover:scale-110"
                        />
                    </picture>
                    <span class="text-3xl font-serif font-bold text-brand-dark tracking-tight mb-2">Summit Painting</span>
                    <span class="text-[11px] text-brand-green font-bold uppercase tracking-[0.5em]">& Handyman Services</span>
                    <p class="mt-10 text-brand-dark/40 text-base font-light italic max-w-[280px] leading-relaxed">
                        "Craftsmanship is the root of our work, and your home is our canvas."
                    </p>
                </div>

                <!-- Links Column 1: Services -->
                <div class="md:col-span-2 flex flex-col items-center md:items-start">
                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Products</h3>
                    <ul class="space-y-5">
                        {services.map((link) => (
                            <li>
                                <a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
                                    {link.label}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>

                <!-- Links Column 2: Company -->
                <div class="md:col-span-2 flex flex-col items-center md:items-start">
                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Company</h3>
                    <ul class="space-y-5">
                        {company.map((link) => (
                            <li>
                                <a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
                                    {link.label}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>

                <!-- Links Column 3: Contact Details -->
                <div class="md:col-span-4 flex flex-col items-center md:items-end text-center md:text-right">
                    <h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Contact</h3>
                    <div class="space-y-8">
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Phone</p>
                            <a href="tel:3124567890" class="text-2xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">(312) 456-7890</a>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Email</p>
                            <a href="mailto:summit@gmail.com" class="text-xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">summit@gmail.com</a>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Location</p>
                            <span class="text-lg font-serif font-medium text-brand-dark/60">Colorado Springs, CO</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Bottom: Legal & Copyright -->
        <div class="pt-12 border-t border-brand-green/5 flex flex-col md:flex-row items-center justify-between gap-8">
            <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/30">
                Copyright © {currentYear}, Summit Painting & Handyman Brands
            </p>
            <ul class="flex items-center gap-10">
                <li>
                    <a href="/terms" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Terms & Conditions</a>
                </li>
                <li>
                    <a href="/privacy" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Privacy Policy</a>
                </li>
            </ul>
        </div>
    </div>
</footer>