@extends('layouts.guest-landing') {{-- Or use authed layout --}}

@section('title', 'Order Placed Successfully')

@section('content')
    <div class="bg-white py-16">
        <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

            {{-- Success Icon --}}
            <div class="mb-4">
                <svg class="mx-auto h-16 w-16 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>

            <h1 class="text-2xl font-semibold text-gray-900 mb-4">
                Thank You! Your Order Has Been Placed.
            </h1>

            <p class="text-base text-gray-600 mb-8">
                Your donation and any associated Amazon Business orders have been successfully submitted. You should receive
                confirmation emails shortly.
            </p>

            <div class="space-x-4">
                <a href="{{ route('landing') }}"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Back to Home
                </a>
                {{-- Link to user's order history if available --}}
                {{-- <a href="{{ route('user.orders') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
               View Orders
            </a> --}}
            </div>

        </div>
    </div>
@endsection