
<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>
                                                                                                            <input type="text" inputmode="numeric" maxlength="1" aria-label="Email code digit