<?php
$lang = $_GET['lang'] ?? 'en';
$langFile = "lang/$lang.json";

if (file_exists($langFile)) {
    $translations = json_decode(file_get_contents($langFile), true);
} else {
    $translations = json_decode(file_get_contents('lang/en.json'), true);
}

// Determine the text direction based on language
$dir = ($lang === 'ar' || $lang === 'ku') ? 'rtl' : 'ltr';
?>


<!DOCTYPE html>
<html lang="<?= htmlspecialchars($lang); ?>" dir="<?= $dir; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($translations['title'] ?? 'Mr. Taxi'); ?></title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
        --accent: #ffc10e;
        --white: #fff;
        --black: #000;
        --primaryBackground: #fcd006;
        --secondaryBackground: #ffe496;
        --textGray: #ffe496;
        }

        @font-face {
            font-family: 'BahijTheSansArabic';
            src: url('assets/fonts/Bahij_TheSansArabic-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        body {
            margin: 0;
            padding: 0;
            width: 100%;
            background: url('assets/img/bg.jpg') no-repeat center center fixed;
            background-size: cover;
            color: var(--black);
            font-family: 'BahijTheSansArabic' !important;
        }

        .carousel-caption {
            position: absolute;
            left: 10%;
            top: 50%;
            transform: translateY(-50%);
            text-align: left;
            color: black;
            width: 40%;
        }

        .carousel-caption h5 {
            font-size: 3rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .carousel-caption p {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .carousel-caption .btn {
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
            background-color: black;
            border: none;
            padding: 10px 20px;
            text-transform: uppercase;
            border-radius: 5px;
            text-decoration: none;
        }

        section {
            margin-top: 100px;
            margin-bottom: 100px;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: brightness(0);
        }
    </style>
</head>
<body>

    <?php include 'assets/html/header.php'; ?>

    <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel" style="direction: ltr !important;">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="assets/img/slider1.jpg" class="d-block w-100" style="height: 500px; object-fit: cover;">
                <div class="carousel-caption">
                    <h5><?= htmlspecialchars($translations['carousel']['slide1']['title'] ?? 'Earn. Connect. Contribute to Society'); ?></h5>
                    <p><?= htmlspecialchars($translations['carousel']['slide1']['subtitle'] ?? 'Partner with us to drive your own livelihood and more.'); ?></p>
                    <a href="https://www.facebook.com/profile.php?id=61561172319636" class="btn">
                        <?= htmlspecialchars($translations['carousel']['slide1']['button'] ?? 'Sign Up Now'); ?>
                    </a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://placehold.co/700x200?text=Slide+2" class="d-block w-100" style="height: 500px; object-fit: cover;">
                <div class="carousel-caption">
                    <h5><?= htmlspecialchars($translations['carousel']['slide2']['title'] ?? 'Your Ride, Your Way'); ?></h5>
                    <p><?= htmlspecialchars($translations['carousel']['slide2']['subtitle'] ?? 'Explore our premium services today.'); ?></p>
                    <a href="https://www.facebook.com/profile.php?id=61561172319636" class="btn">
                        <?= htmlspecialchars($translations['carousel']['slide2']['button'] ?? 'Learn More'); ?>
                    </a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://placehold.co/700x200?text=Slide+3" class="d-block w-100" style="height: 500px; object-fit: cover;">
                <div class="carousel-caption">
                    <h5><?= htmlspecialchars($translations['carousel']['slide3']['title'] ?? 'Comfort and Safety'); ?></h5>
                    <p><?= htmlspecialchars($translations['carousel']['slide3']['subtitle'] ?? 'Ensuring you reach your destination safely.'); ?></p>
                    <a href="https://www.facebook.com/profile.php?id=61561172319636" class="btn">
                        <?= htmlspecialchars($translations['carousel']['slide3']['button'] ?? 'Get Started'); ?>
                    </a>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden"><?= htmlspecialchars($translations['buttons']['previous'] ?? 'Previous'); ?></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden"><?= htmlspecialchars($translations['buttons']['next'] ?? 'Next'); ?></span>
        </button>
    </div>

    <?php include 'sections/services.php'; ?>

    <?php include 'sections/about.php'; ?>

    <?php include 'sections/features.php'; ?>

    <section id="testimonials" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5" style="font-weight: bold; text-shadow: 1px 1px var(--black); color: var(--accent);">
                <?= htmlspecialchars($translations['testimonials']['heading'] ?? 'TESTIMONIALS'); ?>
            </h2>
            <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <?php foreach ($translations['testimonials']['quotes'] as $index => $quote): ?>
                    <div class="carousel-item <?= $index === 0 ? 'active' : ''; ?>">
                        <div class="d-flex justify-content-center">
                            <div class="card p-4 shadow-sm" style="max-width: 500px; background: var(--white); color: var(--black);">
                                <p class="mb-3 fs-5"><?= htmlspecialchars($quote['text']); ?></p>
                                <div class="d-flex align-items-center">
                                    <img src="https://i.pravatar.cc/250?img=<?= $index + 1; ?>" alt="Person <?= $index + 1; ?>" class="rounded-circle me-3" style="width: 50px; height: 50px;">
                                    <div>
                                        <h6 class="mb-0"><?= htmlspecialchars($quote['name']); ?></h6>
                                        <small><?= htmlspecialchars($quote['role']); ?></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden"><?= htmlspecialchars($translations['buttons']['previous'] ?? 'Previous'); ?></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden"><?= htmlspecialchars($translations['buttons']['next'] ?? 'Next'); ?></span>
                </button>
            </div>
        </div>
    </section>

    <?php include 'assets/html/footer.php'; ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
