<section class="py-20 bg-white">

    <div class="max-w-5xl mx-auto text-center px-4">

        <!-- HEADLINE -->
        <h1 class="text-5xl font-bold mb-6">
            Find your next ride in seconds
        </h1>

        <p class="text-gray-500 text-lg mb-10">
            Travel smarter. Share your journey.
        </p>

        <!-- SEARCH BOX -->
        <div class="bg-white shadow-xl rounded-2xl p-6 flex flex-col md:flex-row gap-4">

            <input type="text" placeholder="From" class="flex-1 border p-4 rounded-xl">

            <input type="text" placeholder="To" class="flex-1 border p-4 rounded-xl">

            <input type="date" class="border p-4 rounded-xl">

            <button class="bg-black text-white px-6 py-4 rounded-xl">
                Search
            </button>

        </div>

        <!-- TRUST -->
        <div class="mt-6 text-gray-400 text-sm">
            ✔ Verified drivers • ✔ Secure booking • ✔ Instant results
        </div>

    </div>

</section>
<h1 class="text-4xl font-bold mb-8">
    Available Drivers
</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <?php foreach ($rides as $ride): ?>

        <a href="/driftly/public/driver?id=<?= $ride['driver_id'] ?>" data-link
            class="block bg-white rounded-2xl shadow-lg overflow-hidden hover:-translate-y-1 hover:shadow-2xl transition duration-300">

            <div class="p-6">

                <div class="flex items-center gap-4 mb-6">

                    <img src="<?= htmlspecialchars($ride['driver_avatar']) ?>" class="w-16 h-16 rounded-full object-cover">

                    <div>
                        <div class="text-xl font-bold">
                            <?= htmlspecialchars($ride['driver_name']) ?>
                        </div>

                        <div class="text-green-600 text-sm font-medium">
                            Verified Driver
                        </div>
                    </div>

                </div>

                <div class="space-y-3">

                    <div class="flex justify-between">
                        <span class="text-gray-500">From</span>

                        <span class="font-semibold">
                            <?= htmlspecialchars($ride['from_location']) ?>
                        </span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">To</span>

                        <span class="font-semibold">
                            <?= htmlspecialchars($ride['to_location']) ?>
                        </span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">Departure</span>

                        <span class="font-semibold">
                            <?= htmlspecialchars($ride['departure_time']) ?>
                        </span>
                    </div>

                    <div class="flex justify-between">
                        <span class="text-gray-500">Seats</span>

                        <span class="font-semibold">
                            <?= htmlspecialchars($ride['available_seats']) ?>
                        </span>
                    </div>

                </div>

                <div class="mt-8 flex items-center justify-between">

                    <div>
                        <span class="text-3xl font-bold">
                            €<?= htmlspecialchars($ride['price']) ?>
                        </span>
                    </div>

                    <div class="bg-black text-white px-5 py-3 rounded-xl">
                        View Driver
                    </div>

                </div>

            </div>

        </a>

    <?php endforeach; ?>

</div>