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

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

        <a href="/driftly/public/driver?id=<?= htmlspecialchars($ride['driver_id']) ?>" data-link
            class="ride-card group bg-white rounded-3xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition duration-300">

            <div class="flex items-center gap-4 mb-6">
                <img src="<?= htmlspecialchars($ride['driver_avatar']) ?>" class="w-14 h-14 rounded-full object-cover"
                    alt="<?= htmlspecialchars($ride['driver_name']) ?>">

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

                    <div class="text-sm text-[#06B6D4] font-medium">
                        Verified driver
                    </div>
                </div>
            </div>

            <div class="space-y-3 mb-6">
                <div class="flex justify-between">
                    <span class="text-slate-500">From</span>
                    <span class="font-semibold"><?= htmlspecialchars($ride['from_location']) ?></span>
                </div>

                <div class="flex justify-between">
                    <span class="text-slate-500">To</span>
                    <span class="font-semibold"><?= htmlspecialchars($ride['to_location']) ?></span>
                </div>

                <div class="flex justify-between">
                    <span class="text-slate-500">Seats</span>
                    <span class="font-semibold"><?= htmlspecialchars($ride['available_seats']) ?></span>
                </div>
            </div>

            <div class="flex items-center justify-between">
                <div class="text-2xl font-bold">
                    €<?= htmlspecialchars($ride['price']) ?>
                </div>

                <span class="text-sm font-semibold text-[#06B6D4] group-hover:translate-x-1 transition">
                    View →
                </span>
            </div>

        </a>

    <?php endforeach; ?>

</div>