@component('layouts.app', [
    'title' => 'Card Types',
    'metaDescription' => 'Compare Yatra Card types — Personalized and Non-Personalized. Eligibility, fees, validity, and benefits side by side.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Product',
        'title' => 'Choose the Card That Fits You',
        'subtitle' => 'Whether you want full account features or a quick anonymous card, Yatra Card has an option built for how you travel.',
    ])

    <section class="pb-20 lg:pb-28"
              x-data="{
                  color: 'black',
                  colorGradients: {
                      black: 'linear-gradient(135deg, #2a2a2e 0%, #131316 45%, #050506 100%)',
                      navy: 'linear-gradient(135deg, #1e3a5f 0%, #12233d 45%, #060d1a 100%)',
                      teal: 'linear-gradient(135deg, #0d6e63 0%, #0a4a43 45%, #052622 100%)',
                      rose: 'linear-gradient(135deg, #6b4a4a 0%, #4a2e2e 45%, #2a1414 100%)',
                  },
              }">
        <div class="mx-auto grid max-w-7xl grid-cols-1 items-center gap-16 px-6 lg:grid-cols-2">
            <div class="reveal-left order-2 lg:order-1">
                @include('partials.luxury-card')
            </div>
            <div class="reveal-right order-1 text-center lg:order-2 lg:text-left">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Crafted Detail</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    A Card That Feels as Good as It Works
                </h2>
                <p class="mt-5 text-base leading-relaxed text-slate-600 dark:text-slate-400">
                    Every Yatra Card ships with a brushed-metal finish, precision-cut NFC chip, and a
                    matte black face built to survive years of daily taps. Tilt it and watch the light
                    move across the surface — the same care went into the card as into the network behind it.
                </p>

                <p class="mt-8 mb-3 text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Choose a Finish</p>
                <div class="flex justify-center gap-3 lg:justify-start">
                    @foreach ([
                        ['key' => 'black', 'label' => 'Matte Black', 'swatch' => 'bg-[#131316]'],
                        ['key' => 'navy', 'label' => 'Deep Navy', 'swatch' => 'bg-[#1e3a5f]'],
                        ['key' => 'teal', 'label' => 'Emerald', 'swatch' => 'bg-[#0d6e63]'],
                        ['key' => 'rose', 'label' => 'Rose Gold', 'swatch' => 'bg-[#6b4a4a]'],
                    ] as $swatch)
                        <button type="button" @click="color = '{{ $swatch['key'] }}'" aria-label="{{ $swatch['label'] }}"
                                :class="color === '{{ $swatch['key'] }}' ? 'ring-2 ring-offset-2 ring-secondary dark:ring-offset-ink' : ''"
                                class="h-9 w-9 rounded-full {{ $swatch['swatch'] }} shadow-md transition duration-200 hover:scale-110">
                        </button>
                    @endforeach
                </div>
                <p class="mt-2 text-xs text-slate-400 dark:text-slate-500" x-text="({black:'Matte Black',navy:'Deep Navy',teal:'Emerald',rose:'Rose Gold'})[color]"></p>
            </div>
        </div>
    </section>

    @include('partials.home.card-types')

    <section class="py-20 dark:bg-ink lg:py-28"
              x-data="{
                  step: 0,
                  kyc: null,
                  age: null,
                  get resultCard() {
                      if (this.kyc === 'yes') return 'Personalized Card';
                      if (this.age === 'senior' || this.age === 'student') return 'Personalized Card (with discount)';
                      return 'Non-Personalized Card';
                  },
              }">
        <div class="mx-auto max-w-2xl px-6 text-center">
            <p class="reveal mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Not Sure Which Card?</p>
            <h2 class="reveal font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Find Your Card in 2 Questions
            </h2>

            <div class="reveal mt-10 rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                <template x-if="step === 0">
                    <div>
                        <p class="mb-5 text-sm font-semibold text-slate-700 dark:text-slate-200">Do you want to complete KYC verification?</p>
                        <div class="flex justify-center gap-3">
                            <button type="button" @click="kyc = 'yes'; step = 2"
                                    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 dark:hover:border-secondary dark:hover:text-secondary">
                                Yes, I'll verify
                            </button>
                            <button type="button" @click="kyc = 'no'; step = 1"
                                    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 dark:hover:border-secondary dark:hover:text-secondary">
                                No, keep it simple
                            </button>
                        </div>
                    </div>
                </template>

                <template x-if="step === 1">
                    <div>
                        <p class="mb-5 text-sm font-semibold text-slate-700 dark:text-slate-200">Are you a student or senior citizen?</p>
                        <div class="flex flex-wrap justify-center gap-3">
                            <button type="button" @click="age = 'student'; step = 2" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200">Student</button>
                            <button type="button" @click="age = 'senior'; step = 2" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200">Senior Citizen</button>
                            <button type="button" @click="age = 'none'; step = 2" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200">Neither</button>
                        </div>
                    </div>
                </template>

                <template x-if="step === 2">
                    <div>
                        <p class="mb-1 text-xs uppercase tracking-wide text-slate-400 dark:text-slate-500">We recommend</p>
                        <p class="mb-5 font-heading text-2xl font-extrabold text-primary dark:text-secondary" x-text="resultCard"></p>
                        <div class="flex justify-center gap-3">
                            <a href="#card-types" class="rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg transition hover:scale-105 dark:bg-secondary">See This Card</a>
                            <button type="button" @click="step = 0; kyc = null; age = null" class="rounded-xl border border-slate-200 px-6 py-3 text-sm font-semibold text-slate-700 dark:border-white/10 dark:text-slate-200">Start Over</button>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-5xl px-6">
            <div class="reveal mx-auto mb-14 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Compare</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    Side-by-Side <span class="text-primary dark:text-secondary">Comparison</span>
                </h2>
            </div>

            <div class="reveal overflow-x-auto rounded-2xl border border-slate-100 shadow-sm dark:border-white/10">
                <table class="w-full min-w-[560px] border-collapse bg-white text-sm dark:bg-panel">
                    <thead>
                        <tr class="border-b border-slate-100 dark:border-white/10">
                            <th class="px-6 py-4 text-left font-heading text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Criteria</th>
                            <th class="px-6 py-4 text-left font-heading text-xs font-bold uppercase tracking-wide text-primary dark:text-secondary">Personalized</th>
                            <th class="px-6 py-4 text-left font-heading text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Non-Personalized</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ([
                            ['label' => 'Eligibility', 'p' => 'KYC required (citizenship + photo)', 'n' => 'None — instant purchase'],
                            ['label' => 'Issuance Fee', 'p' => 'NPR 200 one-time', 'n' => 'NPR 150 one-time'],
                            ['label' => 'Validity', 'p' => 'Lifetime while account is active', 'n' => '3 years from issue'],
                            ['label' => 'Discounts', 'p' => 'Student & senior citizen concessions', 'n' => 'Not eligible'],
                            ['label' => 'Lost Card Recovery', 'p' => 'Freeze + balance transfer', 'n' => 'Not recoverable'],
                            ['label' => 'Bank Recharge', 'p' => 'Direct linked account', 'n' => 'Manual top-up only'],
                        ] as $row)
                            <tr class="border-b border-slate-50 last:border-0 dark:border-white/5">
                                <td class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-200">{{ $row['label'] }}</td>
                                <td class="px-6 py-4 text-slate-600 dark:text-slate-300">
                                    <i class="fa-solid fa-circle-check mr-2 text-primary dark:text-secondary"></i>{{ $row['p'] }}
                                </td>
                                <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ $row['n'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    @include('partials.home.cta')
@endcomponent