<?php
require_once 'config.php';
require_once 'get_setting.php';

// Dynamically determine the base URL for online compatibility
$protocol = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "https://" : "http://";
$host = $_SERVER['HTTP_HOST'];
$script_name = $_SERVER['SCRIPT_NAME']; // e.g. /cargo/404.php
$base_dir = str_replace(basename($script_name), "", $script_name); // e.g. /cargo/
$base_url = $protocol . $host . $base_dir;

$site_settings = get_site_settings($pdo);
$site_title = $site_settings['site_title'] ?? 'RELI PARCEL';
$logo_path = !empty($site_settings['site_logo']) ? $base_url . 'assets/images/' . $site_settings['site_logo'] : '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found - <?php echo htmlspecialchars($site_title); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-crimson: #B00000;
            --dark-crimson: #800000;
            --soft-bg: #f8f9fa;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--soft-bg);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            overflow: hidden;
        }

        .error-container {
            text-align: center;
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }

        .error-code {
            font-family: 'Montserrat', sans-serif;
            font-size: 10rem;
            font-weight: 900;
            line-height: 1;
            margin-bottom: 0;
            background: linear-gradient(135deg, var(--primary-crimson) 0%, #212529 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            display: inline-block;
        }

        .error-code::after {
            content: '404';
            position: absolute;
            left: 5px;
            top: 5px;
            z-index: -1;
            color: rgba(176, 0, 0, 0.1);
            filter: blur(2px);
        }

        .error-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: #212529;
            margin-top: -10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .error-message {
            color: #6c757d;
            font-size: 1.1rem;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .btn-home {
            background-color: var(--primary-crimson);
            color: white;
            border: none;
            padding: 12px 35px;
            font-weight: 600;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(176, 0, 0, 0.2);
            text-decoration: none;
            display: inline-block;
        }

        .btn-home:hover {
            background-color: var(--dark-crimson);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(176, 0, 0, 0.3);
        }

        .illustration {
            margin-bottom: 30px;
            position: relative;
        }

        .box-icon {
            font-size: 5rem;
            color: var(--primary-crimson);
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

        .logo-box {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
        }

        .logo-box img {
            max-height: 40px;
            opacity: 1;
            /* Ensure white/light logos show up as black on white BG */
            filter: brightness(0);
        }

        .logo-box span {
            color: #000 !important;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .error-code { font-size: 7rem; }
            .error-title { font-size: 1.5rem; }
        }
    </style>
</head>
<body>

    <div class="logo-box">
        <?php if ($logo_path): ?>
            <img src="<?php echo $logo_path; ?>" alt="Logo">
        <?php else: ?>
            <span class="fw-bold text-muted"><?php echo htmlspecialchars($site_title); ?></span>
        <?php endif; ?>
    </div>

    <div class="error-container">
        <div class="illustration">
            <i class="bi bi-box-seam box-icon"></i>
        </div>
        <h1 class="error-code">404</h1>
        <h2 class="error-title">Shipment Missing?</h2>
        <p class="error-message">
            The page you are looking for might have been diverted or is temporarily unavailable. 
            Don't worry, your journey doesn't end here.
        </p>
        <div class="d-flex flex-column flex-md-row gap-3 justify-content-center">
            <a href="<?php echo $base_url; ?>index.php" class="btn-home">
                <i class="bi bi-house-door me-2"></i> Back to Home
            </a>
            <a href="<?php echo $base_url; ?>track.php" class="btn-home" style="background-color: #212529; box-shadow: 0 10px 20px rgba(0,0,0,0.1);">
                <i class="bi bi-geo-alt me-2"></i> Track Shipment
            </a>
        </div>
    </div>

</body>
</html>
