<div class="max-w-4xl mx-auto">

    <div class="bg-white rounded-3xl shadow-xl overflow-hidden">

        <div class="p-10">

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

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

                <div>

                    <h1 class="text-4xl font-bold mb-2">
                        <?= htmlspecialchars($driver['driver_name']) ?>
                    </h1>

                    <div class="text-gray-500 mb-3">
                        <?= htmlspecialchars($driver['driver_email']) ?>
                    </div>

                    <div class="inline-flex bg-green-100 text-green-700 px-4 py-2 rounded-full text-sm font-semibold">
                        Verified Driver
                    </div>

                </div>

            </div>

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

                <div class="bg-gray-50 p-6 rounded-2xl">

                    <div class="text-gray-500 mb-2">
                        Route
                    </div>

                    <div class="text-2xl font-bold">
                        <?= htmlspecialchars($driver['from_location']) ?>
                        →
                        <?= htmlspecialchars($driver['to_location']) ?>
                    </div>

                </div>

                <div class="bg-gray-50 p-6 rounded-2xl">

                    <div class="text-gray-500 mb-2">
                        Departure
                    </div>

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

                </div>

                <div class="bg-gray-50 p-6 rounded-2xl">

                    <div class="text-gray-500 mb-2">
                        Available Seats
                    </div>

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

                </div>

                <div class="bg-gray-50 p-6 rounded-2xl">

                    <div class="text-gray-500 mb-2">
                        Price
                    </div>

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

                </div>

            </div>

            <div class="mt-10 flex gap-4">

                <button class="bg-black text-white px-6 py-4 rounded-2xl hover:opacity-90 transition">
                    Book Ride
                </button>

                <button class="border border-gray-300 px-6 py-4 rounded-2xl hover:bg-gray-100 transition">
                    Message Driver
                </button>

            </div>

        </div>

    </div>

</div>