@extends('layouts.app')

@section('title', 'Cahier des charges - KONTIXX Agency')
@section('footer-tagline', 'Un projet digital réussi commence par un cahier des charges précis. Complétez ce formulaire pour recevoir une proposition personnalisée.')

@section('content')
{{-- HERO SECTION --}}
<section class="section-premium bg-gradient-premium py-16 lg:py-20 relative overflow-hidden">
    <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-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
            <span class="text-premium-gradient">Cahier des charges</span>
        </h1>
        <p class="text-xl text-gray-700 max-w-2xl mx-auto leading-relaxed">
            Document professionnel destiné à cadrer précisément votre projet digital et à permettre une proposition technique et financière claire et adaptée.
        </p>
    </div>
</section>

{{-- BLOC RENDEZ-VOUS --}}
<section class="py-8 bg-gradient-to-r from-blue-50 via-indigo-50 to-blue-50">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="card-premium rounded-2xl p-6 sm:p-8 border-2 border-blue-200/50 bg-white/80 backdrop-blur-sm">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center space-x-4 flex-1">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                        </svg>
                    </div>
                    <div>
                        <p class="text-base sm:text-lg font-semibold text-gray-900">
                            💬 Vous préférez en discuter directement ?
                        </p>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">
                            Prenez rendez-vous avec notre équipe.
                        </p>
                    </div>
                </div>
                <a href="{{ route('appointment') }}" class="btn-cta-orange inline-flex items-center justify-center px-6 py-3 text-sm sm:text-base font-semibold whitespace-nowrap w-full sm:w-auto">
                    <span>Prendre rendez-vous</span>
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

{{-- FORMULAIRE CDC --}}
<section class="py-16 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <form action="{{ route('cdc.store') }}" method="POST" class="space-y-12" id="cdc-form">
            @csrf

            {{-- SECTION 1: ENTREPRISE & CONTACT --}}
            <div class="card-premium rounded-2xl p-8">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mr-4">
                        <span class="text-white font-bold text-xl">1</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">Entreprise & Contact</h2>
                        <p class="text-sm text-gray-500 mt-1">Informations sur votre entreprise</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Informations sur l'entreprise</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Nom de l'entreprise *</label>
                                <input type="text" name="company_name" value="{{ old('company_name') }}" required
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Siège social</label>
                                <input type="text" name="company_address" value="{{ old('company_address') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Code postal</label>
                                <input type="text" name="company_postal_code" value="{{ old('company_postal_code') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Ville</label>
                                <input type="text" name="company_city" value="{{ old('company_city') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Forme juridique</label>
                                <input type="text" name="company_legal_form" value="{{ old('company_legal_form') }}" placeholder="SARL, SAS, Auto-entrepreneur..."
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Site internet actuel</label>
                                <input type="url" name="company_website" value="{{ old('company_website') }}" placeholder="https://..."
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Chef de projet</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Civilité</label>
                                <select name="project_manager_civility" value="{{ old('project_manager_civility') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="M." {{ old('project_manager_civility') == 'M.' ? 'selected' : '' }}>M.</option>
                                    <option value="Mme" {{ old('project_manager_civility') == 'Mme' ? 'selected' : '' }}>Mme</option>
                                    <option value="Mlle" {{ old('project_manager_civility') == 'Mlle' ? 'selected' : '' }}>Mlle</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Prénom</label>
                                <input type="text" name="project_manager_firstname" value="{{ old('project_manager_firstname') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Nom</label>
                                <input type="text" name="project_manager_lastname" value="{{ old('project_manager_lastname') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Fonction</label>
                                <input type="text" name="project_manager_function" value="{{ old('project_manager_function') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Téléphone</label>
                                <input type="tel" name="project_manager_phone" value="{{ old('project_manager_phone') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Email *</label>
                                <input type="email" name="project_manager_email" value="{{ old('project_manager_email') }}" required
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('project_manager_email') border-red-300 @enderror">
                                @error('project_manager_email')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 2: ACTIVITÉ & PROJET --}}
            <div class="card-premium rounded-2xl p-8">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center mr-4">
                        <span class="text-white font-bold text-xl">2</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">Votre activité & le projet</h2>
                        <p class="text-sm text-gray-500 mt-1">Comprendre votre métier, votre marché et vos attentes</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Présentation de votre activité</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Secteur d'activité</label>
                                <input type="text" name="activity_sector" value="{{ old('activity_sector') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Vous vendez</label>
                                <select name="sells_type" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="produits" {{ old('sells_type') == 'produits' ? 'selected' : '' }}>Produits</option>
                                    <option value="services" {{ old('sells_type') == 'services' ? 'selected' : '' }}>Services</option>
                                    <option value="les deux" {{ old('sells_type') == 'les deux' ? 'selected' : '' }}>Les deux</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Description de votre activité (1 phrase)</label>
                                <textarea name="activity_description" rows="2" 
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('activity_description') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Marché ciblé</label>
                                <select name="target_market" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="local" {{ old('target_market') == 'local' ? 'selected' : '' }}>Local</option>
                                    <option value="régional" {{ old('target_market') == 'régional' ? 'selected' : '' }}>Régional</option>
                                    <option value="national" {{ old('target_market') == 'national' ? 'selected' : '' }}>National</option>
                                    <option value="international" {{ old('target_market') == 'international' ? 'selected' : '' }}>International</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Cibles</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="target_audience[]" value="B2C" {{ in_array('B2C', old('target_audience', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Particuliers (B2C)</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="target_audience[]" value="B2B" {{ in_array('B2B', old('target_audience', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Professionnels (B2B)</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" name="target_audience[]" value="Institutionnels" {{ in_array('Institutionnels', old('target_audience', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Institutionnels</span>
                                    </label>
                                </div>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Concurrents principaux (nom et site web)</label>
                                <textarea name="main_competitors" rows="3" placeholder="Ex: Nom - https://site.com"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('main_competitors') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Projet de création / refonte du site</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Pourquoi souhaitez-vous créer ou refondre votre site ?</label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_reason[]" value="Je n'ai pas de site actuellement" {{ in_array("Je n'ai pas de site actuellement", old('project_reason', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Je n'ai pas de site actuellement</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_reason[]" value="Mon activité a évolué" {{ in_array('Mon activité a évolué', old('project_reason', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Mon activité a évolué</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_reason[]" value="Je souhaite gérer mon site moi-même" {{ in_array('Je souhaite gérer mon site moi-même', old('project_reason', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Je souhaite gérer mon site moi-même</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_reason[]" value="Mon site est obsolète" {{ in_array('Mon site est obsolète', old('project_reason', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Mon site est obsolète</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_reason[]" value="Améliorer ma visibilité locale" {{ in_array('Améliorer ma visibilité locale', old('project_reason', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Améliorer ma visibilité locale</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Objectifs principaux du site</label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Présenter mon entreprise et mes prestations" {{ in_array('Présenter mon entreprise et mes prestations', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Présenter mon entreprise et mes prestations</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Améliorer mon image professionnelle" {{ in_array('Améliorer mon image professionnelle', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Améliorer mon image professionnelle</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Préparer une stratégie SEO" {{ in_array('Préparer une stratégie SEO', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Préparer une stratégie SEO</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Gagner en visibilité locale (Google)" {{ in_array('Gagner en visibilité locale (Google)', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Gagner en visibilité locale (Google)</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Générer des contacts / devis" {{ in_array('Générer des contacts / devis', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Générer des contacts / devis</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" name="project_objectives[]" value="Valoriser les témoignages et éléments de réassurance" {{ in_array('Valoriser les témoignages et éléments de réassurance', old('project_objectives', [])) ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Valoriser les témoignages et éléments de réassurance</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 3: UX & DESIGN --}}
            <div class="card-premium rounded-2xl p-8">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-xl flex items-center justify-center mr-4">
                        <span class="text-white font-bold text-xl">3</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">UX & Design</h2>
                        <p class="text-sm text-gray-500 mt-1">Expérience utilisateur et univers visuel</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Expérience utilisateur (UX)</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Nombre de pages souhaité</label>
                                <input type="number" name="number_of_pages" value="{{ old('number_of_pages') }}" min="1"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Arborescence / Menu</label>
                                <textarea name="site_structure" rows="4" placeholder="Ex: Accueil (1) | À propos (1) | Services (3) | Contact (1) | Blog (10 articles)"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('site_structure') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Design graphique</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Tonalité souhaitée</label>
                                <select name="design_tone" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="Moderne & épuré" {{ old('design_tone') == 'Moderne & épuré' ? 'selected' : '' }}>Moderne & épuré</option>
                                    <option value="Haut de gamme / Premium" {{ old('design_tone') == 'Haut de gamme / Premium' ? 'selected' : '' }}>Haut de gamme / Premium</option>
                                    <option value="Traditionnel & rassurant" {{ old('design_tone') == 'Traditionnel & rassurant' ? 'selected' : '' }}>Traditionnel & rassurant</option>
                                    <option value="Convivial & chaleureux" {{ old('design_tone') == 'Convivial & chaleureux' ? 'selected' : '' }}>Convivial & chaleureux</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Identité visuelle</label>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="has_logo" value="1" {{ old('has_logo') ? 'checked' : '' }}
                                                class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                            <span class="text-sm text-gray-700">Logo</span>
                                        </label>
                                    </div>
                                    <div>
                                        <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="has_brand_guidelines" value="1" {{ old('has_brand_guidelines') ? 'checked' : '' }}
                                                class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                            <span class="text-sm text-gray-700">Charte graphique</span>
                                        </label>
                                    </div>
                                    <div>
                                        <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="has_typography" value="1" {{ old('has_typography') ? 'checked' : '' }}
                                                class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                            <span class="text-sm text-gray-700">Typographie</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Couleurs principales (2 max)</label>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                    @foreach(['Blanc', 'Noir', 'Bleu', 'Vert', 'Orange', 'Jaune', 'Rouge', 'Violet'] as $color)
                                        <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="main_colors[]" value="{{ $color }}" {{ in_array($color, old('main_colors', [])) ? 'checked' : '' }}
                                                class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                            <span class="text-sm text-gray-700">{{ $color }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Forme des boutons</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="button_shape" value="arrondis" {{ old('button_shape') == 'arrondis' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Arrondis</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="button_shape" value="carrés" {{ old('button_shape') == 'carrés' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Carrés</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Références design</label>
                                <textarea name="design_references" rows="3" placeholder="Sites web inspirants, éléments appréciés, éléments non appréciés..."
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('design_references') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Précisions complémentaires (optionnel)</label>
                                <textarea name="design_notes" rows="3"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('design_notes') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Contenus textuels</label>
                                <select name="content_provision" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="Je fournis tous les textes prêts à intégrer" {{ old('content_provision') == 'Je fournis tous les textes prêts à intégrer' ? 'selected' : '' }}>Je fournis tous les textes prêts à intégrer</option>
                                    <option value="Rédaction complète par le prestataire" {{ old('content_provision') == 'Rédaction complète par le prestataire' ? 'selected' : '' }}>Rédaction complète par le prestataire</option>
                                    <option value="Reformulation professionnelle de mes textes" {{ old('content_provision') == 'Reformulation professionnelle de mes textes' ? 'selected' : '' }}>Reformulation professionnelle de mes textes</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 4: FONCTIONNALITÉS & TECHNIQUE --}}
            <div class="card-premium rounded-2xl p-8">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center mr-4">
                        <span class="text-white font-bold text-xl">4</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">Fonctionnalités & Technique</h2>
                        <p class="text-sm text-gray-500 mt-1">Sélectionnez les fonctionnalités utiles à votre activité</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Fonctionnalités de base</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="contact_form" value="1" {{ old('contact_form') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Formulaire de contact</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="google_maps" value="1" {{ old('google_maps') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Carte Google Maps</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="social_links" value="1" {{ old('social_links') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Liens réseaux sociaux</span>
                            </label>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Fonctionnalités avancées</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="online_appointment" value="1" {{ old('online_appointment') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Prise de rendez-vous en ligne</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="advanced_form" value="1" {{ old('advanced_form') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Formulaire avancé</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="portfolio" value="1" {{ old('portfolio') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Portfolio</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="multilingual" value="1" {{ old('multilingual') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Site multilingue</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="document_download" value="1" {{ old('document_download') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Téléchargement de documents</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="online_chat" value="1" {{ old('online_chat') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Chat en ligne</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="customer_reviews" value="1" {{ old('customer_reviews') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Avis clients / Google Reviews</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="online_payment" value="1" {{ old('online_payment') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Paiement en ligne</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="ecommerce" value="1" {{ old('ecommerce') ? 'checked' : '' }}
                                    class="mr-3 w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm font-medium text-gray-700">Boutique e-commerce</span>
                            </label>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Autres fonctionnalités</label>
                            <textarea name="other_features" rows="2" placeholder="Décrivez d'autres fonctionnalités spécifiques..."
                                class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('other_features') }}</textarea>
                        </div>
                        <div class="mt-4">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Autonomie après livraison</label>
                            <div class="flex gap-4">
                                <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="wants_autonomy" value="1" {{ old('wants_autonomy') == '1' ? 'checked' : '' }}
                                        class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700">Oui, je souhaite être autonome</span>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="wants_autonomy" value="0" {{ old('wants_autonomy') == '0' ? 'checked' : '' }}
                                        class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700">Non, je préfère que l'agence gère</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 5: HÉBERGEMENT & ORGANISATION --}}
            <div class="card-premium rounded-2xl p-8">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl flex items-center justify-center mr-4">
                        <span class="text-white font-bold text-xl">5</span>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">Hébergement & Organisation</h2>
                        <p class="text-sm text-gray-500 mt-1">Gestion technique et planning du projet</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Hébergement & nom de domaine</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Nom de domaine existant</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="has_domain" value="1" {{ old('has_domain') == '1' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Oui</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="has_domain" value="0" {{ old('has_domain') == '0' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Non</span>
                                    </label>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Hébergement & maintenance par l'agence</label>
                                <div class="flex gap-4">
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="wants_hosting_maintenance" value="1" {{ old('wants_hosting_maintenance') == '1' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Oui</span>
                                    </label>
                                    <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="wants_hosting_maintenance" value="0" {{ old('wants_hosting_maintenance') == '0' ? 'checked' : '' }}
                                            class="mr-2 w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                                        <span class="text-sm text-gray-700">Non</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Marketing digital</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                            @foreach([
                                'Rédaction de contenus',
                                'Référencement naturel (SEO)',
                                'Référencement payant (SEA)',
                                'Création de logo',
                                'Maintenance évolutive',
                                'Email marketing / mailing',
                                'Formation / Coaching (WordPress, marketing digital)'
                            ] as $service)
                                <label class="flex items-center p-3 border border-gray-200 rounded-xl hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" name="marketing_services[]" value="{{ $service }}" {{ in_array($service, old('marketing_services', [])) ? 'checked' : '' }}
                                        class="mr-2 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                    <span class="text-sm text-gray-700">{{ $service }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Organisation du projet</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Date de réponse au cahier des charges</label>
                                <input type="date" name="response_date" value="{{ old('response_date') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Date de mise en ligne souhaitée</label>
                                <input type="date" name="desired_launch_date" value="{{ old('desired_launch_date') }}"
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Mode de facturation</label>
                                <select name="billing_mode" class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Sélectionner</option>
                                    <option value="Achat" {{ old('billing_mode') == 'Achat' ? 'selected' : '' }}>Achat</option>
                                    <option value="Location" {{ old('billing_mode') == 'Location' ? 'selected' : '' }}>Location</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">Email de réception du devis / cahier des charges *</label>
                                <input type="email" name="quote_email" value="{{ old('quote_email') }}" required
                                    class="input-premium w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('quote_email') border-red-300 @enderror">
                                @error('quote_email')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- BOUTON DE SOUMISSION --}}
            <div class="flex justify-center pt-8">
                <button type="submit" class="btn-cta-orange shine px-12 py-4 text-lg font-semibold rounded-xl">
                    <span class="relative z-10 flex items-center">
                        <svg class="w-5 h-5 mr-2" 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>
                        Recevoir mon devis
                    </span>
                </button>
            </div>
        </form>
    </div>
</section>
@endsection