@extends('layouts.app')

@section('title', 'Payment Failed')

@section('content')
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="px-6 py-8 text-center">
                <!-- Error Icon -->
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mb-4">
                    <svg class="h-8 w-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                    </svg>
                </div>

                <!-- Error Message -->
                <h1 class="text-2xl font-bold text-gray-900 mb-2">Payment Failed</h1>
                <p class="text-gray-600 mb-6">
                    We're sorry, but your payment could not be processed at this time. This could be due to various reasons such as insufficient funds, incorrect card details, or network issues.
                </p>

                <!-- Action Buttons -->
                <div class="space-y-3">
                    <a href="{{ route('checkout') }}"
                       class="w-full bg-red-700 text-white px-6 py-3 rounded-md hover:bg-red-800 transition-colors duration-200 inline-block">
                        Try Again
                    </a>

                    <a href="{{ route('cart') }}"
                       class="w-full bg-gray-500 text-white px-6 py-3 rounded-md hover:bg-gray-600 transition-colors duration-200 inline-block">
                        Back to Cart
                    </a>
                </div>

                <!-- Help Text -->
                <div class="mt-6 text-sm text-gray-500">
                    <p>If you continue to experience issues, please contact our support team.</p>
                    <p class="mt-2">
                        <a href="{{ route('contact') }}" class="text-red-700 hover:text-red-800 underline">
                            Contact Support
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection