<?php
// DATABASE CONNECTION
$servername = "localhost";
$username = "root";
$password = "";
$database = "yamahoo";
$port = 3307;

$conn = new mysqli($servername, $username, $password, $database, $port);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$conn->set_charset("utf8mb4");

// Pagination
$limit = 9;
$page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$cc_filter = isset($_GET['cc']) ? trim($_GET['cc']) : '';
$price_filter = isset($_GET['price']) ? trim($_GET['price']) : '';

$start = ($page - 1) * $limit;

// Build query
$where_conditions = ["m.status=1"];
$params = [];
$types = "";

if (!empty($search)) {
    $where_conditions[] = "(m.moped_name LIKE ? OR m.moped_headline LIKE ? OR m.moped_description LIKE ?)";
    $search_param = "%$search%";
    $params = array_merge($params, [$search_param, $search_param, $search_param]);
    $types .= "sss";
}

if (!empty($cc_filter)) {
    switch($cc_filter) {
        case 'under-70':
            $where_conditions[] = "CAST(REGEXP_SUBSTR(m.displacement, '^[0-9]+') AS UNSIGNED) < 70";
            break;
        case '70-100':
            $where_conditions[] = "CAST(REGEXP_SUBSTR(m.displacement, '^[0-9]+') AS UNSIGNED) BETWEEN 70 AND 100";
            break;
        case 'above-100':
            $where_conditions[] = "CAST(REGEXP_SUBSTR(m.displacement, '^[0-9]+') AS UNSIGNED) > 100";
            break;
    }
}

if (!empty($price_filter)) {
    switch($price_filter) {
        case 'under-40k':
            $where_conditions[] = "(SELECT MIN(price) FROM moped_colors WHERE moped_id = m.moped_id) < 40000";
            break;
        case '40-50k':
            $where_conditions[] = "(SELECT MIN(price) FROM moped_colors WHERE moped_id = m.moped_id) BETWEEN 40000 AND 50000";
            break;
        case '50-60k':
            $where_conditions[] = "(SELECT MIN(price) FROM moped_colors WHERE moped_id = m.moped_id) BETWEEN 50000 AND 60000";
            break;
        case 'above-60k':
            $where_conditions[] = "(SELECT MIN(price) FROM moped_colors WHERE moped_id = m.moped_id) > 60000";
            break;
    }
}

// Count total
$count_query = "SELECT COUNT(DISTINCT m.moped_id) as total FROM mopeds m WHERE " . implode(" AND ", $where_conditions);
$stmt = $conn->prepare($count_query);
if (!empty($params)) {
    $stmt->bind_param($types, ...$params);
}
$stmt->execute();
$total = $stmt->get_result()->fetch_assoc()['total'];
$stmt->close();

$pages = max(1, ceil($total / $limit));

// Get mopeds for current page
$query = "SELECT m.*, 
          (SELECT MIN(price) FROM moped_colors WHERE moped_id = m.moped_id) as min_price,
          (SELECT MAX(price) FROM moped_colors WHERE moped_id = m.moped_id) as max_price,
          (SELECT COUNT(*) FROM moped_colors WHERE moped_id = m.moped_id) as color_count,
          (SELECT mc.color_code FROM moped_colors mc WHERE mc.moped_id = m.moped_id LIMIT 1) as first_color,
          (SELECT mi.image_path FROM moped_colors mc 
           LEFT JOIN moped_images mi ON mc.color_id = mi.color_id AND mi.is_primary = 1 
           WHERE mc.moped_id = m.moped_id LIMIT 1) as primary_image
          FROM mopeds m 
          WHERE " . implode(" AND ", $where_conditions) . " 
          ORDER BY m.moped_id DESC LIMIT ?, ?";
          
$stmt = $conn->prepare($query);
if (!empty($params)) {
    $stmt->bind_param($types . "ii", ...array_merge($params, [$start, $limit]));
} else {
    $stmt->bind_param("ii", $start, $limit);
}
$stmt->execute();
$result = $stmt->get_result();

$mopeds = [];
if ($result && $result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        // Get all colors for this moped
        $color_sql = "SELECT color_name, color_code, price FROM moped_colors WHERE moped_id = ? ORDER BY price";
        $color_stmt = $conn->prepare($color_sql);
        $color_stmt->bind_param("i", $row['moped_id']);
        $color_stmt->execute();
        $color_result = $color_stmt->get_result();
        
        $row['colors'] = [];
        while ($color = $color_result->fetch_assoc()) {
            $row['colors'][] = $color;
        }
        $color_stmt->close();
        
        $mopeds[] = $row;
    }
}
$stmt->close();

// Get filter options
$cc_ranges = [
    'under-70' => 'Under 70cc',
    '70-100' => '70cc - 100cc',
    'above-100' => 'Above 100cc'
];

$price_ranges = [
    'under-40k' => 'Under ₹40,000',
    '40-50k' => '₹40,000 - ₹50,000',
    '50-60k' => '₹50,000 - ₹60,000',
    'above-60k' => 'Above ₹60,000'
];

// WhatsApp number
$whatsapp_number = "919345994249";
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>TVS Mopeds - Economical & Reliable | Vijai Mopeds</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        :root {
            --primary: #f39c12;
            --primary-dark: #e67e22;
            --primary-light: #f1c40f;
            --secondary: #2ecc71;
            --accent: #3498db;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --dark: #1e293b;
            --darker: #0f172a;
            --light: #f8fafc;
            --lighter: #ffffff;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-400: #94a3b8;
            --gray-500: #64748b;
            --gray-600: #475569;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
            --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
            --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, #27ae60 100%);
            --gradient-dark: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
            --gradient-moped: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--lighter);
            color: var(--dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: var(--gray-100);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gradient-moped);
            border-radius: 10px;
            border: 3px solid var(--gray-100);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-light);
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,#001f3f,#00152b); 
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .loading-screen.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        .loader {
            width: 80px;
            height: 80px;
            position: relative;
            animation: loaderRotate 3s linear infinite;
        }

        .loader span {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top-color: var(--lighter);
            animation: loaderSpin 1.5s ease-in-out infinite;
        }

        .loader span:nth-child(2) {
            animation-delay: 0.5s;
            border-top-color: var(--secondary);
        }

        .loader span:nth-child(3) {
            animation-delay: 1s;
            border-top-color: var(--success);
        }

        @keyframes loaderSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes loaderRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Floating Animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        /* Pulse Animation */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* Hero Section */
        .hero-section{
            position:relative;
            height:100vh;
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1568772585407-9361f9bf3a87?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            filter: brightness(0.3);
            transform: scale(1.1);
            transition: transform 10s ease;
        }

        .hero-section:hover .hero-background {
            transform: scale(1.2);
        }

        .hero-overlay{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10));
            z-index:1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 0 20px;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero-badge {
            display: inline-block;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 10px 25px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 2px;
            margin-bottom: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            animation: fadeInDown 1s ease;
            color: var(--secondary);
        }

        .hero-title {
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 20px;
            animation: fadeInUp 1s ease 0.2s both;
        }

        .hero-title span {
            background: var(--gradient-secondary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }

        .hero-description {
            font-size: clamp(1rem, 2vw, 1.2rem);
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 1s ease 0.4s both;
        }

        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-top: 50px;
            animation: fadeInUp 1s ease 0.6s both;
            flex-wrap: wrap;
        }

        .hero-stat-item {
            text-align: center;
        }

        .hero-stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: 5px;
        }

        .hero-stat-label {
            font-size: 1rem;
            opacity: 0.8;
            letter-spacing: 1px;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Breadcrumb */
        .breadcrumb-wrapper {
            background: var(--lighter);
            padding: 15px 0;
            border-bottom: 1px solid var(--gray-200);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.9);
        }

        .breadcrumb {
            background: transparent;
            margin: 0;
            padding: 0;
        }

        .breadcrumb-item a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .breadcrumb-item a:hover {
            color: var(--secondary);
        }

        .breadcrumb-item.active {
            color: var(--gray-500);
        }

        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            padding: 60px 0;
        }

        .stat-card {
            background: var(--lighter);
            padding: 35px;
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--gray-200);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .stat-card:hover::before {
            left: 100%;
        }

        .stat-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: var(--secondary);
        }

        .stat-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-moped);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 32px;
            color: white;
            transition: all 0.3s ease;
            animation: float 3s ease-in-out infinite;
        }

        .stat-card:hover .stat-icon {
            transform: rotateY(180deg);
            background: var(--gradient-secondary);
        }

        .stat-card h3 {
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .stat-card p {
            color: var(--gray-600);
            font-weight: 500;
            margin: 0;
            font-size: 1.1rem;
        }

        /* Filter Section */
        .filter-wrapper {
            background: var(--lighter);
            border-radius: 30px;
            padding: 35px;
            margin: 40px 0;
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--gray-200);
            position: relative;
            overflow: hidden;
        }

        .filter-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-secondary);
        }

        .search-container {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            z-index: 10;
            font-size: 1.3rem;
        }

        .search-input {
            padding-left: 55px;
            height: 65px;
            border: 2px solid var(--gray-200);
            border-radius: 15px;
            width: 100%;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            background: var(--gray-100);
        }

        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(243,156,18,0.1);
            outline: none;
            background: var(--lighter);
        }

        .search-input:focus + .search-icon {
            color: var(--primary);
        }

        .filter-btns {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .filter-select {
            padding: 15px 25px;
            border: 2px solid var(--gray-200);
            border-radius: 50px;
            background: var(--lighter);
            color: var(--gray-600);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            min-width: 180px;
        }

        .filter-select:hover,
        .filter-select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(243,156,18,0.1);
        }

        .clear-filter {
            padding: 15px 25px;
            border: 2px solid var(--danger);
            border-radius: 50px;
            background: transparent;
            color: var(--danger);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .clear-filter:hover {
            background: var(--danger);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* Section Title */
        .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .section-subtitle {
            color: var(--secondary);
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 10px;
            display: inline-block;
            background: var(--gradient-secondary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .section-header h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-header h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

        /* Moped Grid */
        .moped-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        /* Moped Card */
        .moped-card {
            background: var(--lighter);
            border-radius: 30px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            border: 1px solid var(--gray-200);
        }

        .moped-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: var(--secondary);
        }

        .card-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--gradient-secondary);
            color: white;
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 700;
            z-index: 20;
            box-shadow: var(--shadow-lg);
            animation: pulse 2s ease-in-out infinite;
        }

        .card-badge i {
            margin-right: 5px;
        }

        .economy-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gradient-moped);
            color: white;
            padding: 8px 15px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 20;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .economy-badge i {
            font-size: 0.9rem;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .card-image-wrapper {
            position: relative;
            padding-top: 75%;
            overflow: hidden;
            background: var(--gradient-moped);
        }

        .card-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .moped-card:hover .card-image {
            transform: scale(1.15);
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-dark);
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: flex-end;
            padding: 20px;
        }

        .moped-card:hover .image-overlay {
            opacity: 1;
        }

        .overlay-content {
            color: white;
            transform: translateY(20px);
            transition: transform 0.4s ease;
        }

        .moped-card:hover .overlay-content {
            transform: translateY(0);
        }

        .overlay-content span {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .card-content {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, var(--lighter) 0%, var(--gray-100) 100%);
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 8px;
            transition: color 0.3s ease;
        }

        .moped-card:hover .card-title {
            color: var(--primary);
        }

        .card-headline {
            color: var(--gray-600);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
            flex-grow: 1;
        }

        /* Moped Quick Specs */
        .moped-quick-specs {
            display: flex;
            justify-content: space-between;
            background: var(--gray-100);
            border-radius: 15px;
            padding: 12px;
            margin: 10px 0;
        }

        .moped-quick-item {
            text-align: center;
            flex: 1;
        }

        .moped-quick-icon {
            color: var(--primary);
            font-size: 1rem;
            margin-bottom: 3px;
        }

        .moped-quick-value {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--dark);
        }

        .moped-quick-label {
            font-size: 0.7rem;
            color: var(--gray-500);
            text-transform: uppercase;
        }

        /* Color Indicator */
        .color-section {
            margin: 15px 0;
        }

        .color-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray-600);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .color-indicator {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .color-dot {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 3px solid var(--lighter);
            box-shadow: var(--shadow-md);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .color-dot:hover {
            transform: scale(1.3) rotate(10deg);
            box-shadow: var(--shadow-xl);
            z-index: 10;
        }

        .color-dot.more {
            background: var(--gradient-moped);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 700;
            border: none;
        }

        .color-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--dark);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            margin-bottom: 8px;
            box-shadow: var(--shadow-lg);
            z-index: 20;
        }

        .color-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: var(--dark) transparent transparent transparent;
        }

        .color-dot:hover .color-tooltip {
            opacity: 1;
            visibility: visible;
            bottom: 120%;
        }

        /* Price Section */
        .price-section {
            background: var(--gradient-moped);
            padding: 15px;
            border-radius: 15px;
            margin: 15px 0;
            position: relative;
            overflow: hidden;
        }

        .price-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .price-label {
            color: rgba(255,255,255,0.9);
            font-size: 0.9rem;
            margin-bottom: 5px;
            position: relative;
            z-index: 2;
        }

        .price-value {
            font-size: 2rem;
            font-weight: 800;
            color: white;
            position: relative;
            z-index: 2;
        }

        .price-value small {
            font-size: 1rem;
            font-weight: 400;
            opacity: 0.8;
            margin-left: 5px;
        }

        /* Button Group */
        .button-group {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        /* View Button */
        .btn-view {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
            padding: 15px 25px;
            border-radius: 15px;
            text-decoration: none;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            flex: 2;
            position: relative;
            overflow: hidden;
            font-size: 1rem;
        }

        .btn-view::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: var(--gradient-moped);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
            z-index: -1;
        }

        .btn-view:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn-view:hover {
            color: white;
            border-color: transparent;
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
        }

        .btn-view i {
            transition: transform 0.3s ease;
        }

        .btn-view:hover i {
            transform: translateX(5px);
        }

        /* WhatsApp Share Button */
        .btn-whatsapp-share {
            background: #25D366;
            color: white;
            border: none;
            padding: 15px 20px;
            border-radius: 15px;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1;
        }

        .btn-whatsapp-share:hover {
            background: #128C7E;
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: white;
        }

        .btn-whatsapp-share i {
            font-size: 1.1rem;
        }

        /* Toast Notification */
        .toast-notification {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #25D366;
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 9999;
            transform: translateX(400px);
            transition: transform 0.3s ease;
            box-shadow: var(--shadow-lg);
            font-weight: 500;
        }

        .toast-notification.show {
            transform: translateX(0);
        }

        .toast-notification i {
            font-size: 1.2rem;
        }

        /* Pagination */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 60px;
        }

        .pagination {
            gap: 10px;
        }

        .page-link {
            border: none;
            border-radius: 12px;
            color: var(--gray-600);
            padding: 12px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
            background: var(--lighter);
            box-shadow: var(--shadow-md);
            font-size: 1rem;
        }

        .page-link:hover {
            background: var(--gradient-moped);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .page-item.active .page-link {
            background: var(--gradient-moped);
            color: white;
            box-shadow: var(--shadow-lg);
        }

        .page-item.disabled .page-link {
            background: var(--gray-200);
            color: var(--gray-400);
            pointer-events: none;
        }

        /* CTA Section */
        .cta-section {
            background:#E8E8E8;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
            margin-top: 80px;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: rotate 30s linear infinite;
        }

        .cta-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: black;
        }

        .cta-content h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 800;
            margin-bottom: 20px;
        }

        .cta-content p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: white;
            color: var(--primary);
            padding: 18px 45px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
        }

        .cta-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: var(--gradient-secondary);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
            z-index: -1;
        }

        .cta-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .cta-btn:hover {
            color: var(--dark);
            transform: translateY(-5px) scale(1.05);
            box-shadow: var(--shadow-2xl);
        }

        /* ============================================
           FIXED BUTTONS - PROPER POSITIONING
        ============================================ */
        
        /* WhatsApp Floating Button */
        .whatsapp-float {
            position: fixed;
            bottom: 100px;
            right: 25px;
            width: 60px;
            height: 60px;
            background: #25D366;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            text-decoration: none;
            box-shadow: 0 8px 25px rgba(0,0,0,0.25);
            z-index: 9999;
            transition: 0.3s;
        }

        .whatsapp-float:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.35);
            background: #20b358;
            color: #fff;
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 25px;
            width: 55px;
            height: 55px;
            background: #ff7a00;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #ffffff;
            box-shadow: 0 10px 25px rgba(0,0,0,0.35);
            opacity: 0;
            visibility: hidden;
            transition: all .3s ease;
            z-index: 9998;
            font-size: 18px;
            text-decoration: none;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            background: #e56700;
            border: 2px solid #ffffff;
            transform: translateY(-6px);
            box-shadow: 0 14px 30px rgba(0,0,0,0.45);
        }

        /* No Results */
        .no-results {
            text-align: center;
            padding: 100px 20px;
            background: var(--lighter);
            border-radius: 30px;
            box-shadow: var(--shadow-xl);
        }

        .no-results i {
            font-size: 5rem;
            color: var(--gray-400);
            margin-bottom: 30px;
            animation: float 3s ease-in-out infinite;
        }

        .no-results h3 {
            font-size: 2rem;
            color: var(--dark);
            margin-bottom: 15px;
        }

        .no-results p {
            color: var(--gray-500);
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

        .reset-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--gradient-moped);
            color: white;
            padding: 15px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
        }

        .reset-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
        }

        /* Mobile Responsive - Move buttons to LEFT side */
        @media (max-width: 768px) {
            .whatsapp-float {
                left: 20px;
                right: auto;
                bottom: 85px;
                width: 52px;
                height: 52px;
                font-size: 26px;
            }
            .back-to-top {
                left: 20px;
                right: auto;
                bottom: 20px;
                width: 48px;
                height: 48px;
                font-size: 16px;
            }
            .hero-section {
                min-height: 70vh;
            }
            .hero-stats {
                gap: 30px;
            }
            .hero-stat-number {
                font-size: 2rem;
            }
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                padding: 40px 0;
            }
            .filter-wrapper {
                padding: 25px;
            }
            .filter-btns {
                flex-direction: column;
            }
            .filter-select {
                width: 100%;
            }
            .clear-filter {
                width: 100%;
                justify-content: center;
            }
            .moped-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .moped-quick-specs {
                flex-wrap: wrap;
            }
            .moped-quick-item {
                flex: 0 0 50%;
                margin-bottom: 10px;
            }
            .button-group {
                flex-direction: column;
            }
            .btn-whatsapp-share {
                width: 100%;
            }
            .toast-notification {
                bottom: 20px;
                right: 20px;
                left: 20px;
                transform: translateX(0) translateY(100px);
                text-align: center;
                justify-content: center;
            }
            .toast-notification.show {
                transform: translateY(0);
            }
        }

        @media (max-width: 576px) {
            .whatsapp-float {
                left: 15px;
                bottom: 75px;
                width: 48px;
                height: 48px;
                font-size: 24px;
            }
            .back-to-top {
                left: 15px;
                bottom: 15px;
                width: 44px;
                height: 44px;
                font-size: 14px;
            }
            .hero-title {
                font-size: 2.2rem;
            }
            .hero-stats {
                flex-direction: column;
                gap: 20px;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .moped-grid {
                grid-template-columns: 1fr;
            }
            .card-image-wrapper {
                padding-top: 65%;
            }
            .cta-section {
                padding: 60px 0;
            }
            .cta-btn {
                padding: 15px 30px;
                font-size: 1rem;
            }
            .section-header h2 {
                font-size: 1.8rem;
            }
            .moped-quick-item {
                flex: 0 0 100%;
            }
        }

        @media (max-width: 1200px) {
            .moped-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        @media (max-width: 992px) {
            .hero-stats {
                gap: 40px;
            }
            .hero-stat-number {
                font-size: 2.5rem;
            }
            .stat-card {
                padding: 25px;
            }
            .filter-btns {
                justify-content: center;
            }
        }

        /* Touch Device Optimizations */
        @media (hover: none) {
            .moped-card:hover {
                transform: none;
            }
            .image-overlay {
                opacity: 1;
                background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
            }
            .overlay-content {
                transform: translateY(0);
            }
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: scale(0);
            animation: ripple-animation 0.6s ease-out;
            pointer-events: none;
            z-index: 100;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .card-image {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .card-image.loaded {
            opacity: 1;
        }

        .hero-title span {
            background-size: 200% 200%;
            animation: gradientShift 3s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .economy-badge {
            animation: pulse 2s infinite;
        }

        .filter-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 20px center;
            background-size: 16px;
            padding-right: 50px;
        }
    </style>
</head>
<body>
    <!-- Loading Screen -->
    <div class="loading-screen" id="loadingScreen">
        <div class="loader">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- ============================================
         FIXED WHATSAPP FLOATING BUTTON - PROPER ALIGNMENT
    ============================================ -->
    <a href="https://wa.me/919790752297" class="whatsapp-float" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Toast Notification -->
    <div id="toastNotification" class="toast-notification">
        <i class="fab fa-whatsapp"></i>
        <span>Opening WhatsApp...</span>
    </div>

    <!-- Header -->
    <?php include("header.php"); ?>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-background"></div>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <div class="hero-badge"><i class="fas fa-bicycle me-2"></i>FUEL EFFICIENT</div>
            <h1 class="hero-title">
                Economical & <span>Reliable</span>
            </h1>
            <p class="hero-description">
                Discover our range of fuel-efficient mopeds perfect for daily commuting and work. Low maintenance, high mileage.
            </p>
            <div class="hero-stats">
                <div class="hero-stat-item">
                    <div class="hero-stat-number">70+</div>
                    <div class="hero-stat-label">km/l Mileage</div>
                </div>
                <div class="hero-stat-item">
                    <div class="hero-stat-number">30k+</div>
                    <div class="hero-stat-label">Happy Riders</div>
                </div>
                <div class="hero-stat-item">
                    <div class="hero-stat-number">70+</div>
                    <div class="hero-stat-label">Service Centers</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Breadcrumb -->
    <div class="breadcrumb-wrapper">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.php"><i class="fas fa-home me-2"></i>Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Mopeds</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-icon">
                    <i class="fas fa-bicycle"></i>
                </div>
                <h3><?php echo $total; ?></h3>
                <p>Moped Models</p>
            </div>
            <div class="stat-card" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-icon">
                    <i class="fas fa-tachometer-alt"></i>
                </div>
                <?php
                $avg_mileage = $conn->query("SELECT AVG(CAST(REGEXP_SUBSTR(mileage, '^[0-9.]+') AS DECIMAL(10,2))) as avg_mileage FROM mopeds WHERE mileage IS NOT NULL AND mileage != ''")->fetch_assoc()['avg_mileage'];
                ?>
                <h3><?php echo round($avg_mileage ?: 60); ?>+</h3>
                <p>Avg. Mileage</p>
            </div>
            <div class="stat-card" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-icon">
                    <i class="fas fa-wrench"></i>
                </div>
                <h3>Low</h3>
                <p>Maintenance</p>
            </div>
            <div class="stat-card" data-aos="fade-up" data-aos-delay="400">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>30k+</h3>
                <p>Happy Riders</p>
            </div>
        </div>
    </div>

    <!-- Search and Filter Section -->
    <div class="container">
        <div class="filter-wrapper" data-aos="fade-up">
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="search-container">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" id="searchInput" class="search-input" 
                               placeholder="Search by model or feature..." 
                               value="<?php echo htmlspecialchars($search); ?>">
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="filter-btns">
                        <select id="ccFilter" class="filter-select" onchange="applyFilters()">
                            <option value="">Engine Capacity (CC)</option>
                            <?php foreach ($cc_ranges as $value => $label): ?>
                                <option value="<?php echo $value; ?>" <?php echo ($cc_filter == $value) ? 'selected' : ''; ?>>
                                    <?php echo $label; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        
                        <select id="priceFilter" class="filter-select" onchange="applyFilters()">
                            <option value="">Price Range</option>
                            <?php foreach ($price_ranges as $value => $label): ?>
                                <option value="<?php echo $value; ?>" <?php echo ($price_filter == $value) ? 'selected' : ''; ?>>
                                    <?php echo $label; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                        
                        <?php if (!empty($search) || !empty($cc_filter) || !empty($price_filter)): ?>
                            <a href="mopeds.php" class="clear-filter">
                                <i class="fas fa-times"></i> Clear Filters
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mopeds Grid Section -->
    <section class="container pb-5">
        <div class="section-header">
            <span class="section-subtitle" data-aos="fade-up">Our Collection</span>
            <h2 data-aos="fade-up" data-aos-delay="100">Economical Mopeds</h2>
        </div>

        <?php if (!empty($mopeds)): ?>
            <div class="moped-grid" id="mopedGrid">
                <?php foreach ($mopeds as $index => $moped): ?>
                    <?php
                    // Build WhatsApp message for this moped
                    $whatsapp_message = "VIJAI Mopeds - Moped Details\n\n";
                    $whatsapp_message .= "Model: " . $moped['moped_name'] . "\n";
                    $whatsapp_message .= "Headline: " . $moped['moped_headline'] . "\n";
                    $whatsapp_message .= "Price: ₹" . number_format($moped['min_price'], 0) . "\n";
                    $whatsapp_message .= "Engine: " . ($moped['displacement'] ?? 'N/A') . "\n";
                    $whatsapp_message .= "Mileage: " . ($moped['mileage'] ?? 'N/A') . "\n";
                    $whatsapp_message .= "Weight: " . ($moped['kerb_weight'] ?? 'N/A') . "\n";
                    $whatsapp_message .= "Fuel Tank: " . ($moped['fuel_tank_capacity'] ?? 'N/A') . "\n";
                    $whatsapp_message .= "Colors Available: " . count($moped['colors']) . "\n\n";
                    $whatsapp_message .= "View Details: https://" . $_SERVER['HTTP_HOST'] . "/moped_details.php?id=" . $moped['moped_id'] . "\n\n";
                    $whatsapp_message .= "Powered by Vijai Mopeds - Economical & Reliable!";
                    
                    $encoded_message = urlencode($whatsapp_message);
                    $whatsapp_url = "https://wa.me/" . $whatsapp_number . "?text=" . $encoded_message;
                    ?>
                    <div class="moped-card" data-aos="fade-up" data-aos-delay="<?php echo $index * 50; ?>">
                        <?php if ($index < 2): ?>
                            <div class="card-badge">
                                <i class="fas fa-crown"></i> Bestseller
                            </div>
                        <?php endif; ?>
                        
                        <div class="economy-badge">
                            <i class="fas fa-leaf"></i> Economical
                        </div>
                        
                        <div class="card-image-wrapper">
                            <?php
                            // Proper image path handling
                            $display_image = "https://via.placeholder.com/600x400?text=No+Image";
                            
                            if (!empty($moped['primary_image'])) {
                                $image_path = "uploads/mopeds/colors/" . $moped['primary_image'];
                                if (file_exists($image_path)) {
                                    $display_image = $image_path;
                                }
                            } elseif (!empty($moped['first_color'])) {
                                // Try to get first image from database
                                $img_sql = "SELECT image_path FROM moped_images mi 
                                           JOIN moped_colors mc ON mi.color_id = mc.color_id 
                                           WHERE mc.moped_id = ? AND mi.is_primary = 1 LIMIT 1";
                                $img_stmt = $conn->prepare($img_sql);
                                $img_stmt->bind_param("i", $moped['moped_id']);
                                $img_stmt->execute();
                                $img_result = $img_stmt->get_result();
                                
                                if ($img_result && $img_result->num_rows > 0) {
                                    $img = $img_result->fetch_assoc();
                                    $image_path = "uploads/mopeds/colors/" . $img['image_path'];
                                    if (file_exists($image_path)) {
                                        $display_image = $image_path;
                                    }
                                }
                                $img_stmt->close();
                            }
                            ?>
                            <img src="<?php echo $display_image; ?>" 
                                 alt="<?php echo htmlspecialchars($moped['moped_name']); ?>"
                                 class="card-image"
                                 loading="lazy"
                                 onerror="this.src='https://via.placeholder.com/600x400?text=No+Image'">
                            <div class="image-overlay">
                                <div class="overlay-content">
                                    <span><i class="fas fa-camera me-2"></i><?php echo $moped['color_count']; ?> Color Options</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card-content">
                            <h5 class="card-title"><?php echo htmlspecialchars($moped['moped_name']); ?></h5>
                            <p class="card-headline"><?php echo htmlspecialchars($moped['moped_headline']); ?></p>
                            
                            <!-- Moped Quick Specs -->
                            <div class="moped-quick-specs">
                                <div class="moped-quick-item">
                                    <div class="moped-quick-icon"><i class="fas fa-oil-can"></i></div>
                                    <div class="moped-quick-value"><?php echo htmlspecialchars($moped['displacement'] ?: 'N/A'); ?></div>
                                    <div class="moped-quick-label">Engine</div>
                                </div>
                                <div class="moped-quick-item">
                                    <div class="moped-quick-icon"><i class="fas fa-tachometer-alt"></i></div>
                                    <div class="moped-quick-value"><?php echo htmlspecialchars($moped['mileage'] ?: 'N/A'); ?></div>
                                    <div class="moped-quick-label">Mileage</div>
                                </div>
                                <div class="moped-quick-item">
                                    <div class="moped-quick-icon"><i class="fas fa-weight-hanging"></i></div>
                                    <div class="moped-quick-value"><?php echo htmlspecialchars($moped['kerb_weight'] ?: 'N/A'); ?></div>
                                    <div class="moped-quick-label">Weight</div>
                                </div>
                                <div class="moped-quick-item">
                                    <div class="moped-quick-icon"><i class="fas fa-gas-pump"></i></div>
                                    <div class="moped-quick-value"><?php echo htmlspecialchars($moped['fuel_tank_capacity'] ?: 'N/A'); ?></div>
                                    <div class="moped-quick-label">Fuel</div>
                                </div>
                            </div>
                            
                            <?php if (!empty($moped['colors'])): ?>
                                <div class="color-section">
                                    <div class="color-label">
                                        <i class="fas fa-palette me-1" style="color: var(--secondary);"></i>
                                        Available Colors:
                                    </div>
                                    <div class="color-indicator">
                                        <?php
                                        $display_colors = array_slice($moped['colors'], 0, 5);
                                        foreach ($display_colors as $color):
                                        ?>
                                            <div class="color-dot" style="background-color: <?php echo htmlspecialchars($color['color_code'] ?: '#000000'); ?>">
                                                <span class="color-tooltip"><?php echo htmlspecialchars($color['color_name']); ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                        
                                        <?php if ($moped['color_count'] > 5): ?>
                                            <div class="color-dot more">
                                                +<?php echo $moped['color_count'] - 5; ?>
                                                <span class="color-tooltip"><?php echo ($moped['color_count'] - 5); ?> more colors</span>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                
                                <div class="price-section">
                                    <div class="price-label">Starting from</div>
                                    <div class="price-value">
                                        ₹<?php echo number_format($moped['min_price'], 0); ?>
                                        <?php if ($moped['min_price'] != $moped['max_price']): ?>
                                            <small> - ₹<?php echo number_format($moped['max_price'], 0); ?></small>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                            
                            <div class="button-group">
                                <a href="moped_details.php?id=<?php echo $moped['moped_id']; ?>" class="btn-view">
                                    <span>View Details</span>
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                                <button class="btn-whatsapp-share" onclick="shareOnWhatsApp('<?php echo addslashes($whatsapp_url); ?>')">
                                    <i class="fab fa-whatsapp"></i>
                                    <span>Share</span>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Pagination -->
            <?php if ($pages > 1): ?>
                <div class="pagination-container">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item <?php echo $page <= 1 ? 'disabled' : ''; ?>">
                                <a class="page-link" href="?page=<?php echo $page-1; ?><?php echo !empty($search) ? '&search='.urlencode($search) : ''; ?><?php echo !empty($cc_filter) ? '&cc='.urlencode($cc_filter) : ''; ?><?php echo !empty($price_filter) ? '&price='.urlencode($price_filter) : ''; ?>">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                            
                            <?php 
                            $start_page = max(1, $page - 2);
                            $end_page = min($pages, $page + 2);
                            
                            for ($i = $start_page; $i <= $end_page; $i++): 
                            ?>
                                <li class="page-item <?php echo $page == $i ? 'active' : ''; ?>">
                                    <a class="page-link" href="?page=<?php echo $i; ?><?php echo !empty($search) ? '&search='.urlencode($search) : ''; ?><?php echo !empty($cc_filter) ? '&cc='.urlencode($cc_filter) : ''; ?><?php echo !empty($price_filter) ? '&price='.urlencode($price_filter) : ''; ?>">
                                        <?php echo $i; ?>
                                    </a>
                                </li>
                            <?php endfor; ?>
                            
                            <li class="page-item <?php echo $page >= $pages ? 'disabled' : ''; ?>">
                                <a class="page-link" href="?page=<?php echo $page+1; ?><?php echo !empty($search) ? '&search='.urlencode($search) : ''; ?><?php echo !empty($cc_filter) ? '&cc='.urlencode($cc_filter) : ''; ?><?php echo !empty($price_filter) ? '&price='.urlencode($price_filter) : ''; ?>">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            <?php endif; ?>

        <?php else: ?>
            <div class="no-results" data-aos="fade-up">
                <i class="fas fa-bicycle"></i>
                <h3>No Mopeds Found</h3>
                <p>We couldn't find any mopeds matching your search criteria. Try adjusting your filters.</p>
                <button onclick="resetFilters()" class="reset-btn">
                    <i class="fas fa-redo-alt me-2"></i>Clear All Filters
                </button>
            </div>
        <?php endif; ?>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2 data-aos="fade-up">Ready for a Test Ride?</h2>
                <p data-aos="fade-up" data-aos-delay="100">Experience the fuel efficiency and reliability of our mopeds firsthand.</p>
                <a href="Testride.php?type=moped" class="cta-btn" data-aos="fade-up" data-aos-delay="200">
                    <i class="fas fa-calendar-check"></i> Schedule Test Ride
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <?php include("footer.php"); ?>

    <!-- ============================================
         BACK TO TOP BUTTON
    ============================================ -->
    <a href="#" class="back-to-top" id="backToTop" title="Back to Top">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true,
            offset: 50
        });

        // Hide loading screen
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('loadingScreen').classList.add('fade-out');
            }, 1000);
            
            // Mark images as loaded
            document.querySelectorAll('.card-image').forEach(img => {
                img.classList.add('loaded');
            });
        });

        // WhatsApp share function
        function shareOnWhatsApp(url) {
            // Show toast notification
            const toast = document.getElementById('toastNotification');
            toast.classList.add('show');
            
            // Hide toast after 2 seconds
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
            
            // Open WhatsApp in new tab after short delay
            setTimeout(() => {
                window.open(url, '_blank');
            }, 300);
        }

        // Search functionality with debounce
        let searchTimeout;
        const searchInput = document.getElementById('searchInput');
        
        if (searchInput) {
            searchInput.addEventListener('keyup', function(e) {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    applyFilters();
                }, 500);
            });
        }

        // Apply all filters
        function applyFilters() {
            const search = document.getElementById('searchInput').value.trim();
            const cc = document.getElementById('ccFilter').value;
            const price = document.getElementById('priceFilter').value;
            
            const url = new URL(window.location.href);
            
            if (search.length > 0) {
                url.searchParams.set('search', search);
            } else {
                url.searchParams.delete('search');
            }
            
            if (cc) {
                url.searchParams.set('cc', cc);
            } else {
                url.searchParams.delete('cc');
            }
            
            if (price) {
                url.searchParams.set('price', price);
            } else {
                url.searchParams.delete('price');
            }
            
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        }

        // Reset all filters
        function resetFilters() {
            window.location.href = 'mopeds.php';
        }

        // Back to top button
        const backToTop = document.getElementById('backToTop');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });

        backToTop.addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Animate stats numbers on scroll
        const observerOptions = {
            threshold: 0.5,
            rootMargin: '0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const statNumbers = entry.target.querySelectorAll('.stat-card h3');
                    
                    statNumbers.forEach(el => {
                        const value = el.textContent;
                        if (!isNaN(parseInt(value))) {
                            const originalValue = parseInt(value.replace(/[^0-9]/g, ''));
                            el.textContent = '0';
                            
                            let start = 0;
                            const duration = 1500;
                            const increment = originalValue / (duration / 10);
                            
                            const timer = setInterval(() => {
                                start += increment;
                                if (start >= originalValue) {
                                    el.textContent = originalValue.toLocaleString();
                                    clearInterval(timer);
                                } else {
                                    el.textContent = Math.round(start).toLocaleString();
                                }
                            }, 10);
                        }
                    });
                    
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.stats-grid').forEach(grid => {
            observer.observe(grid);
        });

        // Parallax effect on hero section
        window.addEventListener('scroll', function() {
            const heroBg = document.querySelector('.hero-background');
            const scrolled = window.scrollY;
            
            if (heroBg) {
                heroBg.style.transform = `scale(1.1) translateY(${scrolled * 0.1}px)`;
            }
        });

        // Add ripple effect to buttons
        document.querySelectorAll('.filter-select, .btn-view, .cta-btn, .reset-btn, .btn-whatsapp-share').forEach(button => {
            button.addEventListener('click', function(e) {
                // Skip ripple for WhatsApp share to avoid double click issues
                if (this.classList.contains('btn-whatsapp-share')) return;
                
                const ripple = document.createElement('span');
                ripple.classList.add('ripple');
                
                const rect = this.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                ripple.style.left = `${x}px`;
                ripple.style.top = `${y}px`;
                
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });

        // Handle touch devices
        if ('ontouchstart' in window) {
            document.body.classList.add('touch-device');
        }

        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Image lazy loading
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.classList.add('loaded');
                    observer.unobserve(img);
                }
            });
        });

        document.querySelectorAll('.card-image').forEach(img => {
            imageObserver.observe(img);
        });
        
        // Mobile menu close on link click
        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
            link.addEventListener('click', function() {
                const navbarCollapse = document.querySelector('.navbar-collapse');
                if (navbarCollapse && navbarCollapse.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(navbarCollapse);
                    bsCollapse.hide();
                }
            });
        });
    </script>
</body>
</html>
<?php $conn->close(); ?>