<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AeroVista | Curated Travel Experiences</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    .step-active { border-color: #0284c7; color: #0284c7; font-weight: 600; }
    .step-completed { border-color: #10b981; color: #10b981; }
  </style>
</head>
<body class="bg-slate-50 text-slate-800 antialiased min-h-screen flex flex-col font-sans">

  <!-- NAVIGATION BAR -->
  <header class="bg-white border-b border-slate-200 sticky top-0 z-40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <div class="bg-sky-600 text-white p-2 rounded-xl">
          <i data-lucide="compass" class="w-6 h-6"></i>
        </div>
        <span class="text-xl font-bold tracking-tight text-slate-900">AeroVista<span class="text-sky-600">.</span></span>
      </div>
      <div class="flex items-center gap-6 text-sm">
        <span class="hidden sm:inline-flex items-center gap-2 text-slate-500">
          <i data-lucide="phone-call" class="w-4 h-4 text-sky-600"></i> +1 (800) 456-7890
        </span>
        <span class="px-3 py-1 bg-sky-50 text-sky-700 text-xs font-semibold rounded-full border border-sky-200">
          Guest Booking Portal
        </span>
      </div>
    </div>
  </header>

  <!-- MAIN CONTAINER -->
  <main class="flex-1 max-w-6xl w-full mx-auto px-4 py-8">

    <!-- STEP PROGRESS BAR -->
    <div class="mb-8">
      <nav aria-label="Progress">
        <ol id="progressBar" class="grid grid-cols-5 text-center text-xs sm:text-sm font-medium text-slate-400 border-b border-slate-200 pb-4">
          <li id="prog-1" class="step-active flex flex-col items-center gap-1">
            <span class="w-7 h-7 flex items-center justify-center rounded-full border-2 border-sky-600 bg-white">1</span>
            <span>Package</span>
          </li>
          <li id="prog-2" class="flex flex-col items-center gap-1">
            <span class="w-7 h-7 flex items-center justify-center rounded-full border-2 border-slate-300 bg-white">2</span>
            <span>Customize</span>
          </li>
          <li id="prog-3" class="flex flex-col items-center gap-1">
            <span class="w-7 h-7 flex items-center justify-center rounded-full border-2 border-slate-300 bg-white">3</span>
            <span>Traveler Info</span>
          </li>
          <li id="prog-4" class="flex flex-col items-center gap-1">
            <span class="w-7 h-7 flex items-center justify-center rounded-full border-2 border-slate-300 bg-white">4</span>
            <span>Payment</span>
          </li>
          <li id="prog-5" class="flex flex-col items-center gap-1">
            <span class="w-7 h-7 flex items-center justify-center rounded-full border-2 border-slate-300 bg-white">5</span>
            <span>Confirmation</span>
          </li>
        </ol>
      </nav>
    </div>

    <!-- STEP 1: SELECT PACKAGE -->
    <section id="step-1" class="booking-step">
      <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Choose Your Destination Package</h1>
        <p class="text-slate-500 text-sm">Select one of our all-inclusive curated holiday tours.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="packagesGrid">
        <!-- Bali Card -->
        <div class="package-card border-2 border-transparent bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer p-4 group" onclick="selectPackage('bali')">
          <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=600&q=80" alt="Bali" class="h-44 w-full object-cover rounded-xl mb-4 group-hover:scale-102 transition duration-300">
          <div class="flex justify-between items-start mb-2">
            <div>
              <span class="text-xs font-semibold px-2.5 py-0.5 bg-amber-100 text-amber-800 rounded-full">Tropical Escape</span>
              <h3 class="text-lg font-bold text-slate-900 mt-1">Bali & Nusa Penida</h3>
            </div>
            <div class="text-right">
              <span class="text-xs text-slate-400">From</span>
              <div class="text-lg font-bold text-sky-600">$850</div>
            </div>
          </div>
          <p class="text-xs text-slate-500 mb-4">6 Days • 5 Nights • Island Excursion & Resorts</p>
          <div class="border-t pt-3 flex justify-between items-center text-xs text-slate-500">
            <span class="flex items-center gap-1"><i data-lucide="star" class="w-3.5 h-3.5 text-amber-500 fill-amber-500"></i> 4.9 (124 reviews)</span>
            <span class="text-sky-600 font-semibold group-hover:underline">Select &rarr;</span>
          </div>
        </div>

        <!-- Swiss Card -->
        <div class="package-card border-2 border-transparent bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer p-4 group" onclick="selectPackage('swiss')">
          <img src="https://images.unsplash.com/photo-1530122037265-a5f1f91d3b99?auto=format&fit=crop&w=600&q=80" alt="Swiss" class="h-44 w-full object-cover rounded-xl mb-4 group-hover:scale-102 transition duration-300">
          <div class="flex justify-between items-start mb-2">
            <div>
              <span class="text-xs font-semibold px-2.5 py-0.5 bg-indigo-100 text-indigo-800 rounded-full">Alpine Adventure</span>
              <h3 class="text-lg font-bold text-slate-900 mt-1">Swiss Alps Express</h3>
            </div>
            <div class="text-right">
              <span class="text-xs text-slate-400">From</span>
              <div class="text-lg font-bold text-sky-600">$1,450</div>
            </div>
          </div>
          <p class="text-xs text-slate-500 mb-4">7 Days • 6 Nights • Scenic Trains & 4-Star Stays</p>
          <div class="border-t pt-3 flex justify-between items-center text-xs text-slate-500">
            <span class="flex items-center gap-1"><i data-lucide="star" class="w-3.5 h-3.5 text-amber-500 fill-amber-500"></i> 4.95 (88 reviews)</span>
            <span class="text-sky-600 font-semibold group-hover:underline">Select &rarr;</span>
          </div>
        </div>

        <!-- Kyoto Card -->
        <div class="package-card border-2 border-transparent bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition cursor-pointer p-4 group" onclick="selectPackage('kyoto')">
          <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=600&q=80" alt="Kyoto" class="h-44 w-full object-cover rounded-xl mb-4 group-hover:scale-102 transition duration-300">
          <div class="flex justify-between items-start mb-2">
            <div>
              <span class="text-xs font-semibold px-2.5 py-0.5 bg-rose-100 text-rose-800 rounded-full">Cultural Immersion</span>
              <h3 class="text-lg font-bold text-slate-900 mt-1">Kyoto & Tokyo Heritage</h3>
            </div>
            <div class="text-right">
              <span class="text-xs text-slate-400">From</span>
              <div class="text-lg font-bold text-sky-600">$1,200</div>
            </div>
          </div>
          <p class="text-xs text-slate-500 mb-4">8 Days • 7 Nights • Temples, Ryokan & Bullet Train</p>
          <div class="border-t pt-3 flex justify-between items-center text-xs text-slate-500">
            <span class="flex items-center gap-1"><i data-lucide="star" class="w-3.5 h-3.5 text-amber-500 fill-amber-500"></i> 4.88 (210 reviews)</span>
            <span class="text-sky-600 font-semibold group-hover:underline">Select &rarr;</span>
          </div>
        </div>
      </div>
    </section>

    <!-- STEP 2: CUSTOMIZE & DATES -->
    <section id="step-2" class="booking-step hidden">
      <div class="mb-6">
        <button onclick="goToStep(1)" class="text-xs text-sky-600 font-medium hover:underline flex items-center gap-1 mb-2">
          &larr; Change Package
        </button>
        <h1 class="text-2xl font-bold text-slate-900">Customize Dates & Guests</h1>
        <p class="text-slate-500 text-sm">Select when you'd like to travel and add extra activities.</p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-6">
          <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
            <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
              <i data-lucide="calendar" class="w-5 h-5 text-sky-600"></i> Travel Dates
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label class="block text-xs font-medium text-slate-600 mb-1">Departure Date</label>
                <input type="date" id="departureDate" class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-sky-500 outline-none" required />
              </div>
              <div>
                <label class="block text-xs font-medium text-slate-600 mb-1">Return Date</label>
                <input type="date" id="returnDate" class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-sky-500 outline-none" required />
              </div>
            </div>
          </div>

          <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
            <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
              <i data-lucide="users" class="w-5 h-5 text-sky-600"></i> Number of Guests
            </h3>
            <div class="flex items-center justify-between py-2 border-b">
              <div>
                <div class="font-semibold text-slate-800 text-sm">Adults</div>
                <div class="text-xs text-slate-500">Age 13+</div>
              </div>
              <div class="flex items-center gap-3">
                <button onclick="updateGuests('adults', -1)" class="w-8 h-8 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-100 flex items-center justify-center">-</button>
                <span id="adultCount" class="w-6 text-center font-bold">1</span>
                <button onclick="updateGuests('adults', 1)" class="w-8 h-8 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-100 flex items-center justify-center">+</button>
              </div>
            </div>
            <div class="flex items-center justify-between py-2 mt-2">
              <div>
                <div class="font-semibold text-slate-800 text-sm">Children</div>
                <div class="text-xs text-slate-500">Age 2-12 (50% off package)</div>
              </div>
              <div class="flex items-center gap-3">
                <button onclick="updateGuests('children', -1)" class="w-8 h-8 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-100 flex items-center justify-center">-</button>
                <span id="childCount" class="w-6 text-center font-bold">0</span>
                <button onclick="updateGuests('children', 1)" class="w-8 h-8 rounded-full border border-slate-300 text-slate-600 hover:bg-slate-100 flex items-center justify-center">+</button>
              </div>
            </div>
          </div>

          <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
            <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
              <i data-lucide="sparkles" class="w-5 h-5 text-sky-600"></i> Add-on Extras
            </h3>
            <div class="space-y-3">
              <label class="flex items-center justify-between p-3 border rounded-xl hover:bg-slate-50 cursor-pointer">
                <div class="flex items-center gap-3">
                  <input type="checkbox" id="addon-transfer" onchange="calculateTotal()" class="w-4 h-4 text-sky-600 rounded">
                  <div>
                    <div class="text-sm font-semibold">Airport VIP Chauffeur Transfer</div>
                    <div class="text-xs text-slate-500">Pick-up and drop-off included</div>
                  </div>
                </div>
                <span class="text-sm font-semibold text-slate-700">+$60</span>
              </label>

              <label class="flex items-center justify-between p-3 border rounded-xl hover:bg-slate-50 cursor-pointer">
                <div class="flex items-center gap-3">
                  <input type="checkbox" id="addon-insurance" onchange="calculateTotal()" class="w-4 h-4 text-sky-600 rounded">
                  <div>
                    <div class="text-sm font-semibold">Comprehensive Travel Insurance</div>
                    <div class="text-xs text-slate-500">Medical, baggage & cancellation cover</div>
                  </div>
                </div>
                <span class="text-sm font-semibold text-slate-700">+$45 / person</span>
              </label>
            </div>
          </div>

          <div class="flex justify-end">
            <button onclick="validateStep2()" class="px-6 py-3 bg-sky-600 text-white rounded-xl font-medium hover:bg-sky-700 transition">
              Proceed to Traveler Info &rarr;
            </button>
          </div>
        </div>

        <!-- Sidebar Summary -->
        <div class="space-y-4">
          <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200">
            <h4 class="font-bold text-sm text-slate-800 mb-3 border-b pb-2">Trip Summary</h4>
            <div id="summaryCard" class="text-sm space-y-2">
              <div class="font-bold text-sky-700" id="sumPkgName">-</div>
              <div class="text-xs text-slate-500" id="sumDates">Dates: Not selected</div>
              <div class="text-xs text-slate-500" id="sumGuests">Guests: 1 Adult</div>
              <hr class="my-2">
              <div class="flex justify-between font-bold text-base text-slate-900">
                <span>Estimated Total</span>
                <span id="sumTotal" class="text-sky-600">$0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- STEP 3: GUEST INFORMATION -->
    <section id="step-3" class="booking-step hidden">
      <div class="mb-6">
        <button onclick="goToStep(2)" class="text-xs text-sky-600 font-medium hover:underline flex items-center gap-1 mb-2">
          &larr; Back to Dates & Addons
        </button>
        <h1 class="text-2xl font-bold text-slate-900">Primary Guest & Contact Information</h1>
        <p class="text-slate-500 text-sm">We'll send your booking confirmation and e-tickets here.</p>
      </div>

      <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200 max-w-2xl">
        <form id="guestForm" onsubmit="event.preventDefault(); validateStep3();" class="space-y-4">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">First Name *</label>
              <input type="text" id="firstName" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="John">
            </div>
            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">Last Name *</label>
              <input type="text" id="lastName" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="Doe">
            </div>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">Email Address *</label>
              <input type="email" id="email" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="john.doe@example.com">
            </div>
            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">Phone Number *</label>
              <input type="tel" id="phone" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="+1 234 567 8900">
            </div>
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 mb-1">Passport / National ID Number *</label>
            <input type="text" id="passport" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="A12345678">
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-700 mb-1">Dietary or Special Requests</label>
            <textarea id="requests" rows="3" class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="Vegetarian, wheelchair assistance, anniversary surprise, etc."></textarea>
          </div>

          <div class="pt-4 flex justify-between items-center">
            <button type="button" onclick="goToStep(2)" class="text-sm font-medium text-slate-500 hover:text-slate-800">Back</button>
            <button type="submit" class="px-6 py-3 bg-sky-600 text-white rounded-xl font-medium hover:bg-sky-700 transition">Proceed to Payment &rarr;</button>
          </div>
        </form>
      </div>
    </section>

    <!-- STEP 4: REVIEW & PAYMENT -->
    <section id="step-4" class="booking-step hidden">
      <div class="mb-6">
        <button onclick="goToStep(3)" class="text-xs text-sky-600 font-medium hover:underline flex items-center gap-1 mb-2">
          &larr; Back to Guest Details
        </button>
        <h1 class="text-2xl font-bold text-slate-900">Review & Secure Payment</h1>
        <p class="text-slate-500 text-sm">Review your trip details and complete your reservation.</p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Payment details -->
        <div class="lg:col-span-2 bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-200">
          <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
            <i data-lucide="credit-card" class="w-5 h-5 text-sky-600"></i> Select Payment Method
          </h3>

          <div class="grid grid-cols-2 gap-3 mb-6">
            <button type="button" class="border-2 border-sky-600 bg-sky-50 text-sky-900 font-semibold p-3 rounded-xl flex items-center justify-center gap-2 text-sm">
              <i data-lucide="credit-card" class="w-4 h-4"></i> Credit / Debit Card
            </button>
            <button type="button" class="border border-slate-200 hover:bg-slate-50 text-slate-600 font-semibold p-3 rounded-xl flex items-center justify-center gap-2 text-sm">
              <i data-lucide="wallet" class="w-4 h-4"></i> Digital Wallet / PayPal
            </button>
          </div>

          <form id="paymentForm" onsubmit="event.preventDefault(); processBooking();" class="space-y-4">
            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">Cardholder Name</label>
              <input type="text" id="cardName" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="John Doe">
            </div>

            <div>
              <label class="block text-xs font-semibold text-slate-700 mb-1">Card Number</label>
              <input type="text" maxlength="19" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500" placeholder="4532 •••• •••• 8920">
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-xs font-semibold text-slate-700 mb-1">Expiry Date</label>
                <input type="text" maxlength="5" placeholder="MM/YY" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500">
              </div>
              <div>
                <label class="block text-xs font-semibold text-slate-700 mb-1">Security Code (CVV)</label>
                <input type="password" maxlength="4" placeholder="123" required class="w-full border border-slate-300 rounded-lg p-2.5 text-sm outline-none focus:ring-2 focus:ring-sky-500">
              </div>
            </div>

            <div class="pt-4">
              <button type="submit" id="payButton" class="w-full py-3.5 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition flex items-center justify-center gap-2">
                <i data-lucide="lock" class="w-4 h-4"></i> Confirm & Authorize Booking (<span id="payBtnAmount">$0</span>)
              </button>
              <p class="text-[11px] text-center text-slate-400 mt-2">256-bit SSL Encrypted • Free cancellation within 48 hours</p>
            </div>
          </form>
        </div>

        <!-- Final Breakdown -->
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 h-fit space-y-4">
          <h4 class="font-bold text-sm text-slate-900 border-b pb-2">Booking Summary</h4>
          <div class="space-y-2 text-xs">
            <div class="flex justify-between"><span class="text-slate-500">Selected Trip:</span> <span id="reviewPkg" class="font-semibold">-</span></div>
            <div class="flex justify-between"><span class="text-slate-500">Dates:</span> <span id="reviewDates" class="font-semibold">-</span></div>
            <div class="flex justify-between"><span class="text-slate-500">Travelers:</span> <span id="reviewPax" class="font-semibold">-</span></div>
            <div class="flex justify-between"><span class="text-slate-500">Lead Guest:</span> <span id="reviewLead" class="font-semibold">-</span></div>
          </div>
          <hr>
          <div class="space-y-1 text-xs">
            <div class="flex justify-between text-slate-500"><span>Base Fare</span><span id="breakdownBase">$0</span></div>
            <div class="flex justify-between text-slate-500"><span>Add-ons</span><span id="breakdownAddons">$0</span></div>
            <div class="flex justify-between text-slate-500"><span>Taxes & Fees</span><span id="breakdownTax">$0</span></div>
          </div>
          <hr>
          <div class="flex justify-between font-bold text-base text-slate-900">
            <span>Total Due</span>
            <span id="reviewTotal" class="text-emerald-600">$0</span>
          </div>
        </div>
      </div>
    </section>

    <!-- STEP 5: CONFIRMATION / E-VOUCHER -->
    <section id="step-5" class="booking-step hidden">
      <div class="max-w-2xl mx-auto bg-white rounded-3xl p-8 shadow-sm border border-slate-200 text-center">
        <div class="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
          <i data-lucide="check" class="w-8 h-8 stroke-[3]"></i>
        </div>
        <span class="text-xs font-bold tracking-wider text-emerald-600 uppercase">Reservation Confirmed</span>
        <h2 class="text-2xl font-black text-slate-900 mt-1">Pack your bags! You're going away!</h2>
        <p class="text-slate-500 text-sm mt-1">A confirmation email with e-tickets has been sent to <span id="confEmail" class="font-semibold text-slate-700"></span>.</p>

        <!-- Voucher Box -->
        <div class="bg-slate-50 border border-dashed border-slate-300 rounded-2xl p-5 my-6 text-left space-y-3">
          <div class="flex justify-between items-center border-b pb-3">
            <div>
              <span class="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Booking Reference</span>
              <div class="text-lg font-mono font-black text-sky-700" id="confRef">#AV-89321</div>
            </div>
            <span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 text-xs font-semibold rounded-full">Paid & Guaranteed</span>
          </div>

          <div class="grid grid-cols-2 gap-2 text-xs">
            <div><span class="text-slate-400 block">Destination</span><span class="font-semibold" id="confPkg">-</span></div>
            <div><span class="text-slate-400 block">Travel Dates</span><span class="font-semibold" id="confDates">-</span></div>
            <div><span class="text-slate-400 block">Lead Passenger</span><span class="font-semibold" id="confName">-</span></div>
            <div><span class="text-slate-400 block">Total Paid</span><span class="font-semibold text-emerald-600" id="confPaid">-</span></div>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-3 justify-center">
          <button onclick="window.print()" class="px-5 py-2.5 bg-slate-900 text-white rounded-xl text-sm font-semibold hover:bg-slate-800 flex items-center justify-center gap-2">
            <i data-lucide="printer" class="w-4 h-4"></i> Print Voucher
          </button>
          <button onclick="resetApp()" class="px-5 py-2.5 border border-slate-300 text-slate-700 rounded-xl text-sm font-semibold hover:bg-slate-100">
            Book Another Trip
          </button>
        </div>
      </div>
    </section>

  </main>

  <script>
    // Package Data Store
    const packages = {
      bali: { name: 'Bali & Nusa Penida Escape', basePrice: 850, days: 6 },
      swiss: { name: 'Swiss Alps Glacier Express', basePrice: 1450, days: 7 },
      kyoto: { name: 'Kyoto & Tokyo Heritage', basePrice: 1200, days: 8 }
    };

    // Booking State
    let booking = {
      packageKey: null,
      departureDate: '',
      returnDate: '',
      adults: 1,
      children: 0,
      transferAddon: false,
      insuranceAddon: false,
      leadGuest: { firstName: '', lastName: '', email: '', phone: '', passport: '', requests: '' },
      totalCost: 0
    };

    function selectPackage(pkgKey) {
      booking.packageKey = pkgKey;
      document.getElementById('sumPkgName').innerText = packages[pkgKey].name;
      
      // Auto-set suggested dates (tomorrow + package length)
      const today = new Date();
      const dep = new Date(today);
      dep.setDate(dep.getDate() + 14);
      const ret = new Date(dep);
      ret.setDate(ret.getDate() + packages[pkgKey].days);

      document.getElementById('departureDate').value = dep.toISOString().split('T')[0];
      document.getElementById('returnDate').value = ret.toISOString().split('T')[0];
      
      calculateTotal();
      goToStep(2);
    }

    function updateGuests(type, change) {
      if (type === 'adults') {
        booking.adults = Math.max(1, booking.adults + change);
        document.getElementById('adultCount').innerText = booking.adults;
      } else {
        booking.children = Math.max(0, booking.children + change);
        document.getElementById('childCount').innerText = booking.children;
      }
      calculateTotal();
    }

    function calculateTotal() {
      if (!booking.packageKey) return;
      const pkg = packages[booking.packageKey];
      
      booking.transferAddon = document.getElementById('addon-transfer')?.checked || false;
      booking.insuranceAddon = document.getElementById('addon-insurance')?.checked || false;

      // Adult pays 100%, child pays 50%
      const baseFare = (booking.adults * pkg.basePrice) + (booking.children * (pkg.basePrice * 0.5));
      
      let addons = 0;
      if (booking.transferAddon) addons += 60;
      if (booking.insuranceAddon) addons += 45 * (booking.adults + booking.children);

      const taxes = Math.round((baseFare + addons) * 0.08); // 8% local tourist taxes
      const total = baseFare + addons + taxes;
      booking.totalCost = total;

      // Update sidebar & summary widgets
      document.getElementById('sumGuests').innerText = `${booking.adults} Adult(s), ${booking.children} Child(ren)`;
      document.getElementById('sumTotal').innerText = `$${total.toLocaleString()}`;
      
      const dep = document.getElementById('departureDate').value;
      const ret = document.getElementById('returnDate').value;
      if (dep && ret) {
        document.getElementById('sumDates').innerText = `${dep} to ${ret}`;
      }

      // Breakdown in Step 4
      document.getElementById('breakdownBase').innerText = `$${baseFare.toLocaleString()}`;
      document.getElementById('breakdownAddons').innerText = `$${addons.toLocaleString()}`;
      document.getElementById('breakdownTax').innerText = `$${taxes.toLocaleString()}`;
      document.getElementById('reviewTotal').innerText = `$${total.toLocaleString()}`;
      document.getElementById('payBtnAmount').innerText = `$${total.toLocaleString()}`;
    }

    function validateStep2() {
      const dep = document.getElementById('departureDate').value;
      const ret = document.getElementById('returnDate').value;

      if (!dep || !ret) {
        alert('Please choose departure and return dates.');
        return;
      }
      if (new Date(dep) >= new Date(ret)) {
        alert('Return date must be after departure date.');
        return;
      }

      booking.departureDate = dep;
      booking.returnDate = ret;
      goToStep(3);
    }

    function validateStep3() {
      booking.leadGuest = {
        firstName: document.getElementById('firstName').value.trim(),
        lastName: document.getElementById('lastName').value.trim(),
        email: document.getElementById('email').value.trim(),
        phone: document.getElementById('phone').value.trim(),
        passport: document.getElementById('passport').value.trim(),
        requests: document.getElementById('requests').value.trim(),
      };

      // Populate review values in Step 4
      document.getElementById('reviewPkg').innerText = packages[booking.packageKey].name;
      document.getElementById('reviewDates').innerText = `${booking.departureDate} - ${booking.returnDate}`;
      document.getElementById('reviewPax').innerText = `${booking.adults} Adults, ${booking.children} Kids`;
      document.getElementById('reviewLead').innerText = `${booking.leadGuest.firstName} ${booking.leadGuest.lastName}`;

      goToStep(4);
    }

    function processBooking() {
      const btn = document.getElementById('payButton');
      btn.innerHTML = `<span class="animate-spin inline-block mr-2">&#8635;</span> Securing Booking...`;
      btn.disabled = true;

      setTimeout(() => {
        // Generate random reference code
        const ref = 'AV-' + Math.floor(100000 + Math.random() * 900000);
        document.getElementById('confRef').innerText = ref;
        document.getElementById('confEmail').innerText = booking.leadGuest.email;
        document.getElementById('confPkg').innerText = packages[booking.packageKey].name;
        document.getElementById('confDates').innerText = `${booking.departureDate} → ${booking.returnDate}`;
        document.getElementById('confName').innerText = `${booking.leadGuest.firstName} ${booking.leadGuest.lastName}`;
        document.getElementById('confPaid').innerText = `$${booking.totalCost.toLocaleString()}`;

        btn.disabled = false;
        btn.innerHTML = `<i data-lucide="lock" class="w-4 h-4"></i> Confirm & Authorize Booking`;
        goToStep(5);
      }, 1200);
    }

    function goToStep(stepNumber) {
      document.querySelectorAll('.booking-step').forEach(el => el.classList.add('hidden'));
      document.getElementById(`step-${stepNumber}`).classList.remove('hidden');

      // Update progress bar visuals
      for (let i = 1; i <= 5; i++) {
        const item = document.getElementById(`prog-${i}`);
        if (i < stepNumber) {
          item.className = 'step-completed flex flex-col items-center gap-1';
          item.querySelector('span').innerHTML = '✓';
        } else if (i === stepNumber) {
          item.className = 'step-active flex flex-col items-center gap-1';
          item.querySelector('span').innerText = i;
        } else {
          item.className = 'flex flex-col items-center gap-1 text-slate-400';
          item.querySelector('span').innerText = i;
        }
      }
      lucide.createIcons();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function resetApp() {
      booking.packageKey = null;
      document.getElementById('guestForm').reset();
      document.getElementById('paymentForm').reset();
      booking.adults = 1;
      booking.children = 0;
      document.getElementById('adultCount').innerText = '1';
      document.getElementById('childCount').innerText = '0';
      goToStep(1);
    }

    // Initialize Lucide icons on load
    window.addEventListener('DOMContentLoaded', () => {
      lucide.createIcons();
    });
  </script>
</body>
</html>