@extends('layouts.app')

@section('title', 'Page Not Found - PlanningDB.co.uk')
@section('meta_description', 'The page you are looking for does not exist on PlanningDB.co.uk.')

@section('content')
<div class="max-w-2xl mx-auto py-12 px-4 sm:px-6">
    <!-- Main Card -->
    <div class="relative overflow-hidden rounded-2xl bg-white border border-[#D8DDE0] border-t-8 border-[#D4351C] p-8 sm:p-12 shadow-sm text-center animate-fade-in">
        <!-- Error Badge / Icon -->
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-[#FFF1F1] text-[#D4351C] mb-6 shadow-inner">
            <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
        </div>

        <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl text-[#0B0C0C] mb-4 font-heading">
            404 Not Found
        </h1>

        <p class="text-base text-[#505A5F] leading-relaxed mb-8 max-w-lg mx-auto">
            @if(isset($exception) && !empty($exception->getMessage()))
                {{ $exception->getMessage() }}
            @else
                We searched the planning records, but it seems this page does not exist or has been removed.
            @endif
        </p>

        <!-- Recommended Treatment / Actions -->
        <div class="border-t border-[#E8EDEE] pt-6 mb-8 text-left">
            <h3 class="text-sm font-bold text-[#0B0C0C] mb-3 uppercase tracking-wider">Recommended Actions:</h3>
            <ul class="space-y-3 text-sm text-[#505A5F]">
                <li class="flex items-start gap-3">
                    <svg class="h-5 w-5 text-[#1D70B8] shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12z" />
                    </svg>
                    <span>Use the search bar above to look up planning entities by postcode.</span>
                </li>
                <li class="flex items-start gap-3">
                    <svg class="h-5 w-5 text-[#1D70B8] shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12z" />
                    </svg>
                    <span>Double-check the web address for spelling errors.</span>
                </li>
            </ul>
        </div>

        <!-- Navigation Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('home') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-[#1D70B8] hover:bg-[#003078] px-5 py-3 text-sm font-bold text-white transition shadow-sm hover:shadow duration-200 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                </svg>
                Go to Homepage
            </a>
            <a href="{{ route('planning.index') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-[#F3F2F1] hover:bg-[#E5E5E5] px-5 py-3 text-sm font-semibold text-[#0B0C0C] border border-[#D8DDE0] transition shadow-sm hover:shadow duration-200 cursor-pointer">
                Search Planning Data
            </a>
        </div>
    </div>
</div>
@endsection