<?php
// index.php - Homepage with Auto-rotating Hero Section, About Us & Reviews (Shows Reserved Products with Badge)
// File location: /bidwheels.net/index.php

require_once 'includes/functions.php';
require_once 'includes/header.php';

// Get random active product for hero (changes on each page load)
$hero_product = fetchOne("
    SELECT p.*, c.name as category_name,
           (SELECT MAX(amount) FROM bids WHERE product_id = p.id) as highest_bid,
           (SELECT COUNT(*) FROM bids WHERE product_id = p.id) as total_bids,
           (SELECT image_path FROM product_images WHERE product_id = p.id AND is_featured = 1 LIMIT 1) as featured_image
    FROM products p
    LEFT JOIN categories c ON p.category_id = c.id
    WHERE p.end_time > NOW()
    ORDER BY RAND()
    LIMIT 1
");

// Get gallery images for hero product
$hero_gallery = [];
if ($hero_product) {
    $hero_gallery = fetchAll("
        SELECT image_path FROM product_images 
        WHERE product_id = {$hero_product['id']} 
        LIMIT 4
    ");
}

// Get all active products for hero rotation (for JS auto-rotate)
$hero_products = fetchAll("
    SELECT p.*, c.name as category_name,
           (SELECT MAX(amount) FROM bids WHERE product_id = p.id) as highest_bid,
           (SELECT COUNT(*) FROM bids WHERE product_id = p.id) as total_bids,
           (SELECT image_path FROM product_images WHERE product_id = p.id AND is_featured = 1 LIMIT 1) as featured_image
    FROM products p
    LEFT JOIN categories c ON p.category_id = c.id
    WHERE p.end_time > NOW()
    ORDER BY RAND()
    LIMIT 10
");

// Get random featured products (50 products) - SHOWS RESERVED TOO
$featured_products = fetchAll("
    SELECT p.*, c.name as category_name,
           (SELECT MAX(amount) FROM bids WHERE product_id = p.id) as highest_bid,
           (SELECT COUNT(*) FROM bids WHERE product_id = p.id) as total_bids
    FROM products p
    LEFT JOIN categories c ON p.category_id = c.id
    WHERE p.end_time > NOW()
    ORDER BY RAND()
    LIMIT 50
");

// Get all categories for category section
$all_categories = fetchAll("SELECT * FROM categories ORDER BY name");
$display_categories = array_slice($all_categories, 0, 12);

// Preload gallery images for hero products rotation
foreach ($hero_products as &$product) {
    $product['gallery_images'] = fetchAll("
        SELECT image_path FROM product_images 
        WHERE product_id = {$product['id']} 
        LIMIT 4
    ");
}

// Review data - Google-style reviews
$reviews = [
    [
        'name' => 'Michael Thompson',
        'rating' => 5,
        'date' => '2 weeks ago',
        'text' => 'Amazing platform! I won a 2022 Porsche 911 at an incredible price. The bidding process was smooth and transparent. Highly recommended!'
    ],
    [
        'name' => 'Sarah Johnson',
        'rating' => 5,
        'date' => '1 month ago',
        'text' => 'Best car auction site I\'ve used. The outbid notifications are instant and the vehicle descriptions are accurate. Will definitely use again.'
    ],
    [
        'name' => 'David Williams',
        'rating' => 4,
        'date' => '3 weeks ago',
        'text' => 'Great selection of luxury cars. Customer support responded quickly when I had questions about a vehicle. Very satisfied overall.'
    ],
    [
        'name' => 'Jessica Brown',
        'rating' => 5,
        'date' => '2 months ago',
        'text' => 'I was skeptical at first, but this site is legit. Won a BMW M4 and the transaction was seamless. Shipping was arranged within days.'
    ],
    [
        'name' => 'Robert Martinez',
        'rating' => 5,
        'date' => '1 week ago',
        'text' => 'The bidding interface is intuitive and the countdown timer adds excitement. Great experience overall!'
    ],
    [
        'name' => 'Emily Davis',
        'rating' => 4,
        'date' => '3 months ago',
        'text' => 'Found my dream car here. The payment process was secure and the seller was communicative. Would recommend to any car enthusiast.'
    ],
    [
        'name' => 'Christopher Wilson',
        'rating' => 5,
        'date' => '1 month ago',
        'text' => 'Excellent platform! The vehicle inspection reports are thorough and the photos are high quality. Very trustworthy site.'
    ],
    [
        'name' => 'Amanda Garcia',
        'rating' => 5,
        'date' => '2 weeks ago',
        'text' => 'I\'ve bought 3 cars through this site. Each transaction was smooth and the prices were fair. The outbid alerts saved me from losing auctions.'
    ]
];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo SITE_NAME; ?> - Bid on Your Dream Vehicle</title>
    
    <style>
        /* Hero Section Styles */
        .hero-section {
            background: #EFEBE0;
            padding: 30px 0;
            position: relative;
            overflow: hidden;
        }
        
        .hero-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: stretch;
        }
        
        .hero-main {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            aspect-ratio: 4/3;
            cursor: pointer;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hero-main:hover {
            transform: scale(1.02);
            box-shadow: 0 25px 50px rgba(255,140,62,0.2);
        }
        
        .hero-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .hero-main:hover img {
            transform: scale(1.05);
        }
        
        .hero-title-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            padding: 12px 20px;
            border-radius: 16px;
            z-index: 10;
        }
        
        .hero-title-badge h2 {
            font-size: 14px;
            font-weight: 700;
            color: white;
            margin-bottom: 2px;
        }
        
        .hero-title-badge .hero-category {
            font-size: 12px;
            color: #FF8C3E;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .hero-info-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            padding: 10px 16px;
            border-radius: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }
        
        .hero-info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            color: white;
        }
        
        .hero-info-item i {
            color: #FF8C3E;
        }
        
        .hero-info-item .bid-amount {
            color: #FF8C3E;
            font-weight: 700;
        }
        
        .hero-reserved-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #dc3545;
            color: white;
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
            z-index: 10;
        }
        
        .hero-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2px;
        }
        
        .hero-gallery-item {
            position: relative;
            aspect-ratio: 4/3;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        
        .hero-gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255,140,62,0.3);
        }
        
        .hero-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .hero-gallery-item:hover img {
            transform: scale(1.08);
        }
        
        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 20px 12px 12px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .hero-gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
        
        .gallery-overlay span {
            font-size: 11px;
            color: #FF8C3E;
            font-weight: 500;
        }
        
        /* Category Section */
        .category-section {
            padding: 60px 0;
            background: #EFEBE0;
            overflow: hidden;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .section-header h2 {
            font-size: 36px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 12px;
        }
        
        .section-header p {
            color: #666;
            font-size: 16px;
        }
        
        .categories-marquee {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            position: relative;
            padding: 20px 0;
        }
        
        .categories-track {
            display: inline-flex;
            animation: scrollCategories 30s linear infinite;
        }
        
        .categories-track:hover {
            animation-play-state: paused;
        }
        
        @keyframes scrollCategories {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .category-scroll-card {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 20px;
            padding: 20px 30px;
            margin: 0 10px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            min-width: 140px;
        }
        
        .category-scroll-card:hover {
            transform: translateY(-5px);
            background: #FF8C3E;
        }
        
        .category-scroll-card i {
            font-size: 40px;
            color: #FF8C3E;
            margin-bottom: 10px;
        }
        
        .category-scroll-card:hover i {
            color: white;
        }
        
        .category-scroll-card h3 {
            font-size: 16px;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .category-scroll-card:hover h3 {
            color: white;
        }
        
        .category-scroll-card span {
            font-size: 12px;
            color: #888;
        }
        
        .category-scroll-card:hover span {
            color: rgba(255,255,255,0.8);
        }
        
        .view-all-btn {
            text-align: center;
            margin-top: 30px;
        }
        
        .btn-view-categories {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #FF8C3E;
            color: white;
            padding: 12px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-view-categories:hover {
            background: #046307;
            transform: translateY(-2px);
        }
        
        /* About Us Section */
        .about-section {
            padding: 80px 0;
            background: white;
        }
        
        .about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .about-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
        }
        
        .about-content h2 span {
            color: #FF8C3E;
        }
        
        .about-content p {
            color: #555;
            line-height: 1.7;
            margin-bottom: 15px;
            font-size: 15px;
        }
        
        .about-features {
            display: flex;
            gap: 20px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        
        .about-feature {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .about-feature i {
            font-size: 20px;
            color: #FF8C3E;
        }
        
        .about-feature span {
            font-size: 14px;
            color: #555;
        }
        
        .about-image {
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Reviews Section */
        .reviews-section {
            padding: 60px 0;
            background: #f8f9fa;
            overflow: hidden;
        }
        
        .reviews-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .google-rating-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            background: white;
            padding: 20px 40px;
            border-radius: 24px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            position: relative;
        }
        
        .trustindex-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #28a745;
            color: white;
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: 600;
            margin-top: 12px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }
        
        .trustindex-badge:hover {
            background: #1e7e34;
        }
        
        .trustindex-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1a1a1a;
            color: white;
            padding: 10px 15px;
            border-radius: 12px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 100;
            transition: all 0.3s;
            margin-bottom: 10px;
            width: max-content;
            max-width: 300px;
            white-space: normal;
            text-align: center;
            line-height: 1.4;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .trustindex-badge:hover .trustindex-tooltip {
            visibility: visible;
            opacity: 1;
        }
        
        .trustindex-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: #1a1a1a transparent transparent transparent;
        }
        
        .google-logo-header {
            margin-bottom: 10px;
        }
        
        .google-logo-header img {
            height: 40px;
            width: auto;
        }
        
        .rating-text {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .rating-stars {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .rating-stars i {
            font-size: 18px;
            color: #ffc107;
        }
        
        .blue-tick-icon {
            width: 20px;
            height: 20px;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        .rating-count {
            font-size: 14px;
            color: #666;
        }
        
        .reviews-marquee {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            position: relative;
            padding: 20px 0;
        }
        
        .reviews-track {
            display: inline-flex;
            animation: scrollReviews 40s linear infinite;
        }
        
        .reviews-track:hover {
            animation-play-state: paused;
        }
        
        @keyframes scrollReviews {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .review-card {
            width: 350px;
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin: 0 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s;
            white-space: normal;
            display: inline-block;
            vertical-align: top;
            text-align: left;
        }
        
        .review-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255,140,62,0.15);
        }
        
        .review-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .review-avatar {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 18px;
        }
        
        .review-info {
            flex: 1;
        }
        
        .review-name {
            font-weight: 700;
            color: #1a1a1a;
            font-size: 14px;
        }
        
        .review-date {
            font-size: 11px;
            color: #888;
        }
        
        .review-stars {
            display: flex;
            gap: 3px;
            margin-bottom: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .review-stars i {
            font-size: 13px;
            color: #ffc107;
        }
        
        .review-stars i.far {
            color: #e0e0e0;
        }
        
        .review-blue-tick {
            width: 16px;
            height: 16px;
            margin-left: 6px;
            vertical-align: middle;
        }
        
        .review-text {
            font-size: 13px;
            line-height: 1.5;
            color: #555;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .review-footer {
            display: flex;
            align-items: center;
            gap: 8px;
            border-top: 1px solid #f0f0f0;
            padding-top: 12px;
        }
        
        .review-footer .google-icon {
            width: 18px;
            height: 18px;
        }
        
        /* Featured Products */
        .featured-section {
            padding: 60px 0;
            background: #EFEBE0;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .product-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(255,140,62,0.15);
        }
        
        .product-image {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
            cursor: pointer;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.05);
        }
        
        .product-bid-count {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
            color: white;
        }
        
        .product-bid-count i {
            color: #FF8C3E;
        }
        
        .reserved-badge-card {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #dc3545;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            z-index: 10;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-title {
            font-size: 15px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .product-category {
            font-size: 11px;
            color: #FF8C3E;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .product-price-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 10px;
        }
        
        .product-current-bid {
            font-size: 18px;
            font-weight: 700;
            color: #FF8C3E;
        }
        
        .product-starting {
            font-size: 11px;
            color: #aaa;
            text-decoration: line-through;
        }
        
        .product-time {
            font-size: 11px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 12px;
        }
        
        .product-btn {
            display: block;
            text-align: center;
            background: #1a1a1a;
            color: white;
            padding: 8px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 12px;
            transition: all 0.3s;
        }
        
        .product-btn:hover {
            background: #FF8C3E;
        }
        
        .product-btn-disabled {
            display: block;
            text-align: center;
            background: #6c757d;
            color: white;
            padding: 8px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            font-size: 12px;
            cursor: not-allowed;
        }
        
        .btn-view-vehicles {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #FF8C3E;
            color: white;
            padding: 14px 36px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .btn-view-vehicles:hover {
            background: #046307;
            transform: translateY(-2px);
        }
        
        .hero-fade {
            animation: heroFade 0.5s ease-in-out;
        }
        
        @keyframes heroFade {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Categories Modal */
        .categories-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        
        .categories-modal-content {
            background: #EFEBE0;
            border-radius: 32px;
            max-width: 850px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 35px;
            position: relative;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .categories-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #FF8C3E;
        }
        
        .categories-modal-header h3 {
            font-size: 26px;
            color: #1a1a1a;
            font-weight: 700;
        }
        
        .modal-close {
            font-size: 32px;
            cursor: pointer;
            color: #888;
            transition: color 0.3s;
        }
        
        .modal-close:hover {
            color: #FF8C3E;
        }
        
        .categories-modal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 18px;
        }
        
        .modal-category-card {
            background: white;
            border-radius: 20px;
            padding: 25px 20px;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .modal-category-card:hover {
            background: #FF8C3E;
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255,140,62,0.2);
        }
        
        .modal-category-card i {
            font-size: 40px;
            color: #FF8C3E;
            margin-bottom: 12px;
        }
        
        .modal-category-card:hover i {
            color: white;
        }
        
        .modal-category-card h4 {
            font-size: 15px;
            color: #1a1a1a;
            font-weight: 600;
        }
        
        .modal-category-card:hover h4 {
            color: white;
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .products-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .about-grid {
                grid-template-columns: 1fr;
            }
            
            .about-image {
                order: -1;
                max-width: 500px;
                margin: 0 auto;
            }
        }
        
        @media (max-width: 768px) {
            .hero-section {
                padding: 40px 0;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                padding: 0 16px;
            }
            
            .section-header h2 {
                font-size: 28px;
            }
            
            .review-card {
                width: 300px;
            }
            
            .about-content h2 {
                font-size: 28px;
            }
            
            .google-rating-badge {
                padding: 15px 25px;
            }
            
            .rating-text {
                font-size: 22px;
            }
        }
        
        @media (max-width: 560px) {
            .products-grid {
                grid-template-columns: 1fr;
            }
            
            .category-scroll-card {
                padding: 15px 20px;
                min-width: 110px;
            }
            
            .category-scroll-card i {
                font-size: 28px;
            }
            
            .trustindex-tooltip {
                white-space: normal;
                width: 260px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        
        .text-center {
            text-align: center;
        }
        
        .mt-4 {
            margin-top: 30px;
        }
    </style>
</head>
<body>

<!-- Hero Section -->
<section class="hero-section" id="heroSection">
    <div class="hero-container">
        <div class="hero-grid" id="heroGrid">
            <!-- Content loaded dynamically via JavaScript -->
        </div>
    </div>
</section>

<!-- Category Section - Infinite Scroll -->
<section class="category-section">
    <div class="container">
        <div class="section-header">
            <h2>Browse by Category</h2>
            <p>Find your perfect vehicle from our wide selection</p>
        </div>
        
        <div class="categories-marquee">
            <div class="categories-track" id="categoriesTrack">
                <?php foreach ($display_categories as $category): ?>
                    <a href="product/category.php?id=<?php echo $category['id']; ?>" class="category-scroll-card">
                        <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                        <h3><?php echo htmlspecialchars($category['name']); ?></h3>
                        <span>Shop Now →</span>
                    </a>
                <?php endforeach; ?>
                <?php foreach ($display_categories as $category): ?>
                    <a href="product/category.php?id=<?php echo $category['id']; ?>" class="category-scroll-card">
                        <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                        <h3><?php echo htmlspecialchars($category['name']); ?></h3>
                        <span>Shop Now →</span>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        
        <div class="view-all-btn">
            <button class="btn-view-categories" onclick="openCategoriesModal()">
                <i class="fas fa-th-large"></i> View All Categories
            </button>
        </div>
    </div>
</section>

<!-- About Us Section -->
<section class="about-section">
    <div class="about-container">
        <div class="about-grid">
            <div class="about-content">
                <h2>About <span><?php echo SITE_NAME; ?></span></h2>
                <p>Your premier destination for luxury vehicle auctions. We connect passionate buyers with exceptional vehicles through a transparent, secure, and exciting bidding platform.</p>
                <p>Since 2020, we've facilitated over $50 million in vehicle sales, helping thousands of customers find their dream cars at fair prices.</p>
                <div class="about-features">
                    <div class="about-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>10,000+ Happy Customers</span>
                    </div>
                    <div class="about-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>5,000+ Vehicles Sold</span>
                    </div>
                    <div class="about-feature">
                        <i class="fas fa-check-circle"></i>
                        <span>98% Satisfaction Rate</span>
                    </div>
                </div>
            </div>
            <div class="about-image">
                <img src="<?php echo SITE_URL; ?>/luxury.jpeg" alt="Luxury vehicles">
            </div>
        </div>
    </div>
</section>

<!-- Google-style Reviews Section with Trustindex Badge -->
<section class="reviews-section">
    <div class="reviews-header">
        <div class="google-rating-badge">
            <div class="google-logo-header">
                <img src="<?php echo SITE_URL; ?>/logo.svg" alt="Google">
            </div>
            <div class="rating-text">EXCELLENT</div>
            <div class="rating-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>
            <div class="rating-count">Based on google reviews</div>
            <div class="trustindex-badge">
                <i class="fas fa-shield-alt"></i> Verified by Trustindex
                <div class="trustindex-tooltip">
                    Trustindex verified badge is the Universal Symbol of Trust. Only the greatest companies can get the verified badge who has a review score above 4.5, based on customer reviews over the past 12 months.
                </div>
            </div>
        </div>
    </div>
    <div class="reviews-marquee">
        <div class="reviews-track">
            <?php foreach ($reviews as $review): ?>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar"><?php echo substr($review['name'], 0, 1); ?></div>
                        <div class="review-info">
                            <div class="review-name"><?php echo $review['name']; ?></div>
                            <div class="review-date"><?php echo $review['date']; ?></div>
                        </div>
                    </div>
                    <div class="review-stars">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                            <?php if ($i <= $review['rating']): ?>
                                <i class="fas fa-star"></i>
                            <?php else: ?>
                                <i class="far fa-star"></i>
                            <?php endif; ?>
                        <?php endfor; ?>
                        <img src="<?php echo SITE_URL; ?>/tick_icon.png" alt="Verified" class="review-blue-tick">
                    </div>
                    <div class="review-text">"<?php echo $review['text']; ?>"</div>
                    <div class="review-footer">
                        <img src="<?php echo SITE_URL; ?>/icon.svg" alt="Google" class="google-icon">
                    </div>
                </div>
            <?php endforeach; ?>
            <?php foreach ($reviews as $review): ?>
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar"><?php echo substr($review['name'], 0, 1); ?></div>
                        <div class="review-info">
                            <div class="review-name"><?php echo $review['name']; ?></div>
                            <div class="review-date"><?php echo $review['date']; ?></div>
                        </div>
                    </div>
                    <div class="review-stars">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                            <?php if ($i <= $review['rating']): ?>
                                <i class="fas fa-star"></i>
                            <?php else: ?>
                                <i class="far fa-star"></i>
                            <?php endif; ?>
                        <?php endfor; ?>
                        <img src="<?php echo SITE_URL; ?>/tick_icon.png" alt="Verified" class="review-blue-tick">
                    </div>
                    <div class="review-text">"<?php echo $review['text']; ?>"</div>
                    <div class="review-footer">
                        <img src="<?php echo SITE_URL; ?>/icon.svg" alt="Google" class="google-icon">
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="featured-section">
    <div class="section-header">
        <h2>Featured Vehicles</h2>
        <p>Discover our most popular listings</p>
    </div>
    <div class="products-grid">
        <?php if (count($featured_products) > 0): ?>
            <?php foreach ($featured_products as $product): ?>
                <div class="product-card">
                    <?php if ($product['is_reserved'] == 1): ?>
                        <div class="reserved-badge-card">
                            <i class="fas fa-ban"></i> RESERVED
                        </div>
                    <?php endif; ?>
                    <div class="product-image" onclick="window.location.href='product/detail.php?id=<?php echo $product['id']; ?>'">
                        <img src="<?php echo getFeaturedImage($product['id']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
                        <div class="product-bid-count">
                            <i class="fas fa-gavel"></i> <?php echo $product['total_bids']; ?> bids
                        </div>
                    </div>
                    <div class="product-info">
                        <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
                        <div class="product-category">
                            <i class="fas fa-tag"></i> <?php echo htmlspecialchars($product['category_name']); ?>
                        </div>
                        <div class="product-price-row">
                            <span class="product-current-bid"><?php echo formatPrice($product['highest_bid'] ?? $product['starting_price']); ?></span>
                            <span class="product-starting"><?php echo formatPrice($product['starting_price']); ?></span>
                        </div>
                        <div class="product-time" data-end-time="<?php echo $product['end_time']; ?>">
                            <i class="fas fa-clock"></i> <?php echo getRemainingTime($product['end_time']); ?>
                        </div>
                        <?php if ($product['is_reserved'] == 1): ?>
                            <div class="product-btn-disabled">
                                <i class="fas fa-ban"></i> Not Available
                            </div>
                        <?php else: ?>
                            <a href="product/detail.php?id=<?php echo $product['id']; ?>" class="product-btn">Place Bid <i class="fas fa-arrow-right"></i></a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p class="text-center" style="color: #888; grid-column: 1/-1;">No active products found.</p>
        <?php endif; ?>
    </div>
    <div class="text-center mt-4">
        <a href="product/index.php" class="btn-view-vehicles">View All Vehicles <i class="fas fa-arrow-right"></i></a>
    </div>
</section>

<!-- Categories Modal -->
<div id="categoriesModal" class="categories-modal">
    <div class="categories-modal-content">
        <div class="categories-modal-header">
            <h3><i class="fas fa-tags"></i> All Categories</h3>
            <span class="modal-close" onclick="closeCategoriesModal()">&times;</span>
        </div>
        <div class="categories-modal-grid">
            <?php foreach ($all_categories as $category): ?>
                <a href="product/category.php?id=<?php echo $category['id']; ?>" class="modal-category-card" onclick="closeCategoriesModal()">
                    <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                    <h4><?php echo htmlspecialchars($category['name']); ?></h4>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<script>
// Hero products data from PHP
const heroProducts = <?php echo json_encode($hero_products); ?>;

let currentIndex = 0;
let autoRotateInterval;
let isTransitioning = false;

function formatPrice(price) {
    return '$' + parseFloat(price).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

function getRemainingTime(endTime) {
    const now = new Date().getTime();
    const end = new Date(endTime).getTime();
    const distance = end - now;
    
    if (distance < 0) return 'Ended';
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (86400000)) / (3600000));
    const minutes = Math.floor((distance % (3600000)) / (60000));
    
    if (days > 0) {
        return days + 'd ' + hours + 'h';
    } else if (hours > 0) {
        return hours + 'h ' + minutes + 'm';
    } else if (minutes > 0) {
        return minutes + 'm left';
    } else {
        return 'Ending soon';
    }
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function renderHero(product) {
    const featuredImage = product.featured_image 
        ? '<?php echo SITE_URL; ?>/uploads/products/' + product.featured_image 
        : '<?php echo SITE_URL; ?>/assets/images/no-image.jpg';
    
    const galleryImages = product.gallery_images || [];
    const galleryUrls = [];
    
    for (let i = 0; i < galleryImages.length && galleryUrls.length < 4; i++) {
        galleryUrls.push('<?php echo SITE_URL; ?>/uploads/products/' + galleryImages[i].image_path);
    }
    while (galleryUrls.length < 4) {
        galleryUrls.push('<?php echo SITE_URL; ?>/assets/images/no-image.jpg');
    }
    
    const highestBid = product.highest_bid || product.starting_price;
    const isReserved = product.is_reserved == 1;
    
    const html = `
        <div class="hero-main" onclick="window.location.href='product/detail.php?id=${product.id}'">
            <img src="${featuredImage}" alt="${escapeHtml(product.name)}">
            ${isReserved ? '<div class="hero-reserved-badge"><i class="fas fa-ban"></i> RESERVED</div>' : ''}
            <div class="hero-title-badge">
                <h2>${escapeHtml(product.name)}</h2>
                <div class="hero-category">
                    <i class="fas fa-tag"></i> ${escapeHtml(product.category_name)}
                </div>
            </div>
            <div class="hero-info-badge">
                <div class="hero-info-item">
                    <i class="fas fa-clock"></i>
                    <span id="heroTimeLeft">${getRemainingTime(product.end_time)}</span>
                </div>
                <div class="hero-info-item">
                    <i class="fas fa-gavel"></i>
                    <span class="bid-amount" id="heroCurrentBid">${formatPrice(highestBid)}</span>
                </div>
                <div class="hero-info-item">
                    <i class="fas fa-users"></i>
                    <span>${product.total_bids} bids</span>
                </div>
            </div>
        </div>
        <div class="hero-gallery">
            ${galleryUrls.map((img, index) => `
                <div class="hero-gallery-item" onclick="window.location.href='product/detail.php?id=${product.id}'">
                    <img src="${img}" alt="Gallery image ${index + 1}">
                    <div class="gallery-overlay">
                        <span><i class="fas fa-search-plus"></i> View Details</span>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
    
    document.getElementById('heroGrid').innerHTML = html;
    document.getElementById('heroGrid').classList.add('hero-fade');
    setTimeout(() => {
        document.getElementById('heroGrid').classList.remove('hero-fade');
    }, 500);
}

function updateHeroCountdown() {
    const timeLeftElement = document.getElementById('heroTimeLeft');
    const currentBidElement = document.getElementById('heroCurrentBid');
    
    if (heroProducts[currentIndex] && timeLeftElement) {
        const remaining = getRemainingTime(heroProducts[currentIndex].end_time);
        timeLeftElement.textContent = remaining;
        
        const highestBid = heroProducts[currentIndex].highest_bid || heroProducts[currentIndex].starting_price;
        if (currentBidElement) {
            currentBidElement.textContent = formatPrice(highestBid);
        }
    }
}

function rotateHero() {
    if (isTransitioning) return;
    if (heroProducts.length === 0) return;
    
    isTransitioning = true;
    currentIndex = (currentIndex + 1) % heroProducts.length;
    renderHero(heroProducts[currentIndex]);
    
    setTimeout(() => {
        isTransitioning = false;
    }, 500);
}

function startAutoRotate() {
    if (heroProducts.length <= 1) return;
    autoRotateInterval = setInterval(rotateHero, 60000);
}

if (heroProducts.length > 0) {
    const initialProductId = <?php echo $hero_product ? $hero_product['id'] : 0; ?>;
    if (initialProductId) {
        const initialIndex = heroProducts.findIndex(p => p.id == initialProductId);
        if (initialIndex !== -1) {
            currentIndex = initialIndex;
        }
    }
    renderHero(heroProducts[currentIndex]);
    startAutoRotate();
    setInterval(updateHeroCountdown, 1000);
} else {
    document.getElementById('heroGrid').innerHTML = '<div class="text-center" style="color: #888; padding: 60px; grid-column: 1/-1;">No active products available</div>';
}

function updateFeaturedTimes() {
    document.querySelectorAll('.product-time').forEach(el => {
        const endTime = el.getAttribute('data-end-time');
        if (endTime) {
            el.innerHTML = `<i class="fas fa-clock"></i> ${getRemainingTime(endTime)}`;
        }
    });
}
setInterval(updateFeaturedTimes, 1000);

function openCategoriesModal() {
    document.getElementById('categoriesModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeCategoriesModal() {
    document.getElementById('categoriesModal').style.display = 'none';
    document.body.style.overflow = 'auto';
}

window.onclick = function(event) {
    const modal = document.getElementById('categoriesModal');
    if (event.target === modal) {
        closeCategoriesModal();
    }
}
</script>

<?php require_once 'includes/footer.php'; ?>