@extends('layouts.main')

@section('styles')
<!-- AOS CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
@endsection

@section('content')

<!-- Hero Section -->
<section id="hero-slider" class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
    <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d" 
         alt="ChaletMed Security" 
         class="absolute inset-0 -z-10 h-full w-full object-cover opacity-40">
    
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="text-center mb-16" data-aos="fade-down" data-aos-duration="1000">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                Contactez Notre Équipe
            </h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Nous sommes à votre écoute 24h/24 pour toute question ou demande d'information
            </p>
        </div>
    </div>
</section>

<!-- Main Contact Section -->
<section class="relative bg-white py-16 px-4 md:px-8 -mt-16">
    <div class="max-w-7xl mx-auto">
        <div class="grid md:grid-cols-2 gap-12">
            <!-- Contact Information -->
            <div class="space-y-8">
                <!-- Contact Cards -->
                <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100" data-aos="fade-right" data-aos-delay="100">
                    <div class="space-y-8">
                        <!-- Phone -->
                        <div class="flex items-start gap-4" data-aos="fade-up" data-aos-delay="200">
                            <div class="bg-yellow-500 p-3 rounded-lg">
                                <i class="fas fa-phone text-white text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800">Téléphone</h3>
                                <p class="mt-2 text-yellow-600 hover:text-yellow-700 transition-colors">
                                    <a href="tel:+212661188281">+212 6 61 18 82 81</a>
                                </p>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="flex items-start gap-4" data-aos="fade-up" data-aos-delay="300">
                            <div class="bg-yellow-500 p-3 rounded-lg">
                                <i class="fas fa-envelope text-white text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800">Email</h3>
                                <p class="mt-2 text-yellow-600 hover:text-yellow-700 transition-colors">
                                    <a href="mailto:contact@chaletmed.com">contact@chaletmed.com</a>
                                </p>
                            </div>
                        </div>

                        <!-- Address -->
                        <div class="flex items-start gap-4" data-aos="fade-up" data-aos-delay="400">
                            <div class="bg-yellow-500 p-3 rounded-lg">
                                <i class="fas fa-map-marker-alt text-white text-xl"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800">Adresse</h3>
                                <p class="mt-2 text-gray-600">
                                    CHALET MED ROUTE DE SEBTA<br>
                                    FNIDEQ, Maroc
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="bg-gray-50 p-8 rounded-xl shadow-lg" data-aos="fade-up" data-aos-delay="200">
                    <h3 class="text-xl font-semibold text-gray-800 mb-6">Suivez-nous</h3>
                    <div class="flex space-x-6">
                        <a href="#" class="p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1" data-aos="zoom-in" data-aos-delay="300">
                            <i class="fab fa-facebook text-blue-600 text-2xl"></i>
                        </a>
                        <a href="#" class="p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1" data-aos="zoom-in" data-aos-delay="400">
                            <i class="fab fa-instagram text-pink-600 text-2xl"></i>
                        </a>
                        <a href="#" class="p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all transform hover:-translate-y-1" data-aos="zoom-in" data-aos-delay="500">
                            <i class="fab fa-linkedin text-blue-500 text-2xl"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100" data-aos="fade-left" data-aos-delay="100">
                <h3 class="text-2xl font-semibold text-gray-800 mb-6">Envoyez-nous un message</h3>
                <form class="space-y-6">
                    <div data-aos="fade-up" data-aos-delay="200">
                        <label class="block text-gray-700 mb-2 font-medium">Nom complet</label>
                        <input type="text" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
                               required>
                    </div>

                    <div data-aos="fade-up" data-aos-delay="300">
                        <label class="block text-gray-700 mb-2 font-medium">Email</label>
                        <input type="email" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
                               required>
                    </div>

                    <div data-aos="fade-up" data-aos-delay="400">
                        <label class="block text-gray-700 mb-2 font-medium">Sujet</label>
                        <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent">
                            <option>Demande d'information</option>
                            <option>Support technique</option>
                            <option>Gestion des cotisations</option>
                            <option>Autre</option>
                        </select>
                    </div>

                    <div data-aos="fade-up" data-aos-delay="500">
                        <label class="block text-gray-700 mb-2 font-medium">Message</label>
                        <textarea rows="5" 
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
                                  required></textarea>
                    </div>

                    <button type="submit" 
                            class="w-full bg-yellow-500 text-white py-3 px-6 rounded-lg hover:bg-yellow-600 transition-all transform hover:-translate-y-1 font-semibold"
                            data-aos="zoom-in" data-aos-delay="600">
                        Envoyer le message
                    </button>
                </form>
            </div>
        </div>

        <!-- Map Section -->
        <div class="mt-16 rounded-xl overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="100">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d107655.8376626684!2d-5.37076335503393!3d35.85742678136226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd0b6d7a6b67dca7%3A0x6b8b1e3d7f6b0b1e!2sFnideq%2C%20Morocco!5e0!3m2!1sen!2sus!4v1623345678901!5m2!1sen!2sus" 
                    width="100%" 
                    height="450" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy"
                    class="rounded-xl">
            </iframe>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<!-- AOS JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        AOS.init({
            once: true,
            offset: 100,
            duration: 800
        });
    });
</script>
@endsection