@extends('layouts.public')
@section('title', 'Contact')

@section('content')

{{-- ============== HERO SECTION CONTACT ============== --}}
<section class="relative bg-navy overflow-hidden py-16 sm:py-20">
    {{-- Motifs d'arrière-plan --}}
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#eab308_1px,transparent_1px)] [background-size:16px_16px] pointer-events-none"></div>
    <div class="absolute -top-24 -right-24 w-96 h-96 bg-gold/20 rounded-full blur-[100px] pointer-events-none"></div>
    <div class="absolute bottom-0 -left-20 w-80 h-80 bg-navy-light/40 rounded-full blur-[90px] pointer-events-none"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 border border-white/15 backdrop-blur-md text-gold text-xs font-bold uppercase tracking-wider mb-4 shadow-inner">
            <x-icon name="envelope" class="w-4 h-4 text-gold animate-pulse" />
            <span>À votre écoute</span>
        </div>
        
        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white tracking-tight">
            Écrivez-<span class="text-gold">nous</span>
        </h1>
        
        <p class="text-white/80 max-w-2xl mx-auto mt-4 text-sm sm:text-base leading-relaxed">
            Une question sur nos succursales, sur notre réseau au Sénégal et en Gambie, ou envie de devenir distributeur ? Notre équipe vous répond dans les plus brefs délais.
        </p>
    </div>
</section>

{{-- ============== SECTION FORMULAIRE & COORDONNÉES ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
    <div class="grid lg:grid-cols-12 gap-8 lg:gap-12 items-start">

        {{-- Carte d'informations de contact (Gauche) --}}
        <div class="lg:col-span-5 bg-gradient-to-br from-navy to-navy-dark text-white rounded-3xl p-8 shadow-xl relative overflow-hidden border border-white/10">
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gold/15 rounded-full blur-2xl pointer-events-none"></div>
            
            <h2 class="font-display font-extrabold text-2xl text-white mb-2">Nos Coordonnées</h2>
            <p class="text-xs text-white/70 mb-8 leading-relaxed">
                N'hésitez pas à nous rendre visite à notre siège social ou à nous contacter directement.
            </p>

            <div class="space-y-6">
                {{-- Adresse --}}
                <div class="flex items-start gap-4 group">
                    <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/15 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-dark transition-colors duration-300 shadow-md">
                        <x-icon name="map-pin" class="w-6 h-6" />
                    </div>
                    <div>
                        <p class="font-display font-bold text-sm text-gold uppercase tracking-wider">Siège Social</p>
                        <p class="text-sm text-white/90 font-medium mt-0.5 leading-snug">Zac Mbao, Villa N°35</p>
                        <p class="text-xs text-white/60">Dakar, Sénégal</p>
                    </div>
                </div>

                {{-- Téléphone --}}
                <div class="flex items-start gap-4 group">
                    <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/15 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-dark transition-colors duration-300 shadow-md">
                        <x-icon name="phone" class="w-6 h-6" />
                    </div>
                    <div>
                        <p class="font-display font-bold text-sm text-gold uppercase tracking-wider">Téléphone</p>
                        <p class="text-sm text-white/90 font-medium mt-0.5 leading-snug">+221 77 647 29 60</p>
                        <p class="text-sm text-white/90 font-medium leading-snug">+221 70 452 19 57</p>
                    </div>
                </div>

                {{-- Email --}}
                <div class="flex items-start gap-4 group">
                    <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/15 flex items-center justify-center text-gold shrink-0 group-hover:bg-gold group-hover:text-navy-dark transition-colors duration-300 shadow-md">
                        <x-icon name="envelope" class="w-6 h-6" />
                    </div>
                    <div>
                        <p class="font-display font-bold text-sm text-gold uppercase tracking-wider">Adresse E-mail</p>
                        <a href="mailto:senmarketingdistribution@gmail.com" class="text-sm text-white/90 font-medium mt-0.5 hover:text-gold transition-colors break-all">
                            senmarketingdistribution@gmail.com
                        </a>
                    </div>
                </div>
            </div>

            {{-- Horaires d'ouverture --}}
            <div class="mt-10 pt-6 border-t border-white/10">
                <p class="font-display font-bold text-xs uppercase tracking-wider text-gold mb-2">Heures d'ouverture</p>
                <div class="flex justify-between text-xs text-white/80 py-1">
                    <span>Lundi - Vendredi :</span>
                    <span class="font-bold text-white">08h00 - 18h00</span>
                </div>
                <div class="flex justify-between text-xs text-white/80 py-1">
                    <span>Samedi :</span>
                    <span class="font-bold text-white">09h00 - 13h00</span>
                </div>
            </div>
        </div>

        {{-- Formulaire de contact (Droite) --}}
        <div class="lg:col-span-7 bg-white rounded-3xl p-6 sm:p-10 border border-gray-100 shadow-xl relative">
            <h3 class="font-display font-extrabold text-2xl text-navy-dark mb-1">Envoyez-nous un message</h3>
            <p class="text-xs text-gray-500 mb-6">Remplissez le formulaire ci-dessous, notre équipe vous répondra sous 24h.</p>

            {{-- Alerte de succès --}}
            @if(session('success'))
                <div class="mb-6 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm font-medium flex items-center gap-3">
                    <x-icon name="check-circle" class="w-5 h-5 text-emerald-600 shrink-0" />
                    <span>{{ session('success') }}</span>
                </div>
            @endif

            {{-- Alerte d'erreurs --}}
            @if($errors->any())
                <div class="mb-6 p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-700 text-sm font-semibold">
                    <p class="mb-2 font-bold flex items-center gap-2">
                        <x-icon name="exclamation-circle" class="w-4 h-4 text-rose-600" />
                        Veuillez corriger les erreurs ci-dessous :
                    </p>
                    <ul class="list-disc list-inside space-y-1 text-xs font-normal">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                <div class="grid sm:grid-cols-2 gap-5">
                    {{-- Nom complet --}}
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                            Nom complet <span class="text-rose-500">*</span>
                        </label>
                        <input type="text" name="name" required value="{{ old('name') }}" placeholder="Ex: Mamadou Diallo"
                               class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
                    </div>

                    {{-- Téléphone --}}
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                            Téléphone
                        </label>
                        <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="Ex: +221 77 000 00 00"
                               class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
                    </div>
                </div>

                <div class="grid sm:grid-cols-2 gap-5">
                    {{-- Email --}}
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                            Adresse E-mail <span class="text-rose-500">*</span>
                        </label>
                        <input type="email" name="email" required value="{{ old('email') }}" placeholder="exemple@email.com"
                               class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
                    </div>

                    {{-- Sujet --}}
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                            Sujet
                        </label>
                        <input type="text" name="subject" value="{{ old('subject') }}" placeholder="Ex: Demande d'information"
                               class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all">
                    </div>
                </div>

                {{-- Message --}}
                <div>
                    <label class="block text-xs font-extrabold uppercase tracking-wider text-navy-dark mb-2">
                        Votre message <span class="text-rose-500">*</span>
                    </label>
                    <textarea name="message" required rows="5" placeholder="Comment pouvons-nous vous aider ?"
                              class="w-full px-4 py-3.5 rounded-xl bg-gray-50 border border-gray-200 text-sm font-medium text-gray-800 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-gold focus:ring-2 focus:ring-gold/20 transition-all resize-none">{{ old('message') }}</textarea>
                </div>

                {{-- Bouton d'envoi --}}
                <button type="submit" class="w-full bg-gradient-to-r from-gold via-gold/90 to-yellow-500 text-navy-dark font-display font-extrabold text-sm py-4 rounded-xl shadow-lg shadow-gold/20 hover:shadow-xl hover:shadow-gold/30 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-2 group">
                    <span>Envoyer le message</span>
                    <x-icon name="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </button>
            </form>
        </div>

    </div>
</section>

{{-- ============== CARTE GOOGLE MAPS ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 sm:pb-20">
    <div class="relative rounded-3xl overflow-hidden border border-gray-200 shadow-xl bg-white group">
        <iframe
            src="https://maps.google.com/maps?q=Zac%20Mbao%2C%20Dakar%2C%20S%C3%A9n%C3%A9gal&z=15&output=embed"
            class="w-full h-80 sm:h-96 border-0 filter grayscale group-hover:grayscale-0 transition-all duration-700"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Localisation de Sunu Marketing Direct — Zac Mbao, Dakar">
        </iframe>
        
        <div class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 bg-white/90 backdrop-blur-md px-4 py-3 rounded-2xl shadow-lg border border-white/50 flex items-center gap-3">
            <div class="w-8 h-8 rounded-xl bg-navy flex items-center justify-center text-gold">
                <x-icon name="map-pin" class="w-4 h-4" />
            </div>
            <div>
                <p class="font-display font-bold text-xs text-navy-dark">Siège Social SMD</p>
                <p class="text-[11px] text-gray-500">Zac Mbao, Villa N°35, Dakar</p>
            </div>
        </div>
    </div>
</section>

@endsection