@extends('layouts.app')

@section('title', 'Rendez-vous Stratégique - HOCHMAN Legal')
@section('description', 'Prenez rendez-vous pour une consultation stratégique avec Boris Hochman, avocat spécialisé en droit des affaires à Paris.')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
    <!-- Hero Section -->
    <section class="relative pt-20 pb-16 overflow-hidden">
        <div class="absolute inset-0">
            <div class="absolute top-20 left-10 w-80 h-80 bg-red-600 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div>
            <div class="absolute top-40 right-10 w-80 h-80 bg-gray-600 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow" style="animation-delay: 2s"></div>
            <div class="absolute bottom-20 left-20 w-80 h-80 bg-black rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse-slow" style="animation-delay: 4s"></div>
        </div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-black mb-8 bg-gradient-to-r from-red-600 via-gray-800 to-black bg-clip-text text-transparent animate-gradient-flow">
                    Rendez-vous Stratégique
                </h1>
                <div class="text-2xl md:text-3xl font-bold text-gray-800 mb-8">
                    Consultation avec votre The Legal Partner
                </div>
                <p class="text-xl md:text-2xl text-gray-700 max-w-5xl mx-auto leading-relaxed font-medium">
                    Décrivez votre situation et planifions ensemble la stratégie juridique la plus adaptée à vos enjeux d'entreprise.
                </p>
            </div>
        </div>
    </section>

    <!-- Form Section -->
    <section class="py-20">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            @if(session('success'))
                <div class="bg-green-50 border border-green-200 rounded-xl p-6 mb-8">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-green-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-50 border border-red-200 rounded-xl p-6 mb-8">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-red-600 mr-3" 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>
                        <p class="text-red-800 font-medium">{{ session('error') }}</p>
                    </div>
                </div>
            @endif

            <div class="bg-white rounded-3xl shadow-2xl border border-gray-100 overflow-hidden">
                <div class="bg-gradient-to-r from-red-600 to-black p-8 text-white text-center">
                    <h2 class="text-3xl font-bold mb-2">Formulaire de Demande</h2>
                    <p class="text-red-100">Toutes les informations sont confidentielles et protégées par le secret professionnel</p>
                </div>

                <form method="POST" action="{{ route('rendez-vous-strategique.store') }}" class="p-8 space-y-8">
                    @csrf

                    <!-- Informations personnelles -->
                    <div class="bg-gray-50 rounded-2xl p-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                            <svg class="w-6 h-6 text-red-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            Informations personnelles
                        </h3>
                        
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label for="prenom" class="block text-sm font-semibold text-gray-700 mb-2">Prénom *</label>
                                <input type="text" id="prenom" name="prenom" value="{{ old('prenom') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('prenom')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="nom" class="block text-sm font-semibold text-gray-700 mb-2">Nom *</label>
                                <input type="text" id="nom" name="nom" value="{{ old('nom') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('nom')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Email *</label>
                                <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('email')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="telephone" class="block text-sm font-semibold text-gray-700 mb-2">Téléphone *</label>
                                <input type="tel" id="telephone" name="telephone" value="{{ old('telephone') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('telephone')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Informations professionnelles -->
                    <div class="bg-gray-50 rounded-2xl p-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                            <svg class="w-6 h-6 text-red-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                            Informations professionnelles
                        </h3>
                        
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label for="entreprise" class="block text-sm font-semibold text-gray-700 mb-2">Entreprise *</label>
                                <input type="text" id="entreprise" name="entreprise" value="{{ old('entreprise') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('entreprise')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="poste" class="block text-sm font-semibold text-gray-700 mb-2">Votre poste *</label>
                                <input type="text" id="poste" name="poste" value="{{ old('poste') }}" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('poste')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div class="md:col-span-2">
                                <label for="secteur" class="block text-sm font-semibold text-gray-700 mb-2">Secteur d'activité *</label>
                                <input type="text" id="secteur" name="secteur" value="{{ old('secteur') }}" required
                                       placeholder="Ex: Commerce, Immobilier, Tech, Industrie..."
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('secteur')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Détails de la demande -->
                    <div class="bg-gray-50 rounded-2xl p-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                            <svg class="w-6 h-6 text-red-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            Détails de votre demande
                        </h3>
                        
                        <div class="space-y-6">
                            <div>
                                <label for="type_demande" class="block text-sm font-semibold text-gray-700 mb-2">Type de demande *</label>
                                <select id="type_demande" name="type_demande" required
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                    <option value="">Sélectionnez le type de demande</option>
                                    <option value="litige" {{ old('type_demande') == 'litige' ? 'selected' : '' }}>🏛️ Litige / Conflit</option>
                                    <option value="controle_fiscal" {{ old('type_demande') == 'controle_fiscal' ? 'selected' : '' }}>📊 Contrôle Fiscal</option>
                                    <option value="conseil_juridique" {{ old('type_demande') == 'conseil_juridique' ? 'selected' : '' }}>⚖️ Conseil Juridique</option>
                                    <option value="investissement" {{ old('type_demande') == 'investissement' ? 'selected' : '' }}>🏢 Projet d'Investissement</option>
                                    <option value="autre" {{ old('type_demande') == 'autre' ? 'selected' : '' }}>❓ Autre</option>
                                </select>
                                @error('type_demande')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="urgence" class="block text-sm font-semibold text-gray-700 mb-2">Niveau d'urgence *</label>
                                <select id="urgence" name="urgence" required
                                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                    <option value="">Sélectionnez le niveau d'urgence</option>
                                    <option value="immediate" {{ old('urgence') == 'immediate' ? 'selected' : '' }}>🔴 Immédiate (réponse souhaitée sous 24h)</option>
                                    <option value="semaine" {{ old('urgence') == 'semaine' ? 'selected' : '' }}>🟡 Dans la semaine</option>
                                    <option value="mois" {{ old('urgence') == 'mois' ? 'selected' : '' }}>🟢 Dans le mois</option>
                                </select>
                                @error('urgence')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="budget" class="block text-sm font-semibold text-gray-700 mb-2">Budget envisagé (optionnel)</label>
                                <input type="text" id="budget" name="budget" value="{{ old('budget') }}"
                                       placeholder="Ex: 5 000€, 10 000€, À discuter..."
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('budget')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">Description de votre situation *</label>
                                <textarea id="description" name="description" rows="6" required
                                          placeholder="Décrivez votre situation, vos enjeux, le contexte... Plus vous serez précis, mieux nous pourrons vous conseiller."
                                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200 resize-none">{{ old('description') }}</textarea>
                                <p class="text-sm text-gray-500 mt-1">Minimum 20 caractères, maximum 2000 caractères</p>
                                @error('description')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="disponibilites" class="block text-sm font-semibold text-gray-700 mb-2">Vos disponibilités *</label>
                                <textarea id="disponibilites" name="disponibilites" rows="3" required
                                          placeholder="Ex: Lundi à vendredi 9h-18h, Mardi et jeudi après-midi, Flexible..."
                                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200 resize-none">{{ old('disponibilites') }}</textarea>
                                @error('disponibilites')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label for="comment_connu" class="block text-sm font-semibold text-gray-700 mb-2">Comment nous avez-vous connu ? (optionnel)</label>
                                <input type="text" id="comment_connu" name="comment_connu" value="{{ old('comment_connu') }}"
                                       placeholder="Ex: Recommandation, Google, LinkedIn, Bouche-à-oreille..."
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors duration-200">
                                @error('comment_connu')
                                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Conditions -->
                    <div class="bg-red-50 rounded-2xl p-6 border border-red-200">
                        <div class="flex items-start">
                            <input type="checkbox" id="accepte_conditions" name="accepte_conditions" value="1" 
                                   {{ old('accepte_conditions') ? 'checked' : '' }} required
                                   class="mt-1 mr-3 h-5 w-5 text-red-600 border-red-300 rounded focus:ring-red-500">
                            <label for="accepte_conditions" class="text-sm text-gray-700">
                                J'accepte que mes données soient utilisées pour traiter ma demande de rendez-vous. 
                                Ces informations sont confidentielles et protégées par le secret professionnel de l'avocat. 
                                Elles ne seront jamais transmises à des tiers.
                            </label>
                        </div>
                        @error('accepte_conditions')
                            <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center">
                        <button type="submit" 
                                class="bg-gradient-to-r from-red-600 to-black text-white font-bold py-4 px-12 rounded-2xl hover:from-red-700 hover:to-gray-900 transform hover:scale-105 transition-all duration-300 shadow-2xl">
                            <svg class="w-6 h-6 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                            </svg>
                            Envoyer ma demande de rendez-vous
                        </button>
                        
                        <p class="text-sm text-gray-500 mt-4">
                            Nous vous recontacterons dans les plus brefs délais pour planifier votre rendez-vous.
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Contact Info -->
    <section class="py-16 bg-gradient-to-r from-black via-gray-900 to-black">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h3 class="text-2xl font-bold text-white mb-6">En cas d'urgence absolue</h3>
            <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8">
                <a href="tel:+33187663929" class="flex items-center text-red-400 hover:text-white transition-colors duration-200">
                    <svg class="w-6 h-6 mr-2" 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>
                    01 87 66 39 29
                </a>
                <a href="mailto:bh@hochman.fr" class="flex items-center text-red-400 hover:text-white transition-colors duration-200">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.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>
                    bh@hochman.fr
                </a>
            </div>
        </div>
    </section>
</div>

<style>
@keyframes gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animate-gradient-flow {
    background-size: 200% 200%;
    animation: gradient-flow 3s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.3; }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}
</style>
@endsection