@extends('layouts.frontend')

@section('title', 'Contact Us - Trade Plus Education')

@section('content')

<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-16">
    <div class="container mx-auto px-4">
        <h1 class="text-4xl lg:text-5xl font-bold mb-4 text-center">Get In Touch</h1>
        <p class="text-xl text-center text-blue-100 max-w-3xl mx-auto">
            Have questions? We're here to help you achieve your study abroad dreams
        </p>
    </div>
</section>

<!-- Contact Section -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid lg:grid-cols-2 gap-12">
            <!-- Contact Form -->
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <h2 class="text-3xl font-bold text-gray-900 mb-6">Send Us a Message</h2>

                @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-lg mb-6">
                    <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
                </div>
                @endif

                <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
                    @csrf

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Your Name *</label>
                        <input type="text" name="name" required value="{{ old('name') }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @error('name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Email Address *</label>
                        <input type="email" name="email" required value="{{ old('email') }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @error('email')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Phone Number</label>
                        <input type="tel" name="phone" value="{{ old('phone') }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Subject *</label>
                        <input type="text" name="subject" required value="{{ old('subject') }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @error('subject')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Message *</label>
                        <textarea name="message" rows="5" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">{{ old('message') }}</textarea>
                        @error('message')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg transition text-lg">
                        <i class="fas fa-paper-plane mr-2"></i> Send Message
                    </button>
                </form>
            </div>

            <!-- Contact Info -->
            <div class="space-y-8">
                <div class="bg-white rounded-2xl shadow-xl p-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">Contact Information</h2>

                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div
                                class="bg-blue-100 text-blue-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-map-marker-alt text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-1">Office Address</h3>
                                <p class="text-gray-600">2/C/3, Road #01, Shymoli<br>Dhaka-1207, Bangladesh</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="bg-blue-100 text-blue-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-phone text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-1">Phone</h3>
                                <a href="tel:+8801711352344" class="text-blue-600 hover:text-blue-700">+880
                                    1711-352344</a>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="bg-green-100 text-green-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fab fa-whatsapp text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-1">WhatsApp</h3>
                                <a href="https://wa.me/821032662956" target="_blank"
                                    class="text-green-600 hover:text-green-700"> +82 1021533894</a>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="bg-blue-100 text-blue-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-envelope text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-1">Email</h3>
                                <a href="mailto:info@tradeplusedu.com"
                                    class="text-blue-600 hover:text-blue-700">info@tradeplusedu.com</a>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div
                                class="bg-blue-100 text-blue-600 w-12 h-12 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-globe text-xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900 mb-1">Website</h3>
                                <a href="https://www.tradeplusedu.com" target="_blank"
                                    class="text-blue-600 hover:text-blue-700">www.tradeplusedu.com</a>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 pt-8 border-t">
                        <h3 class="font-semibold text-gray-900 mb-4">Follow Us</h3>
                        <div class="flex space-x-4">
                            <a href="https://www.facebook.com/profile.php?id=61585874745741" target="_blank"
                                class="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-lg flex items-center justify-center transition">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="https://wa.me/821032662956" target="_blank"
                                class="bg-green-500 hover:bg-green-600 text-white w-12 h-12 rounded-lg flex items-center justify-center transition">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Office Hours -->
                <div class="bg-blue-900 text-white rounded-2xl shadow-xl p-8">
                    <h3 class="text-2xl font-bold mb-4">Office Hours</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span>Saturday - Thursday:</span>
                            <span class="font-semibold">9:00 AM - 6:00 PM</span>
                        </div>
                        <div class="flex justify-between">
                            <span>Friday:</span>
                            <span class="font-semibold">Closed</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Google Map -->
        <div class="mt-12">
            <div class="bg-white rounded-2xl shadow-xl p-4">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.098837844962!2d90.36897631543454!3d23.779240893566743!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjPCsDQ2JzQ1LjMiTiA5MMKwMjInMTUuMyJF!5e0!3m2!1sen!2sbd!4v1234567890"
                    width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-xl">
                </iframe>
            </div>
        </div>
    </div>
</section>

@endsection