@extends('layouts.app')

@section('title', 'Contact - KONTIXX Agency')
@section('footer-tagline', 'Un projet en tête ? Parlons-en. Notre équipe est à votre écoute pour vous accompagner.')

@section('content')
    {{-- HERO CONTACT --}}
    <section class="section-premium bg-gradient-premium py-24 lg:py-32 relative overflow-hidden">
        {{-- DECORATIVE ELEMENTS --}}
        <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-transparent rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tl from-orange-400/20 to-transparent rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
                    <span class="text-premium-gradient">Contactez-nous</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
                    Vous avez un projet de site internet ? Contactez-nous dès maintenant pour bénéficier d'un accompagnement personnalisé, de conseils stratégiques et d'un devis gratuit, sans engagement.
                </p>
            </div>
        </div>
    </section>

    {{-- FORMULAIRE DE CONTACT --}}
    <section class="py-24 bg-white relative">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="card-premium glass-premium p-10 md:p-16 rounded-2xl shadow-premium animate-fade-in-up-premium">
                <div class="mb-8">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">Parlons de votre projet</h2>
                    <p class="text-gray-600 text-lg">Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.</p>
                </div>
                
                <form class="space-y-6" method="POST" action="{{ route('contact.store') }}">
                    @csrf
                    
                    @if(session('success'))
                        <div class="notification-success bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-5 rounded-xl mb-6 shadow-lg shadow-green-100/50 relative overflow-hidden">
                            {{-- EFFET DE BRILLANCE ANIMÉ --}}
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
                            
                            <div class="flex items-start gap-4 relative z-10">
                                {{-- ICÔNE DE SUCCÈS AVEC ANIMATION --}}
                                <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center shadow-lg">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex-1 pt-0.5">
                                    <h4 class="font-bold text-lg mb-1 text-green-900">Message envoyé avec succès !</h4>
                                    <p class="text-green-700 leading-relaxed">{{ session('success') }}</p>
                                </div>
                                
                                {{-- BOUTON DE FERMETURE (OPTIONNEL) --}}
                                <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 text-green-600 hover:text-green-800 transition-colors opacity-70 hover:opacity-100">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                            
                            {{-- BARRE DE PROGRESSION (OPTIONNEL) --}}
                            <div class="absolute bottom-0 left-0 right-0 h-1 bg-green-200 rounded-b-xl overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-500 to-emerald-600 animate-[progress_5s_ease-out_forwards]"></div>
                            </div>
                        </div>
                    @endif
                    
                    @if(session('error'))
                        <div class="notification-success bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 text-red-800 px-6 py-5 rounded-xl mb-6 shadow-lg shadow-red-100/50 relative overflow-hidden">
                            {{-- EFFET DE BRILLANCE ANIMÉ --}}
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
                            
                            <div class="flex items-start gap-4 relative z-10">
                                {{-- ICÔNE D'ERREUR --}}
                                <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-red-500 to-rose-600 rounded-full flex items-center justify-center shadow-lg">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex-1 pt-0.5">
                                    <h4 class="font-bold text-lg mb-1 text-red-900">Erreur d'envoi</h4>
                                    <p class="text-red-700 leading-relaxed">{{ session('error') }}</p>
                                </div>
                                
                                {{-- BOUTON DE FERMETURE --}}
                                <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 text-red-600 hover:text-red-800 transition-colors opacity-70 hover:opacity-100">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    @endif
                    
                    @if($errors->any())
                        <div class="bg-red-50 border border-red-200 text-red-800 px-6 py-4 rounded-xl mb-6">
                            <div class="flex items-start gap-3">
                                <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <p class="font-semibold mb-2">Veuillez corriger les erreurs suivantes :</p>
                                    <ul class="list-disc list-inside space-y-1">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="group">
                            <label for="name" class="block text-sm font-semibold text-gray-800 mb-2">Nom complet *</label>
                            <input type="text" id="name" name="name" required 
                                class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300" 
                                placeholder="Votre nom"
                                value="{{ old('name') }}">
                        </div>
                        <div class="group">
                            <label for="email" class="block text-sm font-semibold text-gray-800 mb-2">Email *</label>
                            <input type="email" id="email" name="email" required 
                                class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300" 
                                placeholder="votre@email.com"
                                value="{{ old('email') }}">
                        </div>
                    </div>
                    <div class="group">
                        <label for="phone" class="block text-sm font-semibold text-gray-800 mb-2">Téléphone</label>
                        <input type="tel" id="phone" name="phone" 
                            class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300" 
                            placeholder="+261 XX XX XXX XX"
                            value="{{ old('phone') }}">
                    </div>
                    <div class="group">
                        <label for="project_type" class="block text-sm font-semibold text-gray-800 mb-2">Type de projet *</label>
                        <select id="project_type" name="project_type" required 
                            class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300">
                            <option value="">Sélectionnez un type de projet</option>
                            <option value="creation-site" {{ old('project_type') == 'creation-site' ? 'selected' : '' }}>Création de site web</option>
                            <option value="branding" {{ old('project_type') == 'branding' ? 'selected' : '' }}>Branding & identité visuelle</option>
                            <option value="marketing" {{ old('project_type') == 'marketing' ? 'selected' : '' }}>Marketing digital</option>
                            <option value="community" {{ old('project_type') == 'community' ? 'selected' : '' }}>Community management</option>
                            <option value="accompagnement" {{ old('project_type') == 'accompagnement' ? 'selected' : '' }}>Accompagnement digital</option>
                            <option value="maintenance" {{ old('project_type') == 'maintenance' ? 'selected' : '' }}>Maintenance & support</option>
                            <option value="autre" {{ old('project_type') == 'autre' ? 'selected' : '' }}>Autre</option>
                        </select>
                    </div>
                    <div class="group">
                        <label for="message" class="block text-sm font-semibold text-gray-800 mb-2">Message *</label>
                        <textarea id="message" name="message" rows="6" required 
                            class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 resize-none" 
                            placeholder="Décrivez votre projet, vos besoins et vos objectifs...">{{ old('message') }}</textarea>
                    </div>
                    <button type="submit" class="btn-premium w-full text-lg py-5 rounded-xl">
                        <span class="relative z-10 flex items-center justify-center gap-3">
                            <span>Envoyer le message</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </span>
                    </button>
                </form>
            </div>

            {{-- INFORMATIONS DE CONTACT --}}
            <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="card-premium glass-premium text-center p-8 rounded-2xl hover-lift group">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300 shadow-premium">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Email</h3>
                    <a href="mailto:contact@kontixx.com" class="text-gray-700 font-medium hover:text-kontixx-blue transition-colors">contact@kontixx.com</a>
                </div>
                <div class="card-premium glass-premium text-center p-8 rounded-2xl hover-lift group">
                    <div class="w-16 h-16 bg-gradient-warm rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300 shadow-premium">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Téléphone</h3>
                    <a href="tel:0340271896" class="text-gray-700 font-medium hover:text-kontixx-blue transition-colors block">034 02 71 896</a>
                    <a href="https://wa.me/261340271896" target="_blank" rel="noopener noreferrer" class="text-gray-600 text-sm mt-1 hover:text-green-600 transition-colors inline-block">034 02 71 896 (WhatsApp)</a>
                </div>
                <div class="card-premium glass-premium text-center p-8 rounded-2xl hover-lift group">
                    <div class="w-16 h-16 bg-gradient-brown rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300 shadow-premium">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Adresse</h3>
                    <p class="text-gray-700 font-medium">Antananarivo, Madagascar</p>
                </div>
            </div>

            {{-- BOUTON RDV PREMIUM --}}
            <div class="mt-16 text-center animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                <div class="card-premium glass-premium p-8 md:p-12 rounded-2xl shadow-premium">
                    <div class="mb-6">
                        <div class="w-20 h-20 bg-gradient-warm rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">Préférez-vous un rendez-vous ?</h3>
                        <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                            Planifiez un rendez-vous gratuit avec notre équipe pour discuter de votre projet en détail
                        </p>
                    </div>
                    <a href="{{ route('appointment') }}" class="btn-cta-orange group relative inline-flex items-center gap-3 transform hover:scale-105 hover:-translate-y-1" style="border-radius: 999px; padding: 16px 32px;">
                        <svg class="w-5 h-5 relative z-10 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <span class="relative z-10">Prendre rendez-vous</span>
                        <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
        // Scroll vers la notification de succès et réinitialiser le formulaire
        @if(session('success'))
            document.addEventListener('DOMContentLoaded', function() {
                const notification = document.querySelector('.notification-success');
                if (notification) {
                    // Scroll vers la notification
                    notification.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    // Réinitialiser le formulaire après 1 seconde
                    setTimeout(function() {
                        const form = document.querySelector('form[action="{{ route('contact.store') }}"]');
                        if (form) {
                            form.reset();
                        }
                    }, 1000);
                }
            });
        @endif
    </script>
    @endpush
@endsection