@extends('layouts.app')

@section('title', 'Merci - KONTIXX Agency')
@section('footer-tagline', 'Votre projet digital mérite une attention particulière. Nous étudions votre cahier des charges avec soin.')

@section('content')
<section class="min-h-[80vh] flex items-center justify-center bg-gradient-to-br from-gray-50 via-blue-50/30 to-gray-50 py-20">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="card-premium rounded-3xl p-12">
            {{-- ICÔNE DE SUCCÈS --}}
            <div class="w-24 h-24 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg">
                <svg class="w-12 h-12 text-white" 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>
            </div>

            {{-- TITRE --}}
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                Merci pour votre confiance !
            </h1>

            {{-- MESSAGE --}}
            <p class="text-xl text-gray-700 mb-8 leading-relaxed">
                Votre cahier des charges a été envoyé avec succès. Notre équipe l'étudie attentivement et vous contactera dans les plus brefs délais pour vous proposer une solution adaptée à vos besoins.
            </p>

            @if(session('success'))
                <div class="mb-8 bg-green-50 border border-green-200 rounded-xl p-4">
                    <p class="text-green-800 font-semibold">{{ session('success') }}</p>
                </div>
            @endif

            {{-- INFORMATIONS --}}
            <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Prochaines étapes</h3>
                <ul class="text-left space-y-2 text-gray-700">
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Analyse de votre cahier des charges par notre équipe</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Préparation d'une proposition technique et financière personnalisée</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Contact sous 48h pour discuter de votre projet</span>
                    </li>
                </ul>
            </div>

            {{-- ACTIONS --}}
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('home') }}" class="btn-premium px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl">
                    Retour à l'accueil
                </a>
                <a href="{{ route('contact') }}" class="px-8 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-all duration-300 font-semibold">
                    Nous contacter
                </a>
            </div>
        </div>
    </div>
</section>
@endsection