Complete source code and diagnostic data for debugging Date of Birth picker and Step 1 validation
{
"name": "site-builder-scaffold-scaffold",
"type": "module",
"version": "0.0.1",
"pnpm": {
"onlyBuiltDependencies": [
"@tailwindcss/oxide",
"esbuild",
"sharp"
]
},
"scripts": {
"dev": "astro dev",
"build": "astro build",
"build-dev": "BUILD_DEV=true astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/mdx": "4.3.7",
"@astrojs/react": "4.4.0",
"@astrojs/sitemap": "3.6.0",
"@hookform/resolvers": "5.2.2",
"@lucide/astro": "0.545.0",
"@radix-ui/react-accordion": "1.2.12",
"@radix-ui/react-alert-dialog": "1.1.15",
"@radix-ui/react-aspect-ratio": "1.1.7",
"@radix-ui/react-avatar": "1.1.10",
"@radix-ui/react-checkbox": "1.3.3",
"@radix-ui/react-collapsible": "1.1.12",
"@radix-ui/react-context-menu": "2.2.16",
"@radix-ui/react-dialog": "1.1.15",
"@radix-ui/react-dropdown-menu": "2.1.16",
"@radix-ui/react-hover-card": "1.1.15",
"@radix-ui/react-label": "2.1.7",
"@radix-ui/react-menubar": "1.1.16",
"@radix-ui/react-navigation-menu": "1.2.14",
"@radix-ui/react-popover": "1.1.15",
"@radix-ui/react-progress": "1.1.7",
"@radix-ui/react-radio-group": "1.3.8",
"@radix-ui/react-scroll-area": "1.2.10",
"@radix-ui/react-select": "2.2.6",
"@radix-ui/react-separator": "1.1.7",
"@radix-ui/react-slider": "1.3.6",
"@radix-ui/react-slot": "1.2.3",
"@radix-ui/react-switch": "1.2.6",
"@radix-ui/react-tabs": "1.1.13",
"@radix-ui/react-toggle": "1.1.10",
"@radix-ui/react-toggle-group": "1.1.11",
"@radix-ui/react-tooltip": "1.2.8",
"@supabase/supabase-js": "^2.49.1",
"@tailwindcss/vite": "4.1.14",
"@types/canvas-confetti": "1.9.0",
"astro": "5.14.3",
"canvas-confetti": "1.9.3",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"cmdk": "1.1.1",
"date-fns": "4.1.0",
"embla-carousel-react": "8.6.0",
"flatpickr": "^4.6.13",
"input-otp": "1.4.2",
"lucide-react": "0.545.0",
"next-themes": "0.4.6",
"react": "19.2.0",
"react-day-picker": "9.11.1",
"react-dom": "19.2.0",
"react-hook-form": "7.64.0",
"react-resizable-panels": "3.0.6",
"recharts": "2.15.4",
"sonner": "2.0.7",
"tailwind-merge": "3.3.1",
"tailwindcss": "4.1.14",
"tw-animate-css": "1.4.0",
"vaul": "1.1.2",
"zod": "4.1.12"
}
} ---
import 'flatpickr/dist/flatpickr.min.css';
interface Props {
tripName?: string;
tripPrice?: string;
travelDates?: string;
destination?: string;
operator?: string;
}
const {
tripName = 'Your Trip',
tripPrice = '',
travelDates = '',
destination = '',
operator = ''
} = Astro.props;
const FORM_ID = '2a3a2ee9-4155-4fc9-8f6c-fb41cf9f5564';
---
<section id="booking-form" class="scroll-mt-32 md:scroll-mt-36">
<div class="max-w-4xl mx-auto px-3 md:px-4">
<h2 class="text-3xl md:text-4xl font-bold mb-2">Complete Your Reservation</h2>
<p class="text-lg text-muted-foreground mb-8">
Complete this booking to secure your place on this exclusive FlyDani trip.
{tripPrice && <span class="font-semibold text-primary">({tripPrice})</span>}
</p>
<div class="bg-accent/10 border border-accent/20 p-6 rounded-lg mb-8">
<p class="text-sm text-muted-foreground">
<strong>Complete your traveler details below.</strong> We'll review your booking request and confirm availability, pricing, and next steps before payment is finalized.
</p>
</div>
<!-- Progress Indicator - Desktop: Full Stepper -->
<div class="mb-8 hidden md:flex items-center justify-between px-4" data-step-indicator="desktop">
<div class="flex items-center w-full gap-1 md:gap-3">
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-primary text-white font-bold flex items-center justify-center text-xs md:text-sm step-indicator shadow-sm" data-step="0">1</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Primary<br/>Traveler</p>
</div>
<div class="h-0.5 bg-border flex-1"></div>
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-xs md:text-sm step-indicator" data-step="1">2</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Passport</p>
</div>
<div class="h-0.5 bg-border flex-1"></div>
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-xs md:text-sm step-indicator" data-step="2">3</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Additional<br/>Travelers</p>
</div>
<div class="h-0.5 bg-border flex-1"></div>
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-xs md:text-sm step-indicator" data-step="3">4</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Review</p>
</div>
<div class="h-0.5 bg-border flex-1"></div>
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-xs md:text-sm step-indicator" data-step="4">5</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Add-ons</p>
</div>
<div class="h-0.5 bg-border flex-1"></div>
<div class="flex flex-col items-center flex-1">
<div class="w-9 h-9 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-xs md:text-sm step-indicator" data-step="5">6</div>
<p class="text-xs font-medium mt-1.5 text-center leading-tight">Checkout</p>
</div>
</div>
</div>
<!-- Progress Indicator - Mobile: Simple Step Counter + Progress Bar -->
<div class="mb-6 md:hidden sticky top-0 bg-background z-40 py-3 -mx-4 px-4 border-b border-border" data-step-indicator="mobile">
<div class="flex items-center justify-between mb-2 gap-2">
<p class="text-xs font-semibold text-foreground flex-shrink-0">
<span class="step-counter-current">Step 1</span> of <span class="step-counter-total">6</span>
</p>
<p class="text-xs text-muted-foreground font-medium step-counter-label truncate">Primary Traveler</p>
</div>
<div class="w-full h-1.5 bg-border rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full step-progress-bar transition-all duration-300" style="width: 16.67%;"></div>
</div>
</div>
<form data-form-id={FORM_ID} class="space-y-6 md:space-y-8 pb-24 md:pb-0">
<!-- STEP 1: PRIMARY TRAVELER -->
<fieldset data-step="0" class="space-y-6 md:space-y-8 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-2 md:mb-3">
<h3 class="text-xl md:text-2xl font-bold">Step 1: Primary Traveler Information</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Please provide your personal details and contact information.</p>
</div>
<!-- SECTION 1: PERSONAL DETAILS -->
<div>
<h4 class="text-sm md:text-base font-semibold text-foreground mb-1">Personal Details</h4>
<p class="text-xs text-muted-foreground mb-4">Your legal name and basic information</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
<!-- First Name -->
<div>
<label for="legalFirstName" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Legal First Name <span class="text-red-500">*</span>
</label>
<input
type="text"
id="legalFirstName"
name="primary_first_name"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Middle Name -->
<div>
<label for="primary_middle_name" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Middle Name <span class="text-xs text-muted-foreground">(optional)</span>
</label>
<input
type="text"
id="primary_middle_name"
name="primary_middle_name"
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Last Name -->
<div>
<label for="legalLastName" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Legal Last Name <span class="text-red-500">*</span>
</label>
<input
type="text"
id="legalLastName"
name="primary_last_name"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Gender -->
<div>
<label for="gender" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Gender <span class="text-red-500">*</span>
</label>
<select
id="gender"
name="primary_gender"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Non-binary">Non-binary</option>
<option value="Prefer not to say">Prefer not to say</option>
</select>
</div>
<!-- Date of Birth -->
<div class="md:col-span-2">
<label for="dateOfBirth" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Date of Birth <span class="text-red-500">*</span>
</label>
<input
type="text"
id="dateOfBirth"
name="primary_dob"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
placeholder="Select your date of birth"
/>
<!-- Date of Birth Error Message -->
<div id="dateOfBirth_error" class="mt-2 text-xs text-red-600 hidden">
Please select a valid date of birth.
</div>
</div>
<!-- Country of Birth -->
<div>
<label for="countryOfBirth" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Country of Birth <span class="text-red-500">*</span>
</label>
<select
id="countryOfBirth"
name="primary_country_birth"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Ivory Coast">Ivory Coast</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- SECTION 2: CONTACT DETAILS -->
<div>
<h4 class="text-sm md:text-base font-semibold text-foreground mb-1">Contact Details</h4>
<p class="text-xs text-muted-foreground mb-4">How we'll reach you about your reservation</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
<!-- Country of Residence -->
<div>
<label for="countryOfResidence" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Country of Residence <span class="text-red-500">*</span>
</label>
<select
id="countryOfResidence"
name="primary_country_residence"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Ivory Coast">Ivory Coast</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<!-- Email -->
<div>
<label for="email" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Email <span class="text-red-500">*</span>
</label>
<input
type="email"
id="email"
name="primary_email"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Phone -->
<div>
<label for="phone" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Phone Number <span class="text-red-500">*</span>
</label>
<input
type="tel"
id="phone"
name="primary_phone"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
</div>
</div>
<!-- SECTION 3: HOME ADDRESS -->
<div>
<h4 class="text-sm md:text-base font-semibold text-foreground mb-1">Home Address</h4>
<p class="text-xs text-muted-foreground mb-4">Your residential address</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
<!-- Street Address - Full Width -->
<div class="md:col-span-2">
<label for="streetAddress" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Street Address <span class="text-red-500">*</span>
</label>
<input
type="text"
id="streetAddress"
name="primary_address"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- City -->
<div>
<label for="city" class="block text-xs md:text-sm font-medium text-foreground mb-2">
City <span class="text-red-500">*</span>
</label>
<input
type="text"
id="city"
name="primary_city"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Province/State -->
<div>
<label for="provinceState" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Province / State <span class="text-red-500">*</span>
</label>
<select
id="provinceState"
name="primary_province_state"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select province or state</option>
<optgroup label="Canada">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</optgroup>
<optgroup label="United States">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</optgroup>
</select>
</div>
<!-- Postal Code -->
<div>
<label for="postalCode" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Postal / ZIP Code <span class="text-red-500">*</span>
</label>
<input
type="text"
id="postalCode"
name="primary_postal_code"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Country -->
<div>
<label for="addressCountry" class="block text-xs md:text-sm font-medium text-foreground mb-2">
Country <span class="text-red-500">*</span>
</label>
<select
id="addressCountry"
name="primary_country"
required
class="w-full px-4 py-2 md:py-2.5 rounded-md border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select country</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Ivory Coast">Ivory Coast</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex gap-3 pt-6 md:pt-8 border-t border-border md:flex-row flex-col-reverse md:justify-end">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back min-h-12 md:min-h-auto"
data-step="0"
disabled
style="display: none;"
>
Back
</button>
<button
id="step1-continue-passport"
type="button"
class="px-6 py-3 md:py-3 bg-gray-300 text-gray-600 font-bold rounded-lg min-h-12 md:min-h-auto flex-1 md:flex-none transition-colors hover:bg-gray-400"
style="cursor: pointer; pointer-events: auto;"
>
Continue to Passport
</button>
</div>
<!-- Step 1 Error Message -->
<div id="step1-error-message" class="mt-4 text-sm font-semibold text-center text-red-600 hidden">
Please complete:
</div>
<!-- Step 1 Debug Status (hidden from production view) -->
<div id="step1-debug" class="mt-2 text-xs text-center text-muted-foreground hidden">
Visible required fields found: 0 | Filled: 0
</div>
</fieldset>
<!-- STEP 2: PASSPORT DETAILS -->
<fieldset data-step="1" hidden class="space-y-6 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-4 md:mb-6">
<h3 class="text-xl md:text-2xl font-bold">Step 2: Passport Information</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Please provide your passport details for international travel.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
<!-- Passport Number -->
<div>
<label for="primary_passport_number" class="block text-sm font-semibold text-foreground mb-2">
Passport Number <span class="text-accent">*</span>
</label>
<input
type="text"
id="primary_passport_number"
name="primary_passport_number"
required
placeholder="AB123456789"
class="w-full px-4 py-2.5 md:py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
<!-- Passport Country -->
<div>
<label for="primary_passport_country" class="block text-sm font-semibold text-foreground mb-2">
Country of Issue <span class="text-accent">*</span>
</label>
<select
id="primary_passport_country"
name="primary_passport_country"
required
class="w-full px-4 py-2.5 md:py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
>
<option value="">Select country</option>
</select>
</div>
<!-- Issue Date -->
<div>
<label for="primary_passport_issue_date" class="block text-sm font-semibold text-foreground mb-2">
Issue Date (MM/DD/YYYY) <span class="text-accent">*</span>
</label>
<input
type="text"
id="primary_passport_issue_date"
name="primary_passport_issue_date"
required
placeholder="03/15/2020"
class="w-full px-4 py-2.5 md:py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
<div id="primary_passport_issue_date_error" class="mt-2 text-xs text-red-600 hidden"></div>
</div>
<!-- Expiry Date -->
<div>
<label for="primary_passport_expiry_date" class="block text-sm font-semibold text-foreground mb-2">
Expiry Date (MM/DD/YYYY) <span class="text-accent">*</span>
</label>
<input
type="text"
id="primary_passport_expiry_date"
name="primary_passport_expiry_date"
required
placeholder="03/15/2030"
class="w-full px-4 py-2.5 md:py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
<div id="primary_passport_expiry_date_error" class="mt-2 text-xs text-red-600 hidden"></div>
</div>
<!-- Nationality -->
<div class="md:col-span-2">
<label for="primary_nationality" class="block text-sm font-semibold text-foreground mb-2">
Nationality <span class="text-accent">*</span>
</label>
<input
type="text"
id="primary_nationality"
name="primary_nationality"
required
placeholder="Canadian"
class="w-full px-4 py-2.5 md:py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent min-h-10 md:min-h-auto"
/>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex gap-3 pt-6 border-t border-border md:flex-row flex-col-reverse md:justify-between">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="1"
>
Back
</button>
<button
type="button"
class="px-6 py-3 md:py-3 font-bold rounded-lg transition-colors step-nav-next min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="1"
disabled
>
Continue to Travelers
</button>
</div>
</fieldset>
<!-- STEP 3: ADDITIONAL TRAVELERS -->
<fieldset data-step="2" hidden class="space-y-6 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-4 md:mb-6">
<h3 class="text-xl md:text-2xl font-bold">Step 3: Additional Travelers</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Add information for any additional travelers in your group.</p>
</div>
<!-- Number of Travelers Input -->
<div class="bg-accent/10 border border-accent/20 p-6 rounded-lg">
<label for="number_of_travelers" class="block text-sm font-semibold text-foreground mb-2">
Total Number of Travelers (including yourself) <span class="text-accent">*</span>
</label>
<input
type="number"
id="number_of_travelers"
name="number_of_travelers"
required
min="1"
value="1"
placeholder="1"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
<p class="text-xs text-muted-foreground mt-2">
You will be able to add traveler details below.
</p>
</div>
<!-- Additional Travelers Container -->
<div id="additional-travelers-container" class="space-y-8">
<!-- Travelers will be dynamically added here -->
</div>
<!-- Hidden field for additional travelers data (JSON) -->
<input
type="hidden"
id="additional_travelers_json"
name="additional_travelers_json"
value="[]"
/>
<!-- Navigation Buttons -->
<div class="flex gap-3 pt-6 border-t border-border md:flex-row flex-col-reverse md:justify-between">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="2"
>
Back
</button>
<button
type="button"
class="px-6 py-3 md:py-3 font-bold rounded-lg transition-colors step-nav-next min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="2"
disabled
>
Continue to Review
</button>
</div>
</fieldset>
<!-- STEP 4: REVIEW BOOKING -->
<fieldset data-step="3" hidden class="space-y-6 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-4 md:mb-6">
<h3 class="text-xl md:text-2xl font-bold">Step 4: Review Your Booking</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Please review your information before proceeding to payment.</p>
</div>
<!-- Trip Details -->
<div class="bg-accent/10 border border-accent/20 p-6 rounded-lg">
<h4 class="font-semibold mb-4">Trip Details</h4>
<div class="space-y-3">
{tripName && <div><span class="text-muted-foreground">Trip:</span> <span class="font-semibold">{tripName}</span></div>}
{travelDates && <div><span class="text-muted-foreground">Dates:</span> <span class="font-semibold">{travelDates}</span></div>}
{destination && <div><span class="text-muted-foreground">Destination:</span> <span class="font-semibold">{destination}</span></div>}
{operator && <div><span class="text-muted-foreground">Operator:</span> <span class="font-semibold">{operator}</span></div>}
{tripPrice && <div><span class="text-muted-foreground">Price per Person:</span> <span class="font-semibold text-primary">{tripPrice}</span></div>}
</div>
</div>
<!-- Summary Sections (will be populated by JavaScript) -->
<div id="review-primary-section" class="border border-border rounded-lg p-6"></div>
<div id="review-passport-section" class="border border-border rounded-lg p-6"></div>
<div id="review-travelers-section" class="border border-border rounded-lg p-6"></div>
<!-- Navigation Buttons -->
<div class="flex gap-3 pt-6 border-t border-border md:flex-row flex-col-reverse md:justify-between">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="3"
>
Back
</button>
<button
type="button"
class="px-6 py-3 md:py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors step-nav-next min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="3"
>
Continue to Add-ons
</button>
</div>
</fieldset>
<!-- STEP 5: ADD-ONS -->
<fieldset data-step="4" hidden class="space-y-6 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-4 md:mb-6">
<h3 class="text-xl md:text-2xl font-bold">Step 5: Add Optional Enhancements</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Enhance your trip with optional add-ons and protection.</p>
</div>
<div id="addons-container" class="space-y-4">
<!-- Add-on options will be populated here -->
<div class="border border-border rounded-lg p-4">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="addon_travel_insurance" value="travel_insurance" class="w-5 h-5 rounded border-border cursor-pointer flex-shrink-0" />
<div class="flex-1">
<div class="font-semibold text-sm md:text-base">Travel Insurance</div>
<p class="text-xs md:text-sm text-muted-foreground">Trip cancellation, medical, and baggage coverage</p>
</div>
<div class="text-accent font-semibold">+$149</div>
</label>
</div>
<div class="border border-border rounded-lg p-4">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="addon_cancellation" value="cancellation_protection" class="w-4 h-4 rounded border-border" />
<div class="flex-1">
<div class="font-semibold">Flexible Cancellation Protection</div>
<p class="text-sm text-muted-foreground">Cancel or modify up to 14 days before departure</p>
</div>
<div class="text-accent font-semibold">+$79</div>
</label>
</div>
<div class="border border-border rounded-lg p-4">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="addon_airport_transfer" value="airport_transfer" class="w-4 h-4 rounded border-border" />
<div class="flex-1">
<div class="font-semibold">Airport Transfer Upgrade</div>
<p class="text-sm text-muted-foreground">Round-trip transportation from airport to resort</p>
</div>
<div class="text-accent font-semibold">+$125</div>
</label>
</div>
<div class="border border-border rounded-lg p-4">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="addon_room_upgrade" value="room_upgrade" class="w-4 h-4 rounded border-border" />
<div class="flex-1">
<div class="font-semibold">Room Upgrade Request</div>
<p class="text-sm text-muted-foreground">Priority upgrade request (subject to availability)</p>
</div>
<div class="text-accent font-semibold">+$199</div>
</label>
</div>
<div class="border border-border rounded-lg p-4">
<label class="flex items-center gap-3 cursor-pointer">
<input type="checkbox" name="addon_excursion" value="excursion_package" class="w-4 h-4 rounded border-border" />
<div class="flex-1">
<div class="font-semibold">Excursion Package</div>
<p class="text-sm text-muted-foreground">Local activities and guided experiences</p>
</div>
<div class="text-accent font-semibold">+$289</div>
</label>
</div>
</div>
<!-- Hidden field for selected add-ons -->
<input
type="hidden"
id="selected_addons"
name="selected_addons"
value=""
/>
<!-- Add-ons Total -->
<div class="bg-accent/10 border border-accent/20 p-6 rounded-lg">
<div class="flex justify-between items-center">
<span class="font-semibold">Add-ons Total:</span>
<span class="text-2xl font-bold text-primary" id="addons-total">$0</span>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex gap-3 pt-6 border-t border-border md:flex-row flex-col-reverse md:justify-between">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="4"
>
Back
</button>
<button
type="button"
class="px-6 py-3 md:py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors step-nav-next min-h-12 md:min-h-auto md:flex-none flex-1"
data-step="4"
>
Proceed to Checkout
</button>
</div>
</fieldset>
<!-- STEP 6: CHECKOUT -->
<fieldset data-step="5" hidden class="space-y-6 step-fieldset">
<div class="border-b border-border pb-3 md:pb-4 mb-4 md:mb-6">
<h3 class="text-xl md:text-2xl font-bold">Step 6: Secure Checkout</h3>
<p class="text-xs md:text-sm text-muted-foreground mt-1 md:mt-2">Complete your booking with a secure payment.</p>
</div>
<!-- Pricing Summary -->
<div class="space-y-4">
<div class="border border-border rounded-lg p-6 space-y-3">
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">Base Price (per person):</span>
<span class="font-semibold" id="checkout-price-per-person">—</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">Number of Travelers:</span>
<span class="font-semibold" id="checkout-travelers-count">—</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">Subtotal:</span>
<span class="font-semibold" id="checkout-subtotal">—</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-muted-foreground">Add-ons:</span>
<span class="font-semibold" id="checkout-addons-total">$0</span>
</div>
<div class="border-t border-border pt-3 flex justify-between">
<span class="font-bold text-lg">Estimated Total:</span>
<span class="text-2xl font-bold text-primary" id="checkout-total">—</span>
</div>
</div>
</div>
<!-- Hidden fields for summary data -->
<input type="hidden" id="trip_name" name="trip_name" value={tripName} />
<input type="hidden" id="travel_dates" name="travel_dates" value={travelDates} />
<input type="hidden" id="total_price" name="total_price" value="" />
<!-- Payment Methods -->
<div class="space-y-4">
<h4 class="font-semibold">Select Payment Method</h4>
<div class="space-y-3">
<label class="flex items-center gap-3 border border-border rounded-lg p-4 cursor-pointer hover:bg-muted transition-colors">
<input type="radio" name="payment_method" value="stripe_card" required class="w-5 h-5 cursor-pointer flex-shrink-0" />
<div class="flex-1">
<div class="font-semibold text-sm md:text-base">Credit/Debit Card</div>
<p class="text-xs md:text-sm text-muted-foreground">Visa, Mastercard, American Express (via Stripe)</p>
</div>
</label>
<label class="flex items-center gap-3 border border-border rounded-lg p-4 cursor-pointer hover:bg-muted transition-colors">
<input type="radio" name="payment_method" value="paypal" class="w-4 h-4" />
<div class="flex-1">
<div class="font-semibold">PayPal</div>
<p class="text-sm text-muted-foreground">Fast and secure PayPal payment</p>
</div>
</label>
</div>
</div>
<!-- Terms & Conditions -->
<div class="space-y-3">
<label class="flex items-start gap-3">
<input
type="checkbox"
id="accept_terms"
name="accept_terms"
required
class="w-5 h-5 mt-0.5 rounded border-border cursor-pointer flex-shrink-0"
/>
<span class="text-sm text-muted-foreground">
I agree to FlyDani's <a href="/terms" class="text-primary hover:underline">terms and conditions</a> and <a href="/privacy" class="text-primary hover:underline">privacy policy</a>
</span>
</label>
</div>
<!-- Special Requests (optional) -->
<div>
<label for="special_requests" class="block text-sm font-semibold text-foreground mb-2">
Special Requests or Notes
</label>
<textarea
id="special_requests"
name="special_requests"
rows="4"
placeholder="Anniversary celebrations, accessibility needs, dietary restrictions, etc. (optional)"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
></textarea>
</div>
<!-- Submit Button -->
<div class="pt-4 space-y-3">
<button
type="submit"
class="w-full px-6 py-3 md:py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors cursor-pointer min-h-12 md:min-h-auto"
>
Complete Booking
</button>
<p class="text-xs text-muted-foreground text-center">
Your payment information is processed securely through our trusted payment partners. We never store card details on our servers.
</p>
</div>
<!-- Back Button (different styling for last step) -->
<div class="flex gap-3 pt-6 border-t border-border">
<button
type="button"
class="px-6 py-3 md:py-3 border border-border rounded-lg font-semibold hover:bg-muted transition-colors step-nav-back flex-1 min-h-12 md:min-h-auto"
data-step="5"
>
Back to Add-ons
</button>
</div>
</fieldset>
</form>
<!-- Success Message -->
<div id={`b12-form-done-${FORM_ID}`} hidden class="mt-8 p-6 bg-green-50 border border-green-200 rounded-lg text-center">
<svg class="w-12 h-12 text-green-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<h3 class="text-xl font-bold text-green-900 mb-2">Booking Submitted!</h3>
<p class="text-green-800 mb-4">
Thank you for booking your FlyDani trip. We've received your booking information and will contact you soon with confirmation details.
</p>
<p class="text-sm text-green-700">
Check your email for updates on your reservation.
</p>
</div>
<!-- Error Message -->
<div id={`b12-form-error-${FORM_ID}`} hidden class="mt-8 p-6 bg-red-50 border border-red-200 rounded-lg text-center">
<svg class="w-12 h-12 text-red-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4v.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-xl font-bold text-red-900 mb-2">Something Went Wrong</h3>
<p class="text-red-800">
We encountered an issue processing your booking. Please try again or contact our support team if the problem persists.
</p>
</div>
</div>
</section>
<script>
import flatpickr from 'flatpickr';
// Multi-step form navigation
const form = document.querySelector('form[data-form-id]') as HTMLFormElement | null;
if (!form) {
console.error('[BookingForm] Form not found');
} else {
console.log('[BookingForm] Form initialized');
}
const fieldsets = form?.querySelectorAll('fieldset[data-step]');
const nextButtons = form?.querySelectorAll('button[type="button"].step-nav-next');
const backButtons = form?.querySelectorAll('button[type="button"].step-nav-back');
let currentStep = 0;
let isInitialStepRender = true;
function updateStep(step) {
console.log('[updateStep] Transitioning to step:', step, '(fieldset data-step="' + step + '")');
// Hide all fieldsets
fieldsets?.forEach((fieldset) => {
if (fieldset.getAttribute('data-step') === String(step)) {
fieldset.hidden = false;
console.log('[updateStep] Showing fieldset data-step="' + step + '"');
} else {
fieldset.hidden = true;
}
});
// Update desktop progress indicator
document.querySelectorAll('.step-indicator').forEach((indicator) => {
const indicatorStep = parseInt(indicator.getAttribute('data-step') || '0');
if (indicatorStep === step) {
indicator.className = 'w-10 h-10 rounded-full bg-primary text-white font-bold flex items-center justify-center text-sm md:text-base step-indicator';
} else if (indicatorStep < step) {
indicator.className = 'w-10 h-10 rounded-full bg-green-500 text-white font-bold flex items-center justify-center text-sm md:text-base step-indicator';
} else {
indicator.className = 'w-10 h-10 rounded-full bg-border text-foreground font-bold flex items-center justify-center text-sm md:text-base step-indicator';
}
});
// Update desktop progress lines
const lines = form?.querySelectorAll('[data-step-indicator="desktop"] .h-1');
lines?.forEach((line) => {
if (line.parentElement?.querySelectorAll('.h-1').length) {
const index = Array.from(line.parentElement.querySelectorAll('.h-1')).indexOf(line);
if (index < step) {
line.className = 'h-1 bg-green-500 flex-1';
} else {
line.className = 'h-1 bg-border flex-1';
}
}
});
// Update mobile progress bar
const mobileProgressBar = form?.querySelector('[data-step-indicator="mobile"] .step-progress-bar');
if (mobileProgressBar) {
const percentage = ((step + 1) / 6) * 100;
mobileProgressBar.style.width = percentage + '%';
}
// Update mobile step counter and label
const stepLabels = ['Primary Traveler', 'Passport', 'Additional Travelers', 'Review', 'Add-ons', 'Checkout'];
const stepCounter = form?.querySelector('[data-step-indicator="mobile"] .step-counter-current');
const stepLabel = form?.querySelector('[data-step-indicator="mobile"] .step-counter-label');
if (stepCounter) {
stepCounter.textContent = `Step ${step + 1}`;
}
if (stepLabel) {
stepLabel.textContent = stepLabels[step] || '';
}
currentStep = step;
console.log('[updateStep] currentStep is now:', currentStep);
console.log('[updateStep] About to call updateButtonStates() after step change');
// Scroll to current fieldset with mobile-friendly offset (skip on initial render)
if (!isInitialStepRender) {
setTimeout(() => {
const currentFieldset = form?.querySelector(`fieldset[data-step="${step}"]`);
if (currentFieldset) {
currentFieldset.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 50);
}
isInitialStepRender = false;
}
// Country list for dropdowns
const countries = [
'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan',
'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia',
'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria', 'Burkina Faso', 'Burundi',
'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Comoros', 'Congo', 'Costa Rica', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic',
'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic',
'East Timor', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia',
'Fiji', 'Finland', 'France',
'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Greece', 'Grenada', 'Guatemala', 'Guinea', 'Guinea-Bissau', 'Guyana',
'Haiti', 'Honduras', 'Hungary',
'Iceland', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Ivory Coast',
'Jamaica', 'Japan', 'Jordan',
'Kazakhstan', 'Kenya', 'Kiribati', 'Kuwait', 'Kyrgyzstan',
'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg',
'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Mauritania', 'Mauritius', 'Mexico', 'Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montenegro', 'Morocco', 'Mozambique', 'Myanmar',
'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'North Korea', 'North Macedonia', 'Norway',
'Oman',
'Pakistan', 'Palau', 'Palestine', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Poland', 'Portugal',
'Qatar',
'Romania', 'Russia', 'Rwanda',
'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Korea', 'South Sudan', 'Spain', 'Sri Lanka', 'Sudan', 'Suriname', 'Sweden', 'Switzerland', 'Syria',
'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Tuvalu',
'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan',
'Vanuatu', 'Vatican City', 'Venezuela', 'Vietnam',
'Yemen',
'Zambia', 'Zimbabwe'
];
// Populate country selects - primary_country is pre-populated in HTML, primary_passport_country needs JS
const primaryPassportCountrySelect = document.getElementById('primary_passport_country') as HTMLSelectElement;
if (primaryPassportCountrySelect) {
countries.forEach((country) => {
const option = document.createElement('option');
option.value = country;
option.textContent = country;
primaryPassportCountrySelect.appendChild(option);
});
}
// ===== FLATPICKR DATE OF BIRTH PICKER - INITIALIZATION =====
function initDateOfBirthPicker() {
const dateOfBirthInput = document.getElementById('dateOfBirth') as HTMLInputElement;
const dateOfBirthError = document.getElementById('dateOfBirth_error') as HTMLElement;
if (!dateOfBirthInput || !dateOfBirthError) {
console.error('[Flatpickr] Date of Birth input or error element not found');
return;
}
console.log('[Flatpickr] Initializing Date of Birth picker', { inputId: dateOfBirthInput.id, inputName: dateOfBirthInput.name });
// Check if already initialized
if (dateOfBirthInput._flatpickr) {
console.log('[Flatpickr] Date of Birth already initialized, skipping');
return;
}
// Calculate max date as yesterday (exclude today and future dates)
const today = new Date();
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
// Initialize Flatpickr
const fp = flatpickr(dateOfBirthInput, {
mode: 'single',
dateFormat: 'Y-m-d',
altFormat: 'F j, Y',
altInput: true,
minDate: '1920-01-01',
maxDate: yesterday,
disableMobile: true,
allowInput: true,
clickOpens: true,
static: false,
onChange: (selectedDates: Date[], dateStr: string) => {
console.log('[Flatpickr] onChange fired', { dateStr, selectedDates: selectedDates.length });
if (selectedDates.length > 0) {
dateOfBirthInput.value = dateStr;
dateOfBirthError.classList.add('hidden');
dateOfBirthInput.dispatchEvent(new Event('input', { bubbles: true }));
dateOfBirthInput.dispatchEvent(new Event('change', { bubbles: true }));
console.log('[Flatpickr] After onChange, input value:', dateOfBirthInput.value);
}
},
onClose: () => {
console.log('[Flatpickr] onClose fired, input value:', dateOfBirthInput.value);
if (!dateOfBirthInput.value) {
dateOfBirthError.textContent = 'Please select your date of birth.';
dateOfBirthError.classList.remove('hidden');
}
}
});
console.log('[Flatpickr] Picker initialized successfully');
}
// ===== STEP 1 VALIDATION - DIRECT ID CHECK =====
const step1FieldIds = {
legalFirstName: 'Legal First Name',
legalLastName: 'Legal Last Name',
gender: 'Gender',
dateOfBirth: 'Date of Birth',
countryOfBirth: 'Country of Birth',
countryOfResidence: 'Country of Residence',
email: 'Email',
phone: 'Phone Number',
streetAddress: 'Street Address',
city: 'City',
provinceState: 'Province / State',
postalCode: 'Postal / ZIP Code',
addressCountry: 'Country'
};
let step1Button: HTMLButtonElement | null = null;
let step1ErrorMsg: HTMLElement | null = null;
let step1DebugLine: HTMLElement | null = null;
function getStep1FieldValue(fieldId: string): string {
const el = document.getElementById(fieldId) as HTMLInputElement | HTMLSelectElement | null;
return el ? (el.value || '').toString().trim() : '';
}
function getStep1Status() {
const missingFields: string[] = [];
let filledCount = 0;
const totalRequired = Object.keys(step1FieldIds).length;
Object.entries(step1FieldIds).forEach(([id, label]) => {
const value = getStep1FieldValue(id);
console.log(`[Step1Validation] ${label} (${id}): "${value}" [${value ? 'FILLED' : 'EMPTY'}]`);
if (value) {
filledCount++;
} else {
missingFields.push(label);
}
});
const isValid = filledCount === totalRequired;
console.log(`[Step1Validation] Total: ${filledCount}/${totalRequired} filled | Valid: ${isValid}`);
if (!isValid) {
console.log(`[Step1Validation] Missing fields:`, missingFields);
}
return { totalRequired, filledCount, isValid, missingFields };
}
function updateStep1VisualState() {
if (!step1Button || !step1ErrorMsg || !step1DebugLine) return;
const { isValid, missingFields } = getStep1Status();
if (isValid) {
step1Button.className = 'px-6 py-3 md:py-3 bg-primary text-white font-bold rounded-lg min-h-12 md:min-h-auto flex-1 md:flex-none transition-colors hover:bg-primary/90';
step1Button.style.cursor = 'pointer';
step1Button.style.pointerEvents = 'auto';
step1Button.removeAttribute('disabled');
step1DebugLine.textContent = 'Step 1 complete';
} else {
step1Button.className = 'px-6 py-3 md:py-3 bg-gray-300 text-gray-600 font-bold rounded-lg min-h-12 md:min-h-auto flex-1 md:flex-none transition-colors cursor-not-allowed';
step1Button.style.cursor = 'not-allowed';
step1Button.style.pointerEvents = 'auto';
step1Button.setAttribute('disabled', '');
step1DebugLine.textContent = `Missing: ${missingFields.join(', ')}`;
}
}
function initStep1Validation() {
step1Button = document.getElementById('step1-continue-passport') as HTMLButtonElement;
step1ErrorMsg = document.getElementById('step1-error-message') as HTMLElement;
step1DebugLine = document.getElementById('step1-debug') as HTMLElement;
if (!step1Button || !step1ErrorMsg || !step1DebugLine) {
console.error('Step 1 elements not found', { step1Button, step1ErrorMsg, step1DebugLine });
return;
}
// Check if any of the required field IDs exist
const fieldIdsExist = Object.keys(step1FieldIds).some(id => !!document.getElementById(id));
if (!fieldIdsExist) {
step1DebugLine.textContent = 'Error: Step 1 field IDs not found';
console.error('Error: Step 1 field IDs not found');
return;
}
// Attach listeners to update visual state on field change
Object.keys(step1FieldIds).forEach(fieldId => {
const el = document.getElementById(fieldId);
if (el) {
el.addEventListener('input', updateStep1VisualState);
el.addEventListener('change', updateStep1VisualState);
el.addEventListener('blur', updateStep1VisualState);
el.addEventListener('keyup', updateStep1VisualState);
}
});
// Initialize visual state
updateStep1VisualState();
// Handle Step 1 button click - validation happens HERE
step1Button.addEventListener('click', (e) => {
e.preventDefault();
// Don't proceed if button is disabled
if (step1Button.hasAttribute('disabled') || step1Button.disabled) {
return;
}
const { isValid, missingFields } = getStep1Status();
if (isValid) {
step1ErrorMsg!.classList.add('hidden');
updateStep(1);
updateButtonStates();
} else {
step1ErrorMsg!.textContent = `Please complete: ${missingFields.join(', ')}`;
step1ErrorMsg!.classList.remove('hidden');
// Scroll to first missing field and focus it
const firstMissingId = Object.keys(step1FieldIds).find(id => !getStep1FieldValue(id));
if (firstMissingId) {
const el = document.getElementById(firstMissingId);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.focus();
}
}
}
});
}
// Idempotent initialization
function initializeBookingForm() {
if (!form || form.dataset.initialized === 'true') return;
form.dataset.initialized = 'true';
console.log('[BookingForm] Initializing booking form');
initDateOfBirthPicker();
initStep1Validation();
}
// Initialize on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeBookingForm);
} else {
initializeBookingForm();
}
// Support Astro client-side page transitions
document.addEventListener('astro:page-load', initializeBookingForm);
// Validate other steps using the general approach
function validateCurrentStep(): boolean {
if (currentStep === 0) {
const { isValid } = getStep1Status();
return isValid;
}
if (currentStep === 1) {
// Step 2: Passport validation
return validateStep2Passport();
}
const currentFieldset = form.querySelector(`fieldset[data-step="${currentStep}"]`) as HTMLFieldSetElement;
if (!currentFieldset) return false;
const requiredInputs = currentFieldset.querySelectorAll('[required]');
let hasEmptyFields = false;
requiredInputs.forEach((input) => {
const inputElement = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
const value = (inputElement.value || '').toString().trim();
if (!value) {
hasEmptyFields = true;
}
});
return !hasEmptyFields;
}
// Validation for Step 2: Passport Information
function validateStep2Passport(): boolean {
const passportNumber = document.getElementById('primary_passport_number') as HTMLInputElement;
const passportCountry = document.getElementById('primary_passport_country') as HTMLSelectElement;
const issueDate = document.getElementById('primary_passport_issue_date') as HTMLInputElement;
const expiryDate = document.getElementById('primary_passport_expiry_date') as HTMLInputElement;
const nationality = document.getElementById('primary_nationality') as HTMLInputElement;
const issueDateError = document.getElementById('primary_passport_issue_date_error') as HTMLElement;
const expiryDateError = document.getElementById('primary_passport_expiry_date_error') as HTMLElement;
let isValid = true;
// DIAGNOSTIC: Log initial field values
console.log('');
console.log('=== [Step2Validation] START ===');
console.log('[Step2] Passport Number - ID found:', !!passportNumber, 'Value:', passportNumber?.value?.trim() || '(empty)', 'Valid:', !!(passportNumber?.value?.trim()));
console.log('[Step2] Country - ID found:', !!passportCountry, 'Value:', passportCountry?.value?.trim() || '(empty)', 'Valid:', !!(passportCountry?.value?.trim()));
console.log('[Step2] Nationality - ID found:', !!nationality, 'Value:', nationality?.value?.trim() || '(empty)', 'Valid:', !!(nationality?.value?.trim()));
console.log('[Step2] Issue Date - ID found:', !!issueDate, 'Value:', issueDate?.value?.trim() || '(empty)');
console.log('[Step2] Expiry Date - ID found:', !!expiryDate, 'Value:', expiryDate?.value?.trim() || '(empty)');
// Check all required fields are filled
if (!passportNumber?.value?.trim() || !passportCountry?.value?.trim() || !nationality?.value?.trim()) {
console.log('[Step2 Validation] Failed basic field check (empty passport, country, or nationality)');
isValid = false;
}
// Validate Issue Date
if (!issueDate?.value?.trim()) {
console.log('[Step2 Validation] Issue Date is empty');
isValid = false;
if (issueDateError) {
issueDateError.textContent = 'Issue Date is required.';
issueDateError.classList.remove('hidden');
}
} else {
const issueDateStr = issueDate.value.trim();
const issueDateObj = parseDate(issueDateStr);
console.log('[Step2 Validation] Issue Date string:', issueDateStr, 'Parsed:', issueDateObj);
if (!issueDateObj) {
console.log('[Step2 Validation] Issue Date failed to parse');
isValid = false;
if (issueDateError) {
issueDateError.textContent = 'Enter the date as MM/DD/YYYY.';
issueDateError.classList.remove('hidden');
}
} else if (issueDateObj > new Date()) {
console.log('[Step2 Validation] Issue Date is in the future');
isValid = false;
if (issueDateError) {
issueDateError.textContent = 'The Issue Date cannot be in the future.';
issueDateError.classList.remove('hidden');
}
} else {
console.log('[Step2 Validation] Issue Date is valid');
if (issueDateError) {
issueDateError.classList.add('hidden');
}
}
}
// Validate Expiry Date
if (!expiryDate?.value?.trim()) {
console.log('[Step2 Validation] Expiry Date is empty');
isValid = false;
if (expiryDateError) {
expiryDateError.textContent = 'Expiry Date is required.';
expiryDateError.classList.remove('hidden');
}
} else {
const expiryDateStr = expiryDate.value.trim();
const expiryDateObj = parseDate(expiryDateStr);
console.log('[Step2 Validation] Expiry Date string:', expiryDateStr, 'Parsed:', expiryDateObj);
if (!expiryDateObj) {
console.log('[Step2 Validation] Expiry Date failed to parse');
isValid = false;
if (expiryDateError) {
expiryDateError.textContent = 'Enter the date as MM/DD/YYYY.';
expiryDateError.classList.remove('hidden');
}
} else if (issueDate?.value?.trim()) {
const issueDateObj = parseDate(issueDate.value.trim());
console.log('[Step2 Validation] Comparing dates - Issue:', issueDateObj, 'Expiry:', expiryDateObj);
if (issueDateObj && expiryDateObj <= issueDateObj) {
console.log('[Step2 Validation] Expiry Date is not after Issue Date');
isValid = false;
if (expiryDateError) {
expiryDateError.textContent = 'The Expiry Date must be later than the Issue Date.';
expiryDateError.classList.remove('hidden');
}
} else {
console.log('[Step2 Validation] Expiry Date is valid');
if (expiryDateError) {
expiryDateError.classList.add('hidden');
}
}
} else {
console.log('[Step2 Validation] No Issue Date for comparison');
if (expiryDateError) {
expiryDateError.classList.add('hidden');
}
}
}
console.log('[Step2] FINAL VALIDATION RESULT:', isValid);
console.log('=== [Step2Validation] END ===');
console.log('');
return isValid;
}
// Helper function to parse MM/DD/YYYY format
function parseDate(dateStr: string): Date | null {
const match = dateStr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
if (!match) return null;
const month = parseInt(match[1], 10);
const day = parseInt(match[2], 10);
const year = parseInt(match[3], 10);
if (month < 1 || month > 12 || day < 1 || day > 31) {
return null;
}
const date = new Date(year, month - 1, day);
if (date.getMonth() !== month - 1 || date.getDate() !== day) {
return null;
}
return date;
}
// Auto-format date input for 8 digits to MM/DD/YYYY
function formatDateInput(inputElement: HTMLInputElement) {
let value = inputElement.value.replace(/\D/g, '');
if (value.length > 8) {
value = value.substring(0, 8);
}
if (value.length === 8) {
const mm = value.substring(0, 2);
const dd = value.substring(2, 4);
const yyyy = value.substring(4, 8);
inputElement.value = `${mm}/${dd}/${yyyy}`;
} else if (value.length >= 5) {
const mm = value.substring(0, 2);
const dd = value.substring(2, 4);
const yyyy = value.substring(4);
inputElement.value = `${mm}/${dd}/${yyyy}`;
} else if (value.length >= 3) {
const mm = value.substring(0, 2);
const dd = value.substring(2);
inputElement.value = `${mm}/${dd}`;
} else if (value.length > 0) {
inputElement.value = value;
}
}
// For Step 1, allow validateCurrentStep() to call getStep1Status()
// This is safe since getStep1Status is defined in initStep1Validation scope
// and validateCurrentStep is called after initialization
// Update all button states
function updateButtonStates() {
console.log('[updateButtonStates] Called, currentStep:', currentStep);
console.log('[updateButtonStates] Total nextButtons found:', nextButtons.length);
if (currentStep > 0) {
nextButtons.forEach((button, idx) => {
const stepNum = parseInt(button.getAttribute('data-step') || '0');
const buttonText = button.textContent?.trim();
console.log(`[updateButtonStates] Button ${idx}: text="${buttonText}", stepNum=${stepNum}, currentStep=${currentStep}, match=${stepNum === currentStep}`);
console.log(`[updateButtonStates] Button ${idx} disabled BEFORE:`, button.disabled, 'classes:', button.className.substring(0, 50));
if (stepNum === currentStep) {
const isStepValid = validateCurrentStep();
console.log(`[updateButtonStates] Button ${idx} (${buttonText}) validation result:`, isStepValid);
button.disabled = !isStepValid;
if (isStepValid) {
button.className = 'px-6 py-3 md:py-3 bg-primary text-white font-bold rounded-lg transition-colors step-nav-next min-h-12 md:min-h-auto flex-1 md:flex-none';
console.log(`[updateButtonStates] Button ${idx} set to ENABLED (blue)`);
} else {
button.className = 'px-6 py-3 md:py-3 bg-gray-300 text-gray-600 font-bold rounded-lg transition-colors step-nav-next min-h-12 md:min-h-auto flex-1 md:flex-none cursor-not-allowed';
console.log(`[updateButtonStates] Button ${idx} set to DISABLED (gray)`);
}
console.log(`[updateButtonStates] Button ${idx} disabled AFTER:`, button.disabled);
}
});
}
}
// Set up date input formatting and validation for Step 2 Passport dates
const issueDateInput = document.getElementById('primary_passport_issue_date') as HTMLInputElement;
const expiryDateInput = document.getElementById('primary_passport_expiry_date') as HTMLInputElement;
if (issueDateInput) {
issueDateInput.addEventListener('input', () => {
formatDateInput(issueDateInput);
updateButtonStates();
});
issueDateInput.addEventListener('change', () => {
updateButtonStates();
});
}
if (expiryDateInput) {
expiryDateInput.addEventListener('input', () => {
formatDateInput(expiryDateInput);
updateButtonStates();
});
expiryDateInput.addEventListener('change', () => {
updateButtonStates();
});
}
// Also update all button states on general form changes
form.addEventListener('change', updateButtonStates);
// Button click handlers
nextButtons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault();
const isValid = validateCurrentStep();
if (isValid) {
updateStep(currentStep + 1);
updateButtonStates();
}
});
});
backButtons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault();
updateStep(currentStep - 1);
updateButtonStates();
});
});
// Handle number of travelers change
const travelerCountInput = document.getElementById('number_of_travelers') as HTMLInputElement;
const container = document.getElementById('additional-travelers-container') as HTMLElement;
function updateTravelerFields() {
const count = parseInt(travelerCountInput.value) || 1;
const currentFields = container.querySelectorAll('[data-traveler-index]');
const currentCount = currentFields.length;
if (count > currentCount) {
for (let i = currentCount; i < count - 1; i++) {
const travelerDiv = createTravelerFields(i + 1);
container.appendChild(travelerDiv);
}
} else if (count < currentCount) {
for (let i = currentCount - 1; i >= count - 1; i--) {
const field = container.querySelector(`[data-traveler-index="${i}"]`);
if (field) field.remove();
}
}
}
function createTravelerFields(index: number) {
const div = document.createElement('div');
div.setAttribute('data-traveler-index', String(index));
div.className = 'border border-border rounded-lg p-6 space-y-6';
div.innerHTML = `
<div class="flex justify-between items-center mb-6 pb-6 border-b border-border">
<h4 class="font-bold text-lg">Traveler ${index + 1}</h4>
<button type="button" class="px-3 py-2 text-sm border border-red-300 text-red-600 rounded hover:bg-red-50 transition-colors remove-traveler">
Remove
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Legal First Name <span class="text-accent">*</span>
</label>
<input
type="text"
name="traveler_${index}_first_name"
required
placeholder="First name"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Middle Name
</label>
<input
type="text"
name="traveler_${index}_middle_name"
placeholder="Middle name"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Legal Last Name <span class="text-accent">*</span>
</label>
<input
type="text"
name="traveler_${index}_last_name"
required
placeholder="Last name"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Gender <span class="text-accent">*</span>
</label>
<select
name="traveler_${index}_gender"
required
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
>
<option value="">Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Non-binary">Non-binary</option>
<option value="Prefer not to say">Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Date of Birth (MM/DD/YYYY) <span class="text-accent">*</span>
</label>
<input
type="text"
name="traveler_${index}_dob"
required
placeholder="MM/DD/YYYY"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Country of Birth <span class="text-accent">*</span>
</label>
<select
name="traveler_${index}_country_birth"
required
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
>
<option value="">Select country</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-semibold text-foreground mb-2">
Passport Number <span class="text-accent">*</span>
</label>
<input
type="text"
name="traveler_${index}_passport_number"
required
placeholder="Passport number"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Passport Country of Issue <span class="text-accent">*</span>
</label>
<select
name="traveler_${index}_passport_country"
required
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
>
<option value="">Select country</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-foreground mb-2">
Passport Expiry Date (MM/DD/YYYY) <span class="text-accent">*</span>
</label>
<input
type="text"
name="traveler_${index}_passport_expiry"
required
placeholder="MM/DD/YYYY"
class="w-full px-4 py-3 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
</div>
`;
const removeBtn = div.querySelector('.remove-traveler') as HTMLButtonElement;
removeBtn.addEventListener('click', (e) => {
e.preventDefault();
div.remove();
updateTravelerFields();
});
// Populate country selects for this traveler
const countrySelects = div.querySelectorAll('select[name*="country"]');
countrySelects.forEach((select) => {
const selectElement = select as HTMLSelectElement;
countries.forEach((country) => {
const option = document.createElement('option');
option.value = country;
option.textContent = country;
selectElement.appendChild(option);
});
});
return div;
}
travelerCountInput.addEventListener('change', updateTravelerFields);
// Handle add-ons selection
const addonCheckboxes = form.querySelectorAll('input[name^="addon_"]');
const addonsData = {
travel_insurance: 149,
cancellation_protection: 79,
airport_transfer: 125,
room_upgrade: 199,
excursion_package: 289
};
function updateAddonsTotal() {
let total = 0;
const selected: string[] = [];
addonCheckboxes.forEach((checkbox) => {
const input = checkbox as HTMLInputElement;
if (input.checked) {
const value = input.value as keyof typeof addonsData;
total += addonsData[value] || 0;
selected.push(value);
}
});
document.getElementById('addons-total')!.textContent = `$${total}`;
document.getElementById('selected_addons')!.value = selected.join(',');
document.getElementById('checkout-addons-total')!.textContent = `$${total}`;
}
addonCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('change', updateAddonsTotal);
});
// Initialize first step
updateStep(0);
</script>
---
import BaseLayout from '../../layouts/BaseLayout.astro';
import SectionWrapper from '../../components/SectionWrapper.astro';
import CTAButton from '../../components/CTAButton.astro';
import Card from '../../components/Card.astro';
import JoinPoolModal from '../../components/JoinPoolModal.tsx';
import MultiStepBookingForm from '../../components/MultiStepBookingForm.astro';
import StickyBookingButton from '../../components/StickyBookingButton.astro';
import TripActionBar from '../../components/TripActionBar.astro';
import QuickBookingCTA from '../../components/QuickBookingCTA.astro';
export const tripData = {
'punta-cana-escape': { name: 'Dreams Flora Resort & Spa', destination: 'Punta Cana', country: 'Dominican Republic', resort: 'Dreams Flora Resort & Spa', dates: 'November 12–19, 2026', price: '$1,699/person', retailPrice: 2599, operatorName: 'Air Transat', activationCloseDate: 'July 31, 2026', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/6e059ec9-5d89-11f1-8c1b-0242ac110002-A6beFslk4jwvDJyrof99O.jpg', description: 'Experience luxury at Dreams Flora Resort & Spa, a premium all-inclusive destination featuring tropical gardens, world-class amenities, and Caribbean hospitality in beautiful Punta Cana.', resortPreviewUrl: 'https://www.transat.com/en-CA/hotels/dreams-flora-resort-spa', supplierType: 'Air Transat', highlights: ['Unlimited premium dining & bars', 'All-inclusive beverages', 'Nightly entertainment & shows', 'Beach access & water sports', 'Full-service spa & wellness', 'Multiple pools', 'Kids club available', 'Airport transfers included'], currentTravelers: 0, activationThreshold: 20, isActivated: false, maxCapacity: 50 },
'cancun-adults-only': { name: 'Cancun Adults Only', destination: 'Cancun', country: 'Mexico', resort: 'Temptation Caribbean Resort', dates: 'July 10–14, 2026', price: '$1,050/person', retailPrice: 1650, operatorName: 'WestJet Vacations', resortPreviewUrl: 'https://www.westjet.com/en-ca/vacations/temptation-caribbean-resort', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/6e16e8bd-5d89-11f1-8024-0242ac110002-rT9pOFcaqYDqrO0_egfub.jpg', description: '4-night luxury adults-only all-inclusive', highlights: ['Adults-only escape', 'Premium dining', 'Beach access', 'Nightly entertainment', 'Airport transfers'], currentTravelers: 52, activationThreshold: 20, isActivated: true, maxCapacity: 80 },
'jamaica-luxury-week': { name: 'Jamaica Luxury Week', destination: 'Montego Bay', country: 'Jamaica', resort: 'Montego Bay Premium', dates: 'September 18–25, 2026', price: '$1,299/person', retailPrice: 2099, operatorName: 'Air Canada Vacations', resortPreviewUrl: 'https://www.aircanadavacations.com/resorts/jamaica/montego-bay', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/6dfafe38-5d89-11f1-89fc-0242ac110002-5FKxDbBJG4P6dDnhnKNY_.jpg', description: '7-night premium all-inclusive resort with unlimited activities and beachfront access', highlights: ['Premium dining', 'Beachfront location', 'Water sports included', 'Nightly entertainment', 'Full-service spa'], currentTravelers: 16, activationThreshold: 20, isActivated: false, maxCapacity: 60 },
'bahamas-nassau': { name: 'Bahamas Paradise', destination: 'Nassau', country: 'Bahamas', resort: 'Paradise Island Resort', dates: 'August 8–13, 2026', price: '$975/person', retailPrice: 1675, operatorName: 'Sunwing Vacations', resortPreviewUrl: 'https://www.sunwingvacations.com/resorts/bahamas/paradise-island', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/6e1a8f7f-5d89-11f1-93e6-0242ac110002-vCackLeLsRHTIVqKV0TGP.jpg', description: '6-night all-inclusive Caribbean escape with world-class amenities', highlights: ['All-inclusive resort', 'Beach access', 'Water sports', 'Nightly entertainment', 'Multiple restaurants'], currentTravelers: 11, activationThreshold: 18, isActivated: false, maxCapacity: 55 },
'mystery-trip': { name: 'Mystery Luxury Escape', destination: 'Mystery Destination', country: '', resort: 'Premium Resort', dates: 'To Be Announced', price: '$799/person', retailPrice: 1399, operatorName: 'Air Transat', resortPreviewUrl: 'https://www.flydani.com', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/d6bac84d-5d93-11f1-94bc-0242ac110002-v_YF8QxeIA67OIbNJKzCZ.jpg', description: 'Hidden luxury Caribbean destination - Surprise luxury all-inclusive destination - reveal after booking', highlights: ['Luxury resort', 'Mystery destination', 'Premium amenities', 'Exclusive savings', 'Full control over reveal'], currentTravelers: 8, activationThreshold: 15, isActivated: false, maxCapacity: 40 },
'riu-palace-aquarelle': { name: 'Riu Palace Aquarelle', destination: 'Montego Bay', country: 'Jamaica', resort: 'Riu Palace Aquarelle', dates: 'October 24–31, 2026', price: '$1,399/person', retailPrice: 2799, operatorName: 'Sunwing Vacations', resortPreviewUrl: 'https://www.sunwingvacations.com/resorts/jamaica/riu-palace-aquarelle', heroImage: 'https://cdn.b12.io/client_media/OntuOF0i/6e0f2bf1-5d89-11f1-8f64-0242ac110002-wH7EqXCLyZtPEs7M_3hu-.jpg', description: 'Luxury beachfront all-inclusive resort in Montego Bay featuring modern junior suites, multiple restaurants, premium drinks, pools, entertainment, and direct beach access.', highlights: ['Beachfront location', 'Modern junior suites', 'Multiple restaurants', 'Premium drinks', 'Direct beach access'], currentTravelers: 5, activationThreshold: 12, isActivated: false, maxCapacity: 50 }
};
export function getStaticPaths() {
return Object.keys(tripData).map((slug) => ({
params: { slug }
}));
}
const { slug } = Astro.params;
const destinationData = tripData[slug] || tripData['punta-cana-escape'];
---
<BaseLayout
title={`${destinationData.name} - FlyDani Travel Deals`}
description={`Book ${destinationData.name} at an exclusive FlyDani negotiated rate.`}
>
<!-- Premium Hero Section -->
<SectionWrapper id="destination-hero" class="relative py-0 overflow-hidden">
<div class="relative min-h-[500px] md:min-h-[620px] overflow-hidden rounded-b-3xl">
<img
src={destinationData.heroImage}
alt={destinationData.name}
class="absolute inset-0 w-full h-full object-cover"
loading="eager"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/35 to-black/10"></div>
<div class="relative z-10 min-h-[500px] md:min-h-[620px] flex items-end">
<div class="w-full px-6 py-10 md:px-12 md:py-14">
<div class="max-w-3xl">
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1.5 text-sm font-semibold text-white backdrop-blur-sm border border-white/20">
Exclusive FlyDani Experience
</span>
{slug === 'mystery-trip' ? (
<span class="inline-flex items-center rounded-full bg-accent/90 px-3 py-1.5 text-sm font-semibold text-white">
Mystery Escape
</span>
) : (
<span class="inline-flex items-center rounded-full bg-white/15 px-3 py-1.5 text-sm font-semibold text-white backdrop-blur-sm border border-white/20">
{destinationData.destination}, {destinationData.country}
</span>
)}
</div>
<h1 class="text-4xl md:text-6xl font-bold text-white leading-tight mb-4">
{destinationData.name}
</h1>
<p class="text-lg md:text-xl text-white/90 max-w-2xl mb-7">
{slug === 'mystery-trip'
? 'A hand-selected Caribbean all-inclusive escape with the destination reveal controlled by you.'
: destinationData.description}
</p>
<div class="flex flex-wrap gap-x-6 gap-y-3 text-sm md:text-base text-white/90">
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>All-inclusive experience</span>
</div>
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
/>
</svg>
<span>Transparent FlyDani pricing</span>
</div>
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>Limited availability</span>
</div>
</div>
</div>
</div>
</div>
</div>
</SectionWrapper>
<!-- Premium Pricing & Booking Section (Compact) -->
<SectionWrapper id="trip-pricing" class="py-5 md:py-6">
<div class="max-w-5xl mx-auto">
<div class="rounded-xl border border-primary/20 bg-gradient-to-r from-primary/5 to-accent/5 p-4 md:p-5">
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_1fr_auto] gap-4 md:gap-5 items-center">
<div>
<p class="text-xs text-muted-foreground mb-1 uppercase tracking-wider font-semibold">
FlyDani Price
</p>
<p class="text-2xl md:text-3xl font-bold text-primary">
{destinationData.price}
</p>
</div>
<div>
<p class="text-xs text-muted-foreground mb-1 uppercase tracking-wider font-semibold">
Regular Price
</p>
<p class="text-2xl md:text-3xl font-bold text-foreground/60 line-through">
${destinationData.retailPrice.toLocaleString()}
</p>
</div>
<div>
<p class="text-xs text-muted-foreground mb-1 uppercase tracking-wider font-semibold">
You Save
</p>
<p class="text-2xl md:text-3xl font-bold text-accent">
${(
destinationData.retailPrice -
parseInt(destinationData.price.replace(/[^0-9]/g, ''))
).toLocaleString()}
</p>
</div>
<div class="md:flex md:items-center">
<button
type="button"
onclick="(function() { const el = document.getElementById('booking-form'); if (el) { const headerHeight = window.innerWidth >= 768 ? 80 : 64; const offset = el.getBoundingClientRect().top + window.scrollY - headerHeight - 68; window.scrollTo({ top: offset, behavior: 'smooth' }); } })()"
class="w-full md:w-auto inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 font-bold text-white transition hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/60"
>
Reserve My Spot
</button>
</div>
</div>
</div>
</div>
</SectionWrapper>
<!-- Explore The Resort Section (Moved Higher) -->
{slug !== "mystery-trip" && (
<SectionWrapper id="explore-resort" class="bg-muted/30 pt-5 md:pt-6 pb-6 md:pb-8">
<div class="max-w-5xl mx-auto">
<div class="max-w-3xl mx-auto text-center mb-2 md:mb-3">
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary">
Discover Your Destination
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-6 mb-8 md:mb-10">
<a href={destinationData.resortPreviewUrl} target="_blank" rel="noopener noreferrer" class="block h-full">
<Card class="group h-full p-6 md:p-7 text-center border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300 cursor-pointer flex flex-col">
<div class="flex h-14 w-14 mx-auto mb-5 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 7h2l2-3h10l2 3h2v12H3V7z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 10a3 3 0 100 6 3 3 0 000-6z"
/>
</svg>
</div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Photo Gallery
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Browse resort photography and get a closer look at the rooms,
grounds, pools and surrounding destination.
</p>
</Card>
</a>
<a href={destinationData.resortPreviewUrl} target="_blank" rel="noopener noreferrer" class="block h-full">
<Card class="group h-full p-6 md:p-7 text-center border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300 cursor-pointer flex flex-col">
<div class="flex h-14 w-14 mx-auto mb-5 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14"
/>
<rect
x="3"
y="6"
width="12"
height="12"
rx="2"
stroke-width="2"
/>
</svg>
</div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Resort Videos
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Watch resort highlights and experience the atmosphere, amenities
and surroundings before your trip.
</p>
</Card>
</a>
<a href={destinationData.resortPreviewUrl} target="_blank" rel="noopener noreferrer" class="block h-full">
<Card class="group h-full p-6 md:p-7 text-center border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300 cursor-pointer flex flex-col">
<div class="flex h-14 w-14 mx-auto mb-5 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-7 h-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 19h16M5 19V9l7-5 7 5v10M9 19v-5h6v5"
/>
</svg>
</div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Amenities & Dining
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Explore the pools, restaurants, activities, entertainment and
services available during your stay.
</p>
</Card>
</a>
</div>
<Card class="p-6 md:p-8 mb-8 border border-border shadow-sm">
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
<div class="max-w-2xl">
<p class="text-sm font-semibold uppercase tracking-[0.16em] text-primary mb-2">
Resort Highlights
</p>
<h3 class="text-2xl md:text-3xl font-bold mb-3">
Key Features & Amenities
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Everything you need for a comfortable, relaxing and memorable
resort experience.
</p>
</div>
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</div>
</div>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-7">
{destinationData.highlights.map((highlight) => (
<li class="flex items-start gap-3 rounded-xl bg-muted/40 p-4">
<svg
class="w-5 h-5 text-primary flex-shrink-0 mt-0.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-sm md:text-base text-foreground">
{highlight}
</span>
</li>
))}
</ul>
</Card>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-6 rounded-lg border border-primary/15 bg-primary/5 px-4 py-3 text-center mb-8 md:mb-10">
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-primary flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
<span class="text-sm font-semibold">Secure booking process</span>
</div>
<div class="hidden md:block h-4 w-px bg-border"></div>
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-primary flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 5.636l-1.414 1.414A8 8 0 105.636 18.364l1.414-1.414A6 6 0 1116.95 7.05l1.414-1.414z"
/>
</svg>
<span class="text-sm font-semibold">FlyDani trip support</span>
</div>
<div class="hidden md:block h-4 w-px bg-border"></div>
<div class="flex items-center gap-2">
<svg
class="w-5 h-5 text-primary flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
/>
</svg>
<span class="text-sm font-semibold">Exclusive negotiated rate</span>
</div>
</div>
<div class="rounded-2xl bg-primary px-6 py-8 md:px-10 md:py-10 text-center text-primary-foreground">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-primary-foreground/75 mb-3">
See More Before You Travel
</p>
<h3 class="text-2xl md:text-3xl font-bold mb-3">
View the full resort experience
</h3>
<p class="max-w-2xl mx-auto text-sm md:text-base text-primary-foreground/80 leading-relaxed mb-6">
Explore official resort details, photography and amenities, then
return to FlyDani when you are ready to book your exclusive rate.
</p>
<a
href={destinationData.resortPreviewUrl}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 font-bold text-primary shadow-sm hover:bg-white/90 transition-colors"
>
View Full Resort Details
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 5h5v5M19 5L10 14M19 13v5a1 1 0 01-1 1H6a1 1 0 01-1-1V6a1 1 0 011-1h5"
/>
</svg>
</a>
</div>
</div>
</SectionWrapper>
)}
<!-- Action Bar (Save, Share, Email) -->
<SectionWrapper class="py-2 md:py-3">
<div class="max-w-4xl mx-auto">
<TripActionBar
tripName={destinationData.name}
tripId={slug}
tripPrice={destinationData.price}
travelDates={destinationData.dates}
savings={(() => {
const flydaniPrice = parseInt(destinationData.price.replace(/[^0-9]/g, ''));
const savings = destinationData.retailPrice - flydaniPrice;
return savings > 0 ? `$${savings}` : '';
})()}
/>
</div>
</SectionWrapper>
<!-- Overview Section (Mystery Trip Only) -->
{slug === "mystery-trip" && (
<SectionWrapper id="resort-overview" class="py-6 md:py-8">
<div class="max-w-5xl mx-auto">
<div class="max-w-3xl mx-auto text-center mb-10 md:mb-12">
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-primary mb-3">
Everything Is Taken Care Of
</p>
<h2 class="text-3xl md:text-5xl font-bold tracking-tight mb-4">
Included In Your Escape
</h2>
<p class="text-base md:text-lg text-muted-foreground leading-relaxed">
From the moment you arrive to the moment you return home, your
FlyDani luxury escape is designed to feel effortless, elevated and
unforgettable.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
<Card class="group p-6 md:p-7 border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M8 10h.01M12 10h.01M16 10h.01"
/>
</svg>
</div>
<div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Luxury Caribbean Resort
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
A premium hand-selected resort experience chosen for its
setting, service, comfort and unforgettable atmosphere.
</p>
</div>
</div>
</Card>
<Card class="group p-6 md:p-7 border border-border hover:border-accent/50 hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v18m6-15H9a3 3 0 000 6h6a3 3 0 010 6H6"
/>
</svg>
</div>
<div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Unlimited Dining & Drinks
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Enjoy resort restaurants, refreshing drinks and relaxed
dining experiences throughout your stay.
</p>
</div>
</div>
</Card>
<Card class="group p-6 md:p-7 border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 17l3-3 4 4 5-6 6 5M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
</div>
<div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Beachfront Resort Experience
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Spend your days enjoying beautiful beaches, inviting pools,
resort entertainment and warm Caribbean surroundings.
</p>
</div>
</div>
</Card>
<Card class="group p-6 md:p-7 border border-border hover:border-accent/50 hover:shadow-lg transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.5 19h19M6 16l3-3m0 0l3 3m-3-3V5m6 11l3-3m0 0l3 3m-3-3V8"
/>
</svg>
</div>
<div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Airport Transfers Included
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
Round-trip transportation between the destination airport and
your resort is included for a smoother arrival and departure.
</p>
</div>
</div>
</Card>
<Card class="group p-6 md:p-7 border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300 md:col-span-2">
<div class="flex items-start gap-4">
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.813 15.904L9 18l-.813-2.096a4.5 4.5 0 00-2.591-2.591L3.5 12.5l2.096-.813a4.5 4.5 0 002.591-2.591L9 7l.813 2.096a4.5 4.5 0 002.591 2.591l2.096.813-2.096.813a4.5 4.5 0 00-2.591 2.591zM18 9l-.406-1.048a2.25 2.25 0 00-1.296-1.296L15.25 6.25l1.048-.406a2.25 2.25 0 001.296-1.296L18 3.5l.406 1.048a2.25 2.25 0 001.296 1.296l1.048.406-1.048.406a2.25 2.25 0 00-1.296 1.296L18 9z"
/>
</svg>
</div>
<div>
<h3 class="text-lg md:text-xl font-bold mb-2">
Your Surprise, Your Choice
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
FlyDani curates the luxury escape and reveals the destination
after booking. Once revealed, the choice to continue with the
experience remains entirely yours.
</p>
</div>
</div>
</Card>
</div>
<div class="mt-8 md:mt-10 rounded-2xl border border-primary/20 bg-primary/5 p-6 md:p-8">
<div class="flex flex-col md:flex-row md:items-center gap-4">
<div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-bold mb-1">
A fully curated FlyDani experience
</h3>
<p class="text-sm md:text-base text-muted-foreground leading-relaxed">
The planning, resort selection and essential travel details are
brought together so you can focus on the excitement of the
escape.
</p>
</div>
</div>
</div>
</div>
</SectionWrapper>
)}
<!-- Named-Trip Highlights Strip (Compact Pills) -->
{slug !== "mystery-trip" && (
<SectionWrapper class="py-3 md:py-4">
<div class="max-w-5xl mx-auto px-6 md:px-0">
<ul class="flex flex-wrap gap-2 justify-center">
{destinationData.highlights.map((highlight) => (
<li class="inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-2">
<svg
class="w-4 h-4 text-primary flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-sm text-foreground">{highlight}</span>
</li>
))}
</ul>
</div>
</SectionWrapper>
)}
<!-- Quick Booking CTA -->
<QuickBookingCTA tripPrice={destinationData.price} />
<!-- FAQ Section -->
<SectionWrapper id="destination-faq" class="py-6 md:py-8">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-8">Frequently Asked Questions</h2>
<div class="space-y-4">
{slug === 'mystery-trip' ? (
<>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
What's included in the package?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Your package includes luxury all-inclusive accommodations, dining, beverages, resort amenities, airport transfers, and exclusive FlyDani pricing.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
Can I finance my booking?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Yes, financing options are available. Payment terms are shown during checkout before you confirm your booking. We work with trusted payment processors to keep your information secure.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
What is the cancellation policy?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Our cancellation and modification policies are detailed in your booking confirmation. Contact FlyDani support for assistance with your specific booking.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
How do I contact support?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Contact our support team through the contact page or email. We're here to answer any questions about your booking or trip.</p>
</details>
</>
) : (
<>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
What's included in the package?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">The package includes all amenities mentioned in the highlights section, plus airport transfers and all meals and beverages.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
Can I finance my booking?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Yes, financing options are available. Payment terms are shown during checkout before you confirm your booking. We work with trusted payment processors to keep your information secure.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
What is the cancellation policy?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Our cancellation and modification policies are detailed in your booking confirmation. Contact FlyDani support for assistance with your specific booking.</p>
</details>
<details class="group border border-border rounded-lg p-4 cursor-pointer hover:border-primary/50 transition-colors">
<summary class="flex justify-between items-center font-bold">
How do I contact support?
<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</summary>
<p class="text-muted-foreground mt-3 text-sm">Contact our support team through the contact page or email. We're here to answer any questions about your booking or trip.</p>
</details>
</>
)}
</div>
</div>
</SectionWrapper>
<!-- Concierge-Style Transition Section -->
<SectionWrapper id="destination-cta" class="py-8 md:py-10">
<div class="max-w-3xl mx-auto">
<div class="rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 p-8 md:p-12">
<div class="text-center mb-8">
<h2 class="text-3xl md:text-4xl font-bold mb-3">
You're Almost There
</h2>
<p class="text-lg text-muted-foreground leading-relaxed">
Complete your reservation request below. Once submitted, a FlyDani travel specialist will review your reservation, confirm availability, answer any questions, and guide you through the remaining booking steps.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="flex flex-col items-center text-center">
<div class="flex h-10 w-10 mb-3 items-center justify-center rounded-full bg-primary text-primary-foreground">
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<h3 class="font-bold mb-2">
No Obligation
</h3>
<p class="text-sm text-muted-foreground leading-relaxed">
No obligation until your reservation is confirmed
</p>
</div>
<div class="flex flex-col items-center text-center">
<div class="flex h-10 w-10 mb-3 items-center justify-center rounded-full bg-primary text-primary-foreground">
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
/>
</svg>
</div>
<h3 class="font-bold mb-2">
Expert Assistance
</h3>
<p class="text-sm text-muted-foreground leading-relaxed">
Personalized assistance from the FlyDani team
</p>
</div>
<div class="flex flex-col items-center text-center">
<div class="flex h-10 w-10 mb-3 items-center justify-center rounded-full bg-primary text-primary-foreground">
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
</div>
<h3 class="font-bold mb-2">
Fast Support
</h3>
<p class="text-sm text-muted-foreground leading-relaxed">
Fast confirmation and ongoing support
</p>
</div>
</div>
</div>
</div>
</SectionWrapper>
<!-- Booking Form Section -->
<SectionWrapper class="py-10 md:py-12 bg-muted/30">
<MultiStepBookingForm
tripName={destinationData.name}
tripPrice={destinationData.price}
travelDates={destinationData.dates}
destination={destinationData.destination}
operator={destinationData.operatorName}
/>
</SectionWrapper>
<!-- Join Pool Modal -->
<JoinPoolModal
pool={{
id: destinationData.id,
name: destinationData.name,
destination: destinationData.destination,
resort: destinationData.resort,
dates: destinationData.dates,
price: destinationData.price,
travelers: `${destinationData.currentTravelers} / ${destinationData.maxCapacity} travelers`
}}
isOpen={false}
onClose={() => {}}
client:load
/>
<!-- Sticky Booking Button -->
<StickyBookingButton buttonText="Book Now" />
</BaseLayout>
<style>
details summary::-webkit-details-marker {
display: none;
}
</style>
<script>
// Reset scroll position to top on page load
// This prevents browser scroll restoration from keeping users scrolled to previous positions (e.g., booking form)
if (typeof window !== 'undefined') {
// Disable automatic scroll restoration
history.scrollRestoration = 'manual';
// Ensure scroll is at top after page load
window.scrollTo(0, 0);
}
</script>
Loading console diagnostics...
Rendering field HTML...
Rendering button HTML...
Rendering form HTML...
Inspecting state...