@extends('layouts.frontend')
@section('title', 'Contact Us')

@section('content')
<section class="relative bg-gray-900 py-32">
    <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(42, 8, 96, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%), url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1920') center/cover;"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <span class="inline-block px-4 py-1 rounded-full bg-gold-500/20 text-gold-300 text-sm font-medium border border-gold-500/30 mb-4">
            Get In Touch
        </span>
        <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">Contact Us</h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
            We'd love to hear from you. Reach out with questions, prayer requests, or just to say hello.
        </p>
    </div>
</section>

<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12">
            <div>
                <span class="text-gold-600 font-semibold text-sm tracking-wider uppercase">Reach Out</span>
                <h2 class="font-cinzel text-4xl font-bold text-gray-900 mt-2 mb-6">We'd Love to Hear From You</h2>
                <p class="text-gray-600 mb-8">
                    Whether you have questions about our services, want to get involved, or simply need someone to talk to, we're here for you. Fill out the form and we'll get back to you as soon as possible.
                </p>
                
                <div class="space-y-6">
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Address</h4>
                            <p class="text-gray-600">123 Grace Avenue<br>Accra, Ghana</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-phone text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Phone</h4>
                            <p class="text-gray-600">+233 30 123 4567</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-envelope text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Email</h4>
                            <p class="text-gray-600">info@gracechurch.com</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-12 h-12 rounded-full gold-gradient flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-clock text-white"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900">Office Hours</h4>
                            <p class="text-gray-600">Monday - Friday: 9:00 AM - 5:00 PM<br>Saturday: 10:00 AM - 2:00 PM</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8">
                    <h4 class="font-semibold text-gray-900 mb-4">Follow Us</h4>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 rounded-2xl p-8">
                <h3 class="font-cinzel text-2xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
                
                @if(session('success'))
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
                        {{ session('success') }}
                    </div>
                @endif
                
                <form action="{{ route('frontend.contact.submit') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Your Name *</label>
                        <input type="text" name="name" required 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="John Doe">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
                        <input type="email" name="email" required 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="john@example.com">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                        <input type="tel" name="phone" 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="+233 XX XXX XXXX">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Subject *</label>
                        <select name="subject" required 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent">
                            <option value="">Select a topic</option>
                            <option value="general">General Inquiry</option>
                            <option value="prayer">Prayer Request</option>
                            <option value="visit">Planning a Visit</option>
                            <option value="ministry">Get Involved</option>
                            <option value="counseling">Counseling Request</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Message *</label>
                        <textarea name="message" rows="5" required 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:border-transparent"
                            placeholder="How can we help you?"></textarea>
                    </div>
                    
                    <button type="submit" class="w-full py-3 rounded-lg gold-gradient text-white font-semibold hover:opacity-90 transition-opacity">
                        <i class="fas fa-paper-plane mr-2"></i> Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-3xl md:text-4xl font-bold text-gray-900 mb-4">Find Us</h2>
            <p class="text-gray-600">We're conveniently located in the heart of the city</p>
        </div>
        
        <div class="rounded-2xl overflow-hidden shadow-xl h-96">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.973656308935!2d-0.18702668523098753!3d5.553035995958749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9bb1a43f7a9f%3A0x5c87e2a07e793d06!2sAccra%2C%20Ghana!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 
                width="100%" 
                height="100%" 
                style="border:0;" 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </div>
    </div>
</section>
@endsection