<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
// Include site settings
require_once 'site-details.php';
// =============================================
// GET CARS WITH FILTERS
// =============================================
$search = isset($_GET['search']) ? $conn->real_escape_string($_GET['search']) : '';
$category = isset($_GET['category']) ? intval($_GET['category']) : 0;
$min_price = isset($_GET['min_price']) ? floatval($_GET['min_price']) : 0;
$max_price = isset($_GET['max_price']) ? floatval($_GET['max_price']) : 0;
$sort = isset($_GET['sort']) ? $conn->real_escape_string($_GET['sort']) : 'newest';
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$per_page = getItemsPerPage();
$offset = ($page - 1) * $per_page;

// Build WHERE clause
$where = ["status = 'Available'"];

if ($search) {
    $where[] = "(title LIKE '%$search%' OR make LIKE '%$search%' OR model LIKE '%$search%' OR description LIKE '%$search%')";
}
if ($category > 0) {
    $where[] = "category_id = $category";
}
if ($min_price > 0) {
    $where[] = "price >= $min_price";
}
if ($max_price > 0) {
    $where[] = "price <= $max_price";
}

$where_clause = !empty($where) ? 'WHERE ' . implode(' AND ', $where) : '';

// Build ORDER BY clause
$order_by = '';
switch ($sort) {
    case 'price_low':
        $order_by = 'ORDER BY price ASC';
        break;
    case 'price_high':
        $order_by = 'ORDER BY price DESC';
        break;
    case 'oldest':
        $order_by = 'ORDER BY created_at ASC';
        break;
    case 'newest':
    default:
        $order_by = 'ORDER BY created_at DESC';
        break;
}

// Get total count for pagination
$count_query = "SELECT COUNT(*) as total FROM cars $where_clause";
$count_result = $conn->query($count_query);
$total_cars = $count_result->fetch_assoc()['total'] ?? 0;
$total_pages = ceil($total_cars / $per_page);

// Get cars with error handling
$query = "SELECT c.*, cat.name as category_name 
          FROM cars c 
          LEFT JOIN categories cat ON c.category_id = cat.id 
          $where_clause 
          $order_by 
          LIMIT $offset, $per_page";

// Debug: Log the query
error_log("Search Query: " . $query);

$cars_result = $conn->query($query);

if (!$cars_result) {
    // Log the error
    error_log("SQL Error: " . $conn->error);
    // Create empty result
    $cars_result = new stdClass();
    $cars_result->num_rows = 0;
}

// Get categories for filter with error handling
$categories_result = $conn->query("SELECT id, name FROM categories WHERE is_active = 1 ORDER BY name");
if (!$categories_result) {
    error_log("Categories query failed: " . $conn->error);
    $categories_result = new stdClass();
    $categories_result->num_rows = 0;
}

// Get featured cars for hero section
$featured_result = $conn->query("SELECT * FROM cars WHERE featured = 1 AND status = 'Available' ORDER BY created_at DESC LIMIT 6");
if (!$featured_result) {
    error_log("Featured cars query failed: " . $conn->error);
    $featured_result = new stdClass();
    $featured_result->num_rows = 0;
}

// Get latest cars for sidebar
$latest_result = $conn->query("SELECT id, make, model, price, created_at FROM cars WHERE status = 'Available' ORDER BY created_at DESC LIMIT 5");
if (!$latest_result) {
    error_log("Latest cars query failed: " . $conn->error);
    $latest_result = new stdClass();
    $latest_result->num_rows = 0;
}

// Get car makes for statistics
$make_count = 0;
$make_count_result = $conn->query("SELECT COUNT(DISTINCT make) as count FROM cars");
if ($make_count_result) {
    $make_count = $make_count_result->fetch_assoc()['count'] ?? 0;
}

$total_listings = 0;
$total_listings_result = $conn->query("SELECT COUNT(*) as count FROM cars WHERE status = 'Available'");
if ($total_listings_result) {
    $total_listings = $total_listings_result->fetch_assoc()['count'] ?? 0;
}

$avg_price = 0;
$avg_price_result = $conn->query("SELECT AVG(price) as avg FROM cars WHERE status = 'Available'");
if ($avg_price_result) {
    $avg_price = $avg_price_result->fetch_assoc()['avg'] ?? 0;
}
?>
<!DOCTYPE html>
<html lang="<?php echo $site_language; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?php echo $meta_title; ?></title>
    <meta name="description" content="<?php echo $meta_description; ?>">
    <meta name="keywords" content="<?php echo $meta_keywords; ?>">
    
    <?php if (getFavicon()): ?>
        <link rel="icon" type="image/x-icon" href="<?php echo getFavicon(); ?>">
    <?php endif; ?>
    
    <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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        /* ===== CSS Variables ===== */
        :root {
            --primary: #0b1a2e;
            --primary-light: #1a2f3f;
            --primary-dark: #060f1a;
            --accent: #ffd966;
            --accent-hover: #f0c94d;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-light: #94a3b8;
            --bg-body: #f0f4f8;
            --bg-white: #ffffff;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
            --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
            --radius: 12px;
            --radius-lg: 20px;
            --transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-slow: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            overflow-x: hidden;
            width: 100%;
        }
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-body);
            color: var(--text-primary);
            padding-top: 70px;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        /* ===== SCROLL ANIMATIONS ===== */
        .reveal {
            opacity: 0;
            transform: translateY(40px) scale(0.96);
            transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-40px);
            transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .reveal-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(40px);
            transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .reveal-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .stagger-children > * {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
        .stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; }
        .stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; }
        .stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; }
        .stagger-children.visible > *:nth-child(5) { transition-delay: 0.33s; }
        .stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; }
        .stagger-children.visible > * {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== NAVBAR ===== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 26, 46, 0.92);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            padding: 0 1.5rem;
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            transition: var(--transition);
            width: 100%;
            max-width: 100vw;
        }
        .navbar.scrolled {
            background: rgba(11, 26, 46, 0.97);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }
        .navbar .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: #fff;
            font-size: 1.4rem;
            font-weight: 800;
            z-index: 1001;
            flex-shrink: 0;
        }
        .navbar .logo img {
            height: 40px;
            width: auto;
            transition: var(--transition);
        }
        .navbar .logo:hover img {
            transform: scale(1.05);
        }
        .navbar .logo i {
            color: var(--accent);
            font-size: 1.8rem;
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .navbar .logo span {
            color: var(--accent);
        }
        
        .navbar .nav-links {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .navbar .nav-links li a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            font-size: 0.95rem;
            position: relative;
        }
        .navbar .nav-links li a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2.5px;
            background: var(--accent);
            border-radius: 4px;
            transition: var(--transition);
        }
        .navbar .nav-links li a:hover,
        .navbar .nav-links li a.active {
            color: #fff;
        }
        .navbar .nav-links li a:hover::after,
        .navbar .nav-links li a.active::after {
            width: 100%;
        }
        
        .navbar .nav-actions {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            flex-shrink: 0;
        }
        .navbar .nav-actions .btn {
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            font-size: 0.85rem;
            white-space: nowrap;
        }
        .navbar .nav-actions .btn-login {
            color: #fff;
            background: transparent;
            border: 2px solid rgba(255,255,255,0.15);
        }
        .navbar .nav-actions .btn-login:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-2px);
        }
        .navbar .nav-actions .btn-register {
            background: var(--accent);
            color: var(--primary);
        }
        .navbar .nav-actions .btn-register:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(255,217,102,0.3);
        }
        
        /* ===== MOBILE MENU TOGGLE ===== */
        .navbar .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
            z-index: 1001;
            transition: var(--transition);
            width: 44px;
            height: 44px;
            border-radius: 8px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .navbar .menu-toggle:hover {
            background: rgba(255,255,255,0.1);
        }
        .navbar .menu-toggle i {
            font-size: 1.6rem;
            transition: var(--transition);
        }
        .navbar .menu-toggle.active i {
            transform: rotate(90deg);
        }

        /* ===== MOBILE OVERLAY ===== */
        .mobile-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .mobile-overlay.active {
            display: block;
            opacity: 1;
        }

        /* ===== MOBILE MENU ===== */
        .mobile-menu {
            position: fixed;
            top: 0;
            right: -320px;
            width: 300px;
            max-width: 85vw;
            height: 100vh;
            background: var(--primary);
            padding: 80px 1.5rem 2rem;
            z-index: 1000;
            transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            overflow-y: auto;
            box-shadow: -4px 0 30px rgba(0,0,0,0.4);
        }
        .mobile-menu.open {
            right: 0;
        }
        
        /* Close button inside mobile menu */
        .mobile-menu .mobile-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: rgba(255,255,255,0.6);
            font-size: 1.8rem;
            cursor: pointer;
            padding: 0.5rem;
            transition: var(--transition);
            z-index: 10;
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mobile-menu .mobile-close-btn:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
            transform: rotate(90deg);
        }
        
        .mobile-menu .mobile-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .mobile-menu .mobile-brand i {
            color: var(--accent);
            font-size: 1.8rem;
        }
        .mobile-menu .mobile-brand span {
            color: #fff;
            font-size: 1.3rem;
            font-weight: 700;
        }
        .mobile-menu .mobile-brand span.highlight {
            color: var(--accent);
        }
        .mobile-menu .mobile-nav-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }
        .mobile-menu .mobile-nav-links a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            padding: 0.8rem 1rem;
            border-radius: 8px;
            font-weight: 500;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .mobile-menu .mobile-nav-links a i {
            width: 20px;
            font-size: 1.1rem;
        }
        .mobile-menu .mobile-nav-links a:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
        }
        .mobile-menu .mobile-nav-links a.active {
            background: rgba(255,215,0,0.08);
            color: var(--accent);
        }
        .mobile-menu .mobile-actions {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 1rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .mobile-menu .mobile-actions a {
            padding: 0.8rem 1rem;
            border-radius: 50px;
            text-align: center;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
        }
        .mobile-menu .mobile-actions .btn-login {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255,255,255,0.2);
        }
        .mobile-menu .mobile-actions .btn-login:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        .mobile-menu .mobile-actions .btn-register {
            background: var(--accent);
            color: var(--primary);
        }
        .mobile-menu .mobile-actions .btn-register:hover {
            background: var(--accent-hover);
        }
        .mobile-menu .mobile-footer {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .mobile-menu .mobile-footer p {
            color: rgba(255,255,255,0.5);
            font-size: 0.8rem;
            text-align: center;
        }

        /* ===== HERO BANNER ===== */
        .hero {
            position: relative;
            min-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 1.5rem;
            overflow: hidden;
            background: var(--primary);
            width: 100%;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=1920&q=80') center/cover no-repeat;
            filter: brightness(0.35) saturate(1.2);
            animation: heroZoom 24s infinite alternate ease-in-out;
        }
        @keyframes heroZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.12); }
        }
        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 50%, rgba(11,26,46,0.4) 0%, rgba(11,26,46,0.85) 80%);
        }
        .hero .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            width: 100%;
            text-align: center;
            animation: fadeInUp 1s ease forwards;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .hero .hero-content .hero-badge {
            display: inline-block;
            background: rgba(255,217,102,0.12);
            color: var(--accent);
            padding: 0.4rem 1.4rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,217,102,0.15);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            backdrop-filter: blur(4px);
        }
        .hero .hero-content .hero-badge i {
            margin-right: 0.4rem;
        }
        .hero .hero-content h1 {
            font-size: 4.6rem;
            font-weight: 900;
            color: #fff;
            margin-bottom: 1.2rem;
            line-height: 1.08;
        }
        .hero .hero-content h1 .highlight {
            background: linear-gradient(135deg, var(--accent), #ffb347);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero .hero-content p {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.75);
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.7;
        }
        .hero .hero-content .hero-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-bottom: 2.5rem;
            flex-wrap: wrap;
        }
        .hero .hero-content .hero-stats .stat {
            text-align: center;
        }
        .hero .hero-content .hero-stats .stat .number {
            display: block;
            font-size: 2.2rem;
            font-weight: 800;
            color: #fff;
        }
        .hero .hero-content .hero-stats .stat .label {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.5);
            margin-top: 0.2rem;
        }
        .hero .hero-content .search-box {
            display: flex;
            gap: 0.5rem;
            max-width: 600px;
            width: 100%;
            margin: 0 auto;
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(12px);
            padding: 0.5rem;
            border-radius: 60px;
            border: 1px solid rgba(255,255,255,0.06);
            transition: var(--transition);
        }
        .hero .hero-content .search-box:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(255,217,102,0.15);
        }
        .hero .hero-content .search-box input {
            flex: 1;
            padding: 0.9rem 1.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            background: rgba(255,255,255,0.92);
            transition: var(--transition);
            min-width: 0;
        }
        .hero .hero-content .search-box input:focus {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--accent);
        }
        .hero .hero-content .search-box button {
            padding: 0.9rem 2.4rem;
            background: var(--accent);
            color: var(--primary);
            border: none;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        .hero .hero-content .search-box button:hover {
            background: var(--accent-hover);
            transform: scale(1.02);
            box-shadow: 0 8px 32px rgba(255,217,102,0.3);
        }

        /* ===== FEATURES SECTION ===== */
        .features-section {
            padding: 5rem 1.5rem;
            background: var(--bg-white);
            width: 100%;
        }
        .features-section .container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        .features-section .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .features-section .section-header h2 {
            font-size: 2.6rem;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        .features-section .section-header p {
            color: var(--text-secondary);
            margin-top: 0.5rem;
            font-size: 1.1rem;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
            width: 100%;
        }
        .feature-card {
            text-align: center;
            padding: 2.2rem 1.5rem;
            border-radius: var(--radius-lg);
            transition: var(--transition);
            background: var(--bg-body);
            border: 1px solid transparent;
            box-shadow: var(--shadow-sm);
        }
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent);
            background: #fff;
        }
        .feature-card .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: rgba(255,217,102,0.08);
            color: var(--accent);
            font-size: 2rem;
            margin-bottom: 1rem;
            transition: var(--transition);
        }
        .feature-card:hover .icon {
            background: var(--accent);
            color: var(--primary);
            transform: scale(1.1) rotate(-4deg);
        }
        .feature-card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .feature-card p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        /* ===== FEATURED CARS ===== */
        .featured-section {
            padding: 5rem 1.5rem;
            background: var(--bg-body);
            width: 100%;
        }
        .featured-section .container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        .featured-section .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .featured-section .section-header h2 {
            font-size: 2.2rem;
            font-weight: 800;
        }
        .featured-section .section-header h2 i {
            color: var(--accent);
        }
        .featured-section .section-header .view-all {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .featured-section .section-header .view-all:hover {
            color: var(--accent);
            gap: 1rem;
        }
        .featured-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            width: 100%;
        }

        /* ===== MAIN CONTENT ===== */
        .main-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 2rem;
            width: 100%;
        }

        /* ===== SIDEBAR ===== */
        .sidebar {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid #e8edf5;
            height: fit-content;
            position: sticky;
            top: 90px;
            transition: var(--transition);
            width: 100%;
        }
        .sidebar:hover {
            box-shadow: var(--shadow-md);
        }
        .sidebar h3 {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e8edf5;
        }
        .sidebar h3 i {
            color: var(--accent);
            margin-right: 0.5rem;
        }
        .sidebar .filter-group {
            margin-bottom: 1.5rem;
        }
        .sidebar .filter-group label {
            display: block;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 0.4rem;
            color: var(--text-secondary);
        }
        .sidebar .filter-group select,
        .sidebar .filter-group input {
            width: 100%;
            padding: 0.6rem 0.8rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: var(--transition);
            background: #fff;
        }
        .sidebar .filter-group select:focus,
        .sidebar .filter-group input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(255,217,102,0.15);
        }
        .sidebar .filter-actions {
            display: flex;
            gap: 0.5rem;
            flex-direction: column;
        }
        .sidebar .filter-actions button,
        .sidebar .filter-actions .btn-reset {
            padding: 0.7rem;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            text-decoration: none;
        }
        .sidebar .filter-actions .btn-apply {
            background: var(--primary);
            color: #fff;
        }
        .sidebar .filter-actions .btn-apply:hover {
            background: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .sidebar .filter-actions .btn-reset {
            background: #e2e8f0;
            color: var(--text-primary);
        }
        .sidebar .filter-actions .btn-reset:hover {
            background: #cbd5e1;
            transform: translateY(-2px);
        }
        .sidebar .latest-cars {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 2px solid #e8edf5;
        }
        .sidebar .latest-cars .latest-item {
            display: flex;
            justify-content: space-between;
            padding: 0.6rem 0;
            border-bottom: 1px solid #f1f5f9;
            transition: var(--transition);
        }
        .sidebar .latest-cars .latest-item:hover {
            padding-left: 0.5rem;
            border-color: var(--accent);
        }
        .sidebar .latest-cars .latest-item:last-child {
            border-bottom: none;
        }
        .sidebar .latest-cars .latest-item .car-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        .sidebar .latest-cars .latest-item .car-price {
            font-weight: 700;
            color: var(--primary);
        }

        /* ===== CARS GRID ===== */
        .cars-section {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid #e8edf5;
            transition: var(--transition);
            width: 100%;
        }
        .cars-section:hover {
            box-shadow: var(--shadow-md);
        }
        .cars-section .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .cars-section .section-header h2 {
            font-size: 1.3rem;
            font-weight: 700;
        }
        .cars-section .section-header .result-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
            background: var(--bg-body);
            padding: 0.3rem 1rem;
            border-radius: 50px;
        }
        .cars-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            width: 100%;
        }

        /* ===== CAR CARD ===== */
        .car-card {
            border: 1px solid #e8edf5;
            border-radius: var(--radius);
            overflow: hidden;
            transition: var(--transition);
            background: #fff;
            cursor: pointer;
            position: relative;
            width: 100%;
        }
        .car-card:hover {
            transform: translateY(-10px) scale(1.01);
            box-shadow: var(--shadow-xl);
            border-color: var(--accent);
        }
        .car-card .car-image {
            width: 100%;
            height: 220px;
            background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            font-size: 3rem;
            position: relative;
            overflow: hidden;
        }
        .car-card .car-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        .car-card:hover .car-image img {
            transform: scale(1.06);
        }
        .car-card .car-image .featured-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--accent);
            color: var(--primary);
            padding: 0.3rem 0.9rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            box-shadow: var(--shadow-sm);
        }
        .car-card .car-image .car-status-badge {
            position: absolute;
            bottom: 12px;
            left: 12px;
            padding: 0.3rem 0.9rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 600;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px);
            color: #fff;
        }
        .car-card .car-body {
            padding: 1.25rem 1.5rem 1.5rem;
        }
        .car-card .car-body .car-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
        }
        .car-card .car-body .car-title a {
            color: var(--text-primary);
            text-decoration: none;
            transition: var(--transition);
        }
        .car-card .car-body .car-title a:hover {
            color: var(--accent);
        }
        .car-card .car-body .car-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem 1.2rem;
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin: 0.5rem 0 0.6rem;
        }
        .car-card .car-body .car-meta span {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .car-card .car-body .car-meta i {
            width: 14px;
            font-size: 0.8rem;
        }
        .car-card .car-body .car-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary);
            margin: 0.5rem 0;
        }
        .car-card .car-body .car-price .old-price {
            font-size: 0.9rem;
            color: var(--text-light);
            text-decoration: line-through;
            font-weight: 400;
            margin-left: 0.5rem;
        }
        .car-card .car-body .car-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.8rem;
            padding-top: 0.8rem;
            border-top: 1px solid #e8edf5;
        }
        .car-card .car-body .car-status {
            display: inline-block;
            padding: 0.2rem 0.9rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        .car-card .car-body .car-status.available {
            background: #d1fae5;
            color: #065f46;
        }
        .car-card .car-body .car-status.sold {
            background: #fee2e2;
            color: #991b1b;
        }
        .car-card .car-body .car-status.reserved {
            background: #fef3c7;
            color: #92400e;
        }
        .car-card .car-body .car-status.pending {
            background: #e0e7ff;
            color: #3730a3;
        }
        .car-card .car-body .view-details {
            color: var(--primary);
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .car-card .car-body .view-details:hover {
            color: var(--accent);
            gap: 0.6rem;
        }

        /* ===== TESTIMONIALS SECTION ===== */
        .testimonials-section {
            padding: 5rem 1.5rem;
            background: var(--primary);
            color: #fff;
            width: 100%;
        }
        .testimonials-section .container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        .testimonials-section .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .testimonials-section .section-header h2 {
            font-size: 2.6rem;
            font-weight: 800;
        }
        .testimonials-section .section-header h2 i {
            color: var(--accent);
        }
        .testimonials-section .section-header p {
            color: rgba(255,255,255,0.5);
            margin-top: 0.5rem;
            font-size: 1.1rem;
        }
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            width: 100%;
        }
        .testimonial-card {
            background: rgba(255,255,255,0.04);
            padding: 2rem;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,0.06);
            transition: var(--transition);
            backdrop-filter: blur(4px);
        }
        .testimonial-card:hover {
            transform: translateY(-4px);
            background: rgba(255,255,255,0.07);
            border-color: var(--accent);
        }
        .testimonial-card .stars {
            color: var(--accent);
            margin-bottom: 1rem;
            font-size: 1rem;
        }
        .testimonial-card .quote {
            font-size: 1rem;
            line-height: 1.6;
            color: rgba(255,255,255,0.85);
            margin-bottom: 1rem;
            font-style: italic;
        }
        .testimonial-card .author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .testimonial-card .author .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: var(--accent);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
        }
        .testimonial-card .author .info .name {
            font-weight: 600;
        }
        .testimonial-card .author .info .role {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.4);
        }

        /* ===== CTA SECTION ===== */
        .cta-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            text-align: center;
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 500px;
            height: 500px;
            background: rgba(255,217,102,0.03);
            border-radius: 50%;
        }
        .cta-section .container {
            max-width: 700px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            width: 100%;
        }
        .cta-section h2 {
            font-size: 3rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 1rem;
        }
        .cta-section h2 span {
            color: var(--accent);
        }
        .cta-section p {
            color: rgba(255,255,255,0.7);
            font-size: 1.15rem;
            margin-bottom: 2rem;
        }
        .cta-section .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .cta-section .cta-buttons .btn {
            padding: 0.9rem 2.6rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            transition: var(--transition);
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }
        .cta-section .cta-buttons .btn-primary {
            background: var(--accent);
            color: var(--primary);
        }
        .cta-section .cta-buttons .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(255,217,102,0.3);
        }
        .cta-section .cta-buttons .btn-secondary {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255,255,255,0.15);
        }
        .cta-section .cta-buttons .btn-secondary:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-3px);
        }

        /* ===== PAGINATION ===== */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }
        .pagination a {
            padding: 0.5rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            text-decoration: none;
            color: var(--text-primary);
            transition: var(--transition);
            font-weight: 500;
            min-width: 40px;
            text-align: center;
        }
        .pagination a:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        .pagination a.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        /* ===== FOOTER ===== */
        .footer {
            background: var(--primary-dark);
            color: rgba(255,255,255,0.6);
            padding: 4rem 1.5rem 1.5rem;
            width: 100%;
        }
        .footer .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2.5rem;
            width: 100%;
        }
        .footer .footer-content h4 {
            color: #fff;
            margin-bottom: 1rem;
            font-size: 1.1rem;
            font-weight: 700;
        }
        .footer .footer-content h4 i {
            color: var(--accent);
            margin-right: 0.5rem;
        }
        .footer .footer-content p {
            margin-bottom: 0.5rem;
            line-height: 1.6;
        }
        .footer .footer-content a {
            color: rgba(255,255,255,0.5);
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
            transition: var(--transition);
        }
        .footer .footer-content a:hover {
            color: var(--accent);
            transform: translateX(4px);
        }
        .footer .footer-content .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }
        .footer .footer-content .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255,255,255,0.04);
            color: #fff;
            transition: var(--transition);
        }
        .footer .footer-content .social-links a:hover {
            background: var(--accent);
            color: var(--primary);
            transform: translateY(-4px);
        }
        .footer .footer-bottom {
            max-width: 1200px;
            margin: 2.5rem auto 0;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.04);
            text-align: center;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.25);
        }

        /* ===== NO RESULTS ===== */
        .no-results {
            text-align: center;
            padding: 4rem 0;
            color: var(--text-light);
        }
        .no-results i {
            font-size: 4rem;
            display: block;
            margin-bottom: 1rem;
            color: var(--accent);
        }
        .no-results h3 {
            font-size: 1.5rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .main-content {
                grid-template-columns: 1fr;
                padding: 2rem 1.5rem;
            }
            .sidebar {
                position: relative;
                top: 0;
            }
            .hero .hero-content h1 {
                font-size: 3.6rem;
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 60px;
            }
            .navbar {
                padding: 0 1rem;
                height: 60px;
            }
            .navbar .nav-links {
                display: none;
            }
            .navbar .nav-actions {
                display: none;
            }
            .navbar .menu-toggle {
                display: flex;
            }
            
            .hero {
                min-height: 70vh;
                padding: 2.5rem 1rem;
            }
            .hero .hero-content h1 {
                font-size: 2.6rem;
            }
            .hero .hero-content p {
                font-size: 1rem;
            }
            .hero .hero-content .hero-stats {
                gap: 1.5rem;
            }
            .hero .hero-content .hero-stats .stat .number {
                font-size: 1.6rem;
            }
            .hero .hero-content .search-box {
                flex-direction: column;
                background: transparent;
                padding: 0;
                gap: 0.75rem;
                border: none;
                border-radius: 0;
            }
            .hero .hero-content .search-box input {
                border-radius: 50px;
                padding: 0.9rem 1.2rem;
            }
            .hero .hero-content .search-box button {
                border-radius: 50px;
                width: 100%;
                justify-content: center;
                padding: 0.9rem 1.5rem;
            }
            
            .main-content {
                padding: 1rem;
            }
            .cars-grid {
                grid-template-columns: 1fr;
            }
            .featured-grid {
                grid-template-columns: 1fr;
            }
            .featured-section {
                padding: 2.5rem 1rem;
            }
            .featured-section .section-header h2 {
                font-size: 1.5rem;
            }
            .features-grid {
                grid-template-columns: 1fr 1fr;
            }
            .testimonials-grid {
                grid-template-columns: 1fr;
            }
            
            .footer {
                padding: 2rem 1rem 1rem;
            }
            .footer .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 1.5rem;
            }
            .footer .footer-content .social-links {
                justify-content: center;
            }
            .cta-section h2 {
                font-size: 2rem;
            }
            .cta-section .cta-buttons .btn {
                width: 100%;
                justify-content: center;
            }

            .mobile-menu {
                width: 280px;
                right: -280px;
            }
            .features-grid {
                grid-template-columns: 1fr 1fr;
            }
            .cars-section {
                padding: 1rem;
            }
            .car-card .car-image {
                height: 200px;
            }
            .cars-section .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .featured-section .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 480px) {
            .hero .hero-content h1 {
                font-size: 2rem;
            }
            .car-card .car-image {
                height: 180px;
            }
            .cars-section .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .pagination a {
                padding: 0.4rem 0.8rem;
                font-size: 0.85rem;
            }
            .mobile-menu {
                width: 100%;
                max-width: 100%;
                right: -100%;
            }
            .features-grid {
                grid-template-columns: 1fr;
            }
            .featured-section .section-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .hero .hero-content .hero-stats {
                gap: 1rem;
            }
            .hero .hero-content .hero-stats .stat .number {
                font-size: 1.3rem;
            }
            .hero .hero-content .hero-stats .stat .label {
                font-size: 0.7rem;
            }
            .navbar .logo {
                font-size: 1.1rem;
            }
            .navbar .logo img {
                height: 32px;
            }
        }
    </style>
</head>
<body>

<!-- ===== NAVBAR ===== -->
<nav class="navbar" id="navbar">
    <a href="index.php" class="logo">
        <?php if (!empty($site_logo)): ?>
            <img src="<?php echo $site_logo; ?>" alt="<?php echo $site_name; ?>">
        <?php else: ?>
            <i class="fas fa-car-side"></i>
        <?php endif; ?>
        <span><?php echo $site_name; ?></span>
    </a>
    
    <ul class="nav-links">
        <li><a href="index.php" class="active">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="contact.php">Contact Us</a></li>
    </ul>
    
    <div class="nav-actions">
        <?php if (isset($_SESSION['customer_logged_in']) && $_SESSION['customer_logged_in'] === true): ?>
            <a href="customers/index.php" class="btn btn-login"><i class="fas fa-user"></i> Dashboard</a>
            <a href="logout.php" class="btn btn-login"><i class="fas fa-sign-out-alt"></i> Logout</a>
        <?php else: ?>
            <a href="login.php" class="btn btn-login"><i class="fas fa-sign-in-alt"></i> Login</a>
            <a href="register.php" class="btn btn-register"><i class="fas fa-user-plus"></i> Register</a>
        <?php endif; ?>
    </div>
    
    <!-- Hamburger Menu Toggle -->
    <button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">
        <i class="fas fa-bars"></i>
    </button>
</nav>

<!-- ===== MOBILE OVERLAY ===== -->
<div class="mobile-overlay" id="mobileOverlay"></div>

<!-- ===== MOBILE MENU ===== -->
<div class="mobile-menu" id="mobileMenu">
    <!-- Close Button -->
    <button class="mobile-close-btn" id="mobileCloseBtn" aria-label="Close menu">
        <i class="fas fa-times"></i>
    </button>
    
    <div class="mobile-brand">
        <i class="fas fa-car"></i>
        <span><?php echo $site_name; ?></span>
    </div>
    
    <div class="mobile-nav-links">
        <a href="index.php" class="active">
            <i class="fas fa-home"></i> Home
        </a>
        <a href="about.php">
            <i class="fas fa-info-circle"></i> About
        </a>
        <a href="contact.php">
            <i class="fas fa-envelope"></i> Contact
        </a>
    </div>
    
    <div class="mobile-actions">
        <?php if (isset($_SESSION['customer_logged_in']) && $_SESSION['customer_logged_in'] === true): ?>
            <a href="customers/index.php" class="btn-login"><i class="fas fa-user"></i> Dashboard</a>
            <a href="logout.php" class="btn-login"><i class="fas fa-sign-out-alt"></i> Logout</a>
        <?php else: ?>
            <a href="login.php" class="btn-login"><i class="fas fa-sign-in-alt"></i> Login</a>
            <a href="register.php" class="btn-register"><i class="fas fa-user-plus"></i> Create Account</a>
        <?php endif; ?>
    </div>
    
    <div class="mobile-footer">
        <p>&copy; <?php echo date('Y'); ?> <?php echo $site_name; ?></p>
        <p style="margin-top:0.3rem;">
            <i class="fas fa-phone"></i> <?php echo $site_phone; ?>
        </p>
    </div>
</div>

<!-- ===== HERO SECTION ===== -->
<section style="
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    overflow: hidden;
    background: #0b1a2e;
    width: 100%;
">

    <!-- Background image with zoom animation -->
    <div style="
        position: absolute;
        inset: 0;
        background: url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=1920&q=80') center/cover no-repeat;
        filter: brightness(0.35) saturate(1.2);
        animation: heroZoom 24s infinite alternate ease-in-out;
        z-index: 0;
    "></div>

    <!-- Dark overlay -->
    <div style="
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 50%, rgba(11,26,46,0.4) 0%, rgba(11,26,46,0.85) 80%);
        z-index: 1;
    "></div>

    <!-- Moving car container -->
    <div style="
        position: absolute;
        bottom: 8%;
        left: 0;
        width: 100%;
        height: 200px;
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    ">
        <!-- The moving car -->
        <div style="
            position: absolute;
            bottom: 0;
            left: -480px;
            width: 480px;
            height: 200px;
            animation: driveAcross 14s cubic-bezier(0.25, 0.1, 0.15, 1) infinite;
        " id="movingCar">

            <!-- Road lines -->
            <div style="
                position: absolute;
                bottom: 10px;
                left: 0;
                width: 400%;
                height: 4px;
                display: flex;
                gap: 80px;
                animation: roadScroll 1.2s linear infinite;
                opacity: 0.7;
                z-index: 1;
            ">
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
                <span style="display:block; width:50px; height:4px; background:#ffd966; border-radius:4px; flex-shrink:0;"></span>
            </div>

            <!-- Car Image -->
            <div style="
                position: relative;
                width: 100%;
                height: 100%;
                filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8));
            ">
                <img src="hero-img.png" 
                     alt="Luxury car" 
                     style="
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        object-position: bottom;
                        border-radius: 12px;
                        filter: brightness(1.1) contrast(1.05);
                     "
                />

                <!-- Brake lights -->
                <div style="
                    position: absolute;
                    bottom: 50px;
                    left: 30px;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: rgba(192, 57, 43, 0.6);
                    box-shadow: 0 0 20px rgba(192, 57, 43, 0.3);
                    transition: all 0.15s ease;
                    pointer-events: none;
                " id="brakeLight"></div>

                <div style="
                    position: absolute;
                    bottom: 50px;
                    left: 55px;
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    background: rgba(192, 57, 43, 0.4);
                    box-shadow: 0 0 15px rgba(192, 57, 43, 0.2);
                    transition: all 0.15s ease;
                    pointer-events: none;
                " id="brakeLight2"></div>

                <!-- Headlight glow -->
                <div style="
                    position: absolute;
                    bottom: 50px;
                    right: 20px;
                    width: 30px;
                    height: 20px;
                    background: radial-gradient(ellipse, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
                    border-radius: 50%;
                    pointer-events: none;
                "></div>

                <!-- Brake smoke -->
                <div style="
                    position: absolute;
                    bottom: 20px;
                    left: -50px;
                    width: 100px;
                    height: 80px;
                    pointer-events: none;
                    opacity: 0;
                    transition: opacity 0.15s ease;
                " id="brakeSmoke">
                    <div style="
                        position: absolute;
                        bottom: 0;
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        background: radial-gradient(circle, rgba(200,200,200,0.5) 0%, rgba(200,200,200,0) 80%);
                        filter: blur(8px);
                        animation: smokePuff 0.7s ease-out infinite alternate;
                        left: 0;
                        animation-delay: 0.1s;
                    "></div>
                    <div style="
                        position: absolute;
                        bottom: 10px;
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        background: radial-gradient(circle, rgba(200,200,200,0.4) 0%, rgba(200,200,200,0) 80%);
                        filter: blur(10px);
                        animation: smokePuff 0.7s ease-out infinite alternate;
                        left: 30px;
                        animation-delay: 0.3s;
                    "></div>
                    <div style="
                        position: absolute;
                        bottom: -5px;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: radial-gradient(circle, rgba(200,200,200,0.3) 0%, rgba(200,200,200,0) 80%);
                        filter: blur(6px);
                        animation: smokePuff 0.7s ease-out infinite alternate;
                        left: 60px;
                        animation-delay: 0.5s;
                    "></div>
                </div>
            </div>
        </div>
    </div>

    <!-- HERO TEXT CONTENT - FIXED WITH WORKING SEARCH -->
    <div style="
        position: relative;
        z-index: 10;
        max-width: 800px;
        width: 100%;
        text-align: center;
        animation: fadeInUp 1s ease forwards;
        margin-top: -40px;
        pointer-events: none;
    ">
        <div style="
            display: inline-block;
            background: rgba(255,217,102,0.12);
            color: #ffd966;
            padding: 0.4rem 1.4rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            border: 1px solid rgba(255,217,102,0.15);
            backdrop-filter: blur(4px);
            margin-bottom: 1.5rem;
        ">
            <i class="fas fa-crown"></i> Premium Car Dealership
        </div>
        <h1 style="
            font-size: 3.6rem;
            font-weight: 900;
            color: #fff;
            line-height: 1.08;
        ">
            Find Your <span style="
                background: linear-gradient(135deg, #ffd966, #ffb347);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            ">Dream Car</span> Today
        </h1>
        <p style="
            font-size: 1.25rem;
            color: rgba(255,255,255,0.75);
            max-width: 600px;
            margin: 0 auto 2rem;
        ">
            Browse our exclusive collection of luxury and premium vehicles.
        </p>

       <!-- SEARCH BOX - UPDATED TO POINT TO search-results.php -->
<form action="search-results.php" method="GET" style="
    display: flex;
    gap: 0.5rem;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    padding: 0.5rem;
    border-radius: 60px;
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 999;
    pointer-events: auto;
">
    <input type="text" 
           name="search" 
           placeholder="Search by make, model, or title..." 
           value="<?php echo htmlspecialchars($search); ?>"
           style="
               flex: 1;
               padding: 0.9rem 1.5rem;
               border: none;
               border-radius: 50px;
               font-size: 1rem;
               background: rgba(255,255,255,0.92);
               pointer-events: auto;
               position: relative;
               z-index: 1000;
           " />
    <button type="submit" style="
        padding: 0.9rem 2.4rem;
        background: #ffd966;
        color: #0b1a2e;
        border: none;
        border-radius: 50px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        z-index: 1000;
        pointer-events: auto;
        transition: all 0.3s ease;
    ">
        <i class="fas fa-search"></i>
    </button>
</form>
    </div>
</section>

<!-- ===== KEYFRAMES (inline) ===== -->
<style>
    /* hero background zoom */
    @keyframes heroZoom {
        0% { transform: scale(1); }
        100% { transform: scale(1.12); }
    }
    /* fade in for text */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* road lines scroll */
    @keyframes roadScroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-200px); }
    }
    /* brake smoke puffs */
    @keyframes smokePuff {
        0% { transform: scale(0.6) translateY(0); opacity: 0.7; }
        100% { transform: scale(1.6) translateY(-40px); opacity: 0; }
    }
    /* driving across with braking pause (58%-78% hold) */
    @keyframes driveAcross {
        0% {
            left: -480px;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.15, 1);
        }
        55% {
            left: calc(100% + 80px);
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.15, 1);
        }
        /* BRAKE ZONE: hold position */
        58% {
            left: calc(100% + 80px);
            animation-timing-function: steps(1);
        }
        78% {
            left: calc(100% + 80px);
            animation-timing-function: steps(1);
        }
        /* drive back */
        80% {
            left: calc(100% + 80px);
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.15, 1);
        }
        100% {
            left: -480px;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.15, 1);
        }
    }
    /* responsive adjustments */
    @media (max-width: 768px) {
        .hero h1 { font-size: 2.6rem !important; }
        .moving-car-container { height: 140px !important; bottom: 4% !important; }
        .moving-car { width: 320px !important; height: 140px !important; left: -320px !important; }
        #brakeLight { width: 16px !important; height: 16px !important; bottom: 30px !important; left: 15px !important; }
        #brakeLight2 { width: 12px !important; height: 12px !important; bottom: 30px !important; left: 35px !important; }
        .road-lines { gap: 40px !important; }
        .road-lines span { width: 30px !important; height: 3px !important; }
        @keyframes driveAcross {
            0% { left: -320px; }
            55% { left: calc(100% + 50px); }
            58% { left: calc(100% + 50px); }
            78% { left: calc(100% + 50px); }
            80% { left: calc(100% + 50px); }
            100% { left: -320px; }
        }
    }
    @media (max-width: 480px) {
        .hero h1 { font-size: 2rem !important; }
        .moving-car-container { height: 100px !important; bottom: 2% !important; }
        .moving-car { width: 240px !important; height: 100px !important; left: -240px !important; }
        #brakeLight { width: 12px !important; height: 12px !important; bottom: 20px !important; left: 10px !important; }
        #brakeLight2 { width: 8px !important; height: 8px !important; bottom: 20px !important; left: 25px !important; }
        .road-lines { gap: 25px !important; }
        .road-lines span { width: 20px !important; height: 2px !important; }
        .brake-smoke { width: 60px !important; height: 50px !important; left: -30px !important; }
        @keyframes driveAcross {
            0% { left: -240px; }
            55% { left: calc(100% + 30px); }
            58% { left: calc(100% + 30px); }
            78% { left: calc(100% + 30px); }
            80% { left: calc(100% + 30px); }
            100% { left: -240px; }
        }
    }
</style>

<!-- ===== JAVASCRIPT: BRAKE LOGIC (inline) ===== -->
<script>
    (function() {
        'use strict';

        const car = document.getElementById('movingCar');
        const brakeLight = document.getElementById('brakeLight');
        const brakeLight2 = document.getElementById('brakeLight2');
        const brakeSmoke = document.getElementById('brakeSmoke');

        let isBraking = false;
        let animationStartTime = 0;
        const actualDuration = 14000; // matches 14s

        // Get animation progress via Web Animations API
        function getAnimationProgress() {
            const animations = car.getAnimations();
            for (let anim of animations) {
                if (anim.animationName === 'driveAcross') {
                    const dur = anim.effect.getComputedTiming().duration;
                    const current = anim.currentTime || 0;
                    return (current % dur) / dur;
                }
            }
            return null;
        }

        function updateBrake(progress) {
            // Brake zone: 58% â€“ 78%
            const inBrakeZone = (progress >= 0.58 && progress <= 0.78);
            if (inBrakeZone) {
                if (!isBraking) {
                    isBraking = true;
                    // Bright red brake lights
                    brakeLight.style.background = '#ff2222';
                    brakeLight.style.boxShadow = '0 0 40px #ff2222, 0 0 80px #ff0000';
                    brakeLight2.style.background = '#ff2222';
                    brakeLight2.style.boxShadow = '0 0 30px #ff2222, 0 0 60px #ff0000';
                    brakeSmoke.style.opacity = '1';
                }
            } else {
                if (isBraking) {
                    isBraking = false;
                    // Dim brake lights
                    brakeLight.style.background = 'rgba(192, 57, 43, 0.6)';
                    brakeLight.style.boxShadow = '0 0 20px rgba(192, 57, 43, 0.3)';
                    brakeLight2.style.background = 'rgba(192, 57, 43, 0.4)';
                    brakeLight2.style.boxShadow = '0 0 15px rgba(192, 57, 43, 0.2)';
                    brakeSmoke.style.opacity = '0';
                }
            }
        }

        function tick() {
            const progress = getAnimationProgress();
            if (progress !== null) {
                updateBrake(progress);
            } else {
                // fallback: time-based
                const now = performance.now();
                if (!animationStartTime) animationStartTime = now;
                const elapsed = (now - animationStartTime) % actualDuration;
                const prog = elapsed / actualDuration;
                updateBrake(prog);
            }
            requestAnimationFrame(tick);
        }

        // start loop
        requestAnimationFrame(tick);

        // reset on animation start
        car.addEventListener('animationstart', function() {
            animationStartTime = performance.now();
            isBraking = false;
            brakeLight.style.background = 'rgba(192, 57, 43, 0.6)';
            brakeLight.style.boxShadow = '0 0 20px rgba(192, 57, 43, 0.3)';
            brakeLight2.style.background = 'rgba(192, 57, 43, 0.4)';
            brakeLight2.style.boxShadow = '0 0 15px rgba(192, 57, 43, 0.2)';
            brakeSmoke.style.opacity = '0';
        });

        // handle visibility change
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                animationStartTime = performance.now();
            }
        });

        console.log('🚗 Hero car with PHOTO and brake animation loaded.');
    })();
</script>

<!-- ===== FEATURED CARS ===== -->
<?php if ($featured_result && $featured_result->num_rows > 0): ?>
<section class="featured-section reveal">
    <div class="container">
        <div class="section-header">
            <h2><i class="fas fa-star"></i> Featured Vehicles</h2>
            <a href="index.php" class="view-all">
                View All <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        <div class="featured-grid stagger-children">
            <?php while ($featured = $featured_result->fetch_assoc()): ?>
            <div class="car-card" onclick="window.location.href='product-details.php?id=<?php echo $featured['id']; ?>'">
                <div class="car-image">
                    <?php 
                    $img_query = $conn->query("SELECT image_path FROM car_images WHERE car_id = " . $featured['id'] . " AND is_primary = 1 LIMIT 1");
                    if ($img_query && $img_query->num_rows > 0) {
                        $img = $img_query->fetch_assoc();
                        echo '<img src="' . $site_url . '/' . $img['image_path'] . '" alt="' . htmlspecialchars($featured['title']) . '" loading="lazy">';
                    } else {
                        echo '<i class="fas fa-car"></i>';
                    }
                    ?>
                    <span class="featured-badge"><i class="fas fa-star"></i> Featured</span>
                    <span class="car-status-badge"><?php echo $featured['status']; ?></span>
                </div>
                <div class="car-body">
                    <div class="car-title">
                        <a href="product-details.php?id=<?php echo $featured['id']; ?>">
                            <?php echo htmlspecialchars($featured['make'] . ' ' . $featured['model']); ?>
                        </a>
                    </div>
                    <div class="car-meta">
                        <span><i class="fas fa-calendar"></i> <?php echo $featured['year']; ?></span>
                        <span><i class="fas fa-tachometer-alt"></i> <?php echo number_format($featured['mileage']); ?> km</span>
                        <span><i class="fas fa-gas-pump"></i> <?php echo $featured['fuel_type']; ?></span>
                    </div>
                    <div class="car-price">
                        <?php echo formatCurrency($featured['price']); ?>
                        <?php if ($featured['sale_price'] > 0 && $featured['sale_price'] < $featured['price']): ?>
                            <span class="old-price"><?php echo formatCurrency($featured['price']); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="car-footer">
                        <span class="car-status <?php echo strtolower($featured['status']); ?>">
                            <?php echo $featured['status']; ?>
                        </span>
                        <span class="view-details">View Details <i class="fas fa-arrow-right"></i></span>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ===== MAIN CONTENT ===== -->
<div class="main-content">
    
    <!-- ===== SIDEBAR ===== -->
    <aside class="sidebar reveal-left">
        <h3><i class="fas fa-sliders-h"></i> Filters</h3>
        <form method="GET" id="filterForm">
            <?php if ($search): ?>
                <input type="hidden" name="search" value="<?php echo htmlspecialchars($search); ?>">
            <?php endif; ?>
            
            <div class="filter-group">
                <label>Category</label>
                <select name="category" onchange="this.form.submit()">
                    <option value="0">All Categories</option>
                    <?php 
                    if ($categories_result && $categories_result->num_rows > 0):
                        while ($cat = $categories_result->fetch_assoc()): 
                    ?>
                        <option value="<?php echo $cat['id']; ?>" <?php echo ($category == $cat['id']) ? 'selected' : ''; ?>>
                            <?php echo htmlspecialchars($cat['name']); ?>
                        </option>
                    <?php 
                        endwhile; 
                    endif; 
                    ?>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Min Price (<?php echo $site_currency; ?>)</label>
                <input type="number" name="min_price" placeholder="Min" value="<?php echo $min_price > 0 ? $min_price : ''; ?>">
            </div>
            
            <div class="filter-group">
                <label>Max Price (<?php echo $site_currency; ?>)</label>
                <input type="number" name="max_price" placeholder="Max" value="<?php echo $max_price > 0 ? $max_price : ''; ?>">
            </div>
            
            <div class="filter-group">
                <label>Sort By</label>
                <select name="sort" onchange="this.form.submit()">
                    <option value="newest" <?php echo $sort == 'newest' ? 'selected' : ''; ?>>Newest First</option>
                    <option value="oldest" <?php echo $sort == 'oldest' ? 'selected' : ''; ?>>Oldest First</option>
                    <option value="price_low" <?php echo $sort == 'price_low' ? 'selected' : ''; ?>>Price: Low to High</option>
                    <option value="price_high" <?php echo $sort == 'price_high' ? 'selected' : ''; ?>>Price: High to Low</option>
                </select>
            </div>
            
            <div class="filter-actions">
                <button type="submit" class="btn-apply"><i class="fas fa-check"></i> Apply Filters</button>
                <a href="index.php" class="btn-reset"><i class="fas fa-undo"></i> Reset</a>
            </div>
        </form>
        
        <!-- Latest Cars -->
        <div class="latest-cars">
            <h3><i class="fas fa-clock"></i> Latest Additions</h3>
            <?php if ($latest_result && $latest_result->num_rows > 0): ?>
                <?php while ($latest = $latest_result->fetch_assoc()): ?>
                <div class="latest-item">
                    <span class="car-name"><?php echo htmlspecialchars($latest['make'] . ' ' . $latest['model']); ?></span>
                    <span class="car-price"><?php echo formatCurrency($latest['price']); ?></span>
                </div>
                <?php endwhile; ?>
            <?php else: ?>
                <p class="text-muted" style="font-size:0.85rem;">No cars available</p>
            <?php endif; ?>
        </div>
    </aside>
    
    <!-- ===== CARS GRID ===== -->
    <section class="cars-section reveal-right">
        <div class="section-header">
            <h2><i class="fas fa-car"></i> Available Cars</h2>
            <span class="result-count"><?php echo $total_cars; ?> vehicles found</span>
        </div>
        
        <?php if ($cars_result && $cars_result->num_rows > 0): ?>
        <div class="cars-grid stagger-children">
            <?php while ($car = $cars_result->fetch_assoc()): ?>
            <div class="car-card" onclick="window.location.href='product-details.php?id=<?php echo $car['id']; ?>'">
                <div class="car-image">
                    <?php 
                    $img_query = $conn->query("SELECT image_path FROM car_images WHERE car_id = " . $car['id'] . " AND is_primary = 1 LIMIT 1");
                    if ($img_query && $img_query->num_rows > 0) {
                        $img = $img_query->fetch_assoc();
                        echo '<img src="' . $site_url . '/' . $img['image_path'] . '" alt="' . htmlspecialchars($car['title']) . '" loading="lazy">';
                    } else {
                        echo '<i class="fas fa-car"></i>';
                    }
                    ?>
                    <?php if ($car['featured']): ?>
                        <span class="featured-badge"><i class="fas fa-star"></i> Featured</span>
                    <?php endif; ?>
                    <span class="car-status-badge"><?php echo $car['status']; ?></span>
                </div>
                <div class="car-body">
                    <div class="car-title">
                        <a href="product-details.php?id=<?php echo $car['id']; ?>">
                            <?php echo htmlspecialchars($car['make'] . ' ' . $car['model']); ?>
                        </a>
                    </div>
                    <div class="car-meta">
                        <span><i class="fas fa-calendar"></i> <?php echo $car['year']; ?></span>
                        <span><i class="fas fa-tachometer-alt"></i> <?php echo number_format($car['mileage']); ?> km</span>
                        <span><i class="fas fa-gas-pump"></i> <?php echo $car['fuel_type']; ?></span>
                        <?php if ($car['category_name']): ?>
                            <span><i class="fas fa-tag"></i> <?php echo htmlspecialchars($car['category_name']); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="car-price">
                        <?php echo formatCurrency($car['price']); ?>
                        <?php if ($car['sale_price'] > 0 && $car['sale_price'] < $car['price']): ?>
                            <span class="old-price"><?php echo formatCurrency($car['price']); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="car-footer">
                        <span class="car-status <?php echo strtolower($car['status']); ?>">
                            <?php echo $car['status']; ?>
                        </span>
                        <span class="view-details">View Details <i class="fas fa-arrow-right"></i></span>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        
        <!-- Pagination -->
        <?php if ($total_pages > 1): ?>
        <div class="pagination">
            <?php if ($page > 1): ?>
                <a href="?page=<?php echo $page - 1; ?>&search=<?php echo urlencode($search); ?>&category=<?php echo $category; ?>&min_price=<?php echo $min_price; ?>&max_price=<?php echo $max_price; ?>&sort=<?php echo $sort; ?>">
                    <i class="fas fa-chevron-left"></i>
                </a>
            <?php endif; ?>
            
            <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                <a href="?page=<?php echo $i; ?>&search=<?php echo urlencode($search); ?>&category=<?php echo $category; ?>&min_price=<?php echo $min_price; ?>&max_price=<?php echo $max_price; ?>&sort=<?php echo $sort; ?>" 
                   class="<?php echo $i == $page ? 'active' : ''; ?>">
                    <?php echo $i; ?>
                </a>
            <?php endfor; ?>
            
            <?php if ($page < $total_pages): ?>
                <a href="?page=<?php echo $page + 1; ?>&search=<?php echo urlencode($search); ?>&category=<?php echo $category; ?>&min_price=<?php echo $min_price; ?>&max_price=<?php echo $max_price; ?>&sort=<?php echo $sort; ?>">
                    <i class="fas fa-chevron-right"></i>
                </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        
        <?php else: ?>
        <div class="no-results">
            <i class="fas fa-car"></i>
            <h3>No cars found</h3>
            <p>Try adjusting your search or filters to find what you're looking for.</p>
            <?php if ($search): ?>
                <p style="margin-top:0.5rem;font-size:0.9rem;">
                    <a href="index.php" style="color:var(--accent);text-decoration:underline;">Clear search and try again</a>
                </p>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </section>
</div>

<!-- ===== FEATURES SECTION ===== -->
<section class="features-section reveal">
    <div class="container">
        <div class="section-header">
            <h2>Why Choose <span style="color:var(--accent);">Us</span></h2>
            <p>Experience the best car buying journey with our premium services</p>
        </div>
        <div class="features-grid stagger-children">
            <div class="feature-card">
                <div class="icon"><i class="fas fa-check-circle"></i></div>
                <h3>Quality Guarantee</h3>
                <p>All vehicles are thoroughly inspected and certified for quality assurance</p>
            </div>
            <div class="feature-card">
                <div class="icon"><i class="fas fa-hand-holding-usd"></i></div>
                <h3>Best Price Promise</h3>
                <p>Get the best deals and competitive pricing on all our vehicles</p>
            </div>
            <div class="feature-card">
                <div class="icon"><i class="fas fa-headset"></i></div>
                <h3>24/7 Support</h3>
                <p>Our expert team is always ready to assist you with any queries</p>
            </div>
            <div class="feature-card">
                <div class="icon"><i class="fas fa-shield-alt"></i></div>
                <h3>Secure Transactions</h3>
                <p>Safe and secure payment processing with complete transparency</p>
            </div>
            <div class="feature-card">
                <div class="icon"><i class="fas fa-tachometer-alt"></i></div>
                <h3>Test Drive</h3>
                <p>Experience the thrill with our easy test drive booking system</p>
            </div>
            <div class="feature-card">
                <div class="icon"><i class="fas fa-wallet"></i></div>
                <h3>Flexible Financing</h3>
                <p>Affordable installment plans tailored to your budget</p>
            </div>
        </div>
    </div>
</section>

<!-- ===== TESTIMONIALS SECTION ===== -->
<section class="testimonials-section reveal">
    <div class="container">
        <div class="section-header">
            <h2><i class="fas fa-quote-left"></i> What Our <span style="color:var(--accent);">Customers Say</span></h2>
            <p>Real experiences from our happy customers</p>
        </div>
        <div class="testimonials-grid stagger-children">
            <div class="testimonial-card">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="quote">"Amazing experience! The car was in perfect condition and the price was unbeatable. Highly recommended!"</p>
                <div class="author">
                    <div class="avatar">JD</div>
                    <div class="info">
                        <div class="name">John Doe</div>
                        <div class="role">Toyota Camry Owner</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="quote">"Professional service from start to finish. The team helped me find the perfect SUV for my family."</p>
                <div class="author">
                    <div class="avatar">SM</div>
                    <div class="info">
                        <div class="name">Sarah Mitchell</div>
                        <div class="role">BMW X5 Owner</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p class="quote">"The installment plan made it easy to afford my dream car. Excellent customer support throughout!"</p>
                <div class="author">
                    <div class="avatar">MK</div>
                    <div class="info">
                        <div class="name">Michael K.</div>
                        <div class="role">Mercedes-Benz Owner</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== CTA SECTION ===== -->
<section class="cta-section reveal">
    <div class="container">
        <h2>Ready to Find Your <span>Dream Car</span>?</h2>
        <p>Browse our extensive collection of premium vehicles and drive home in your perfect car today.</p>
        <div class="cta-buttons">
            <a href="index.php" class="btn btn-primary"><i class="fas fa-car"></i> Browse Cars</a>
            <a href="contact.php" class="btn btn-secondary"><i class="fas fa-headset"></i> Contact Us</a>
        </div>
    </div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="footer">
    <div class="footer-content">
        <div>
            <h4><i class="fas fa-car"></i> <?php echo $site_name; ?></h4>
            <p><?php echo $site_address; ?></p>
            <p><i class="fas fa-phone"></i> <?php echo $site_phone; ?></p>
            <p><i class="fas fa-envelope"></i> <?php echo $site_email; ?></p>
        </div>
        <div>
            <h4>Quick Links</h4>
            <a href="index.php"><i class="fas fa-chevron-right"></i> Home</a>
            <a href="about.php"><i class="fas fa-chevron-right"></i> About Us</a>
            <a href="contact.php"><i class="fas fa-chevron-right"></i> Contact</a>
        </div>
        <div>
            <h4>Categories</h4>
            <?php 
            $cat_result = $conn->query("SELECT id, name FROM categories WHERE is_active = 1 LIMIT 6");
            if ($cat_result && $cat_result->num_rows > 0):
                while ($cat = $cat_result->fetch_assoc()):
            ?>
                <a href="?category=<?php echo $cat['id']; ?>"><i class="fas fa-chevron-right"></i> <?php echo htmlspecialchars($cat['name']); ?></a>
            <?php 
                endwhile;
            else:
            ?>
                <p style="color:rgba(255,255,255,0.3);font-size:0.85rem;">No categories</p>
            <?php endif; ?>
        </div>
        <div>
            <h4>Follow Us</h4>
            <p>Stay connected with us on social media</p>
            <div class="social-links">
                <a href="#"><i class="fas fa-facebook-f"></i></a>
                <a href="#"><i class="fas fa-twitter"></i></a>
                <a href="#"><i class="fas fa-instagram"></i></a>
                <a href="#"><i class="fas fa-youtube"></i></a>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; <?php echo date('Y'); ?> <?php echo $site_name; ?>. All rights reserved. Crafted with <i class="fas fa-heart" style="color:var(--accent);"></i> by CarSales</p>
    </div>
</footer>

<!-- ===== JAVASCRIPT ===== -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // ===== MOBILE MENU TOGGLE =====
        const menuToggle = document.getElementById('menuToggle');
        const mobileMenu = document.getElementById('mobileMenu');
        const mobileOverlay = document.getElementById('mobileOverlay');
        const mobileCloseBtn = document.getElementById('mobileCloseBtn');
        const body = document.body;
        
        function openMenu() {
            mobileMenu.classList.add('open');
            mobileOverlay.classList.add('active');
            menuToggle.classList.add('active');
            menuToggle.querySelector('i').className = 'fas fa-times';
            body.style.overflow = 'hidden';
        }
        
        function closeMenu() {
            mobileMenu.classList.remove('open');
            mobileOverlay.classList.remove('active');
            menuToggle.classList.remove('active');
            menuToggle.querySelector('i').className = 'fas fa-bars';
            body.style.overflow = '';
        }
        
        // Toggle button (hamburger)
        menuToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            if (mobileMenu.classList.contains('open')) {
                closeMenu();
            } else {
                openMenu();
            }
        });
        
        // Close button inside mobile menu
        mobileCloseBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            closeMenu();
        });
        
        // Overlay click
        mobileOverlay.addEventListener('click', closeMenu);
        
        // Menu links click
        mobileMenu.querySelectorAll('.mobile-nav-links a, .mobile-actions a').forEach(function(link) {
            link.addEventListener('click', closeMenu);
        });
        
        // Window resize
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                closeMenu();
            }
        });
        
        // Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
                closeMenu();
            }
        });

        // ===== NAVBAR SCROLL EFFECT =====
        const navbar = document.getElementById('navbar');
        let lastScroll = 0;
        window.addEventListener('scroll', function() {
            const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
            if (currentScroll > 30) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
            lastScroll = currentScroll;
        });

        // ===== SCROLL REVEAL ANIMATIONS =====
        const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .stagger-children');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
        revealElements.forEach(el => observer.observe(el));

        // ===== CAR CARD CLICK FEEDBACK =====
        document.querySelectorAll('.car-card').forEach(card => {
            card.addEventListener('click', function(e) {
                if (e.target.closest('a')) return;
                const url = this.getAttribute('onclick');
                if (url) {
                    const match = url.match(/window\.location\.href='([^']+)'/);
                    if (match) {
                        window.location.href = match[1];
                    }
                }
            });
        });

        // ===== SIDEBAR FILTER AUTO-SUBMIT =====
        document.querySelectorAll('.filter-group select').forEach(select => {
            select.addEventListener('change', function() {
                this.closest('form').submit();
            });
        });

        // ===== PREVENT HORIZONTAL SCROLL ON MOBILE =====
        function preventHorizontalScroll() {
            const body = document.body;
            const html = document.documentElement;
            const maxWidth = Math.max(
                body.scrollWidth,
                body.offsetWidth,
                html.clientWidth,
                html.scrollWidth,
                html.offsetWidth
            );
            if (maxWidth > window.innerWidth) {
                document.querySelectorAll('*').forEach(el => {
                    const style = window.getComputedStyle(el);
                    if (style.overflowX === 'scroll' || style.overflowX === 'auto') {
                        el.style.overflowX = 'hidden';
                    }
                });
            }
        }
        
        // Run on load and resize
        preventHorizontalScroll();
        window.addEventListener('resize', preventHorizontalScroll);
        window.addEventListener('orientationchange', function() {
            setTimeout(preventHorizontalScroll, 300);
        });
    });
</script>

</body>
</html>