@extends('errors.layout')
@section('title', '404 — Page Not Found')

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

    <!-- Left: text -->
    <div class="error-left">
        <div class="error-code">404</div>
        <h1 class="error-title">Oops! Page not found</h1>
        <p class="error-desc">
            The page you are looking for doesn't exist or has been moved.
            It might have been removed, had its name changed, or is temporarily unavailable.
        </p>

        <div class="search-row">
            <input type="text" placeholder="Search something..." id="search-input" onkeydown="if(event.key==='Enter') doSearch()">
            <button onclick="doSearch()" aria-label="Search">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </button>
        </div>

        <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="/" 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">
                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                </svg>
                Go to Sitemap
            </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="160" fill="#eef4ec" opacity="0.8"/>
            <!-- Clouds -->
            <ellipse cx="340" cy="80" rx="40" ry="20" fill="#d8ead4" opacity="0.6"/>
            <ellipse cx="365" cy="80" rx="28" ry="16" fill="#d8ead4" opacity="0.6"/>
            <ellipse cx="110" cy="110" rx="30" ry="14" fill="#d8ead4" opacity="0.5"/>
            <ellipse cx="130" cy="108" rx="20" ry="12" fill="#d8ead4" opacity="0.5"/>

            <!-- Ground/grass mound -->
            <ellipse cx="230" cy="340" rx="140" ry="28" fill="#c5ddb8"/>
            <!-- Bushes -->
            <circle cx="130" cy="335" r="22" fill="#4a8c38"/>
            <circle cx="145" cy="328" r="18" fill="#5aa044"/>
            <circle cx="320" cy="332" r="20" fill="#4a8c38"/>
            <circle cx="305" cy="326" r="16" fill="#5aa044"/>
            <!-- Small leaves left -->
            <ellipse cx="100" cy="310" rx="10" ry="16" fill="#4a8c38" transform="rotate(-20 100 310)"/>
            <ellipse cx="356" cy="308" rx="10" ry="16" fill="#4a8c38" transform="rotate(20 356 308)"/>

            <!-- Post -->
            <rect x="216" y="160" width="18" height="170" rx="4" fill="#8B5E3C"/>
            <rect x="218" y="162" width="6" height="168" rx="3" fill="#a5714a" opacity="0.4"/>

            <!-- Main sign board (dark green) -->
            <rect x="130" y="100" width="200" height="110" rx="12" fill="#2b5e20"/>
            <!-- Sign highlight -->
            <rect x="134" y="104" width="192" height="102" rx="10" fill="#2b5e20"/>
            <!-- Sign sheen -->
            <rect x="134" y="104" width="60" height="102" rx="10" fill="#3a7a2a" opacity="0.3"/>

            <!-- 404 text on sign -->
            <text x="230" y="148" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="38" font-weight="800" fill="#fff">404</text>
            <text x="230" y="176" text-anchor="middle" font-family="Inter,Arial,sans-serif" font-size="13" font-weight="600" fill="#a8d89a" letter-spacing="2">PAGE NOT FOUND</text>
            <!-- Sign border -->
            <rect x="130" y="100" width="200" height="110" rx="12" fill="none" stroke="#1a4010" stroke-width="3"/>

            <!-- Arrow sign below (lighter green) -->
            <rect x="145" y="225" width="170" height="52" rx="8" fill="#5aa044"/>
            <rect x="145" y="225" width="170" height="52" rx="8" fill="none" stroke="#3d7a2e" stroke-width="2"/>
            <!-- Arrow -->
            <path d="M 200 251 L 165 251" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
            <path d="M 178 238 L 162 251 L 178 264" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
            <!-- Small text on arrow sign -->
            <text x="210" y="255" text-anchor="start" font-family="Inter,Arial,sans-serif" font-size="11" font-weight="600" fill="#fff" opacity="0.85">Back</text>

            <!-- Rope / chain lines from post to signs -->
            <line x1="225" y1="160" x2="190" y2="148" stroke="#6b4226" stroke-width="2.5" stroke-dasharray="4 2"/>
            <line x1="225" y1="225" x2="200" y2="225" stroke="#6b4226" stroke-width="2.5" stroke-dasharray="4 2"/>
        </svg>
    </div>

</div>

<script>
function doSearch() {
    var q = document.getElementById('search-input').value.trim();
    if (q) window.location.href = '/?s=' + encodeURIComponent(q);
}
</script>
@endsection