@extends('layouts.app')

@section('content')
    <!-- Success Hero Section -->
    <section class="experiences-hero pt-24">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Booking Submitted!</h1>
            <p class="text-xl max-w-2xl mx-auto">Thank you for choosing G4 Homez</p>
        </div>
    </section>

    <!-- Success Message Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto">
                <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 text-center">
                    <div class="mb-6">
                        <i class="fas fa-check-circle text-6xl" style="color: var(--secondary-color);"></i>
                    </div>
                    
                    <h2 class="text-3xl font-bold mb-4" style="color: var(--primary-color);">
                        Booking Request Received!
                    </h2>
                    
                    <p class="text-lg text-gray-600 mb-8">
                        @if(session('success'))
                            {{ session('success') }}
                        @else
                            Your booking request has been submitted successfully. We will review your request and contact you shortly to confirm your reservation.
                        @endif
                    </p>
                    
                    <div class="flex flex-col md:flex-row gap-4 justify-center">
                        <a href="{{ route('booking.index') }}" class="btn-primary px-8 py-3">
                            <i class="fas fa-calendar-plus mr-2"></i>
                            Make Another Booking
                        </a>
                        <a href="{{ url('/') }}" class="btn-primary px-8 py-3" style="background: var(--primary-color);">
                            <i class="fas fa-home mr-2"></i>
                            Back to Home
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection