<?php
// Removed Composer autoload to fix PHP version compatibility
// require_once 'vendor/autoload.php';

// use App\classes\Site;

// Direct database query instead of using Site class
require_once 'config.php';
$sql = "SELECT * FROM `site`";
$result = mysqli_query($conn, $sql);
if ($result) {
    $siteData = mysqli_fetch_assoc($result);
} else {
    // Fallback data if site table doesn't exist
    $siteData = [
        'title' => 'D-Bundles Stores',
        'footer' => '© 2024 D-Bundles Stores. All rights reserved.'
    ];
}
$page = explode('/', $_SERVER['PHP_SELF']);
$page = end($page);
$title = '';
if ($page == 'login.php') {
    $title = 'Home';
} elseif ($page == 'contact.php') {
    $title = 'Contact';
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Site Metas -->
    <title><?= $title . ' | ' . $siteData['title'] ?></title>
    <meta name="keywords"
        content="data bundles, affordable data, mobile data, internet data, data plans, data sellers, Ghana data bundles">
    <meta name="description"
        content="Get affordable data bundles from D-Bundles Stores, your trusted data seller in Ghana. We offer a range of mobile data plans to suit your needs.">
    <meta name="author" content="D-Bundles Stores">

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1983131452016590"
     crossorigin="anonymous"></script>




    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">

    <!-- FontAwesome Icons core CSS -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/style.css" rel="stylesheet">

    <!-- Responsive styles for this template -->
    <link href="assets/css/responsive.css" rel="stylesheet">

    <!-- Colors for this template -->
    <link href="assets/css/colors.css" rel="stylesheet">

    <!-- Version Tech CSS for this template -->
    <link href="assets/css/version/tech.css" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Macondo&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
        rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css">
        
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        },
                        accent: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        },
                        mtn: '#FFC107',
                        airtel: '#FF6B35',
                        vodafone: '#E60000',
                        tigo: '#00A651',
                        glo: '#00A651'
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <style>
        /* Professional Bluish Dark Theme */
        body { 
            font-family: 'Inter', sans-serif; 
            background: #0f172a;
            min-height: 100vh;
            color: #e2e8f0;
        }
        .gradient-bg { 
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); 
        }
        .hero-gradient {
            background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
        }
        .card-shadow { 
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); 
        }
        .operator-card { 
            transition: all 0.2s ease; 
            background: #1e293b;
            border: 1px solid #334155;
        }
        .operator-card:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            border-color: #fbbf24;
            background: #334155;
        }
        .floating-btn { 
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4); 
        }
        .input-focus:focus { 
            border-color: #60a5fa; 
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1), 0 0 15px rgba(96, 165, 250, 0.2); 
        }
        .navbar-blur { 
            backdrop-filter: blur(8px); 
            background: rgba(15, 23, 42, 0.95); 
            border-bottom: 1px solid #334155;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
        .smooth-transition {
            transition: all 0.2s ease;
        }
        /* Professional Bluish Dark Theme Colors */
        .bg-white { background: #1e293b !important; }
        .text-gray-800 { color: #f0f6fc !important; }
        .text-gray-700 { color: #e6edf3 !important; }
        .text-gray-600 { color: #cbd5e1 !important; }
        .text-gray-500 { color: #94a3b8 !important; }
        .text-gray-400 { color: #64748b !important; }
        .text-gray-300 { color: #475569 !important; }
        .border-gray-200 { border-color: #334155 !important; }
        .border-gray-100 { border-color: #1e293b !important; }
        .bg-gray-50 { background: #1e293b !important; }
        .bg-primary-50 { background: #0f172a !important; }
        .bg-primary-800 { background: #1e293b !important; }
        .text-primary-900 { color: #f0f6fc !important; }
        .text-primary-700 { color: #e6edf3 !important; }
        .text-primary-600 { color: #c9d1d9 !important; }
        .text-primary-500 { color: #8b949e !important; }
        .hover\:text-accent-600:hover { color: #58a6ff !important; }
        .text-white\/80 { color: rgba(230, 237, 243, 0.8) !important; }
        .text-white\/80:hover { color: #58a6ff !important; }
        .hover\:text-accent-400:hover { color: #58a6ff !important; }
        .bg-white\/5 { background-color: rgba(255, 255, 255, 0.03) !important; }
        .border-white\/10 { border-color: rgba(255, 255, 255, 0.06) !important; }
        .border-white\/15 { border-color: rgba(255, 255, 255, 0.09) !important; }
        .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
        /* Subtle accent colors */
        .accent-primary { color: #58a6ff; }
        .accent-border { border-color: #388bfd; }
        
        /* Subtle Neon Glow Effects - Golden Accents */
        .neon-glow-subtle {
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), 0 0 30px rgba(251, 191, 36, 0.1);
        }
        .text-glow-subtle {
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
        }
        .hover-glow:hover {
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        }
        .icon-glow {
            filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
        }
        .logo-glow {
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), inset 0 0 20px rgba(251, 191, 36, 0.1);
        }
        .golden-glow {
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.2);
        }
    </style>

</head>

<body class="bg-primary-50">

    <!-- Professional Header -->
    <header class="fixed top-0 left-0 right-0 z-50 navbar-blur">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-lg flex items-center justify-center logo-glow">
                        <i class="fas fa-wifi text-white text-lg icon-glow"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-semibold text-white text-glow-subtle">D-Bundles Stores</h1>
                        <p class="text-xs text-gray-400 font-normal">Fast & Reliable Data</p>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <nav class="hidden md:flex items-center space-x-1">
                    <a href="index.php" class="px-3 py-2 text-gray-300 hover:text-white hover:bg-white/5 rounded-md font-medium smooth-transition text-sm">Home</a>
                    <a href="order-status.php" class="px-3 py-2 text-gray-300 hover:text-white hover:bg-white/5 rounded-md font-medium smooth-transition text-sm">Track Order</a>
                    <a href="login.php" class="ml-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-yellow-600 text-white font-medium rounded-md hover:from-amber-600 hover:to-yellow-700 smooth-transition text-sm hover-glow golden-glow">
                        Agent Login
                    </a>
                </nav>

                <!-- Mobile Menu Button -->
                <button id="mobileMenuBtn" class="md:hidden p-2 rounded-md text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>

            <!-- Mobile Navigation -->
            <div id="mobileMenu" class="md:hidden hidden bg-[#1e293b] border-t border-slate-600 mt-2 rounded-lg shadow-xl">
                <div class="px-4 py-4 space-y-1">
                    <a href="index.php" class="flex items-center text-gray-300 hover:text-white hover:bg-white/5 font-medium transition-colors py-2 px-3 rounded-md">
                        <i class="fas fa-home mr-3 text-gray-400"></i>Home
                    </a>
                    <a href="order-status.php" class="flex items-center text-gray-300 hover:text-white hover:bg-white/5 font-medium transition-colors py-2 px-3 rounded-md">
                        <i class="fas fa-search mr-3 text-gray-400"></i>Track Order
                    </a>
                    <a href="login.php" class="flex items-center text-white bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 font-medium transition-colors py-2 px-3 rounded-md mt-2 golden-glow">
                        <i class="fas fa-sign-in-alt mr-3"></i>Agent Login
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content Wrapper -->
    <div class="pt-16">
        <div class="container mx-auto px-4 py-6">
        
        <!-- Mobile Navigation JavaScript -->
        <script>
            // Mobile menu toggle
            document.addEventListener('DOMContentLoaded', function() {
                const mobileMenuBtn = document.getElementById('mobileMenuBtn');
                const mobileMenu = document.getElementById('mobileMenu');
                
                if (mobileMenuBtn && mobileMenu) {
                    mobileMenuBtn.addEventListener('click', function() {
                        const icon = this.querySelector('i');
                        
                        if (mobileMenu.classList.contains('hidden')) {
                            mobileMenu.classList.remove('hidden');
                            icon.classList.remove('fa-bars');
                            icon.classList.add('fa-times');
                        } else {
                            mobileMenu.classList.add('hidden');
                            icon.classList.remove('fa-times');
                            icon.classList.add('fa-bars');
                        }
                    });

                    // Close mobile menu when clicking outside
                    document.addEventListener('click', function(event) {
                        if (!mobileMenu.contains(event.target) && !mobileMenuBtn.contains(event.target)) {
                            mobileMenu.classList.add('hidden');
                            const icon = mobileMenuBtn.querySelector('i');
                            icon.classList.remove('fa-times');
                            icon.classList.add('fa-bars');
                        }
                    });
                }
            });
        </script>
          






          