<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

require_once 'includes/config.php';

// Get featured cars (random 6, vetem 1 makine per grup makinash identike)
$featured_cars = array();
try {
    $featured_stmt = $pdo->query("
        SELECT * FROM cars 
        WHERE status = 'available' 
        AND (group_id IS NULL OR is_primary = 1)
        ORDER BY RAND() 
        LIMIT 6
    ");
    $featured_cars = $featured_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $featured_cars = array();
}

// Get car types for filtering
$car_types = array();
try {
    $type_stmt = $pdo->query("
        SELECT DISTINCT car_type, COUNT(*) as count 
        FROM cars 
        WHERE status = 'available' 
        GROUP BY car_type
    ");
    $car_types = $type_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $car_types = array();
}

$type_labels = array(
    'economy' => t('car_type_economy'),
    'sedan' => t('car_type_sedan'),
    'suv' => t('car_type_suv'),
    '7-seats' => t('car_type_7seats'),
    'cabrio' => t('car_type_cabrio'),
    'luxury' => t('car_type_luxury')
);

// Get site settings
$site_name = getSetting('site_name', $pdo, 'ESC Rental');
$hero_title = getSetting('hero_title', $pdo, 'Drive Your Dream');
$hero_subtitle = getSetting('hero_subtitle', $pdo, 'Premium car rental at competitive prices');
$hero_background_image = getSetting('hero_background_image', $pdo, '');
$hero_overlay_opacity = getSetting('hero_overlay_opacity', $pdo, '0.6');
$hero_text_color = getSetting('hero_text_color', $pdo, '#ffffff');
$hero_button_text = getSetting('hero_button_text', $pdo, 'Browse Our Fleet');
$hero_button_link = getSetting('hero_button_link', $pdo, '#fleet');

$about_title = getSetting('about_title', $pdo, 'About Us');
$about_content = getSetting('about_content', $pdo, '');
$about_image = getSetting('about_image', $pdo, '');

$why_choose_title = getSetting('why_choose_title', $pdo, 'Why Choose Us');
$why_choose_items_raw = getSetting('why_choose_items', $pdo, '["Best Price Guarantee","24/7 Customer Support","Free Cancellation","Full Insurance","No Hidden Fees","Brand New Cars"]');
$why_choose_items = json_decode($why_choose_items_raw, true);
if(!is_array($why_choose_items) || empty($why_choose_items)) {
    $why_choose_items = array("Best Price Guarantee", "24/7 Customer Support", "Free Cancellation", "Full Insurance", "No Hidden Fees", "Brand New Cars");
}

$testimonials_title = getSetting('testimonials_title', $pdo, 'What Our Customers Say');

// Get testimonials from database
$testimonials_items = array();
try {
    $test_stmt = $pdo->query("SELECT * FROM testimonials WHERE is_active = 1 ORDER BY sort_order ASC, id DESC LIMIT 6");
    $testimonials_items = $test_stmt->fetchAll();
} catch(PDOException $e) {
    $testimonials_items = array();
}

$facebook_url = getSetting('facebook_url', $pdo, '');
$instagram_url = getSetting('instagram_url', $pdo, '');
$whatsapp_number = getSetting('whatsapp_number', $pdo, '');
$footer_copyright_text = getSetting('footer_copyright_text', $pdo, '© 2026 ESC Rental Albania. All rights reserved.');
$footer_about_text = getSetting('footer_about_text', $pdo, 'Premium car rental services in Albania. Quality vehicles, competitive prices, and exceptional customer service.');
$site_phone = getSetting('site_phone', $pdo, '+355 69 123 4567');
$site_email = getSetting('site_email', $pdo, 'info@carrental.com');
$site_address = getSetting('site_address', $pdo, 'Tirana, Albania');
$working_hours_start = getSetting('working_hours_start', $pdo, '08:00');
$working_hours_end = getSetting('working_hours_end', $pdo, '20:00');

// Count total cars and reservations
$total_cars = 0;
$total_reservations = 0;
try {
    $total_cars = $pdo->query("SELECT COUNT(*) FROM cars WHERE status = 'available' AND (group_id IS NULL OR is_primary = 1)")->fetchColumn();
    $total_reservations = $pdo->query("SELECT COUNT(*) FROM reservations")->fetchColumn();
} catch(PDOException $e) {
    $total_cars = 0;
    $total_reservations = 0;
}

$page_title = $site_name;
require_once 'header.php';
?>

<!DOCTYPE html>
<html lang="<?php echo getCurrentLanguage(); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=yes">
    <title><?php echo htmlspecialchars($site_name); ?> - <?php echo t('hero_title'); ?></title>
    <style>
        :root {
            --primary: #0066ff;
            --primary-dark: #0052cc;
            --secondary: #1a1f36;
            --text-light: #5a6e8a;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --border: #eef2f6;
            --success: #10b981;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg-light);
            color: var(--secondary);
            line-height: 1.5;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .hero {
            position: relative;
            min-height: 90vh;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        
        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 100%);
            opacity: <?php echo $hero_overlay_opacity; ?>;
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 5%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .hero-text {
            color: <?php echo $hero_text_color; ?>;
        }
        
        .hero-text h1 {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .hero-text p {
            font-size: clamp(14px, 4vw, 18px);
            line-height: 1.6;
            margin-bottom: 32px;
            opacity: 0.95;
            text-shadow: 0 1px 5px rgba(0,0,0,0.3);
        }
        
        .hero-stats {
            display: flex;
            gap: 32px;
            margin-top: 32px;
            flex-wrap: wrap;
        }
        
        .hero-stat {
            text-align: left;
        }
        
        .hero-stat .number {
            font-size: clamp(24px, 5vw, 32px);
            font-weight: 800;
            display: block;
        }
        
        .hero-stat .label {
            font-size: 14px;
            opacity: 0.8;
        }
        
        .search-box {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 28px;
            padding: clamp(20px, 5vw, 32px);
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        
        .search-box h3 {
            font-size: clamp(20px, 5vw, 24px);
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 8px;
        }
        
        .search-box .subtitle {
            color: var(--text-light);
            font-size: 14px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .search-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .search-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .search-group label {
            font-size: 13px;
            font-weight: 600;
            color: var(--secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-group label i {
            color: var(--primary);
            font-size: 14px;
        }
        
        .search-group input, 
        .search-group select {
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            font-size: 16px;
            transition: all 0.3s;
            background: white;
            font-family: inherit;
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .search-group select {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }
        
        .search-group input:focus, 
        .search-group select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,102,255,0.1);
        }
        
        .date-input-wrapper {
            position: relative;
        }
        
        .date-input-wrapper i {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            pointer-events: none;
        }
        
        .search-group input[type="date"] {
            position: relative;
            cursor: pointer;
        }
        
        .search-group input[type="date"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        .btn-search {
            background: var(--primary);
            color: white;
            padding: 16px;
            border: none;
            border-radius: 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 8px;
            -webkit-tap-highlight-color: transparent;
        }
        
        .btn-search:active {
            transform: scale(0.98);
            background: var(--primary-dark);
        }
        
        .section {
            padding: 80px 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .section-light {
            background: white;
        }
        
        .section-gray {
            background: var(--bg-light);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 48px;
        }
        
        .section-title h2 {
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 700;
            margin-bottom: 16px;
        }
        
        .section-title p {
            color: var(--text-light);
            font-size: clamp(14px, 4vw, 18px);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .section-title .underline {
            width: 60px;
            height: 3px;
            background: var(--primary);
            margin: 16px auto 0;
            border-radius: 2px;
        }
        
        .car-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .car-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s;
            border: 1px solid var(--border);
            -webkit-tap-highlight-color: transparent;
        }
        
        .car-card:active {
            transform: scale(0.98);
        }
        
        .car-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .car-image-wrapper {
            overflow: hidden;
            position: relative;
        }
        
        .car-type-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .car-info {
            padding: 20px;
        }
        
        .car-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .car-specs {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 13px;
            color: var(--text-light);
            flex-wrap: wrap;
        }
        
        .car-specs i {
            width: 16px;
            margin-right: 4px;
            color: var(--primary);
        }
        
        .car-price {
            font-size: 26px;
            font-weight: 700;
            color: var(--primary);
            margin: 16px 0;
        }
        
        .car-price small {
            font-size: 13px;
            font-weight: normal;
            color: var(--text-light);
        }
        
        .btn-view {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 14px 24px;
            border-radius: 12px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s;
            width: 100%;
            text-align: center;
            -webkit-tap-highlight-color: transparent;
        }
        
        .btn-view:active {
            transform: scale(0.98);
            background: var(--primary-dark);
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .about-content h2 {
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .about-content p {
            color: var(--text-light);
            line-height: 1.7;
            margin-bottom: 24px;
            font-size: 15px;
        }
        
        .about-stats {
            display: flex;
            gap: 40px;
            margin-top: 32px;
            flex-wrap: wrap;
        }
        
        .stat-item h3 {
            font-size: clamp(24px, 5vw, 32px);
            font-weight: 800;
            color: var(--primary);
        }
        
        .about-image img {
            width: 100%;
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background: white;
            padding: 32px 24px;
            border-radius: 20px;
            text-align: center;
            transition: all 0.3s;
            border: 1px solid var(--border);
            -webkit-tap-highlight-color: transparent;
        }
        
        .feature-card:active {
            transform: scale(0.98);
        }
        
        .feature-icon {
            width: 70px;
            height: 70px;
            background: rgba(0,102,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .feature-icon i {
            font-size: 32px;
            color: var(--primary);
        }
        
        .feature-card h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .feature-card p {
            color: var(--text-light);
            font-size: 14px;
        }
        
        .testimonials-slider {
            overflow: hidden;
            padding: 20px 0;
            -webkit-overflow-scrolling: touch;
        }
        
        .testimonial-card {
            background: white;
            padding: 32px;
            border-radius: 20px;
            text-align: center;
            margin: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }
        
        .testimonial-avatar {
            width: 70px;
            height: 70px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            color: white;
            font-size: 28px;
        }
        
        .testimonial-text {
            font-size: 16px;
            line-height: 1.6;
            color: var(--secondary);
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-name {
            font-weight: 700;
            margin-bottom: 4px;
        }
        
        .testimonial-rating {
            color: #fbbf24;
            margin-top: 8px;
        }
        
        .cta-section {
            background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
            color: white;
            text-align: center;
            padding: 80px 24px;
        }
        
        .cta-section h2 {
            font-size: clamp(28px, 5vw, 36px);
            margin-bottom: 16px;
        }
        
        .cta-section p {
            font-size: clamp(14px, 4vw, 18px);
            margin-bottom: 32px;
        }
        
        .btn-cta {
            background: white;
            color: var(--primary);
            padding: 14px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-block;
            -webkit-tap-highlight-color: transparent;
        }
        
        .btn-cta:active {
            transform: scale(0.98);
        }
        
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        @media (max-width: 968px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
                padding: 40px 5%;
            }
            .hero-text h1 { font-size: 36px; }
            .hero-stats { justify-content: center; }
            .hero-stat { text-align: center; }
            .form-row { grid-template-columns: 1fr; }
            .section { padding: 50px 20px; }
            .section-title h2 { font-size: 28px; }
            .about-grid { grid-template-columns: 1fr; }
            .car-grid { gap: 20px; }
        }
        
        @media (max-width: 480px) {
            .hero-text h1 { font-size: 28px; }
            .hero-stats { gap: 20px; flex-wrap: wrap; justify-content: center; }
            .hero-stat .number { font-size: 24px; }
            .hero-stat .label { font-size: 12px; }
            .car-info { padding: 16px; }
            .car-title { font-size: 16px; }
            .car-price { font-size: 22px; }
            .btn-view { padding: 12px 20px; font-size: 14px; }
        }
        
        @media (hover: hover) {
            .car-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            }
            .car-card:hover .car-image {
                transform: scale(1.05);
            }
            .feature-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(0,0,0,0.08);
            }
            .btn-search:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 20px rgba(0,102,255,0.2);
            }
        }
    </style>
</head>
<body>
    <div class="hero">
        <?php if(!empty($hero_background_image) && file_exists($hero_background_image)): ?>
            <img src="<?php echo htmlspecialchars($hero_background_image); ?>" alt="Hero Background" class="hero-bg">
        <?php else: ?>
            <div class="hero-bg" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);"></div>
        <?php endif; ?>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <div class="hero-text">
                <h1><?php echo t('hero_title'); ?></h1>
                <p><?php echo t('hero_subtitle'); ?></p>
                <div class="hero-stats">
                    <div class="hero-stat">
                        <span class="number"><?php echo number_format($total_cars); ?>+</span>
                        <span class="label"><?php echo t('hero_vehicles'); ?></span>
                    </div>
                    <div class="hero-stat">
                        <span class="number"><?php echo number_format($total_reservations); ?>+</span>
                        <span class="label"><?php echo t('hero_customers'); ?></span>
                    </div>
                    <div class="hero-stat">
                        <span class="number">24/7</span>
                        <span class="label"><?php echo t('hero_support'); ?></span>
                    </div>
                </div>
            </div>
            
            <div class="search-box">
                <h3><?php echo t('hero_search_title'); ?></h3>
                <div class="subtitle"><?php echo t('hero_search_subtitle'); ?></div>
                <form action="search-results.php" method="GET" class="search-form">
                    <div class="search-group">
                        <label><i class="fas fa-map-marker-alt"></i> <?php echo t('hero_search_location'); ?></label>
                        <select name="pickup_location">
                            <option value=""><?php echo t('hero_all_locations'); ?></option>
                            <option value="Tirana Airport"><?php echo t('location_tirana_airport'); ?></option>
                            <option value="Tirana Center"><?php echo t('location_tirana_center'); ?></option>
                            <option value="Durres"><?php echo t('location_durres'); ?></option>
                            <option value="Vlore"><?php echo t('location_vlore'); ?></option>
                            <option value="Sarande"><?php echo t('location_sarande'); ?></option>
                        </select>
                    </div>
                    
                    <div class="form-row">
                        <div class="search-group">
                            <label><i class="fas fa-calendar-alt"></i> <?php echo t('hero_search_pickup_date'); ?></label>
                            <div class="date-input-wrapper">
                                <input type="date" name="pickup_date" id="pickup_date" value="<?php echo date('Y-m-d'); ?>">
                                <i class="fas fa-calendar-day"></i>
                            </div>
                        </div>
                        <div class="search-group">
                            <label><i class="fas fa-calendar-check"></i> <?php echo t('hero_search_return_date'); ?></label>
                            <div class="date-input-wrapper">
                                <input type="date" name="dropoff_date" id="dropoff_date" value="<?php echo date('Y-m-d', strtotime('+3 days')); ?>">
                                <i class="fas fa-calendar-week"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="search-group">
                        <label><i class="fas fa-car"></i> <?php echo t('hero_search_car_type'); ?></label>
                        <select name="car_type">
                            <option value=""><?php echo t('hero_all_types'); ?></option>
                            <?php foreach($car_types as $type): ?>
                                <option value="<?php echo htmlspecialchars($type['car_type']); ?>"><?php echo isset($type_labels[$type['car_type']]) ? $type_labels[$type['car_type']] : $type['car_type']; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn-search">
                        <i class="fas fa-search"></i> <?php echo t('hero_search_button'); ?>
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="section" id="fleet">
        <div class="section-title">
            <h2><?php echo t('fleet_title'); ?></h2>
            <p><?php echo t('fleet_subtitle'); ?></p>
            <div class="underline"></div>
        </div>
        
        <div class="car-grid">
            <?php if(count($featured_cars) > 0): ?>
                <?php foreach($featured_cars as $car): 
                    $price = getCarBasePrice($car['id'], $pdo);
                ?>
                <div class="car-card fade-up">
                    <div class="car-image-wrapper">
                        <img src="<?php echo !empty($car['image_url']) ? htmlspecialchars($car['image_url']) : 'https://placehold.co/600x400?text=' . urlencode($car['brand'] . ' ' . $car['model']); ?>" 
                             alt="<?php echo htmlspecialchars($car['brand'] . ' ' . $car['model']); ?>" 
                             class="car-image"
                             loading="lazy"
                             onerror="this.src='https://placehold.co/600x400?text=Car'">
                        <span class="car-type-badge"><?php echo isset($type_labels[$car['car_type']]) ? $type_labels[$car['car_type']] : $car['car_type']; ?></span>
                    </div>
                    <div class="car-info">
                        <h3 class="car-title"><?php echo htmlspecialchars($car['brand'] . ' ' . $car['model']); ?></h3>
                        <div class="car-specs">
                            <span><i class="fas fa-cog"></i> <?php echo htmlspecialchars($car['transmission']); ?></span>
                            <span><i class="fas fa-users"></i> <?php echo $car['seats']; ?> <?php echo t('car_seats'); ?></span>
                            <span><i class="fas fa-suitcase"></i> <?php echo $car['luggage']; ?> <?php echo t('car_bags'); ?></span>
                        </div>
                        <div class="car-price">
                            €<?php echo number_format($price, 2); ?> <small><?php echo t('car_per_day'); ?></small>
                        </div>
                        <a href="car-details.php?id=<?php echo $car['id']; ?>" class="btn-view"><?php echo t('car_view_details'); ?></a>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div style="text-align: center; grid-column: 1/-1; padding: 48px;">
                    <p><?php echo t('fleet_no_cars'); ?></p>
                </div>
            <?php endif; ?>
        </div>
        
        <div style="text-align: center; margin-top: 40px;">
            <a href="all-cars.php" style="background: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: 50px; padding: 12px 32px; text-decoration: none; display: inline-block; font-weight: 600; -webkit-tap-highlight-color: transparent;"><?php echo t('fleet_view_all'); ?></a>
        </div>
    </div>
    
    <?php if(!empty($about_content)): ?>
    <div class="section section-light">
        <div class="about-grid">
            <div class="about-content fade-up">
                <h2><?php echo t('about_title'); ?></h2>
                <p><?php echo nl2br(htmlspecialchars($about_content)); ?></p>
                <div class="about-stats">
                    <div class="stat-item">
                        <h3><?php echo number_format($total_cars); ?>+</h3>
                        <p><?php echo t('about_stats_vehicles'); ?></p>
                    </div>
                    <div class="stat-item">
                        <h3><?php echo number_format($total_reservations); ?>+</h3>
                        <p><?php echo t('about_stats_customers'); ?></p>
                    </div>
                    <div class="stat-item">
                        <h3>24/7</h3>
                        <p><?php echo t('about_stats_support'); ?></p>
                    </div>
                </div>
            </div>
            <div class="about-image fade-up">
                <?php if(!empty($about_image) && file_exists($about_image)): ?>
                    <img src="<?php echo htmlspecialchars($about_image); ?>" alt="<?php echo t('about_title'); ?>" loading="lazy">
                <?php else: ?>
                    <img src="https://placehold.co/600x400?text=<?php echo urlencode(t('about_title')); ?>" alt="<?php echo t('about_title'); ?>" loading="lazy">
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>
    
    <div class="section section-gray">
        <div class="section-title">
            <h2><?php echo t('why_choose_title'); ?></h2>
            <p><?php echo t('why_choose_subtitle'); ?></p>
            <div class="underline"></div>
        </div>
        
        <div class="features-grid">
            <?php foreach($why_choose_items as $item): ?>
            <div class="feature-card fade-up">
                <div class="feature-icon"><i class="fas fa-check-circle"></i></div>
                <h3><?php echo htmlspecialchars($item); ?></h3>
                <p><?php echo t('why_choose_subtitle'); ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    
    <?php if(count($testimonials_items) > 0): ?>
    <div class="section">
        <div class="section-title">
            <h2><?php echo t('testimonials_title'); ?></h2>
            <p><?php echo t('testimonials_subtitle'); ?></p>
            <div class="underline"></div>
        </div>
        
        <div class="testimonials-slider swiper">
            <div class="swiper-wrapper">
                <?php foreach($testimonials_items as $item): ?>
                <div class="swiper-slide">
                    <div class="testimonial-card">
                        <div class="testimonial-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="testimonial-text">"<?php echo htmlspecialchars($item['text']); ?>"</div>
                        <div class="testimonial-name"><?php echo htmlspecialchars($item['name']); ?></div>
                        <div class="testimonial-rating">
                            <?php for($i = 1; $i <= 5; $i++): ?>
                                <i class="fas fa-star<?php echo $i <= $item['rating'] ? '' : '-o'; ?>"></i>
                            <?php endfor; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <?php endif; ?>
    
    <div class="cta-section">
        <h2><?php echo t('cta_title'); ?></h2>
        <p><?php echo t('cta_subtitle'); ?></p>
        <a href="all-cars.php" class="btn-cta"><?php echo t('cta_button'); ?></a>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pickupDateInput = document.getElementById('pickup_date');
            const dropoffDateInput = document.getElementById('dropoff_date');
            
            if(pickupDateInput && dropoffDateInput) {
                const today = new Date();
                const tomorrow = new Date(today);
                tomorrow.setDate(today.getDate() + 1);
                
                const todayStr = today.toISOString().split('T')[0];
                const tomorrowStr = tomorrow.toISOString().split('T')[0];
                
                pickupDateInput.min = todayStr;
                dropoffDateInput.min = tomorrowStr;
                
                if(!pickupDateInput.value) pickupDateInput.value = todayStr;
                if(!dropoffDateInput.value) dropoffDateInput.value = tomorrowStr;
                
                pickupDateInput.addEventListener('change', function() {
                    const pickupDate = new Date(this.value);
                    const nextDay = new Date(pickupDate);
                    nextDay.setDate(pickupDate.getDate() + 1);
                    const nextDayStr = nextDay.toISOString().split('T')[0];
                    dropoffDateInput.min = nextDayStr;
                    if(new Date(dropoffDateInput.value) <= pickupDate) {
                        dropoffDateInput.value = nextDayStr;
                    }
                });
            }
            
            if(document.querySelector('.testimonials-slider')) {
                new Swiper('.testimonials-slider', {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    pagination: { el: '.swiper-pagination', clickable: true },
                    autoplay: { delay: 5000, disableOnInteraction: false },
                    breakpoints: { 
                        768: { slidesPerView: 2 },
                        1024: { slidesPerView: 3 } 
                    },
                    touchRatio: 1,
                    resistanceRatio: 0.85
                });
            }
            
            const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if(entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, observerOptions);
            document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
        });
    </script>
</body>
</html>

<?php 
if(file_exists('footer.php')) {
    include 'footer.php';
}
?>