---
import Layout from "../layouts/Layout.astro";
import {
    Phone,
    ArrowRight,
    Paintbrush,
    Hammer,
    Check,
    Star,
    MapPin,
    Trees,
    Ruler,
    Headset,
    Coins,
    ArrowDown,
    LayoutGrid,
    Box,
} from "lucide-react";

// Branding Colors (Refined for Eden Style):
// Primary Dark: #1c1917 (Stone 950)
// Accent Green: #3A4D39 (Deep Forest)
// Background: #FAF9F6 (Stone 50)

import { Image } from "astro:assets";
import cardsImg from "../assets/cards.png";
import puttyKnifeImg from "../assets/puttyknife2.png";
import closeUpBrushImg from "../assets/closeupbrush4.png";
import mountainsImg from "../assets/mountains.png";
---

<Layout title="Summit Painting & Handyman Services | Colorado Springs">
    <!-- Navigation -->
    <nav
        class="sticky top-0 z-50 w-full bg-[#FAF9F6]/80 backdrop-blur-md border-b border-stone-100"
    >
        <div
            class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"
        >
            <div class="flex items-center gap-3">
                <picture>
                    <source srcset="/media/logo-col.webp" type="image/webp" />
                    <img
                        src="/media/logo-col.png"
                        alt="Summit Painting Logo"
                        class="w-12 h-12"
                        width="48"
                        height="48"
                    />
                </picture>
                <span
                    class="text-xl font-serif font-medium tracking-tight text-[#1c1917]"
                    >Summit Painting</span
                >
            </div>

            <div
                class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-600"
            >
                <a
                    href="#services"
                    class="hover:text-[#3A4D39] transition-colors">Services</a
                >
                <a href="#why-us" class="hover:text-[#3A4D39] transition-colors"
                    >Why Us</a
                >
                <a href="#areas" class="hover:text-[#3A4D39] transition-colors"
                    >Areas</a
                >
                <a
                    href="#contact"
                    class="hover:text-[#3A4D39] transition-colors">Contact</a
                >
            </div>

            <div class="flex items-center gap-4">
                <a
                    href="tel:7195550123"
                    class="hidden sm:block text-sm font-medium text-stone-600 hover:text-[#3A4D39] transition-colors"
                    >(719) 555-0123</a
                >
                <a
                    href="#contact"
                    class="bg-[#1c1917] text-white text-sm font-medium px-6 py-2.5 rounded-full hover:bg-stone-800 transition-colors flex items-center gap-2"
                >
                    <span>Free Estimate</span>
                    <ArrowRight size={16} />
                </a>
            </div>
        </div>
    </nav>

    <main class="w-full overflow-hidden bg-[#FAF9F6]">
        <!-- Hero Section -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6">
            <div
                class="relative bg-[#3A4D39] rounded-[3rem] p-8 md:p-16 overflow-hidden min-h-[600px] flex flex-col items-center justify-center text-center"
            >
                <Image
                    src={mountainsImg}
                    alt="Colorado mountains background"
                    class="absolute inset-0 w-full h-full object-cover opacity-40 mix-blend-overlay"
                />

                <!-- Dark Gradient Overlay for Readability -->
                <div
                    class="absolute inset-0 bg-gradient-to-b from-[#3A4D39]/80 via-[#3A4D39]/50 to-[#3A4D39]/90"
                >
                </div>

                <div class="relative z-10 max-w-3xl mx-auto mt-8">
                    <div
                        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-6"
                    >
                        <Star size={14} class="text-[#ECE3CE]" fill="#ECE3CE" />
                        <span>Colorado Springs' Trusted Painter</span>
                    </div>

                    <h1
                        class="text-5xl md:text-7xl lg:text-8xl font-serif font-normal tracking-tight leading-[1.1] mb-8 text-white"
                    >
                        Craftsmanship <br /> For Your Home
                    </h1>

                    <p
                        class="text-xl text-stone-200 mb-10 max-w-lg mx-auto leading-relaxed font-light"
                    >
                        Elevate your living space with professional painting,
                        wood restoration, and handyman services.
                    </p>

                    <div
                        class="flex flex-col sm:flex-row items-center justify-center gap-4"
                    >
                        <a
                            href="#contact"
                            class="min-w-[160px] bg-[#ECE3CE] text-[#3A4D39] text-base font-medium px-8 py-4 rounded-full hover:bg-white transition-colors"
                        >
                            Get a Quote
                        </a>
                        <a
                            href="#services"
                            class="min-w-[160px] text-white border border-white/30 hover:bg-white/10 text-base font-medium px-8 py-4 rounded-full transition-colors backdrop-blur-sm"
                        >
                            View Services
                        </a>
                    </div>
                </div>

                <!-- Floating Cards (Decorative) -->
                <div
                    class="hidden lg:block absolute left-12 bottom-12 rotate-[-6deg] hover:rotate-0 transition-transform duration-500"
                >
                    <div class="bg-[#FAF9F6] p-4 rounded-2xl shadow-xl w-48">
                        <div class="flex items-center gap-3 mb-3">
                            <div
                                class="w-10 h-10 rounded-full bg-[#E5E5E5] flex items-center justify-center"
                            >
                                <Paintbrush size={20} class="text-stone-600" />
                            </div>
                            <div>
                                <p class="text-xs font-bold text-stone-900">
                                    Ext. Paint
                                </p>
                                <p class="text-[10px] text-stone-500">
                                    In Progress
                                </p>
                            </div>
                        </div>
                        <div
                            class="h-1.5 w-full bg-stone-200 rounded-full overflow-hidden"
                        >
                            <div class="h-full w-[80%] bg-[#739072]"></div>
                        </div>
                    </div>
                </div>

                <div
                    class="hidden lg:block absolute right-12 top-24 rotate-[6deg] hover:rotate-0 transition-transform duration-500"
                >
                    <div class="bg-[#FAF9F6] p-4 rounded-2xl shadow-xl w-52">
                        <div class="flex justify-between items-start mb-2">
                            <div
                                class="w-8 h-8 rounded-full bg-[#3A4D39] flex items-center justify-center"
                            >
                                <Check size={16} class="text-white" />
                            </div>
                            <span
                                class="text-[10px] font-bold bg-[#739072]/20 text-[#3A4D39] px-2 py-0.5 rounded"
                                >Verified</span
                            >
                        </div>
                        <p
                            class="text-sm font-serif font-medium text-stone-900"
                        >
                            Deck Restoration
                        </p>
                        <div class="flex -space-x-2 mt-3">
                            <div
                                class="w-6 h-6 rounded-full bg-stone-300 border-2 border-white"
                            >
                            </div>
                            <div
                                class="w-6 h-6 rounded-full bg-stone-400 border-2 border-white"
                            >
                            </div>
                            <div
                                class="w-6 h-6 rounded-full bg-stone-500 border-2 border-white"
                            >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Core Services Section -->
        <section id="services" class="max-w-7xl mx-auto px-6 py-24">
            <div
                class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6"
            >
                <div class="max-w-xl">
                    <h2
                        class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-6"
                    >
                        Services That <br /> Transform Your Home
                    </h2>
                    <p class="text-lg text-stone-500 leading-relaxed">
                        We don't just paint; we care for your home. From
                        restoration to detailed repairs.
                    </p>
                </div>
                <a
                    href="#all-services"
                    class="hidden md:flex items-center gap-2 text-[#3A4D39] font-medium border-b border-[#3A4D39] pb-0.5 hover:opacity-80 transition-opacity"
                >
                    See full service list <ArrowRight size={16} />
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Service 1 -->
                <div
                    class="bg-white rounded-[2.5rem] p-10 relative overflow-hidden group border border-stone-100/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-1"
                >
                    <div class="relative z-10">
                        <div
                            class="w-14 h-14 rounded-2xl bg-[#ECE3CE]/50 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform"
                        >
                            <Paintbrush size={28} class="text-[#3A4D39]" />
                        </div>
                        <h3
                            class="text-2xl font-serif font-medium mb-4 text-[#1c1917]"
                        >
                            Residential Painting
                        </h3>
                        <p class="text-stone-500 mb-8 leading-relaxed max-w-sm">
                            Interior and exterior transformation. We use premium
                            paints and focus heavily on prep work to ensure
                            longevity.
                        </p>
                        <ul class="space-y-3 mb-8">
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Exterior
                                Body & Trim
                            </li>
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Cabinet
                                Refinishing
                            </li>
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Color Consultations
                            </li>
                        </ul>
                    </div>
                    <div
                        class="absolute -right-20 -bottom-20 w-64 h-64 bg-[#739072]/10 rounded-full blur-3xl group-hover:bg-[#739072]/20 transition-colors"
                    >
                    </div>
                    <!-- Decorative Image (Prop Style) -->
                    <Image
                        src={closeUpBrushImg}
                        alt="Paint brush close up"
                        class="absolute -right-8 -bottom-16 w-80 h-auto object-contain opacity-100 group-hover:scale-105 transition-transform duration-500 rotate-6"
                    />
                </div>

                <!-- Service 2 -->
                <div
                    class="bg-white rounded-[2.5rem] p-10 relative overflow-hidden group border border-stone-100/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-1"
                >
                    <div class="relative z-10">
                        <div
                            class="w-14 h-14 rounded-2xl bg-[#739072]/20 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform"
                        >
                            <Trees size={28} class="text-[#3A4D39]" />
                        </div>
                        <h3
                            class="text-2xl font-serif font-medium mb-4 text-[#1c1917]"
                        >
                            Wood & Deck Restoration
                        </h3>
                        <p class="text-stone-500 mb-8 leading-relaxed max-w-sm">
                            Don't replace it if you don't have to. We restore
                            decks, fences, and siding repairs to like-new
                            condition.
                        </p>
                        <ul class="space-y-3 mb-8">
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Power Washing
                            </li>
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Staining
                                & Sealing
                            </li>
                            <li
                                class="flex items-center gap-3 text-sm font-medium text-stone-700"
                            >
                                <Check size={16} class="text-[#739072]" /> Rot Repair
                            </li>
                        </ul>
                    </div>
                    <div
                        class="absolute -right-20 -bottom-20 w-64 h-64 bg-[#ECE3CE]/30 rounded-full blur-3xl group-hover:bg-[#ECE3CE]/50 transition-colors"
                    >
                    </div>
                    <!-- Decorative Image (Prop Style) -->
                    <Image
                        src={puttyKnifeImg}
                        alt="Putty knife tools"
                        class="absolute -right-8 -bottom-8 w-64 h-auto object-contain opacity-100 group-hover:scale-105 transition-transform duration-500 -rotate-3"
                    />
                </div>
            </div>
        </section>

        <!-- Feature: Complete Service List (Eden Style) -->
        <section id="all-services" class="max-w-7xl mx-auto px-6 mb-32">
            <div
                class="bg-white rounded-[3rem] p-8 md:p-16 flex flex-col-reverse md:flex-row items-center gap-16 shadow-sm border border-stone-100"
            >
                <div class="w-full md:w-1/2">
                    <h2
                        class="text-3xl md:text-5xl font-serif font-medium tracking-tight mb-6 text-[#1c1917]"
                    >
                        More Than Just <br /> Painting
                    </h2>
                    <p class="text-lg text-stone-500 leading-relaxed mb-10">
                        We handle the small jobs too. From drywall repair to
                        fixture installation, we are your holistic home care
                        partners.
                    </p>
                    <div class="grid grid-cols-2 gap-y-5 gap-x-8">
                        <!-- Column 1 -->
                        <div class="space-y-4">
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Drywall Repair</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Wallpaper Removal</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Trim Installation</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Gutter Cleaning</span
                                >
                            </div>
                        </div>
                        <!-- Column 2 -->
                        <div class="space-y-4">
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Plumbing Fixtures</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >TV Mounting</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >Junk Removal</span
                                >
                            </div>
                            <div class="flex items-center gap-3 group">
                                <div
                                    class="w-6 h-6 rounded-full bg-stone-100 flex items-center justify-center group-hover:bg-[#739072] transition-colors"
                                >
                                    <Check
                                        size={14}
                                        class="text-stone-400 group-hover:text-white"
                                    />
                                </div>
                                <span class="text-stone-700 font-medium"
                                    >General Repairs</span
                                >
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="w-full md:w-1/2 relative h-[450px] flex items-center justify-center p-8"
                >
                    <!-- Large Sage Circle Back drop -->
                    <div
                        class="w-[400px] h-[400px] bg-[#739072]/10 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
                    >
                    </div>

                    <!-- Cards Image -->
                    <Image
                        src={cardsImg}
                        alt="Service cards deck"
                        class="relative z-10 w-full max-w-xl h-auto object-contain drop-shadow-2xl rounded-[2.5rem] hover:scale-105 transition-transform duration-700"
                    />
                </div>
            </div>
        </section>

        <!-- Why Us Section -->
        <section id="why-us" class="max-w-7xl mx-auto px-6 mb-24">
            <h2
                class="text-3xl md:text-5xl font-serif font-medium tracking-tight mb-16 text-[#1c1917] text-center"
            >
                Why Neighbors Trust Summit
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Card 1 -->
                <div
                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
                >
                    <div
                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
                    >
                        <Ruler size={20} class="text-white" />
                    </div>
                    <h3
                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
                    >
                        Attention to Detail
                    </h3>
                    <p class="text-stone-600 leading-relaxed text-sm">
                        The difference is in the prep. We scrape, sand, and
                        prime diligently so your finish lasts for years, not
                        months.
                    </p>
                </div>

                <!-- Card 2 -->
                <div
                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
                >
                    <div
                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
                    >
                        <Coins size={20} class="text-white" />
                    </div>
                    <h3
                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
                    >
                        Fair & Transparent
                    </h3>
                    <p class="text-stone-600 leading-relaxed text-sm">
                        No hidden fees. We provide detailed, written estimates
                        explaining exactly what you are paying for and why.
                    </p>
                </div>

                <!-- Card 3 -->
                <div
                    class="bg-stone-100 rounded-[2rem] p-8 hover:bg-white hover:shadow-lg transition-all border border-transparent hover:border-stone-100"
                >
                    <div
                        class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
                    >
                        <Headset size={20} class="text-white" />
                    </div>
                    <h3
                        class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
                    >
                        Local & Reliable
                    </h3>
                    <p class="text-stone-600 leading-relaxed text-sm">
                        We are proud Colorado Springs residents. We show up when
                        we say we will and communicate clearly.
                    </p>
                </div>
            </div>
        </section>

        <!-- Service Area -->
        <section id="areas" class="max-w-7xl mx-auto px-6 mb-24">
            <div
                class="bg-[#1c1917] rounded-[3rem] p-8 md:p-16 text-white relative overflow-hidden"
            >
                <div
                    class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-12"
                >
                    <div class="max-w-md">
                        <div
                            class="flex items-center gap-2 mb-4 text-[#739072]"
                        >
                            <MapPin size={20} />
                            <span
                                class="text-sm font-bold uppercase tracking-wider"
                                >Service Area</span
                            >
                        </div>
                        <h2
                            class="text-3xl md:text-5xl font-serif font-medium mb-6"
                        >
                            Proudly Serving Pikes Peak
                        </h2>
                        <p class="text-stone-400 leading-relaxed mb-8">
                            We cover Colorado Springs and the surrounding
                            mountain communities.
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span
                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
                                >Colorado Springs</span
                            >
                            <span
                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
                                >Monument</span
                            >
                            <span
                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
                                >Black Forest</span
                            >
                            <span
                                class="px-4 py-2 rounded-full bg-white/10 text-sm border border-white/10"
                                >Woodland Park</span
                            >
                        </div>
                    </div>

                    <div
                        class="relative w-full md:w-[400px] h-64 bg-[#2a2725] rounded-2xl overflow-hidden border border-stone-700 flex items-center justify-center group"
                    >
                        <div class="absolute inset-0 bg-[#3A4D39]/20"></div>

                        <div
                            class="relative z-10 flex flex-col items-center gap-3"
                        >
                            <MapPin
                                size={32}
                                class="text-[#739072] drop-shadow-md"
                            />
                            <p
                                class="text-stone-400 text-sm font-medium tracking-wide"
                            >
                                Serving Colorado Springs
                            </p>
                        </div>

                        <!-- Pulse Effect -->
                        <div
                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-[#739072]/10 rounded-full blur-xl animate-pulse"
                        >
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Hybrid Footer / Rounded CTA -->
    <footer class="bg-[#1c1917] text-white pt-24 pb-12 rounded-t-[3rem] mt-24">
        <div class="max-w-7xl mx-auto px-6">
            <!-- Large CTA Section -->
            <div class="text-center mb-24 border-b border-stone-800 pb-20">
                <h2
                    class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-8 text-white max-w-2xl mx-auto leading-tight"
                >
                    Ready to Transform <br /> Your Home?
                </h2>
                <p class="text-xl text-stone-400 mb-10 max-w-lg mx-auto">
                    Get a free, detailed estimate for your painting or handyman
                    project today.
                </p>
                <div
                    class="flex flex-col sm:flex-row items-center justify-center gap-4"
                >
                    <a
                        href="tel:7195550123"
                        class="min-w-[200px] bg-white text-[#1c1917] text-lg font-medium px-8 py-4 rounded-full hover:bg-stone-200 transition-colors shadow-lg flex items-center justify-center gap-2"
                    >
                        <Phone size={20} />
                        Call Now
                    </a>
                    <a
                        href="mailto:contact@summitpainting.com"
                        class="min-w-[200px] bg-transparent text-white border border-stone-600 text-lg font-medium px-8 py-4 rounded-full hover:border-white hover:bg-white/5 transition-colors flex items-center justify-center gap-2"
                    >
                        Send Email
                    </a>
                </div>
            </div>

            <!-- Footer Links -->
            <div class="flex flex-col md:flex-row justify-between gap-12 mb-16">
                <div>
                    <div class="flex items-center gap-2 mb-6">
                        <picture>
                            <source
                                srcset="/media/logo-white.webp"
                                type="image/webp"
                            />
                            <img
                                src="/media/logo-white.png"
                                alt="Summit Painting Logo"
                                class="w-12 h-12"
                                width="48"
                                height="48"
                            />
                        </picture>
                        <span
                            class="text-xl font-serif font-medium tracking-tight"
                            >Summit Painting</span
                        >
                    </div>
                    <p class="text-stone-400 max-w-xs leading-relaxed">
                        Quality craftsmanship and honest service for Colorado
                        Springs and beyond.
                    </p>
                </div>
                <div class="flex flex-wrap gap-12 md:gap-24 text-sm">
                    <div class="flex flex-col gap-4">
                        <span class="font-bold text-white tracking-wide"
                            >Services</span
                        >
                        <a
                            href="#"
                            class="text-stone-400 hover:text-white transition-colors"
                            >Painting</a
                        >
                        <a
                            href="#"
                            class="text-stone-400 hover:text-white transition-colors"
                            >Deck Restoration</a
                        >
                        <a
                            href="#"
                            class="text-stone-400 hover:text-white transition-colors"
                            >Handyman</a
                        >
                    </div>
                    <div class="flex flex-col gap-4">
                        <span class="font-bold text-white tracking-wide"
                            >Company</span
                        >
                        <a
                            href="#why-us"
                            class="text-stone-400 hover:text-white transition-colors"
                            >About Us</a
                        >
                        <a
                            href="#areas"
                            class="text-stone-400 hover:text-white transition-colors"
                            >Service Areas</a
                        >
                        <a
                            href="#contact"
                            class="text-stone-400 hover:text-white transition-colors"
                            >Contact</a
                        >
                    </div>
                </div>
            </div>

            <!-- Bottom Bar -->
            <div
                class="pt-8 border-t border-stone-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-stone-500"
            >
                <p>
                    &copy; {new Date().getFullYear()} Summit Painting & Handyman Services.
                </p>
                <div class="flex gap-6">
                    <a href="#" class="hover:text-white transition-colors"
                        >Privacy</a
                    >
                    <a href="#" class="hover:text-white transition-colors"
                        >Terms</a
                    >
                </div>
            </div>
        </div>
    </footer>
</Layout>
