---
import Layout from "../layouts/Layout.astro";
import {
    Phone,
    ArrowRight,
    Paintbrush,
    Hammer,
    Check,
    Star,
    MapPin,
    Trees,
    Ruler,
    Headset,
    Coins,
    ArrowDown,
    LayoutGrid,
    Box,
    PaintRoller,
} 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";
import tileablePattern from "../assets/tileablepattern.png";
import brushImg from "../assets/brushandswatchestransparent.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-[700px] flex flex-col md:flex-row items-center justify-between gap-12"
            >
                <!-- Tileable Pattern Overlay -->
                <div 
                    class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
                    style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 400px;`}
                ></div>

                <!-- Hero Content (Left) -->
                <div class="relative z-10 max-w-xl text-center md:text-left mt-8 md:mt-0">
                    <div
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-8"
                    >
                        <Star size={14} className="text-[#ECE3CE]" fill="#ECE3CE" />
                        <span>Colorado Springs' Trusted Partner</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-md mx-auto md:mx-0 leading-relaxed font-light"
                    >
                        Elevate your living space with professional painting,
                        wood restoration, and handyman services in Colorado Springs.
                    </p>

                    <div
                        class="flex flex-col sm:flex-row items-center justify-center md:justify-start 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 text-center"
                        >
                            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 text-center"
                        >
                            View Services
                        </a>
                    </div>
                </div>

                <!-- Hero Visual (Right) -->
                <div class="relative z-10 flex-1 flex justify-center items-center w-full">
                    <div class="relative w-full max-w-[500px]">
                        <!-- Main Brush & Swatches Image -->
                        <Image
                            src={brushImg}
                            alt="Paint brush and color swatches"
                            class="w-full h-auto drop-shadow-2xl"
                        />

                        <!-- Floating Card 1: Deck Restoration -->
                        <div
                            class="absolute -right-4 top-[10%] bg-white p-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[6deg] hover:rotate-0 transition-transform duration-500"
                        >
                            <div class="flex justify-between items-start mb-3">
                                <div class="w-10 h-10 rounded-full bg-[#3A4D39] flex items-center justify-center">
                                    <Trees size={20} className="text-white" />
                                </div>
                                <span class="text-[10px] font-bold bg-stone-100 text-stone-600 px-2 py-1 rounded">Exterior</span>
                            </div>
                            <p class="text-sm font-serif font-bold text-stone-900 mb-2">Deck Restoration</p>
                            <div class="flex gap-2">
                                <div class="w-4 h-4 rounded-full bg-[#3A4D39]"></div>
                                <div class="w-4 h-4 rounded-full bg-[#739072]"></div>
                                <div class="w-4 h-4 rounded-full bg-[#ECE3CE]"></div>
                            </div>
                        </div>

                        <!-- Floating Card 2: Ext. Paint -->
                        <div
                            class="absolute -left-8 bottom-[20%] bg-white p-4 rounded-2xl shadow-2xl w-48 hidden lg:block transform -rotate-[6deg] hover:rotate-0 transition-transform duration-500"
                        >
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
                                    <PaintRoller size={20} className="text-stone-600" />
                                </div>
                                <div class="text-left">
                                    <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-100 rounded-full overflow-hidden">
                                <div class="h-full w-[75%] bg-[#739072]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Core Services Section -->
        <section id="services" class="max-w-7xl mx-auto px-6 py-24">
            <h2 class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-16 text-center">
                Our Expertise
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Card 1: Interior & Exterior Painting -->
                <div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
                        <Image src={closeUpBrushImg} alt="Interior & Exterior Painting" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                    </div>
                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Interior & Exterior Painting</h3>
                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
                        Flawless finishes for your home's interior and exterior, using premium materials and meticulous techniques.
                    </p>
                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
                        Learn More
                    </a>
                </div>

                <!-- Card 2: Wood Restoration -->
                <div class="bg-[#3A4D39] rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
                        <Image src={cardsImg} alt="Wood Restoration" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                    </div>
                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Wood Restoration</h3>
                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
                        Revitalizing your decks, fences, and woodwork, restoring their natural beauty and protecting them for years.
                    </p>
                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
                        Learn More
                    </a>
                </div>

                <!-- Card 3: Skilled Handyman -->
                <div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
                    <div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
                        <Image src={puttyKnifeImg} alt="Skilled Handyman" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
                    </div>
                    <h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Skilled Handyman</h3>
                    <p class="text-stone-100 mb-8 leading-relaxed text-sm">
                        Reliable solutions for a wide range of home repairs and improvements, delivered with precision and care.
                    </p>
                    <a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
                        Learn More
                    </a>
                </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}
                                        className="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}
                                        className="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}
                                        className="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}
                                        className="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}
                                        className="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}
                                        className="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}
                                        className="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}
                                        className="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} className="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} className="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} className="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}
                                className="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="mt-24">
        <!-- Footer Top: Branding Section -->
        <div class="bg-[#3A4D39] text-[#ECE3CE] py-16 px-6 rounded-t-[3rem]">
            <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-12">
                <div class="flex flex-col items-center md:items-start gap-4">
                    <div class="flex items-center gap-4">
                        <picture>
                            <source srcset="/media/logo-white.webp" type="image/webp" />
                            <img src="/media/logo-white.png" alt="Summit Painting Logo" class="w-20 h-20" width="80" height="80" />
                        </picture>
                        <span class="text-4xl md:text-5xl font-serif font-bold tracking-tighter uppercase">Summit</span>
                    </div>
                </div>
                
                <div class="max-w-xl text-center md:text-left">
                    <h2 class="text-3xl md:text-5xl font-serif font-medium mb-6 leading-tight">
                        Rooted in Colorado Springs, <br /> Driven by Quality.
                    </h2>
                    <p class="text-stone-200 leading-relaxed font-light">
                        We are a local team dedicated to bringing premium craftsmanship and a personal touch to every project. Our commitment is to trustworthy service, attention to detail, and enhancing the beauty of your home.
                    </p>
                </div>
            </div>
        </div>

        <!-- Footer Bottom: CTA & Links -->
        <div class="bg-[#1c1917] text-white pt-24 pb-12">
            <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>
        </div>
    </footer>
</Layout>
