{{--
    Card Apply / KYC wizard — replaces the old "2 Questions" quiz on the Card
    Types page. Five tab-based steps (Personal Info, Contact Verification,
    KYC Documents, Address, Review & Submit) plus a Confirmation state.

    No real backend exists on this site (see CLAUDE.md), so:
      - OTP verification is "simulated but functional": a real 6-digit code
        is generated client-side and surfaced via toast (clearly labeled as
        a demo) rather than actually emailed/texted — but the user must type
        the *matching* code to pass, so the flow behaves like the real thing.
      - Submission generates a fake reference number after a brief delay
        instead of hitting an API.

    Per-step validation reuses window.validateForm() from form-validation.js —
    it only needs an element to query for inputs/selects/textareas, so each
    step's container works as-is without being a real <form>.
--}}
<section id="apply" class="py-20 dark:bg-ink lg:py-28"
         x-data="{
             step: 1,
             maxStepReached: 1,
             submitting: false,
             submitted: false,
             referenceNumber: '',
             form: {
                 fullName: '', dob: '', gender: '', nationality: 'Nepali',
                 email: '', mobile: '', verifyMethod: 'email',
                 idType: 'citizenship', idNumber: '', idFileName: '', photoFileName: '', photoDataUrl: '',
                 permanentAddress: '', province: '', district: '', municipality: '',
                 sameAsPermanent: true, temporaryAddress: '',
                 agreeTerms: false,
             },
             emailOtpSent: false, emailOtpCode: null, emailOtpInput: '', emailVerified: false,
             mobileOtpSent: false, mobileOtpCode: null, mobileOtpInput: '', mobileVerified: false,

             get emailValid() { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email); },
             get mobileValid() { return /^9\d{9}$/.test(this.form.mobile.replace(/\D/g, '')); },
             get contactVerified() { return this.form.verifyMethod === 'email' ? this.emailVerified : this.mobileVerified; },

             steps: [
                 { n: 1, label: 'Personal Info', icon: 'fa-user' },
                 { n: 2, label: 'Contact Verification', icon: 'fa-shield-halved' },
                 { n: 3, label: 'KYC Documents', icon: 'fa-id-card' },
                 { n: 4, label: 'Address', icon: 'fa-location-dot' },
                 { n: 5, label: 'Review & Submit', icon: 'fa-circle-check' },
             ],

             goToStep(n) {
                 if (n <= this.maxStepReached) this.step = n;
             },
             next() {
                 const container = this.$refs['step' + this.step];
                 if (container && !window.validateForm(container)) return;
                 if (this.step === 2 && !this.contactVerified) {
                     window.showToast('Verify a Contact Method', 'Please verify your email or mobile number with the OTP before continuing.', 'fa-triangle-exclamation');
                     return;
                 }
                 this.step++;
                 this.maxStepReached = Math.max(this.maxStepReached, this.step);
             },
             prev() { this.step--; },

             sendOtp(method) {
                 const code = String(Math.floor(100000 + Math.random() * 900000));
                 if (method === 'email') { this.emailOtpCode = code; this.emailOtpSent = true; this.emailOtpInput = ''; }
                 else { this.mobileOtpCode = code; this.mobileOtpSent = true; this.mobileOtpInput = ''; }
                 window.showToast(
                     'Demo OTP Sent',
                     `Your verification code is ${code}. (In production this would be emailed or texted — it's shown here only because this is a demo.)`,
                     'fa-paper-plane'
                 );
             },
             verifyOtp(method) {
                 const match = method === 'email' ? this.emailOtpInput === this.emailOtpCode : this.mobileOtpInput === this.mobileOtpCode;
                 if (match) {
                     if (method === 'email') this.emailVerified = true; else this.mobileVerified = true;
                     window.showToast('Verified', `Your ${method} has been verified successfully.`, 'fa-circle-check');
                 } else {
                     window.showToast('Incorrect Code', 'That code doesn\'t match. Please check and try again.', 'fa-triangle-exclamation');
                 }
             },
             onOtpBoxInput(e, method) {
                 e.target.value = e.target.value.replace(/\D/g, '').slice(0, 1);
                 if (e.target.value && e.target.nextElementSibling) e.target.nextElementSibling.focus();
                 const boxes = Array.from(e.target.closest('[data-otp-group]').querySelectorAll('input'));
                 const combined = boxes.map((b) => b.value).join('');
                 if (method === 'email') this.emailOtpInput = combined; else this.mobileOtpInput = combined;
             },
             onOtpBoxKeydown(e) {
                 if (e.key === 'Backspace' && !e.target.value && e.target.previousElementSibling) {
                     e.target.previousElementSibling.focus();
                 }
             },

             handlePhoto(e) {
                 const file = e.target.files[0];
                 if (!file) return;
                 this.form.photoFileName = file.name;
                 const reader = new FileReader();
                 reader.onload = (ev) => { this.form.photoDataUrl = ev.target.result; };
                 reader.readAsDataURL(file);
             },
             handleIdFile(e) {
                 if (e.target.files[0]) this.form.idFileName = e.target.files[0].name;
             },

             submit() {
                 if (!this.form.agreeTerms) {
                     window.showToast('Please Confirm', 'You need to agree to the Terms of Service to continue.', 'fa-triangle-exclamation');
                     return;
                 }
                 this.submitting = true;
                 setTimeout(() => {
                     this.submitting = false;
                     this.submitted = true;
                     this.referenceNumber = 'YC-' + new Date().getFullYear() + '-' + Math.floor(100000 + Math.random() * 900000);
                     // Persisted so /track-application can look it up later — this is a
                     // static demo site with no real backend, so localStorage stands in
                     // for what would otherwise be a database record.
                     try {
                         const applications = JSON.parse(localStorage.getItem('yc-applications') || '{}');
                         applications[this.referenceNumber] = {
                             name: this.form.fullName,
                             cardType: 'Personalized',
                             submittedAt: Date.now(),
                         };
                         localStorage.setItem('yc-applications', JSON.stringify(applications));
                     } catch {
                         /* storage unavailable (private mode / quota) — tracking just won't find this one */
                     }
                 }, 1200);
             },
             copyReference() {
                 navigator.clipboard.writeText(this.referenceNumber).then(() => {
                     window.showToast('Copied!', 'Reference number copied to clipboard.', 'fa-copy');
                 });
             },
         }">
    <div class="mx-auto max-w-3xl px-6">
        <div class="reveal mx-auto mb-10 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">Get Started</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Apply for Your <span class="text-primary dark:text-secondary">Personalized Card</span>
            </h2>
            <p class="mt-3 text-sm text-slate-500 dark:text-slate-400">
                Five quick steps — most applicants finish in under five minutes.
            </p>
        </div>

        <div class="reveal rounded-2xl border border-slate-100 bg-white shadow-sm dark:border-white/10 dark:bg-panel" x-show="!submitted">
            <!-- Tab stepper -->
            <div class="relative flex items-start justify-between border-b border-slate-100 px-4 pb-6 pt-6 dark:border-white/10 sm:px-8" role="tablist" aria-label="Application steps">
                <span class="absolute left-8 right-8 top-[38px] h-px bg-slate-100 dark:bg-white/10" aria-hidden="true"></span>
                <template x-for="s in steps" :key="s.n">
                    <button type="button" role="tab" :aria-selected="(step === s.n).toString()" :aria-disabled="(s.n > maxStepReached).toString()"
                            :disabled="s.n > maxStepReached"
                            @click="goToStep(s.n)"
                            class="a11y-spring relative z-10 flex flex-1 flex-col items-center gap-2 text-center transition disabled:cursor-not-allowed">
                        <span class="grid h-9 w-9 place-items-center rounded-full border-2 text-xs font-bold transition duration-300"
                              :class="s.n < step || (s.n === step && submitted)
                                  ? 'border-primary bg-primary text-white dark:border-secondary dark:bg-secondary dark:text-ink'
                                  : (s.n === step ? 'border-primary bg-white text-primary dark:border-secondary dark:bg-ink dark:text-secondary' : 'border-slate-200 bg-white text-slate-300 dark:border-white/10 dark:bg-ink dark:text-slate-600')">
                            <i class="fa-solid fa-check text-[10px]" x-show="s.n < step" aria-hidden="true"></i>
                            <span x-show="s.n >= step" x-text="s.n"></span>
                        </span>
                        <span class="hidden text-[11px] font-semibold sm:block"
                              :class="s.n === step ? 'text-primary dark:text-secondary' : 'text-slate-400 dark:text-slate-500'"
                              x-text="s.label"></span>
                    </button>
                </template>
            </div>

            <div class="px-6 py-8 sm:px-8">
                <!-- Step 1: Personal Info -->
                <div x-show="step === 1" x-ref="step1" x-cloak>
                    <h3 class="mb-6 font-heading text-lg font-bold text-slate-900 dark:text-white">Personal Information</h3>
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label for="apply-name" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Name (as on ID)</label>
                            <input id="apply-name" name="fullName" type="text" required minlength="3" x-model="form.fullName" placeholder="Sabina Gurung" autocomplete="name"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>
                        <div>
                            <label for="apply-dob" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Date of Birth</label>
                            <input id="apply-dob" name="dob" type="date" required x-model="form.dob"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>
                        <div>
                            <label for="apply-gender" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Gender</label>
                            <select id="apply-gender" name="gender" required x-model="form.gender"
                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <option value="" disabled selected>Select gender</option>
                                <option>Female</option>
                                <option>Male</option>
                                <option>Other</option>
                                <option>Prefer not to say</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label for="apply-nationality" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Nationality</label>
                            <input id="apply-nationality" name="nationality" type="text" required x-model="form.nationality"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>
                    </div>
                </div>

                <!-- Step 2: Contact Verification -->
                <div x-show="step === 2" x-ref="step2" x-cloak>
                    <h3 class="mb-1 font-heading text-lg font-bold text-slate-900 dark:text-white">Contact Verification</h3>
                    <p class="mb-6 text-xs text-slate-500 dark:text-slate-400">Verify at least one contact method so we can reach you about your card.</p>

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label for="apply-email" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email Address</label>
                            <div class="relative">
                                <input id="apply-email" name="email" type="email" required x-model="form.email" placeholder="you@example.com" autocomplete="email"
                                       :disabled="emailVerified"
                                       class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 pr-9 text-sm text-slate-800 outline-none transition focus:border-primary disabled:bg-slate-50 dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary dark:disabled:bg-white/5">
                                <i class="fa-solid fa-circle-check absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500" x-show="form.email && emailValid" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div>
                            <label for="apply-mobile" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Mobile Number</label>
                            <div class="relative">
                                <input id="apply-mobile" name="mobile" type="tel" required x-model="form.mobile" placeholder="98XXXXXXXX" autocomplete="tel"
                                       :disabled="mobileVerified"
                                       class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 pr-9 text-sm text-slate-800 outline-none transition focus:border-primary disabled:bg-slate-50 dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary dark:disabled:bg-white/5">
                                <i class="fa-solid fa-circle-check absolute right-3 top-1/2 -translate-y-1/2 text-emerald-500" x-show="form.mobile && mobileValid" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 rounded-xl border border-slate-100 bg-slate-50 p-5 dark:border-white/10 dark:bg-surface">
                        <div class="mb-4 flex rounded-lg border border-slate-200 p-1 dark:border-white/10" role="group" aria-label="Verification method">
                            <button type="button" @click="form.verifyMethod = 'email'" :aria-pressed="(form.verifyMethod === 'email').toString()"
                                    :class="form.verifyMethod === 'email' ? 'bg-primary text-white dark:bg-secondary dark:text-ink' : 'text-slate-500 dark:text-slate-400'"
                                    class="flex-1 rounded-md py-2 text-xs font-semibold transition duration-200">
                                <i class="fa-solid fa-envelope mr-1" aria-hidden="true"></i> Verify by Email
                                <i class="fa-solid fa-circle-check ml-1 text-emerald-400" x-show="emailVerified" aria-hidden="true"></i>
                            </button>
                            <button type="button" @click="form.verifyMethod = 'mobile'" :aria-pressed="(form.verifyMethod === 'mobile').toString()"
                                    :class="form.verifyMethod === 'mobile' ? 'bg-primary text-white dark:bg-secondary dark:text-ink' : 'text-slate-500 dark:text-slate-400'"
                                    class="flex-1 rounded-md py-2 text-xs font-semibold transition duration-200">
                                <i class="fa-solid fa-mobile-screen mr-1" aria-hidden="true"></i> Verify by Mobile
                                <i class="fa-solid fa-circle-check ml-1 text-emerald-400" x-show="mobileVerified" aria-hidden="true"></i>
                            </button>
                        </div>

                        <template x-if="form.verifyMethod === 'email'">
                            <div>
                                <template x-if="!emailVerified">
                                    <div>
                                        <button type="button" @click="sendOtp('email')" :disabled="!emailValid"
                                                class="a11y-spring mb-4 rounded-xl bg-primary px-5 py-2.5 text-xs font-semibold text-white shadow-md transition hover:scale-105 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-secondary dark:text-ink">
                                            <i class="fa-solid fa-paper-plane mr-1.5" aria-hidden="true"></i>
                                            <span x-text="emailOtpSent ? 'Resend Code' : 'Send Verification Code'"></span>
                                        </button>
                                        <div x-show="emailOtpSent" x-cloak>
                                            <label class="mb-2 block text-xs font-semibold text-slate-600 dark:text-slate-300">Enter the 6-digit code sent to your email</label>
                                            <div class="flex items-center gap-3">
                                                <div class="flex gap-2" data-otp-group>
                                                    @for ($i = 0; $i < 6; $i++)
                                                        <input type="text" inputmode="numeric" maxlength="1" aria-label="Email code digit {{ $i + 1 }}"
                                                               @input="onOtpBoxInput($event, 'email')" @keydown="onOtpBoxKeydown($event)"
                                                               class="h-11 w-9 rounded-lg border border-slate-200 text-center text-base font-bold text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-ink dark:text-white dark:focus:border-secondary">
                                                    @endfor
                                                </div>
                                                <button type="button" @click="verifyOtp('email')" :disabled="emailOtpInput.length < 6"
                                                        class="a11y-spring rounded-xl bg-primary px-4 py-2.5 text-xs font-semibold text-white shadow-md transition hover:scale-105 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-secondary dark:text-ink">
                                                    Verify
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <p x-show="emailVerified" class="flex items-center gap-2 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
                                    <i class="fa-solid fa-circle-check" aria-hidden="true"></i> Email verified
                                </p>
                            </div>
                        </template>

                        <template x-if="form.verifyMethod === 'mobile'">
                            <div>
                                <template x-if="!mobileVerified">
                                    <div>
                                        <button type="button" @click="sendOtp('mobile')" :disabled="!mobileValid"
                                                class="a11y-spring mb-4 rounded-xl bg-primary px-5 py-2.5 text-xs font-semibold text-white shadow-md transition hover:scale-105 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-secondary dark:text-ink">
                                            <i class="fa-solid fa-paper-plane mr-1.5" aria-hidden="true"></i>
                                            <span x-text="mobileOtpSent ? 'Resend Code' : 'Send Verification Code'"></span>
                                        </button>
                                        <div x-show="mobileOtpSent" x-cloak>
                                            <label class="mb-2 block text-xs font-semibold text-slate-600 dark:text-slate-300">Enter the 6-digit code sent by SMS</label>
                                            <div class="flex items-center gap-3">
                                                <div class="flex gap-2" data-otp-group>
                                                    @for ($i = 0; $i < 6; $i++)
                                                        <input type="text" inputmode="numeric" maxlength="1" aria-label="Mobile code digit {{ $i + 1 }}"
                                                               @input="onOtpBoxInput($event, 'mobile')" @keydown="onOtpBoxKeydown($event)"
                                                               class="h-11 w-9 rounded-lg border border-slate-200 text-center text-base font-bold text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-ink dark:text-white dark:focus:border-secondary">
                                                    @endfor
                                                </div>
                                                <button type="button" @click="verifyOtp('mobile')" :disabled="mobileOtpInput.length < 6"
                                                        class="a11y-spring rounded-xl bg-primary px-4 py-2.5 text-xs font-semibold text-white shadow-md transition hover:scale-105 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-secondary dark:text-ink">
                                                    Verify
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <p x-show="mobileVerified" class="flex items-center gap-2 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
                                    <i class="fa-solid fa-circle-check" aria-hidden="true"></i> Mobile number verified
                                </p>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Step 3: KYC Documents -->
                <div x-show="step === 3" x-ref="step3" x-cloak>
                    <h3 class="mb-6 font-heading text-lg font-bold text-slate-900 dark:text-white">KYC Documents</h3>
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label for="apply-id-type" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">ID Type</label>
                            <select id="apply-id-type" name="idType" required x-model="form.idType"
                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <option value="citizenship">Citizenship Certificate</option>
                                <option value="passport">Passport</option>
                                <option value="national-id">National ID Card</option>
                                <option value="license">Driving License</option>
                            </select>
                        </div>
                        <div>
                            <label for="apply-id-number" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">ID Number</label>
                            <input id="apply-id-number" name="idNumber" type="text" required minlength="5" x-model="form.idNumber" placeholder="e.g. 12-34-56-78901"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>

                        <div>
                            <label for="apply-id-file" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">ID Document (photo or scan)</label>
                            <label for="apply-id-file"
                                   class="flex cursor-pointer items-center gap-3 rounded-xl border border-dashed border-slate-300 px-4 py-4 text-xs text-slate-500 transition hover:border-primary dark:border-white/20 dark:text-slate-400">
                                <i class="fa-solid fa-cloud-arrow-up text-lg text-slate-400" aria-hidden="true"></i>
                                <span x-text="form.idFileName || 'Click to upload (JPG, PNG, or PDF)'"></span>
                            </label>
                            <input id="apply-id-file" type="file" accept="image/*,.pdf" required class="sr-only" @change="handleIdFile($event)">
                        </div>

                        <div>
                            <label for="apply-photo-file" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Passport-Size Photo</label>
                            <label for="apply-photo-file"
                                   class="flex cursor-pointer items-center gap-3 rounded-xl border border-dashed border-slate-300 px-4 py-4 text-xs text-slate-500 transition hover:border-primary dark:border-white/20 dark:text-slate-400">
                                <img :src="form.photoDataUrl" x-show="form.photoDataUrl" class="h-10 w-10 rounded-lg object-cover" alt="">
                                <i class="fa-solid fa-camera text-lg text-slate-400" x-show="!form.photoDataUrl" aria-hidden="true"></i>
                                <span x-text="form.photoFileName || 'Click to upload a recent photo'"></span>
                            </label>
                            <input id="apply-photo-file" type="file" accept="image/*" required class="sr-only" @change="handlePhoto($event)">
                        </div>
                    </div>
                </div>

                <!-- Step 4: Address -->
                <div x-show="step === 4" x-ref="step4" x-cloak>
                    <h3 class="mb-6 font-heading text-lg font-bold text-slate-900 dark:text-white">Address</h3>
                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label for="apply-permanent-address" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Permanent Address</label>
                            <textarea id="apply-permanent-address" name="permanentAddress" required rows="2" x-model="form.permanentAddress" placeholder="House no., street, tole"
                                      class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary"></textarea>
                        </div>
                        <div>
                            <label for="apply-province" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Province</label>
                            <select id="apply-province" name="province" required x-model="form.province"
                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                                <option value="" disabled selected>Select province</option>
                                <option>Koshi</option>
                                <option>Madhesh</option>
                                <option>Bagmati</option>
                                <option>Gandaki</option>
                                <option>Lumbini</option>
                                <option>Karnali</option>
                                <option>Sudurpashchim</option>
                            </select>
                        </div>
                        <div>
                            <label for="apply-district" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">District</label>
                            <input id="apply-district" name="district" type="text" required x-model="form.district" placeholder="e.g. Kathmandu"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>
                        <div class="sm:col-span-2">
                            <label for="apply-municipality" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Municipality / City</label>
                            <input id="apply-municipality" name="municipality" type="text" required x-model="form.municipality" placeholder="e.g. Kathmandu Metropolitan City, Ward 10"
                                   class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                        </div>

                        <label class="flex items-center gap-2.5 sm:col-span-2">
                            <input type="checkbox" x-model="form.sameAsPermanent" class="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:border-white/20 dark:bg-surface dark:text-secondary">
                            <span class="text-sm text-slate-600 dark:text-slate-300">My temporary address is the same as above</span>
                        </label>

                        <div class="sm:col-span-2" x-show="!form.sameAsPermanent" x-cloak>
                            <label for="apply-temp-address" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Temporary Address</label>
                            <textarea id="apply-temp-address" name="temporaryAddress" rows="2" x-model="form.temporaryAddress" placeholder="House no., street, tole"
                                      class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Step 5: Review & Submit -->
                <div x-show="step === 5" x-ref="step5" x-cloak>
                    <h3 class="mb-6 font-heading text-lg font-bold text-slate-900 dark:text-white">Review &amp; Submit</h3>

                    <div class="space-y-4">
                        <div class="rounded-xl border border-slate-100 p-4 dark:border-white/10">
                            <div class="mb-2 flex items-center justify-between">
                                <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">Personal Info</p>
                                <button type="button" @click="goToStep(1)" class="text-xs font-semibold text-primary underline dark:text-secondary">Edit</button>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200" x-text="form.fullName"></p>
                            <p class="text-xs text-slate-500 dark:text-slate-400" x-text="form.dob + ' · ' + form.gender + ' · ' + form.nationality"></p>
                        </div>

                        <div class="rounded-xl border border-slate-100 p-4 dark:border-white/10">
                            <div class="mb-2 flex items-center justify-between">
                                <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">Contact</p>
                                <button type="button" @click="goToStep(2)" class="text-xs font-semibold text-primary underline dark:text-secondary">Edit</button>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200" x-text="form.email"></p>
                            <p class="text-sm text-slate-700 dark:text-slate-200" x-text="form.mobile"></p>
                            <p class="mt-1 flex items-center gap-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                                <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                                <span x-text="(emailVerified ? 'Email' : 'Mobile') + ' verified'"></span>
                            </p>
                        </div>

                        <div class="rounded-xl border border-slate-100 p-4 dark:border-white/10">
                            <div class="mb-2 flex items-center justify-between">
                                <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">KYC Documents</p>
                                <button type="button" @click="goToStep(3)" class="text-xs font-semibold text-primary underline dark:text-secondary">Edit</button>
                            </div>
                            <p class="text-sm capitalize text-slate-700 dark:text-slate-200" x-text="form.idType.replace('-', ' ') + ' · ' + form.idNumber"></p>
                            <p class="text-xs text-slate-500 dark:text-slate-400" x-text="(form.idFileName || 'No ID file') + ' · ' + (form.photoFileName || 'No photo')"></p>
                        </div>

                        <div class="rounded-xl border border-slate-100 p-4 dark:border-white/10">
                            <div class="mb-2 flex items-center justify-between">
                                <p class="text-xs font-bold uppercase tracking-wide text-secondary-a11y dark:text-secondary">Address</p>
                                <button type="button" @click="goToStep(4)" class="text-xs font-semibold text-primary underline dark:text-secondary">Edit</button>
                            </div>
                            <p class="text-sm text-slate-700 dark:text-slate-200" x-text="form.permanentAddress"></p>
                            <p class="text-xs text-slate-500 dark:text-slate-400" x-text="form.municipality + ', ' + form.district + ', ' + form.province"></p>
                        </div>
                    </div>

                    <label class="mt-6 flex items-start gap-2.5">
                        <input type="checkbox" x-model="form.agreeTerms" class="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:border-white/20 dark:bg-surface dark:text-secondary">
                        <span class="text-sm text-slate-600 dark:text-slate-300">
                            I confirm the information above is accurate and I agree to the
                            <a href="#" class="font-semibold text-primary underline dark:text-secondary">Terms of Service</a> and
                            <a href="#" class="font-semibold text-primary underline dark:text-secondary">Privacy Policy</a>.
                        </span>
                    </label>
                </div>

                <!-- Step navigation -->
                <div class="mt-8 flex items-center justify-between border-t border-slate-100 pt-6 dark:border-white/10">
                    <button type="button" @click="prev()" x-show="step > 1"
                            class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-600 transition duration-300 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-300 dark:hover:border-secondary dark:hover:text-secondary">
                        Back
                    </button>
                    <span x-show="step === 1"></span>

                    <button type="button" @click="next()" x-show="step < 5"
                            class="rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 dark:bg-secondary dark:text-ink">
                        Continue
                    </button>
                    <button type="button" @click="submit()" x-show="step === 5" :disabled="submitting"
                            class="rounded-xl bg-primary px-6 py-2.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-secondary dark:text-ink">
                        <span x-show="!submitting">Submit Application</span>
                        <span x-show="submitting" x-cloak><i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i> Submitting…</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Confirmation -->
        <div x-show="submitted" x-cloak x-transition
             class="reveal rounded-2xl border border-slate-100 bg-white p-10 text-center shadow-sm dark:border-white/10 dark:bg-panel">
            <div class="mx-auto mb-5 grid h-16 w-16 place-items-center rounded-full bg-emerald-100 text-2xl text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                <i class="fa-solid fa-check" aria-hidden="true"></i>
            </div>
            <h3 class="font-heading text-2xl font-extrabold text-slate-900 dark:text-white">Application Submitted!</h3>
            <p class="mx-auto mt-3 max-w-md text-sm leading-relaxed text-slate-500 dark:text-slate-400">
                We'll review your KYC details and issue your card within 3 business days.
                A confirmation has been sent to your verified contact.
            </p>
            <div class="mt-5 inline-flex items-center gap-2 rounded-xl bg-slate-50 py-2.5 pl-5 pr-2.5 dark:bg-white/5">
                <span class="font-mono text-sm font-bold text-primary dark:text-secondary" x-text="referenceNumber"></span>
                <button type="button" @click="copyReference()" aria-label="Copy reference number" title="Copy reference number"
                        class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 transition hover:bg-white hover:text-primary dark:hover:bg-white/10 dark:hover:text-secondary">
                    <i class="fa-solid fa-copy text-xs" aria-hidden="true"></i>
                </button>
            </div>
            <div class="mt-8 flex flex-wrap justify-center gap-3">
                <a :href="`{{ route('track-application') }}?ref=${referenceNumber}`"
                   class="rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg transition hover:scale-105 dark:bg-secondary dark:text-ink">
                    Track This Application
                </a>
                <a href="{{ route('home') }}" class="rounded-xl border border-slate-200 px-6 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200">Back to Home</a>
            </div>
        </div>
    </div>
</section>