@extends('layouts.app')

@section('title', '404 Not Found')

@section('content')
<div class="error-container">
    <div class="error-image">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.1)" stroke="{{ config('variables.primary-color', '#3d84ff') }}"></circle>
            <path d="M16 16s-1.5-2-4-2-4 2-4 2" stroke="{{ config('variables.primary-color', '#3d84ff') }}"></path>
            <line x1="9" y1="9" x2="9.01" y2="9" stroke="{{ config('variables.primary-color', '#3d84ff') }}" stroke-width="2"></line>
            <line x1="15" y1="9" x2="15.01" y2="9" stroke="{{ config('variables.primary-color', '#3d84ff') }}" stroke-width="2"></line>
        </svg>
    </div>
    
    <h1 class="error-code">404</h1>
    <h2 class="error-title">Page Not Found</h2>
    
    <p class="error-message">
        The page you're looking for doesn't exist or has been moved. Check the URL or try navigating back to the forum homepage.
    </p>
    
    <div class="error-actions">
        <a href="{{ url()->previous() }}" class="btn btn-primary">Go Back</a>
    </div>
</div>
@endsection