import React from "react";

)

)}

</section>

{/* Booking Flow Mockups */}

<section className="p-10 bg-white">

<h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">

Booking Flow Mockup

</h2>

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

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6 text-center">

<h3 className="font-semibold text-lg">Search Results</h3>

<p className="text-gray-500">Display flights & hotels with filters and pricing</p>

<Button className="mt-4 rounded-2xl bg-blue-500 text-white">Select Option</Button>

</CardContent>

</Card>

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6 text-center">

<h3 className="font-semibold text-lg">Booking Details</h3>

<p className="text-gray-500">Enter passenger info and preferences</p>

<Button className="mt-4 rounded-2xl bg-green-500 text-white flex items-center gap-2">

<FileText className="w-4 h-4" /> Continue

</Button>

</CardContent>

</Card>

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6 text-center">

<h3 className="font-semibold text-lg">Payment Gateway</h3>

<p className="text-gray-500">Secure checkout with multiple payment options</p>

<Button className="mt-4 rounded-2xl bg-purple-600 text-white flex items-center gap-2">

<CreditCard className="w-4 h-4" /> Pay Now

</Button>

</CardContent>

</Card>

</div>

</section>

{/* Back Office Dashboard Mockup */}

<section className="p-10 bg-gray-50">

<h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">

Admin Back Office Dashboard

</h2>

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

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6">

<h3 className="font-semibold text-lg">Reservations</h3>

<p className="text-gray-500">Manage bookings and cancellations</p>

</CardContent>

</Card>

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6">

<h3 className="font-semibold text-lg">Customers</h3>

<p className="text-gray-500">View and manage customer profiles</p>

</CardContent>

</Card>

<Card className="rounded-2xl shadow-md">

<CardContent className="p-6">

<h3 className="font-semibold text-lg">Reports & Invoices</h3>

<p className="text-gray-500">Generate detailed business reports</p>

</CardContent>

</Card>

</div>

</section>

</div>

);

}