@extends('layouts.app')

@section('content')
    {{-- Hero --}}
    <section class="page-hero">
        <div class="page-hero-bg page-hero-bg--404"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <div class="page-hero-title">Page Not Found</div>
            <div class="breadcrumb-nav">
                <a href="{{ route('home') }}">Home</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">404</span>
            </div>
        </div>
    </section>

    {{-- 404 Content --}}
    <section class="error-404-section">
        <div class="container">
            <div class="error-404-inner">

                {{-- Decorative number --}}
                <div class="error-404-bg-number" aria-hidden="true">404</div>

                {{-- Icon --}}
                <div class="error-404-icon">
                    <i class="bi bi-compass"></i>
                </div>

                {{-- Text --}}
                <h1 class="error-404-heading">Oops! You're Lost</h1>
                <p class="error-404-subtext">
                    The page you're looking for has been moved, deleted,<br class="d-none d-md-inline">
                    or never existed in the first place.
                </p>

                {{-- Divider --}}
                <div class="error-404-divider">
                    <span></span><i class="bi bi-geo-alt-fill"></i><span></span>
                </div>

                {{-- Suggestions --}}
                <div class="error-404-suggestions">
                    <p class="suggestions-label">Try one of these instead:</p>
                    <div class="suggestions-links">
                        <a href="{{ route('home') }}" class="suggestion-chip">
                            <i class="bi bi-house-door"></i> Home
                        </a>
                        <a href="{{ route('projects.index') ?? '#' }}" class="suggestion-chip">
                            <i class="bi bi-grid"></i> Projects
                        </a>
                        <a href="{{ route('contact') ?? '#' }}" class="suggestion-chip">
                            <i class="bi bi-envelope"></i> Contact
                        </a>
                        <a href="{{ route('about') ?? '#' }}" class="suggestion-chip">
                            <i class="bi bi-info-circle"></i> About
                        </a>
                    </div>
                </div>

                {{-- CTA --}}
                <a href="{{ route('home') }}" class="error-404-btn">
                    <i class="bi bi-arrow-left"></i>
                    Back to Homepage
                </a>

            </div>
        </div>
    </section>

@endsection