export default function AirportPickupDropoffPage() {
const steps = [
{
step: ’01’,
title: ‘Arrive at Rhodes Airport’,
text: ‘After collecting your luggage, proceed towards the arrivals exit area.’,
icon: ‘✈️’,
},
{
step: ’02’,
title: ‘Meet Your Representative’,
text: ‘A George Cars team member will be waiting with your name or our company logo.’,
icon: ‘👋’,
},
{
step: ’03’,
title: ‘Quick Paperwork Assistance’,
text: ‘We complete the rental process quickly and smoothly directly at the airport.’,
icon: ‘📝’,
},
{
step: ’04’,
title: ‘Collect Your Vehicle’,
text: ‘Start exploring Rhodes immediately without waiting for shuttle transfers.’,
icon: ‘🚗’,
},
];

const benefits = [
‘Free Airport Delivery’,
‘No Shuttle Buses’,
’24/7 Support’,
‘Flight Monitoring’,
‘No Hidden Fees’,
‘Unlimited Mileage’,
];

const delayCards = [
{
title: ‘We Monitor Flight Arrivals’,
text: ‘Our team tracks your flight status in real time.’,
},
{
title: ‘Late Arrivals Supported’,
text: ‘Even if your flight is delayed, we will still be there for you.’,
},
{
title: ‘Instant WhatsApp Support’,
text: ‘Need assistance? Contact us immediately through WhatsApp.’,
},
];

return (
<div className=”bg-white text-slate-800″>
{/* HERO */}
<section className=”relative overflow-hidden min-h-[88vh]”>
<img
src=”https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=1800&auto=format&fit=crop”
alt=”Airport pickup”
className=”absolute inset-0 h-full w-full object-cover”
/>

<div className=”absolute inset-0 bg-slate-950/60″ />

<div className=”relative mx-auto flex max-w-7xl flex-col justify-center px-6 py-32 lg:min-h-[88vh] lg:px-12″>
<div className=”max-w-3xl text-white”>
<p className=”text-sm uppercase tracking-[0.35em] text-white/70″>
Rhodes Airport Pickup Service
</p>

<h1 className=”mt-5 text-5xl font-semibold leading-tight md:text-7xl”>
Airport Pickup & Drop-Off Made Easy
</h1>

<p className=”mt-8 text-lg leading-8 text-white/85 md:text-xl”>
Meet your George Cars representative directly at Rhodes Airport and begin your holiday stress-free.
</p>

<div className=”mt-10 flex flex-wrap gap-4″>
<button className=”rounded-2xl bg-white px-8 py-4 text-sm font-semibold text-slate-900 shadow-2xl transition hover:scale-105″>
View Pickup Instructions
</button>

<button className=”rounded-2xl border border-white/30 bg-white/10 px-8 py-4 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20″>
Contact on WhatsApp
</button>
</div>

<div className=”mt-14 grid grid-cols-2 gap-4 md:grid-cols-4″>
{[
‘Meet & Greet Service’,
‘No Shuttle Buses’,
‘Airport Delivery Included’,
’24/7 Support’,
].map((item) => (
<div
key={item}
className=”rounded-2xl border border-white/15 bg-white/10 p-5 text-sm backdrop-blur”
>
{item}
</div>
))}
</div>
</div>
</div>
</section>

{/* HOW IT WORKS */}
<section className=”py-28 bg-slate-50″>
<div className=”mx-auto max-w-7xl px-6 lg:px-12″>
<div className=”max-w-3xl”>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-sky-700″>
Simple Arrival Process
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-6xl”>
How Airport Pickup Works
</h2>

<p className=”mt-6 text-lg leading-8 text-slate-600″>
A quick and seamless arrival experience designed to get you on the road as fast as possible.
</p>
</div>

<div className=”mt-20 grid gap-6 md:grid-cols-2 xl:grid-cols-4″>
{steps.map((step) => (
<div
key={step.step}
className=”rounded-[2rem] bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:shadow-xl”
>
<div className=”flex items-center justify-between”>
<div className=”text-5xl”>{step.icon}</div>
<div className=”text-sm font-semibold text-slate-400″>
STEP {step.step}
</div>
</div>

<h3 className=”mt-8 text-2xl font-semibold leading-snug”>
{step.title}
</h3>

<p className=”mt-5 leading-7 text-slate-600″>
{step.text}
</p>
</div>
))}
</div>
</div>
</section>

{/* AIRPORT MAP */}
<section className=”mx-auto grid max-w-7xl gap-16 px-6 py-28 lg:grid-cols-2 lg:px-12″>
<div className=”rounded-[2rem] bg-gradient-to-br from-slate-200 to-slate-300 min-h-[500px] relative overflow-hidden”>
<div className=”absolute left-10 top-10 rounded-full bg-red-500 px-5 py-3 text-sm font-semibold text-white shadow-lg”>
Exit B9
</div>

<div className=”absolute bottom-10 right-10 rounded-2xl bg-white p-5 shadow-xl”>
<div className=”text-sm font-semibold text-slate-500″>
Meeting Point
</div>
<div className=”mt-1 text-lg font-semibold”>
George Cars Representative
</div>
</div>

<div className=”absolute inset-0 flex items-center justify-center text-slate-500 text-xl font-medium”>
Airport Visual / Interactive Map Area
</div>
</div>

<div className=”flex flex-col justify-center”>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-sky-700″>
Easy To Find
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-5xl”>
Clear Airport Meeting Instructions
</h2>

<p className=”mt-8 text-lg leading-8 text-slate-600″>
We provide a simple and stress-free meeting process directly at Rhodes Airport arrivals.
</p>

<div className=”mt-10 space-y-6″>
{[
‘Proceed to the arrivals exit area’,
‘Look for the George Cars logo or your name sign’,
‘Quick paperwork assistance’,
‘Vehicle collection within minutes’,
].map((item) => (
<div
key={item}
className=”flex items-center gap-4 rounded-2xl bg-slate-50 p-5″
>
<div className=”flex h-10 w-10 items-center justify-center rounded-full bg-sky-700 text-white”>
✓
</div>
<div className=”font-medium”>{item}</div>
</div>
))}
</div>
</div>
</section>

{/* DELAYS */}
<section className=”bg-slate-900 py-28 text-white”>
<div className=”mx-auto max-w-7xl px-6 lg:px-12″>
<div className=”max-w-3xl”>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-white/60″>
Delayed Flight?
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-6xl”>
Don’t Worry — We Track Your Arrival
</h2>

<p className=”mt-8 text-lg leading-8 text-white/80″>
Flight delays happen. Our team monitors your arrival time and adjusts accordingly.
</p>
</div>

<div className=”mt-20 grid gap-6 md:grid-cols-3″>
{delayCards.map((card) => (
<div
key={card.title}
className=”rounded-[2rem] border border-white/10 bg-white/5 p-8 backdrop-blur”
>
<h3 className=”text-2xl font-semibold leading-snug”>
{card.title}
</h3>

<p className=”mt-5 leading-7 text-white/75″>
{card.text}
</p>
</div>
))}
</div>
</div>
</section>

{/* DROP OFF */}
<section className=”mx-auto grid max-w-7xl gap-16 px-6 py-28 lg:grid-cols-2 lg:px-12″>
<div className=”flex flex-col justify-center order-2 lg:order-1″>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-sky-700″>
Airport Drop-Off
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-5xl”>
Quick & Easy Vehicle Return
</h2>

<p className=”mt-8 text-lg leading-8 text-slate-600″>
Returning your vehicle is just as simple as collecting it.
</p>

<div className=”mt-10 space-y-5″>
{[
‘Drive to the George Cars airport return area’,
‘Meet our team representative’,
‘Hand over the keys and finalise return’,
‘Walk to departures within minutes’,
].map((item, index) => (
<div
key={item}
className=”flex gap-5 rounded-2xl bg-slate-50 p-6″
>
<div className=”flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white font-semibold”>
{index + 1}
</div>

<div className=”flex-1 pt-2 font-medium leading-7″>
{item}
</div>
</div>
))}
</div>

<div className=”mt-10 flex gap-10″>
<div>
<div className=”text-5xl font-bold text-slate-900″>50m</div>
<div className=”mt-2 text-slate-600″>From Airport Terminal</div>
</div>

<div>
<div className=”text-5xl font-bold text-slate-900″>2min</div>
<div className=”mt-2 text-slate-600″>Walking Distance</div>
</div>
</div>
</div>

<div className=”order-1 lg:order-2″>
<img
src=”https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1400&auto=format&fit=crop”
alt=”Vehicle return”
className=”h-full min-h-[550px] w-full rounded-[2rem] object-cover shadow-2xl”
/>
</div>
</section>

{/* BENEFITS */}
<section className=”bg-slate-50 py-28″>
<div className=”mx-auto max-w-7xl px-6 lg:px-12″>
<div className=”text-center max-w-3xl mx-auto”>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-sky-700″>
Included With Airport Delivery
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-5xl”>
Everything You Need for a Stress-Free Rental Experience
</h2>
</div>

<div className=”mt-20 grid gap-6 md:grid-cols-2 xl:grid-cols-3″>
{benefits.map((benefit) => (
<div
key={benefit}
className=”rounded-[2rem] bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:shadow-lg”
>
<div className=”flex h-14 w-14 items-center justify-center rounded-full bg-sky-700 text-2xl text-white”>
✓
</div>

<h3 className=”mt-6 text-2xl font-semibold”>
{benefit}
</h3>
</div>
))}
</div>
</div>
</section>

{/* TESTIMONIALS */}
<section className=”py-28″>
<div className=”mx-auto max-w-7xl px-6 lg:px-12″>
<div className=”max-w-3xl”>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-sky-700″>
Customer Reviews
</p>

<h2 className=”mt-5 text-4xl font-semibold leading-tight md:text-5xl”>
Trusted Airport Service by Travellers Worldwide
</h2>
</div>

<div className=”mt-20 grid gap-6 md:grid-cols-2″>
{[
‘As soon as we exited arrivals, the George Cars representative was already waiting for us. Extremely smooth experience.’,
‘Pickup and drop-off were effortless. No hidden fees and excellent communication throughout our holiday.’,
].map((quote, index) => (
<div
key={index}
className=”rounded-[2rem] bg-slate-50 p-10″
>
<div className=”text-5xl text-slate-300″>“</div>
<p className=”mt-6 text-xl leading-9 text-slate-700″>
{quote}
</p>
<div className=”mt-8 font-semibold text-slate-900″>
Verified Customer
</div>
</div>
))}
</div>
</div>
</section>

{/* CTA */}
<section className=”bg-slate-900 py-28 text-white relative overflow-hidden”>
<div className=”absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.12),transparent_40%)]” />

<div className=”relative mx-auto max-w-5xl px-6 text-center lg:px-12″>
<p className=”text-sm font-semibold uppercase tracking-[0.3em] text-white/60″>
Arrive With Confidence
</p>

<h2 className=”mt-5 text-5xl font-semibold leading-tight md:text-7xl”>
Start Your Rhodes Holiday the Easy Way
</h2>

<p className=”mx-auto mt-8 max-w-3xl text-lg leading-8 text-white/80″>
No waiting lines, no shuttle buses and no hidden surprises. Just smooth airport pickup and genuine local hospitality.
</p>

<div className=”mt-12 flex flex-wrap justify-center gap-5″>
<button className=”rounded-2xl bg-white px-8 py-4 text-sm font-semibold text-slate-900 transition hover:scale-105″>
Reserve Your Car
</button>

<button className=”rounded-2xl border border-white/20 bg-white/10 px-8 py-4 text-sm font-semibold backdrop-blur transition hover:bg-white/20″>
Contact Our Team
</button>
</div>
</div>

{/* FLOATING WHATSAPP */}
<div className=”fixed bottom-6 right-6 z-50″>
<button className=”rounded-full bg-green-500 px-6 py-4 text-sm font-semibold text-white shadow-2xl transition hover:scale-105″>
WhatsApp Support
</button>
</div>
</section>
</div>
);
}