---
import Layout from "../layouts/Layout.astro";
import Nav from "../components/site/Nav.astro";
import Footer from "../components/site/Footer.astro";
import { Phone, Mail, MapPin, Clock, ArrowRight } from "lucide-react";
import tileablePattern from "../assets/tileablepattern.png";

// Contact info from design.json
const contactInfo = {
    phone: "(312) 456-7890",
    email: "summit@gmail.com",
    location: "Colorado Springs, CO",
    hours: "Mon–Sat: 7am–6pm",
};

const serviceAreas = [
    "Colorado Springs",
    "Monument",
    "Black Forest",
    "Woodland Park",
    "Manitou Springs",
    "Fountain",
];
---

<Layout title="Contact Us | Summit Painting & Handyman Services">
    <Nav />
    
    <main class="w-full overflow-hidden bg-[#FAF9F6]">
        <!-- Hero Section -->
        <section class="relative py-16 md:py-24">
            <!-- Pattern background -->
            <div
                class="absolute inset-0 opacity-[0.06] mix-blend-multiply pointer-events-none"
                style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 520px;`}
            />
            
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-12 md:mb-16">
                    <h1 class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-6 text-brand-dark">
                        Get in Touch
                    </h1>
                    <p class="text-lg md:text-xl text-stone-500 max-w-2xl mx-auto leading-relaxed">
                        Ready to transform your home? Contact us for a free, no-obligation estimate. 
                        We typically respond within 24 hours.
                    </p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
                    <!-- Contact Info Card -->
                    <div class="bg-white rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 shadow-sm border border-stone-100">
                        <h2 class="text-2xl md:text-3xl font-serif font-medium mb-8 text-brand-dark">
                            Contact Information
                        </h2>
                        
                        <div class="space-y-6">
                            <!-- Phone -->
                            <a 
                                href={`tel:${contactInfo.phone.replace(/[^0-9]/g, '')}`}
                                class="flex items-start gap-4 group"
                            >
                                <div class="w-12 h-12 rounded-full bg-brand-green flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                                    <Phone size={20} className="text-white" />
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-stone-500 mb-1">Phone</p>
                                    <p class="text-lg font-medium text-brand-dark group-hover:text-brand-green transition-colors">
                                        {contactInfo.phone}
                                    </p>
                                </div>
                            </a>

                            <!-- Email -->
                            <a 
                                href={`mailto:${contactInfo.email}`}
                                class="flex items-start gap-4 group"
                            >
                                <div class="w-12 h-12 rounded-full bg-brand-sage flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
                                    <Mail size={20} className="text-white" />
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-stone-500 mb-1">Email</p>
                                    <p class="text-lg font-medium text-brand-dark group-hover:text-brand-green transition-colors">
                                        {contactInfo.email}
                                    </p>
                                </div>
                            </a>

                            <!-- Location -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center flex-shrink-0">
                                    <MapPin size={20} className="text-stone-600" />
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-stone-500 mb-1">Location</p>
                                    <p class="text-lg font-medium text-brand-dark">
                                        {contactInfo.location}
                                    </p>
                                </div>
                            </div>

                            <!-- Hours -->
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-full bg-stone-100 flex items-center justify-center flex-shrink-0">
                                    <Clock size={20} className="text-stone-600" />
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-stone-500 mb-1">Hours</p>
                                    <p class="text-lg font-medium text-brand-dark">
                                        {contactInfo.hours}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Service Areas -->
                        <div class="mt-10 pt-8 border-t border-stone-100">
                            <h3 class="text-lg font-serif font-medium mb-4 text-brand-dark">
                                Service Areas
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                {serviceAreas.map((area) => (
                                    <span class="px-3 py-1.5 rounded-full bg-stone-100 text-sm text-stone-700">
                                        {area}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>

                    <!-- Contact Form Card -->
                    <div class="bg-brand-green rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 text-white">
                        <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4">
                            Request a Free Estimate
                        </h2>
                        <p class="text-white/80 mb-8 leading-relaxed">
                            Tell us about your project and we'll get back to you with a detailed estimate.
                        </p>

                        <form class="space-y-5" action={`mailto:${contactInfo.email}`} method="POST" enctype="text/plain">
                            <div>
                                <label for="name" class="block text-sm font-medium mb-2 text-white/90">
                                    Your Name
                                </label>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    required
                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
                                    placeholder="John Smith"
                                />
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="phone" class="block text-sm font-medium mb-2 text-white/90">
                                        Phone
                                    </label>
                                    <input
                                        type="tel"
                                        id="phone"
                                        name="phone"
                                        class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
                                        placeholder="(555) 123-4567"
                                    />
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium mb-2 text-white/90">
                                        Email
                                    </label>
                                    <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        required
                                        class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors"
                                        placeholder="john@example.com"
                                    />
                                </div>
                            </div>

                            <div>
                                <label for="service" class="block text-sm font-medium mb-2 text-white/90">
                                    Service Needed
                                </label>
                                <select
                                    id="service"
                                    name="service"
                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors appearance-none cursor-pointer"
                                >
                                    <option value="" class="text-brand-dark">Select a service...</option>
                                    <option value="interior-painting" class="text-brand-dark">Interior Painting</option>
                                    <option value="exterior-painting" class="text-brand-dark">Exterior Painting</option>
                                    <option value="deck-restoration" class="text-brand-dark">Deck Restoration</option>
                                    <option value="handyman" class="text-brand-dark">Handyman Services</option>
                                    <option value="other" class="text-brand-dark">Other</option>
                                </select>
                            </div>

                            <div>
                                <label for="message" class="block text-sm font-medium mb-2 text-white/90">
                                    Project Details
                                </label>
                                <textarea
                                    id="message"
                                    name="message"
                                    rows="4"
                                    class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-white/50 focus:bg-white/15 transition-colors resize-none"
                                    placeholder="Tell us about your project..."
                                ></textarea>
                            </div>

                            <button
                                type="submit"
                                class="w-full bg-white text-brand-green font-semibold px-6 py-4 rounded-full hover:bg-brand-cream transition-colors flex items-center justify-center gap-2 shadow-lg"
                            >
                                Send Request
                                <ArrowRight size={18} />
                            </button>
                        </form>

                        <p class="text-sm text-white/60 mt-6 text-center">
                            We respect your privacy and never share your information.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <Footer />
</Layout>

