@php
    $org = $organization ?? \App\Models\Organization::first();
@endphp

<section id="contact" class="relative py-20 lg:py-28 bg-gray-50 overflow-hidden">
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16 reveal">
            <div class="inline-flex items-center space-x-2 bg-primary-50 text-primary-600 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
                <i class="fas fa-envelope text-xs"></i>
                <span>Get In Touch</span>
            </div>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 font-display">
                Contact <span class="gradient-text">Us</span>
            </h2>
            <div class="section-divider max-w-24 mx-auto mb-6"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Contact Info Cards -->
            <div class="space-y-4 reveal-left">
                @if($org)
                    <!-- Location -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg flex-shrink-0">
                                <i class="fas fa-map-marker-alt text-white text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-900 text-base mb-1">Our Location</h4>
                                <p class="text-gray-600 text-sm">{{ $org->postal_address ?? 'N/A' }}</p>
                                <p class="text-gray-500 text-sm">{{ $org->city ?? '' }}, {{ $org->country ?? '' }}</p>
                                @if($org->physical_address)
                                    <p class="text-gray-400 text-xs mt-1">{{ $org->physical_address }}</p>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Phone -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-accent-500 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg flex-shrink-0">
                                <i class="fas fa-phone-alt text-white text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-900 text-base mb-1">Call Us</h4>
                                <a href="tel:{{ $org->hotline }}" class="text-primary-600 hover:text-primary-700 text-sm font-medium transition-colors duration-200">{{ $org->hotline ?? 'N/A' }}</a>
                                <p class="text-gray-400 text-xs mt-1">Available during business hours</p>
                            </div>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
                        <div class="flex items-start space-x-4">
                            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center shadow-lg flex-shrink-0">
                                <i class="fas fa-envelope text-white text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-900 text-base mb-1">Email Us</h4>
                                <a href="mailto:{{ $org->email }}" class="text-primary-600 hover:text-primary-700 text-sm font-medium transition-colors duration-200">{{ $org->email ?? 'N/A' }}</a>
                                <p class="text-gray-400 text-xs mt-1">We respond within 24 hours</p>
                            </div>
                        </div>
                    </div>

                    <!-- Social Media -->
                    @if($org->social_media_links)
                        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
                            <h4 class="font-bold text-gray-900 text-base mb-3">Follow Us</h4>
                            <div class="flex space-x-3">
                                @foreach($org->social_media_links as $platform => $url)
                                    @if($url)
                                        <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                                           class="w-10 h-10 bg-gray-100 hover:bg-gradient-to-r hover:from-primary-500 hover:to-accent-500 rounded-xl flex items-center justify-center text-gray-500 hover:text-white transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                                            @if($platform === 'facebook')<i class="fab fa-facebook-f"></i>
                                            @elseif($platform === 'twitter')<i class="fab fa-x-twitter"></i>
                                            @elseif($platform === 'linkedin')<i class="fab fa-linkedin-in"></i>
                                            @elseif($platform === 'youtube')<i class="fab fa-youtube"></i>
                                            @elseif($platform === 'instagram')<i class="fab fa-instagram"></i>
                                            @else<i class="fas fa-globe"></i>
                                            @endif
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>

            <!-- Contact Form -->
            <div class="lg:col-span-2 reveal-right">
                <div class="bg-white rounded-2xl p-6 lg:p-8 border border-gray-100 shadow-sm">
                    <h4 class="font-bold text-gray-900 text-lg mb-6">Send Us a Message</h4>
                    <form action="#" method="POST" class="space-y-5">
                        @csrf
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label>
                                <input type="text" name="name" placeholder="Enter your full name"
                                       class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
                                <input type="email" name="email" placeholder="Enter your email"
                                       class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone Number</label>
                                <input type="tel" name="phone" placeholder="Enter your phone number"
                                       class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Subject</label>
                                <select name="subject" class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 text-gray-500">
                                    <option value="">Select a subject</option>
                                    <option value="enrollment">Course Enrollment</option>
                                    <option value="information">General Information</option>
                                    <option value="partnership">Partnership</option>
                                    <option value="support">Technical Support</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Message</label>
                            <textarea name="message" rows="5" placeholder="Write your message here..."
                                      class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 resize-none"></textarea>
                        </div>
                        <button type="submit" class="btn-shine bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white px-8 py-3 rounded-full font-semibold text-sm transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/30 hover:-translate-y-0.5 inline-flex items-center space-x-2">
                            <span>Send Message</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
