@extends('errors.layout')
@section('title', '500 — Server Error')

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

    <!-- Left: text -->
    <div class="error-left">
        <div class="error-code">500</div>
        <h1 class="error-title">Something went wrong!</h1>
        <p class="error-desc">
            We're sorry, but something unexpected happened on our end.
            Our team has been notified and is working on fixing the issue.
        </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>
            <button onclick="window.location.reload()" class="btn-outline">
                <svg class="icon icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.7"/>
                </svg>
                Try Again
            </button>
        </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"/>

            <!-- Floating gears (background) -->
            <!-- Gear 1 top-right -->
            <g transform="translate(320,90) rotate(15)">
                <circle cx="0" cy="0" r="22" fill="none" stroke="#c5ddb8" stroke-width="6"/>
                <circle cx="0" cy="0" r="10" fill="#c5ddb8"/>
                <rect x="-5" y="-28" width="10" height="12" rx="3" fill="#c5ddb8"/>
                <rect x="-5" y="16" width="10" height="12" rx="3" fill="#c5ddb8"/>
                <rect x="-28" y="-5" width="12" height="10" rx="3" fill="#c5ddb8"/>
                <rect x="16" y="-5" width="12" height="10" rx="3" fill="#c5ddb8"/>
            </g>
            <!-- Gear 2 top-left smaller -->
            <g transform="translate(115,105) rotate(-10)">
                <circle cx="0" cy="0" r="16" fill="none" stroke="#c5ddb8" stroke-width="5"/>
                <circle cx="0" cy="0" r="7" fill="#c5ddb8"/>
                <rect x="-4" y="-20" width="8" height="9" rx="2" fill="#c5ddb8"/>
                <rect x="-4" y="11" width="8" height="9" rx="2" fill="#c5ddb8"/>
                <rect x="-20" y="-4" width="9" height="8" rx="2" fill="#c5ddb8"/>
                <rect x="11" y="-4" width="9" height="8" rx="2" fill="#c5ddb8"/>
            </g>
            <!-- Plus signs -->
            <text x="150" y="140" font-size="18" fill="#c5ddb8" font-weight="300">+</text>
            <text x="350" y="155" font-size="14" fill="#c5ddb8" font-weight="300">+</text>
            <text x="105" y="260" font-size="12" fill="#c5ddb8" font-weight="300">+</text>

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

            <!-- Road barrier board - main rectangle with stripes -->
            <!-- Board frame -->
            <rect x="128" y="195" width="210" height="80" rx="8" fill="#2b5e20"/>
            <rect x="132" y="199" width="202" height="72" rx="6" fill="#fff"/>
            <!-- Diagonal stripes (alternating green/white) -->
            <clipPath id="board-clip">
                <rect x="132" y="199" width="202" height="72" rx="6"/>
            </clipPath>
            <g clip-path="url(#board-clip)">
                <rect x="112" y="185" width="34" height="110" fill="#2b5e20" transform="skewX(-20)"/>
                <rect x="164" y="185" width="34" height="110" fill="#2b5e20" transform="skewX(-20)"/>
                <rect x="216" y="185" width="34" height="110" fill="#2b5e20" transform="skewX(-20)"/>
                <rect x="268" y="185" width="34" height="110" fill="#2b5e20" transform="skewX(-20)"/>
                <rect x="320" y="185" width="34" height="110" fill="#2b5e20" transform="skewX(-20)"/>
            </g>
            <!-- Text overlay on board -->
            <text x="233" y="230" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="22" font-weight="800" fill="#2b5e20">500</text>
            <text x="233" y="255" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="9" font-weight="700" fill="#2b5e20" letter-spacing="1.5">INTERNAL SERVER ERROR</text>

            <!-- Left traffic cone -->
            <polygon points="175,345 195,345 185,260" fill="#4a8c38"/>
            <polygon points="176,312 194,312 190,300 180,300" fill="#fff" opacity="0.5"/>
            <polygon points="178,330 192,330 189,320 181,320" fill="#fff" opacity="0.5"/>
            <!-- Cone base -->
            <rect x="170" y="342" width="30" height="8" rx="3" fill="#3a7a2a"/>

            <!-- Right traffic cone -->
            <polygon points="265,345 285,345 275,260" fill="#4a8c38"/>
            <polygon points="266,312 284,312 280,300 270,300" fill="#fff" opacity="0.5"/>
            <polygon points="268,330 282,330 279,320 271,320" fill="#fff" opacity="0.5"/>
            <!-- Cone base -->
            <rect x="260" y="342" width="30" height="8" rx="3" fill="#3a7a2a"/>

            <!-- Alert light on top of barrier board -->
            <circle cx="233" cy="188" r="14" fill="#f59e0b"/>
            <circle cx="233" cy="188" r="8" fill="#fcd34d"/>
            <rect x="230" y="175" width="6" height="8" rx="2" fill="#d97706"/>

            <!-- Wrench (right side) -->
            <g transform="translate(340,285) rotate(-35)">
                <rect x="-5" y="-35" width="10" height="70" rx="5" fill="#6b7280"/>
                <circle cx="0" cy="-35" r="13" fill="none" stroke="#6b7280" stroke-width="7"/>
                <circle cx="0" cy="-35" r="6" fill="#fff"/>
                <circle cx="0" cy="35" r="13" fill="none" stroke="#6b7280" stroke-width="7"/>
                <circle cx="0" cy="35" r="6" fill="#fff"/>
            </g>
        </svg>
    </div>

</div>
@endsection