﻿import React from 'react';
import { Head, useForm } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { Car, Compass, Plane, ShieldCheck, MapPin, Check } from 'lucide-react';

export default function Experiences() {
    const transferForm = useForm({
        guest_name: '',
        guest_phone: '',
        direction: 'Airport to Hotel',
        flight_number: '',
        airline: '',
        flight_time: '',
        passengers_count: 1,
        vehicle_type: 'Executive SUV',
        notes: '',
    });

    const handleTransferSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        transferForm.post('/experiences/request-transfer', {
            preserveScroll: true,
            onSuccess: () => transferForm.reset(),
        });
    };

    return (
        <PublicLayout>
            <Head title="Experiences & Airport Transfers — Primon Hotel Naalya" />

            <section className="relative py-28 bg-[#1A1A1A] text-[#FBF9F5] text-center border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Seamless Mobility
                    </span>
                    <h1 className="font-serif text-4xl sm:text-6xl font-light text-white">
                        Executive Transfers & Experiences
                    </h1>
                    <p className="text-sm sm:text-base text-gray-300 font-light max-w-2xl mx-auto leading-relaxed">
                        Chauffeur services between Entebbe International Airport (EBB) and Primon Hotel Mbuya, customized Kampala excursions, and diplomatic concierge support.
                    </p>
                </div>
            </section>

            <section className="py-20 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
                    {/* Fleet Overview */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div className="bg-[#F3EFEA] p-8 rounded-3xl border border-[#C5A880]/20 space-y-4 shadow-sm">
                            <div className="w-12 h-12 rounded-full bg-[#1A1A1A] text-[#C5A880] flex items-center justify-center">
                                <Plane className="h-6 w-6" />
                            </div>
                            <h3 className="font-serif text-2xl font-normal text-[#1A1A1A]">
                                Entebbe Airport Chauffeur
                            </h3>
                            <p className="text-xs text-gray-600 font-light leading-relaxed">
                                Avoid airport taxi negotiations. Our professional driver greets you in the arrivals hall with personalized signage, bottled mineral water, and complimentary WiFi.
                            </p>
                            <div className="text-xs font-semibold text-[#C5A880] pt-2">
                                $45 USD / One Way (Fixed Rate)
                            </div>
                        </div>

                        <div className="bg-[#F3EFEA] p-8 rounded-3xl border border-[#C5A880]/20 space-y-4 shadow-sm">
                            <div className="w-12 h-12 rounded-full bg-[#1A1A1A] text-[#C5A880] flex items-center justify-center">
                                <Car className="h-6 w-6" />
                            </div>
                            <h3 className="font-serif text-2xl font-normal text-[#1A1A1A]">
                                Daily City Executive Chauffeur
                            </h3>
                            <p className="text-xs text-gray-600 font-light leading-relaxed">
                                Dedicated luxury SUV and professional driver on standby for corporate meetings in Nakasero, diplomatic embassies, and industrial parks.
                            </p>
                            <div className="text-xs font-semibold text-[#C5A880] pt-2">
                                Half-Day & Full-Day Retainers
                            </div>
                        </div>

                        <div className="bg-[#F3EFEA] p-8 rounded-3xl border border-[#C5A880]/20 space-y-4 shadow-sm">
                            <div className="w-12 h-12 rounded-full bg-[#1A1A1A] text-[#C5A880] flex items-center justify-center">
                                <Compass className="h-6 w-6" />
                            </div>
                            <h3 className="font-serif text-2xl font-normal text-[#1A1A1A]">
                                Kampala Cultural Discovery
                            </h3>
                            <p className="text-xs text-gray-600 font-light leading-relaxed">
                                Private guided journeys to Uganda National Museum, Ndere Cultural Centre, Lake Victoria boat charters, and craft markets.
                            </p>
                            <div className="text-xs font-semibold text-[#C5A880] pt-2">
                                Bespoke Concierge Itineraries
                            </div>
                        </div>
                    </div>

                    {/* Booking Form */}
                    <div className="bg-[#1A1A1A] text-[#FBF9F5] rounded-3xl p-8 sm:p-12 border border-[#C5A880]/30 shadow-2xl space-y-8">
                        <div className="max-w-2xl space-y-2">
                            <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                                Reserve Chauffeur
                            </span>
                            <h3 className="font-serif text-3xl sm:text-4xl font-light text-white">
                                Schedule Airport Pickup or Transfer
                            </h3>
                        </div>

                        <form onSubmit={handleTransferSubmit} className="space-y-6">
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Guest Name
                                    </label>
                                    <input
                                        type="text"
                                        required
                                        value={transferForm.data.guest_name}
                                        onChange={(e) => transferForm.setData('guest_name', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Phone / WhatsApp Number
                                    </label>
                                    <input
                                        type="text"
                                        required
                                        value={transferForm.data.guest_phone}
                                        onChange={(e) => transferForm.setData('guest_phone', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Transfer Direction
                                    </label>
                                    <select
                                        value={transferForm.data.direction}
                                        onChange={(e) => transferForm.setData('direction', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    >
                                        <option value="Airport to Hotel" className="bg-[#1A1A1A]">Entebbe Airport (EBB) to Primon Hotel</option>
                                        <option value="Hotel to Airport" className="bg-[#1A1A1A]">Primon Hotel to Entebbe Airport (EBB)</option>
                                        <option value="City Chauffeur" className="bg-[#1A1A1A]">Kampala City Chauffeur Retainer</option>
                                    </select>
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Flight Number (if applicable)
                                    </label>
                                    <input
                                        type="text"
                                        placeholder="e.g. KQ 412 / QR 1383 / WB 434"
                                        value={transferForm.data.flight_number}
                                        onChange={(e) => transferForm.setData('flight_number', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Flight Date & Arrival / Departure Time
                                    </label>
                                    <input
                                        type="datetime-local"
                                        required
                                        value={transferForm.data.flight_time}
                                        onChange={(e) => transferForm.setData('flight_time', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Passengers Count
                                    </label>
                                    <input
                                        type="number"
                                        min={1}
                                        max={8}
                                        value={transferForm.data.passengers_count}
                                        onChange={(e) => transferForm.setData('passengers_count', parseInt(e.target.value))}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>
                            </div>

                            <button
                                type="submit"
                                disabled={transferForm.processing}
                                className="bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] px-10 py-3.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all shadow-xl"
                            >
                                Confirm Transfer Request ($45 USD)
                            </button>
                        </form>
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
