<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Not Found | 404</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
            color: #0F1111;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .error-container {
            text-align: center;
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            max-width: 500px;
            width: 90%;
        }

        .error-container img {
            max-height: 45px;
            margin-bottom: 30px;
        }

        .error-title {
            color: #0F1111;
            font-size: 72px;
            font-weight: 700;
            margin: 0 0 10px 0;
            line-height: 1;
        }

        .error-subtitle {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #111;
        }

        .error-desc {
            font-size: 15px;
            color: #555;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .btn-home {
            display: inline-block;
            background-color: #0F1111;
            color: #fff;
            padding: 12px 25px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s;
        }

        .btn-home:hover {
            background-color: #232f3e;
        }

        .btn-home i {
            margin-right: 8px;
        }

        .search-box {
            margin-top: 30px;
            display: flex;
            justify-content: center;
        }

        .search-input {
            width: 100%;
            max-width: 300px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 14px;
            outline: none;
        }
        
        .search-input:focus {
            border-color: #0F1111;
        }

        .search-btn {
            background-color: #0F1111;
            color: #fff;
            border: 1px solid #0F1111;
            border-radius: 0 4px 4px 0;
            padding: 0 15px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .search-btn:hover {
            background-color: #232f3e;
        }
    </style>
</head>
<body>

    <div class="error-container">
        <a href="{{ url('/') }}">
            @php
                $generalsetting = \App\Models\GeneralSetting::first();
                $logo = $generalsetting?->white_logo ?? 'public/logo.png';
                if (!Str::startsWith($logo, ['http', 'https'])) {
                    $logo = ltrim(str_ireplace(['/public/', 'public/'], '', $logo), '/');
                }
            @endphp
            <img src="{{ asset($logo) }}" alt="Logo">
        </a>
        
        <h1 class="error-title">404</h1>
        <div class="error-subtitle">Page Not Found</div>
        
        <p class="error-desc">
            We're sorry. The page you're looking for doesn't exist or has been moved.
        </p>

        <a href="{{ url('/') }}" class="btn-home">
            <i class="fa-solid fa-house"></i> Return to Homepage
        </a>

        <div class="search-box">
            <form action="{{ route('search') }}" method="GET" style="display:flex; width:100%; justify-content:center;">
                <input type="text" name="keyword" class="search-input" placeholder="Search for products...">
                <button type="submit" class="search-btn">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </div>
    </div>

</body>
</html>
