@extends('layouts.site')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap');

    .error-page {
        min-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0a0f1e;
        position: relative;
        overflow: hidden;
        font-family: 'DM Sans', sans-serif;
    }

    /* Animated grid background */
    .error-page::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(99,179,237,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99,179,237,0.04) 1px, transparent 1px);
        background-size: 60px 60px;
        animation: gridMove 20s linear infinite;
    }

    @keyframes gridMove {
        0%   { transform: translateY(0); }
        100% { transform: translateY(60px); }
    }

    /* Glowing orbs */
    .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.15;
        animation: orbFloat 8s ease-in-out infinite;
    }

    .orb-1 {
        width: 400px; height: 400px;
        background: #3b82f6;
        top: -100px; left: -100px;
        animation-delay: 0s;
    }

    .orb-2 {
        width: 300px; height: 300px;
        background: #06b6d4;
        bottom: -80px; right: -80px;
        animation-delay: 3s;
    }

    .orb-3 {
        width: 200px; height: 200px;
        background: #8b5cf6;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        animation-delay: 1.5s;
    }

    @keyframes orbFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50%       { transform: translateY(-30px) scale(1.05); }
    }

    .error-content {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 2rem;
        max-width: 650px;
    }

    /* Big 404 number */
    .error-number {
        font-family: 'Playfair Display', serif;
        font-size: clamp(120px, 20vw, 220px);
        font-weight: 900;
        line-height: 1;
        margin-bottom: 0;
        background: linear-gradient(135deg, #63b3ed 0%, #a78bfa 50%, #67e8f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        animation: numberPulse 3s ease-in-out infinite;
        letter-spacing: -4px;
    }

    @keyframes numberPulse {
        0%, 100% { filter: drop-shadow(0 0 30px rgba(99,179,237,0.3)); }
        50%       { filter: drop-shadow(0 0 60px rgba(167,139,250,0.5)); }
    }

    /* Glitch effect on 404 */
    .error-number::before,
    .error-number::after {
        content: '404';
        position: absolute;
        top: 0; left: 0; right: 0;
        background: linear-gradient(135deg, #63b3ed 0%, #a78bfa 50%, #67e8f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .error-number::before {
        animation: glitch1 4s infinite;
        clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    }

    .error-number::after {
        animation: glitch2 4s infinite;
        clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }

    @keyframes glitch1 {
        0%, 90%, 100% { transform: translate(0); opacity: 0; }
        92%            { transform: translate(-4px, 2px); opacity: 0.8; }
        94%            { transform: translate(4px, -2px); opacity: 0.8; }
        96%            { transform: translate(0); opacity: 0; }
    }

    @keyframes glitch2 {
        0%, 88%, 100% { transform: translate(0); opacity: 0; }
        90%            { transform: translate(4px, 2px); opacity: 0.8; }
        92%            { transform: translate(-4px, -2px); opacity: 0.8; }
        94%            { transform: translate(0); opacity: 0; }
    }

    .error-divider {
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, #63b3ed, #a78bfa);
        margin: 1.5rem auto;
        border-radius: 2px;
    }

    .error-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.5rem, 4vw, 2.2rem);
        font-weight: 700;
        color: #e2e8f0;
        margin-bottom: 1rem;
        letter-spacing: -0.5px;
    }

    .error-message {
        font-size: 1.05rem;
        color: #94a3b8;
        line-height: 1.8;
        margin-bottom: 2.5rem;
        font-weight: 300;
    }

    .error-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-home {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: #fff;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .btn-home::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #60a5fa, #a78bfa);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .btn-home:hover::before { opacity: 1; }
    .btn-home:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(99,102,241,0.4);
    }

    .btn-home span { position: relative; z-index: 1; }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 28px;
        background: transparent;
        color: #94a3b8;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 500;
        font-size: 0.95rem;
        border: 1px solid rgba(148,163,184,0.2);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .btn-back:hover {
        color: #e2e8f0;
        border-color: rgba(148,163,184,0.5);
        background: rgba(148,163,184,0.05);
        transform: translateY(-2px);
    }

    /* Floating particles */
    .particles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(99,179,237,0.6);
        animation: particleFloat linear infinite;
    }

    @keyframes particleFloat {
        0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
        10%  { opacity: 1; }
        90%  { opacity: 1; }
        100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
    }

    /* Countdown animation on load */
    .error-content {
        animation: contentFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes contentFadeUp {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
</style>

<section class="error-page">

    <!-- Orbs -->
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
    <div class="orb orb-3"></div>

    <!-- Particles -->
    <div class="particles" id="particles"></div>

    <!-- Content -->
    <div class="error-content">
        <div class="error-number">404</div>
        <div class="error-divider"></div>
        <h1 class="error-title">Page Not Found</h1>
        <p class="error-message">
            The page you are looking for might have been removed,<br>
            had its name changed, or is temporarily unavailable.
        </p>
        <div class="error-actions">
            <a href="{{ route('home') }}" class="btn-home">
                <span>
                    <i class="bi bi-house me-1"></i> Back to Home
                </span>
            </a>
            <button onclick="history.back()" class="btn-back">
                <i class="bi bi-arrow-left"></i> Go Back
            </button>
        </div>
    </div>

</section>

<script>
    // Generate floating particles
    const container = document.getElementById('particles');
    for (let i = 0; i < 20; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        p.style.cssText = `
            left: ${Math.random() * 100}%;
            width: ${Math.random() * 4 + 2}px;
            height: ${Math.random() * 4 + 2}px;
            animation-duration: ${Math.random() * 15 + 10}s;
            animation-delay: ${Math.random() * 10}s;
            opacity: ${Math.random() * 0.6 + 0.2};
            background: ${['rgba(99,179,237,0.7)', 'rgba(167,139,250,0.7)', 'rgba(103,232,249,0.7)'][Math.floor(Math.random() * 3)]};
        `;
        container.appendChild(p);
    }
</script>

@endsection