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

@section('title', __('success.title'))

@section('content')
    <div class="bg-white dark:bg-gray-900 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 dark:text-white mb-4">
                {{ __('success.heading') }}
            </h1>

            <p class="text-base text-gray-600 dark:text-gray-300 mb-8">
                {{ __('success.description') }}
            </p>

            <div class="space-x-4">
                <a href="{{ route('landing') }}"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    {{ __('success.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">
                    {{ __('success.view_orders') }}
                </a> --}}
            </div>

        </div>
    </div>
@endsection