PAGE EXP

import { useMemo, useState } from “react”; import { Plane, Hotel, Package, MapPin, CalendarDays, Users, Star, ShieldCheck, MessageCircle, CreditCard, Search, Phone, Globe, CheckCircle2, Filter, Wallet, Clock3, BadgeCheck, Headphones, ChevronRight, Menu, X, Luggage, Building2, UserCircle2, Check, } from “lucide-react”; const flightResults = [ { id: 1, airline: “BELKO Preferred Air”, route: “New York (JFK) → Dubai (DXB)”, depart: “10:30 AM”, arrive: “7:45 AM”, duration: “13h 15m”, stops: “1 stop”, baggage: “1 checked bag included”, price: 1245, tag: “Best Value”, }, { id: 2, airline: “Global Atlantic”, route: “New York (JFK) → Paris (CDG)”, depart: “8:10 PM”, arrive: “9:25 AM”, duration: “7h 15m”, stops: “Nonstop”, baggage: “Cabin bag included”, price: 899, tag: “Popular”, }, { id: 3, airline: “Umrah Connect”, route: “New York (JFK) → Jeddah (JED)”, depart: “6:00 PM”, arrive: “4:30 PM”, duration: “16h 30m”, stops: “1 stop”, baggage: “2 bags included”, price: 1390, tag: “Umrah”, }, { id: 4, airline: “Africa Bridge”, route: “New York (JFK) → Bamako (BKO)”, depart: “9:20 PM”, arrive: “8:05 PM”, duration: “17h 45m”, stops: “1 stop”, baggage: “2 bags included”, price: 1485, tag: “Africa”, }, ]; const hotelResults = [ { id: 1, name: “Royal Palm Resort”, city: “Dubai Marina”, rating: 5, nights: 4, details: “Ocean view • Breakfast included • Airport pickup”, price: 310, image: “https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1200&q=80”, }, { id: 2, name: “Paris Central Suites”, city: “Paris City Center”, rating: 4, nights: 4, details: “Family friendly • Free Wi‑Fi • Near attractions”, price: 235, image: “https://images.unsplash.com/photo-1445019980597-93fa8acb246c?auto=format&fit=crop&w=1200&q=80”, }, { id: 3, name: “Al Noor Premium Stay”, city: “Makkah”, rating: 5, nights: 5, details: “Close to Haram • Shuttle service • Group options”, price: 280, image: “https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=1200&q=80”, }, ]; const packageResults = [ { id: 1, title: “Dubai Flight + Hotel”, badge: “Top Seller”, description: “Premium city package with airfare, hotel, and transfers.”, includes: [“Roundtrip flight”, “4-star hotel”, “Airport transfer”], price: 1899, }, { id: 2, title: “Paris Vacation Package”, badge: “Europe”, description: “Flights, central hotel, and sightseeing support.”, includes: [“Roundtrip flight”, “Central stay”, “Tour support”], price: 1499, }, { id: 3, title: “Umrah Premium Package”, badge: “Religious Travel”, description: “Flights, hotel, and guidance support for spiritual travel.”, includes: [“Flight options”, “Hotel near Haram”, “Group coordination”], price: 2290, }, ]; function Currency({ value }) { return ${value.toLocaleString()}; } export default function BelkoTravelWebsite() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [activePage, setActivePage] = useState(“home”); const [bookingTab, setBookingTab] = useState(“flights”); const [tripType, setTripType] = useState(“Round trip”); const [fromCity, setFromCity] = useState(“New York (NYC)”); const [toCity, setToCity] = useState(“Dubai (DXB)”); const [departDate, setDepartDate] = useState(“2026-05-12”); const [returnDate, setReturnDate] = useState(“2026-05-24”); const [travelers, setTravelers] = useState(“2 Travelers • Economy”); const [selectedFlight, setSelectedFlight] = useState(flightResults[0]); const [selectedHotel, setSelectedHotel] = useState(hotelResults[0]); const [selectedPackage, setSelectedPackage] = useState(packageResults[0]); const [paymentMethod, setPaymentMethod] = useState(“Card”); const [showResults, setShowResults] = useState(true); const navItems = [ [“home”, “Home”], [“search”, “Search”], [“packages”, “Packages”], [“checkout”, “Checkout”], [“dashboard”, “Dashboard”], [“wordpress”, “WordPress”], ]; const currentResults = useMemo(() => { if (bookingTab === “flights”) return flightResults; if (bookingTab === “hotels”) return hotelResults; return packageResults; }, [bookingTab]); const orderTotal = useMemo(() => { if (bookingTab === “flights”) return selectedFlight.price; if (bookingTab === “hotels”) return selectedHotel.price * selectedHotel.nights; return selectedPackage.price; }, [bookingTab, selectedFlight, selectedHotel, selectedPackage]); const Header = () => (

setActivePage(“home”)} className=”text-left”>

BELKO

Travel & Tours

setMobileMenuOpen((v) => !v)} > {mobileMenuOpen ? : }

{mobileMenuOpen && (

{navItems.map(([key, label]) => ( { setActivePage(key); setMobileMenuOpen(false); }} className={`rounded-2xl px-4 py-3 text-left text-sm font-semibold ${ activePage === key ? “bg-amber-400 text-slate-950” : “border border-white/10 text-white/80” }`} > {label} ))}

)}

); const HeroSearch = () => ( ); return ( ); }