@extends('errors::layout')

@section('title', 'Pagamento necessário')

@section('content')
<div class="w-full max-w-lg mx-auto text-center">

    <div class="mb-6">
        <span class="text-8xl md:text-9xl font-black bg-gradient-to-br from-emerald-500 to-teal-600 bg-clip-text text-transparent select-none leading-none">
            402
        </span>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-8">

        <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Pagamento necessário</h1>

        <p class="text-sm text-gray-500 dark:text-gray-400 mb-7">
            O acesso a este conteúdo requer um pagamento ou assinatura ativa.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
            <button onclick="history.back()"
                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600
                           text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-xl transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Voltar
            </button>
            @include('errors._buttons')
        </div>
    </div>

    <p class="mt-6 text-xs text-gray-400 dark:text-gray-500">
        Código de erro: <span class="font-mono">402</span>
        &nbsp;·&nbsp; {{ now()->format('d/m/Y H:i') }}
    </p>

</div>
@endsection