@extends('errors.layout')
@section('title', '403 — Access Forbidden')

@section('body')
<div class="error-section">

    <!-- Left: text -->
    <div class="error-left">
        <div class="error-code">403</div>
        <h1 class="error-title">Access Forbidden</h1>
        <p class="error-desc">
            You don't have permission to access this page.
            If you believe this is a mistake, please contact the site administrator.
        </p>

        <div class="action-row">
            <a href="/" class="btn-home">
                <svg class="icon icon-sm" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                Back to Home
            </a>
            <a href="mailto:contact@atgal.com" class="btn-outline">
                <svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                </svg>
                Contact Support
            </a>
        </div>
    </div>

    <!-- Right: Illustration -->
    <div class="error-right">
        <svg class="illustration" viewBox="0 0 420 380" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- Background circle -->
            <circle cx="230" cy="200" r="155" fill="#eef4ec" opacity="0.7"/>

            <!-- Ground -->
            <ellipse cx="230" cy="348" rx="145" ry="22" fill="#c5ddb8"/>

            <!-- Decorative dots / stars -->
            <circle cx="120" cy="120" r="5" fill="#c5ddb8"/>
            <circle cx="135" cy="105" r="3" fill="#c5ddb8"/>
            <circle cx="330" cy="100" r="4" fill="#c5ddb8"/>
            <circle cx="350" cy="118" r="3" fill="#c5ddb8"/>
            <text x="108" y="145" font-size="14" fill="#c5ddb8">+</text>
            <text x="340" y="145" font-size="14" fill="#c5ddb8">+</text>

            <!-- Shield outer -->
            <path d="M230 70 L310 105 L310 195 C310 245 270 280 230 300 C190 280 150 245 150 195 L150 105 Z"
                  fill="#2b5e20"/>
            <!-- Shield inner lighter -->
            <path d="M230 85 L298 116 L298 193 C298 237 263 268 230 286 C197 268 162 237 162 193 L162 116 Z"
                  fill="#3a7a2a"/>
            <!-- Shield sheen -->
            <path d="M230 85 L185 107 L185 193 C185 230 200 255 218 270 L218 85 Z"
                  fill="#4a8c38" opacity="0.25"/>

            <!-- Lock body -->
            <rect x="204" y="185" width="52" height="44" rx="8" fill="#fff"/>
            <!-- Lock shackle -->
            <path d="M212 185 L212 168 C212 152 248 152 248 168 L248 185"
                  fill="none" stroke="#fff" stroke-width="9" stroke-linecap="round"/>
            <!-- Keyhole -->
            <circle cx="230" cy="204" r="7" fill="#2b5e20"/>
            <rect x="226" y="204" width="8" height="12" rx="2" fill="#2b5e20"/>

            <!-- 403 text below shield -->
            <text x="230" y="330" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="16" font-weight="700" fill="#4a8c38" letter-spacing="2">FORBIDDEN</text>

            <!-- Small bushes left/right -->
            <circle cx="140" cy="342" r="18" fill="#4a8c38"/>
            <circle cx="155" cy="336" r="14" fill="#5aa044"/>
            <circle cx="315" cy="340" r="16" fill="#4a8c38"/>
            <circle cx="300" cy="334" r="13" fill="#5aa044"/>
        </svg>
    </div>

</div>
@endsection