@extends('errors.layout')
@section('title', '403 — Forbidden')
@section('content')
<div class="max-w-2xl mx-auto text-center">
    <div class="float-anim inline-block">
        <svg width="200" height="200" viewBox="0 0 200 200" fill="none" class="mx-auto">
            <circle cx="100" cy="100" r="92" fill="#fee2e2"/>
            <circle cx="100" cy="100" r="72" fill="#fff" stroke="#ef4444" stroke-width="2" stroke-dasharray="4 6"/>
            <text x="100" y="118" text-anchor="middle" font-family="Plus Jakarta Sans, sans-serif" font-weight="900" font-size="56" fill="#0a1430">403</text>
            <circle cx="40" cy="40" r="6" fill="#ff8a00"/>
            <circle cx="170" cy="60" r="4" fill="#ef4444"/>
            <circle cx="160" cy="160" r="5" fill="#3b6df0"/>
        </svg>
    </div>
    <h1 class="font-display font-extrabold text-3xl lg:text-5xl mt-6 leading-tight">{{ __('Access forbidden') }}</h1>
    <p class="text-slate-500 text-[15px] mt-3 max-w-md mx-auto">{{ __($exception->getMessage() ?: "You don't have permission to access this resource. If you think this is a mistake, please contact support.") }}</p>

    <div class="flex items-center justify-center gap-3 mt-7 flex-wrap">
        <a href="{{ url('/') }}" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
            {{ __('Back to home') }}
        </a>
        <a href="javascript:history.back()" class="bg-white hover:bg-slate-50 border-2 border-slate-200 text-deep font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            {{ __('Go back') }}
        </a>
    </div>
</div>
@endsection