@extends('errors.layout', [
'classPage' => 'error-page',
'activePage' => '403',
'title' => __(env("INSTANCE_NAME", "MI AGENCIA GHP")),
'pageBackground' => null // Quitar imagen de fondo
])

@section('content')
@include('includes.tailwind')
<div class="flex flex-col items-center justify-center min-h-[70vh] px-4 bg-gray-50">
  {{-- Icono de advertencia --}}
  <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-red-600 mb-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M12 9v2m0 4h.01M4.93 4.93l14.14 14.14M4.93 19.07l14.14-14.14" />
  </svg>

  {{-- Código 403 --}}
  <h1 class="text-8xl font-extrabold text-red-600 drop-shadow-sm">403</h1>

  {{-- Título --}}
  <h2 class="text-2xl font-semibold mt-4 text-gray-800">
    {{ __('Acceso denegado') }}
  </h2>

  {{-- Mensaje --}}
  <p class="text-gray-600 mt-2 max-w-md text-center">
    {{ __('No tienes permisos para acceder a este módulo. Por favor, contacta con soporte si crees que es un error.') }}
  </p>

  {{-- Botones de acción --}}
  <div class="mt-6 flex flex-wrap gap-4 justify-center">
    <a href="{{ url('/') }}"
      class="px-6 py-3 bg-red-600 text-white rounded-xl shadow hover:bg-red-700 transition duration-200">
      {{ __('Volver al inicio') }}
    </a>
    <a href="mailto:soporte@tuempresa.com"
      class="px-6 py-3 bg-gray-200 text-gray-800 rounded-xl shadow hover:bg-gray-300 transition duration-200">
      {{ __('Contactar soporte') }}
    </a>
  </div>
</div>

@endsection