@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
<!-- Hero Section -->
<section class="relative py-16 md:py-24 bg-gradient-to-r from-primary to-purple-600 text-white">
    <div class="container mx-auto px-4 max-w-6xl">
        <div class="max-w-2xl">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Get In Touch</h1>
            <p class="text-xl opacity-90">We're here to help you achieve your financial goals. Contact us today to discuss how we can assist with your financial planning needs.</p>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="py-16 md:py-20 bg-gray-50">
    <div class="container mx-auto px-4 max-w-6xl">
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden md:flex">
            <!-- Contact Form -->
            <div class="md:w-1/2 p-8 md:p-12">
                <h2 class="text-3xl font-bold mb-2 text-gray-800">Send Us a Message</h2>
                <p class="text-gray-600 mb-8">Fill out the form below and we'll get back to you as soon as possible.</p>
                
                <form action="/contact" method="POST" class="space-y-6">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block mb-2 font-medium text-gray-700">Full Name *</label>
                            <input type="text" id="name" name="name" placeholder="Your Name" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200">
                        </div>
                        <div>
                            <label for="email" class="block mb-2 font-medium text-gray-700">Email Address *</label>
                            <input type="email" id="email" name="email" placeholder="Your Email" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200">
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="phone" class="block mb-2 font-medium text-gray-700">Phone Number</label>
                            <input type="tel" id="phone" name="phone" placeholder="Your Phone Number"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200">
                        </div>
                        <div>
                            <label for="service" class="block mb-2 font-medium text-gray-700">Service Interested In</label>
                            <select id="service" name="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200">
                                <option value="">Select a Service</option>
                                <option value="financial-advisory">Financial Advisory</option>
                                <option value="investment-planning">Investment Planning</option>
                                <option value="risk-management">Risk Management</option>
                                <option value="retirement-planning">Retirement Planning</option>
                                <option value="tax-planning">Tax Planning</option>
                                <option value="estate-planning">Estate Planning</option>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <label for="message" class="block mb-2 font-medium text-gray-700">Your Message *</label>
                        <textarea id="message" name="message" rows="5" placeholder="How can we help you?" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200"></textarea>
                    </div>
                    
                    <button type="submit" class="bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-8 rounded-lg transition duration-200 transform hover:-translate-y-1 hover:shadow-lg">
                        Send Message
                    </button>
                </form>
            </div>
            
            <!-- Contact Information -->
            <div class="md:w-1/2 bg-gradient-to-br from-blue-50 to-purple-50 p-8 md:p-12">
                <h2 class="text-3xl font-bold mb-8 text-gray-800">Contact Information</h2>
                
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">Our Office</h4>
                            <p class="text-gray-600">123 Financial District, Suite 100<br>Jakarta 12345, Indonesia</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-phone text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">Phone Number</h4>
                            <p class="text-gray-600">+62 21 1234 5678</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-xl flex items-center justify-center mr-4 flex-shrink-0">
                            <i class="fas fa-envelope text-primary text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">Email Address</h4>
                            <p class="text-gray-600">info@tlp5.com</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-10">
                    <h4 class="font-semibold text-gray-800 mb-4">Business Hours</h4>
                    <ul class="space-y-3">
                        <li class="flex justify-between text-gray-700">
                            <span>Monday - Friday</span>
                            <span class="font-medium">9:00 AM - 6:00 PM</span>
                        </li>
                        <li class="flex justify-between text-gray-700">
                            <span>Saturday</span>
                            <span class="font-medium">9:00 AM - 1:00 PM</span>
                        </li>
                        <li class="flex justify-between text-gray-700">
                            <span>Sunday</span>
                            <span class="font-medium text-red-500">Closed</span>
                        </li>
                    </ul>
                </div>
                
                <div class="mt-10">
                    <h4 class="font-semibold text-gray-800 mb-4">Follow Us</h4>
                    <div class="flex space-x-3">
                        <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-blue-600 hover:text-white transition duration-200 transform hover:-translate-y-1">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-blue-400 hover:text-white transition duration-200 transform hover:-translate-y-1">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-pink-600 hover:text-white transition duration-200 transform hover:-translate-y-1">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md hover:bg-blue-700 hover:text-white transition duration-200 transform hover:-translate-y-1">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
        <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Find Us Here</h2>
        <div class="rounded-2xl overflow-hidden shadow-lg h-96">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.5212603228525!2d106.82694531476838!3d-6.175387395493151!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945415c9%3A0x5371bf0fdad786a2!2sJakarta%2C%20Indonesia!5e0!3m2!1sen!2sus!4v1629927885712!5m2!1sen!2sus" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 max-w-4xl">
        <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Frequently Asked Questions</h2>
        <p class="text-gray-600 text-center mb-12 max-w-2xl mx-auto">Find quick answers to common questions about our services and processes.</p>
        
        <div class="space-y-6">
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <h3 class="font-semibold text-lg text-gray-800 mb-2">How quickly can I expect a response?</h3>
                <p class="text-gray-600">We typically respond to all inquiries within 24 hours during business days. For urgent matters, please call our office directly.</p>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <h3 class="font-semibold text-lg text-gray-800 mb-2">Do you offer free consultations?</h3>
                <p class="text-gray-600">Yes, we offer complimentary initial consultations to understand your financial needs and determine how we can best assist you.</p>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <h3 class="font-semibold text-lg text-gray-800 mb-2">What information should I prepare for our first meeting?</h3>
                <p class="text-gray-600">It's helpful to have information about your current financial situation, goals, and any specific questions or concerns you'd like to discuss.</p>
            </div>
        </div>
    </div>
</section>

<script>
    // Simple form validation
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                if (!name || !email || !message) {
                    e.preventDefault();
                    alert('Please fill in all required fields.');
                    return false;
                }
                
                // Form would be submitted to your backend in a real application
                // For demo purposes, we'll show a success message
                e.preventDefault();
                alert('Thank you for your message! We will get back to you soon.');
                this.reset();
            });
        }
    });
</script>
@endsection