@extends('layouts.app')

@section('title', 'Page not found | ' . config('app.name'))

@section('content')
<style>
    .err-404 {
        max-width: 560px;
        margin: 80px auto;
        padding: 48px 32px;
        text-align: center;
    }
    .err-404-emoji {
        font-size: 72px;
        line-height: 1;
        margin-bottom: 12px;
    }
    .err-404 h1 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 10px;
        color: var(--text-primary);
    }
    .err-404 p {
        font-size: 15px;
        color: var(--text-secondary);
        margin: 0 0 24px;
        line-height: 1.6;
    }
    .err-404-code {
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }
    .err-404-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 24px;
    }
    @media (max-width: 480px) {
        .err-404 { margin: 32px 12px; padding: 32px 16px; }
        .err-404-emoji { font-size: 56px; }
        .err-404 h1 { font-size: 22px; }
    }
</style>

<div class="err-404">
    <div class="err-404-emoji" aria-hidden="true">🎞️</div>
    <div class="err-404-code">Error 404</div>
    <h1>Can't find that one</h1>
    <p>
        The page or video you were looking for isn't here. It might have
        been removed, renamed, or the link might have a typo.
    </p>
    <div class="err-404-actions">
        <a href="{{ route('home') }}" class="action-btn action-btn-primary">
            <i class="bi bi-house-door-fill" aria-hidden="true"></i>
            <span>Back to Home</span>
        </a>
        <a href="{{ route('videos.index') }}" class="action-btn">
            <i class="bi bi-grid-fill" aria-hidden="true"></i>
            <span>Browse Videos</span>
        </a>
        <a href="{{ route('videos.shorts') }}" class="action-btn">
            <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
            <span>Watch Shorts</span>
        </a>
    </div>
</div>
@endsection