<?php
require_once 'bootstrap.php';
require_once 'controllers/UserController.php';
require_once 'controllers/SubscriptionController.php';

$page_title = 'Home';
$userController = new UserController();
$subscriptionController = new SubscriptionController();

// Get all vendors (including closed kitchens)
$vendors = $userController->getAllVendors();

// Filter vendors based on subscription status
$active_vendors = [];
$expired_vendors = [];

foreach ($vendors as $vendor) {
    if (SUBSCRIPTION_REQUIRED) {
        try {
            // Check subscription status
            if ($subscriptionController->hasActiveSubscription($vendor['id'])) {
                $active_vendors[] = $vendor;
            } else {
                // Check if in grace period
                if ($subscriptionController->isInGracePeriod($vendor['id'])) {
                    $active_vendors[] = $vendor;
                } else {
                    $expired_vendors[] = $vendor;
                }
            }
        } catch (Exception $e) {
            // If subscription check fails, include vendor as active (fallback)
            $active_vendors[] = $vendor;
        }
    } else {
        // Subscription not required, all vendors are active
        $active_vendors[] = $vendor;
    }
}

// Combine active and expired vendors for display (expired vendors will be shown but disabled)
$vendors = array_merge($active_vendors, $expired_vendors);

// Handle search (show all vendors including expired)
$search_results = [];
if (isset($_GET['search']) && !empty($_GET['search'])) {
    $search_term = strtolower($_GET['search']);
    $search_results = $vendors; // Use all vendors (active + expired)
    // Filter search results by search term
    $search_results = array_filter($search_results, function($vendor) use ($search_term) {
        return strpos(strtolower($vendor['name']), $search_term) !== false || 
               strpos(strtolower($vendor['description']), $search_term) !== false;
    });
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#FF4C29">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title><?php echo isset($page_title) ? $page_title . ' - ' . SITE_NAME : SITE_NAME; ?></title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #FF4C29;
            --secondary-color: #2C2C2C;
            --accent-color: #FFFFFF;
            --highlight-color: #FFD369;
            --light-gray: #F8F9FA;
            --text-dark: #2C2C2C;
            --text-light: #6C757D;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
            --border-radius: 15px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* ================================
           STICKY NAVIGATION
           ================================ */
        .navbar-modern {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(20px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
            padding: 1rem 0;
        }

        .navbar-modern.scrolled {
            padding: 0.5rem 0;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
        }

        .navbar-brand-modern {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color) !important;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar-brand-modern i {
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .navbar-nav-modern .nav-link {
            color: var(--text-dark) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            margin: 0 0.25rem;
            border-radius: 25px;
            transition: var(--transition);
            position: relative;
        }

        .navbar-nav-modern .nav-link:hover {
            color: var(--primary-color) !important;
            background: rgba(255, 76, 41, 0.1);
            transform: translateY(-2px);
        }

        .cart-badge {
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            position: absolute;
            top: -5px;
            right: -5px;
            min-width: 20px;
            text-align: center;
        }

        .btn-login {
            background: linear-gradient(135deg, var(--primary-color), #FF6B47);
            color: white !important;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
            font-weight: 500;
            transition: var(--transition);
            text-decoration: none;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255, 76, 41, 0.3);
            color: white !important;
        }

        /* ================================
           HERO SECTION - COMPACT
           ================================ */
        .hero-section {
            min-height: 60vh;
            background: linear-gradient(135deg, rgba(255, 76, 41, 0.9), rgba(255, 211, 105, 0.8)),
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="food-pattern" x="0" y="0" width="150" height="150" patternUnits="userSpaceOnUse"><circle cx="40" cy="40" r="15" fill="rgba(255,255,255,0.1)"/><circle cx="110" cy="110" r="10" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="1200" height="600" fill="url(%23food-pattern)"/></svg>');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 6rem 0 3rem;
        }

        .hero-content {
            text-align: center;
            color: white;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
            padding: 1.5rem;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.1;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .hero-subtitle {
            font-size: 1.1rem;
            font-weight: 400;
            margin-bottom: 1.5rem;
            opacity: 0.95;
            line-height: 1.5;
        }

        .hero-search {
            max-width: 600px;
            margin: 0 auto 2rem;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 1rem 1.5rem;
            font-size: 1.1rem;
            border: none;
            border-radius: 50px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 76, 41, 0.3), var(--shadow-hover);
            transform: translateY(-2px);
        }

        .search-btn {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 500;
            transition: var(--transition);
        }

        .search-btn:hover {
            background: #E63946;
            transform: translateY(-50%) scale(1.05);
        }

        .btn-cta {
            background: linear-gradient(135deg, var(--highlight-color), #FFA500);
            color: var(--text-dark) !important;
            border: none;
            padding: 0.75rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 50px;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 8px 20px rgba(255, 211, 105, 0.4);
        }

        .btn-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 211, 105, 0.6);
            color: var(--text-dark) !important;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.75rem 1.25rem;
            border-radius: var(--border-radius);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
        }

        .stat-label {
            font-size: 0.85rem;
            opacity: 0.9;
        }

        /* ================================
           FEATURED CATEGORIES - COMPACT
           ================================ */
        .categories-section {
            padding: 4rem 0;
            background: var(--light-gray);
        }

        .section-title {
            text-align: center;
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.75rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.05rem;
            color: var(--text-light);
            margin-bottom: 2.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .category-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            cursor: pointer;
        }

        .category-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .category-image {
            height: 160px;
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .category-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
            opacity: 0.3;
        }

        .category-content {
            padding: 1.25rem;
            text-align: center;
        }

        .category-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        .category-description {
            color: var(--text-light);
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* ================================
           VENDORS SECTION - COMPACT
           ================================ */
        .vendors-section {
            padding: 4rem 0;
            background: white;
        }

        .vendor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.5rem;
        }

        .vendor-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .vendor-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }

        .vendor-header {
            padding: 1.25rem;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            position: relative;
            flex-shrink: 0;
        }

        .vendor-avatar {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.3rem;
            margin-bottom: 0.75rem;
        }

        .vendor-name {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        .vendor-status {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-open {
            background: #D4EDDA;
            color: #155724;
        }

        .status-closed {
            background: #F8D7DA;
            color: #721C24;
        }

        .status-active {
            background: #CCE5FF;
            color: #004085;
        }

        .status-expired {
            background: #FFF3CD;
            color: #856404;
        }

        .vendor-body {
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .vendor-description {
            color: var(--text-light);
            margin-bottom: 1rem;
            line-height: 1.5;
            font-size: 0.95rem;
            flex-grow: 0;
        }

        .vendor-location {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-light);
            margin-bottom: auto;
            font-size: 0.9rem;
            padding-bottom: 1rem;
        }

        .btn-view-menu {
            width: 100%;
            background: linear-gradient(135deg, var(--primary-color), #FF6B47);
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 10px;
            font-weight: 500;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
            text-align: center;
            margin-top: auto;
        }

        .btn-view-menu:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255, 76, 41, 0.3);
            color: white;
        }

        .btn-disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .btn-disabled:hover {
            transform: none;
            box-shadow: none;
        }

        /* ================================
           FEATURES SECTION - COMPACT
           ================================ */
        .features-section {
            padding: 4rem 0;
            background: var(--light-gray);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }

        .feature-card {
            text-align: center;
            padding: 1.5rem;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .feature-icon {
            width: 65px;
            height: 65px;
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.75rem;
            color: white;
        }

        .feature-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-dark);
        }

        .feature-description {
            color: var(--text-light);
            line-height: 1.5;
            font-size: 0.9rem;
        }

        /* ================================
           FOOTER - COMPACT
           ================================ */
        .footer-modern {
            background: var(--secondary-color);
            color: white;
            padding: 3rem 0 1.5rem;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .footer-section h5 {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--highlight-color);
            font-size: 1.1rem;
        }

        .footer-section p,
        .footer-section a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            line-height: 1.6;
            font-size: 0.9rem;
        }

        .footer-section a:hover {
            color: var(--highlight-color);
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
        }

        .social-link:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1.5rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }

        /* ================================
           RESPONSIVE DESIGN
           ================================ */
        @media (max-width: 768px) {
            .hero-section {
                min-height: 50vh;
                padding: 5rem 0 2.5rem;
                background-attachment: scroll;
            }

            .hero-title {
                font-size: 2.25rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.85rem;
            }

            .section-subtitle {
                font-size: 0.95rem;
                margin-bottom: 2rem;
            }

            .category-grid,
            .vendor-grid,
            .features-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }

            .hero-stats {
                gap: 1rem;
                margin-top: 1.5rem;
            }

            .stat-item {
                padding: 0.6rem 1rem;
            }

            .stat-number {
                font-size: 1.3rem;
            }

            .navbar-modern {
                padding: 0.5rem 0;
            }

            .categories-section,
            .vendors-section,
            .features-section {
                padding: 3rem 0;
            }
        }

        @media (max-width: 576px) {
            .hero-section {
                min-height: 45vh;
                padding: 4.5rem 0 2rem;
            }

            .hero-content {
                padding: 1rem;
            }

            .hero-title {
                font-size: 1.85rem;
            }

            .hero-subtitle {
                font-size: 0.95rem;
            }

            .btn-cta {
                padding: 0.65rem 1.75rem;
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.65rem;
            }

            .section-subtitle {
                font-size: 0.9rem;
            }

            .categories-section,
            .vendors-section,
            .features-section {
                padding: 2.5rem 0;
            }

            .hero-stats {
                gap: 0.75rem;
            }

            .stat-item {
                padding: 0.5rem 0.875rem;
            }

            .stat-number {
                font-size: 1.2rem;
            }

            .stat-label {
                font-size: 0.75rem;
            }
        }

        /* ================================
           ANIMATIONS
           ================================ */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-fade-up {
            animation: fadeInUp 0.8s ease-out;
        }

        .animate-slide-left {
            animation: slideInLeft 0.8s ease-out;
        }

        .animate-slide-right {
            animation: slideInRight 0.8s ease-out;
        }

        /* ================================
           UTILITY CLASSES
           ================================ */
        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .bg-gradient {
            background: linear-gradient(135deg, var(--primary-color), var(--highlight-color));
        }

        .shadow-custom {
            box-shadow: var(--shadow);
        }

        .shadow-hover-custom {
            box-shadow: var(--shadow-hover);
        }

        .border-radius-custom {
            border-radius: var(--border-radius);
        }
    </style>
</head>

<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-modern" id="navbar">
        <div class="container">
            <a class="navbar-brand-modern" href="<?php echo SITE_URL; ?>">
                <i class="fas fa-utensils"></i>
                <span><?php echo SITE_NAME; ?></span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav navbar-nav-modern me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#categories">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#vendors">Restaurants</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="<?php echo SITE_URL; ?>/track_order.php">
                            <i class="fas fa-truck me-1"></i>Track Order
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link position-relative" href="<?php echo SITE_URL; ?>/cart.php">
                            <i class="fas fa-shopping-cart me-1"></i>
                            Cart
                            <?php if (get_cart_count() > 0): ?>
                                <span class="cart-badge"><?php echo get_cart_count(); ?></span>
                            <?php endif; ?>
                        </a>
                    </li>
                    
                    <?php if (is_vendor_logged_in()): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo SITE_URL; ?>/vendor/dashboard.php">
                                <i class="fas fa-tachometer-alt me-1"></i>Dashboard
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo SITE_URL; ?>/vendor/logout.php">
                                <i class="fas fa-sign-out-alt me-1"></i>Logout
                            </a>
                        </li>
                    <?php elseif (is_admin_logged_in()): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo SITE_URL; ?>/admin/dashboard.php">
                                <i class="fas fa-tachometer-alt me-1"></i>Admin
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="<?php echo SITE_URL; ?>/admin/logout.php">
                                <i class="fas fa-sign-out-alt me-1"></i>Logout
                            </a>
                        </li>
                    <?php else: ?>
                        <li class="nav-item">
                            <a class="btn-login" href="<?php echo SITE_URL; ?>/vendor/login.php">
                                <i class="fas fa-user me-1"></i>Login / Signup
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section - Compact -->
    <section id="home" class="hero-section">
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="800">
                <h1 class="hero-title">Delicious Food<br><span class="text-gradient">Delivered Fast</span></h1>
                <p class="hero-subtitle">Order from your favorite local restaurants. Fresh, tasty, and delivered to your doorstep.</p>
                
                <!-- Search Bar -->
                <div class="hero-search" data-aos="fade-up" data-aos-delay="200">
                    <form method="GET" action="#vendors">
                        <input type="text" name="search" class="search-input" 
                               placeholder="Search for restaurants, cuisines, or dishes..." 
                               value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
                        <button type="submit" class="search-btn">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>

                <a href="#vendors" class="btn-cta" data-aos="fade-up" data-aos-delay="400">
                    <i class="fas fa-utensils me-2"></i>Order Now
                </a>

                <!-- Stats -->
                <div class="hero-stats" data-aos="fade-up" data-aos-delay="600">
                    <div class="stat-item">
                        <span class="stat-number"><?php echo count($active_vendors); ?>+</span>
                        <span class="stat-label">Restaurants</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">500+</span>
                        <span class="stat-label">Menu Items</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">1000+</span>
                        <span class="stat-label">Happy Customers</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Categories -->
    <section id="categories" class="categories-section">
        <div class="container">
            <h2 class="section-title" data-aos="fade-up">Popular Categories</h2>
            <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
                Explore delicious food categories from local restaurants
            </p>
            
            <div class="category-grid">
                <div class="category-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="category-image">
                        <i class="fas fa-hamburger"></i>
                    </div>
                    <div class="category-content">
                        <h3 class="category-title">Burgers & Fast Food</h3>
                        <p class="category-description">Juicy burgers, fries, and quick bites for when you're in a hurry</p>
                    </div>
                </div>

                <div class="category-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="category-image">
                        <i class="fas fa-pepper-hot"></i>
                    </div>
                    <div class="category-content">
                        <h3 class="category-title">Indian Cuisine</h3>
                        <p class="category-description">Spicy curries, biryanis, and traditional Indian dishes</p>
                    </div>
                </div>

                <div class="category-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="category-image">
                        <i class="fas fa-ice-cream"></i>
                    </div>
                    <div class="category-content">
                        <h3 class="category-title">Desserts</h3>
                        <p class="category-description">Sweet treats, ice creams, and desserts to satisfy your cravings</p>
                    </div>
                </div>

                <div class="category-card" data-aos="fade-up" data-aos-delay="500">
                    <div class="category-image">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <div class="category-content">
                        <h3 class="category-title">Healthy Options</h3>
                        <p class="category-description">Nutritious salads, smoothie bowls, and healthy meal options</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vendors Section -->
    <section id="vendors" class="vendors-section">
        <div class="container">
            <h2 class="section-title" data-aos="fade-up">Featured Restaurants</h2>
            <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
                Discover amazing local restaurants and cloud kitchens
            </p>

            <?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
                <div class="alert alert-info" data-aos="fade-up" data-aos-delay="200">
                    <i class="fas fa-search me-2"></i>
                    <strong>Search Results for "<?php echo htmlspecialchars($_GET['search']); ?>"</strong>
                    <?php if (!empty($search_results)): ?>
                        - Found <?php echo count($search_results); ?> restaurant(s)
                    <?php else: ?>
                        - No restaurants found matching your search criteria
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <div class="vendor-grid">
                <?php 
                $vendors_to_display = isset($_GET['search']) && !empty($_GET['search']) ? $search_results : $vendors;
                if (empty($vendors_to_display)): 
                ?>
                    <div class="col-12" data-aos="fade-up">
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle fa-2x mb-3"></i>
                            <h5>No restaurants available</h5>
                            <p>Please check back later when restaurants are added to the platform.</p>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($vendors_to_display as $index => $vendor): ?>
                        <div class="vendor-card" data-aos="fade-up" data-aos-delay="<?php echo ($index % 3) * 100 + 200; ?>">
                            <div class="vendor-header">
                                <div class="vendor-avatar">
                                    <i class="fas fa-store"></i>
                                </div>
                                <h3 class="vendor-name"><?php echo htmlspecialchars($vendor['name']); ?></h3>
                                <div class="vendor-status">
                                    <?php if (isset($vendor['is_kitchen_available']) && $vendor['is_kitchen_available']): ?>
                                        <span class="status-badge status-open">
                                            <i class="fas fa-check-circle me-1"></i>Open
                                        </span>
                                    <?php else: ?>
                                        <span class="status-badge status-closed">
                                            <i class="fas fa-times-circle me-1"></i>Closed
                                        </span>
                                    <?php endif; ?>
                                    
                                    <?php if (SUBSCRIPTION_REQUIRED): ?>
                                        <?php 
                                        try {
                                            $subscription = $subscriptionController->getVendorSubscription($vendor['id']);
                                            if ($subscription) {
                                                $days_remaining = (strtotime($subscription['end_date']) - time()) / (24 * 60 * 60);
                                                if ($days_remaining > 0) {
                                                    echo '<span class="status-badge status-active"><i class="fas fa-shield-alt me-1"></i>Verified</span>';
                                                } else {
                                                    echo '<span class="status-badge status-expired"><i class="fas fa-exclamation-triangle me-1"></i>Expired</span>';
                                                }
                                            }
                                        } catch (Exception $e) {
                                            // Skip subscription badge if check fails
                                        }
                                        ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                            
                            <div class="vendor-body">
                                <div class="vendor-location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span><?php echo htmlspecialchars($vendor['address']); ?></span>
                                </div>
                                
                                <?php if ($vendor['description']): ?>
                                    <p class="vendor-description"><?php echo htmlspecialchars($vendor['description']); ?></p>
                                <?php endif; ?>
                                
                                <?php 
                                // Check if vendor can accept orders
                                $can_accept_orders = isset($vendor['is_kitchen_available']) && $vendor['is_kitchen_available'];
                                
                                if (SUBSCRIPTION_REQUIRED) {
                                    try {
                                        $subscription = $subscriptionController->getVendorSubscription($vendor['id']);
                                        if ($subscription) {
                                            $days_remaining = (strtotime($subscription['end_date']) - time()) / (24 * 60 * 60);
                                            $can_accept_orders = $can_accept_orders && ($days_remaining > 0);
                                        } else {
                                            $can_accept_orders = false;
                                        }
                                    } catch (Exception $e) {
                                        // If subscription check fails, allow orders (fallback)
                                    }
                                }
                                
                                if ($can_accept_orders): ?>
                                    <a href="vendor_menu.php?id=<?php echo $vendor['id']; ?>" class="btn-view-menu">
                                        <i class="fas fa-utensils me-2"></i>View Menu & Order
                                    </a>
                                <?php else: ?>
                                    <button class="btn-view-menu btn-disabled" disabled>
                                        <i class="fas fa-times-circle me-2"></i>Currently Unavailable
                                    </button>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features-section">
        <div class="container">
            <h2 class="section-title" data-aos="fade-up">Why Choose Us?</h2>
            <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
                We provide the best food delivery experience
            </p>
            
            <div class="features-grid">
                <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
                    <div class="feature-icon">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="feature-title">Lightning Fast</h3>
                    <p class="feature-description">Get your food delivered in 30 minutes or less from local kitchens</p>
                </div>

                <div class="feature-card" data-aos="fade-up" data-aos-delay="300">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Quality Guaranteed</h3>
                    <p class="feature-description">All partner restaurants are verified and maintain high quality standards</p>
                </div>

                <div class="feature-card" data-aos="fade-up" data-aos-delay="400">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="feature-title">Easy Ordering</h3>
                    <p class="feature-description">Simple ordering process that works perfectly on all devices</p>
                </div>

                <div class="feature-card" data-aos="fade-up" data-aos-delay="500">
                    <div class="feature-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3 class="feature-title">Made with Love</h3>
                    <p class="feature-description">Every dish is prepared with care by passionate chefs</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact" class="footer-modern">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section" data-aos="fade-up" data-aos-delay="200">
                    <h5><i class="fas fa-utensils me-2"></i><?php echo SITE_NAME; ?></h5>
                    <p>Your favorite local food delivery platform. We connect you with the best restaurants and cloud kitchens in your area.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>

                <div class="footer-section" data-aos="fade-up" data-aos-delay="300">
                    <h5>Quick Links</h5>
                    <p><a href="#home">Home</a></p>
                    <p><a href="#categories">Menu Categories</a></p>
                    <p><a href="#vendors">Restaurants</a></p>
                    <p><a href="<?php echo SITE_URL; ?>/track_order.php">Track Order</a></p>
                </div>

                <div class="footer-section" data-aos="fade-up" data-aos-delay="400">
                    <h5>For Restaurants</h5>
                    <p><a href="<?php echo SITE_URL; ?>/vendor/register.php">Partner with Us</a></p>
                    <p><a href="<?php echo SITE_URL; ?>/vendor/login.php">Restaurant Login</a></p>
                    <p><a href="#">Restaurant Support</a></p>
                    <p><a href="#">Business Solutions</a></p>
                </div>

                <div class="footer-section" data-aos="fade-up" data-aos-delay="500">
                    <h5>Contact Info</h5>
                    <p><i class="fas fa-envelope me-2"></i><?php echo ADMIN_EMAIL; ?></p>
                    <p><i class="fas fa-phone me-2"></i>+91 9876543210</p>
                    <p><i class="fas fa-map-marker-alt me-2"></i>India</p>
                    <p><a href="#">Terms & Conditions</a></p>
                    <p><a href="#">Privacy Policy</a></p>
                </div>
            </div>

            <div class="footer-bottom">
                <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?>. All rights reserved. Made with <i class="fas fa-heart text-danger"></i> for food lovers.</p>
            </div>
        </div>
    </footer>

    <!-- Track Order Modal -->
    <div class="modal fade" id="trackOrderModal" tabindex="-1" aria-labelledby="trackOrderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-radius-custom">
                <div class="modal-header bg-gradient text-white">
                    <h5 class="modal-title" id="trackOrderModalLabel">
                        <i class="fas fa-truck me-2"></i>Track Your Order
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h6>Enter your order number or mobile number to track your order</h6>
                    </div>
                    
                    <form action="track_order.php" method="GET">
                        <div class="mb-3">
                            <label for="order_number" class="form-label">Order Number</label>
                            <input type="text" class="form-control" id="order_number" name="order_number" 
                                   placeholder="Enter your order number (e.g., ORD202412091234)">
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn-cta">
                                <i class="fas fa-search me-2"></i>Track Order
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- AOS Animation -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-out',
            once: true,
            offset: 100
        });

        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Category card click effect
        document.querySelectorAll('.category-card').forEach(card => {
            card.addEventListener('click', function() {
                // You can add navigation logic here
                console.log('Category clicked:', this.querySelector('.category-title').textContent);
            });
        });

        // Add loading animation to buttons
        document.querySelectorAll('.btn-view-menu:not(.btn-disabled)').forEach(btn => {
            btn.addEventListener('click', function(e) {
                if (!this.classList.contains('btn-disabled')) {
                    this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Loading...';
                }
            });
        });

        // Flash messages auto-hide
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                if (alert.classList.contains('alert-success') || alert.classList.contains('alert-info')) {
                    alert.style.transition = 'opacity 0.5s ease-out';
                    alert.style.opacity = '0';
                    setTimeout(() => alert.remove(), 500);
                }
            });
        }, 5000);

        // Add parallax effect to hero section
        window.addEventListener('scroll', function() {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero-section');
            if (hero) {
                hero.style.transform = `translateY(${scrolled * 0.5}px)`;
            }
        });

        // Add counter animation for stats
        function animateCounter(element, target) {
            let current = 0;
            const increment = target / 100;
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }
                element.textContent = Math.floor(current) + '+';
            }, 20);
        }

        // Trigger counter animation when stats come into view
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const statNumbers = entry.target.querySelectorAll('.stat-number');
                    statNumbers.forEach(stat => {
                        const target = parseInt(stat.textContent);
                        animateCounter(stat, target);
                    });
                    observer.unobserve(entry.target);
                }
            });
        });

        const heroStats = document.querySelector('.hero-stats');
        if (heroStats) {
            observer.observe(heroStats);
        }
    </script>

    <?php if (isset($_SESSION['flash_message'])): ?>
        <script>
            // Show flash message as toast
            const flashMessage = <?php echo json_encode($_SESSION['flash_message']); ?>;
            if (flashMessage) {
                // You can implement a toast notification here
                console.log('Flash message:', flashMessage);
            }
        </script>
        <?php unset($_SESSION['flash_message']); ?>
    <?php endif; ?>
</body>
</html>