@component('layouts.app', [
    'title' => 'Features',
    'metaDescription' => 'Every Yatra Card feature explained — tap in/out, NFC, discounts, card controls, and digital transaction history.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Product',
        'title' => 'Everything Your Card Can Do',
        'subtitle' => 'From the first tap to full account control, here is every feature built into Yatra Card.',
    ])

    @include('partials.home.features')

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl 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">Card Controls</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    You're Always <span class="text-primary dark:text-secondary">In Control</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                @foreach ([
                    ['icon' => 'fa-snowflake', 'title' => 'Freeze / Unfreeze', 'desc' => 'Instantly pause your card from the app if it goes missing, and unfreeze it the moment you find it.'],
                    ['icon' => 'fa-chart-line', 'title' => 'Spending Insights', 'desc' => 'See a breakdown of fares by route, week, and month — understand exactly where your travel budget goes.'],
                    ['icon' => 'fa-bell', 'title' => 'Smart Notifications', 'desc' => 'Get an alert on every tap, every recharge, and whenever your balance drops below a threshold you set.'],
                ] as $i => $item)
                    <div class="reveal-scale rounded-2xl border border-slate-100 bg-white p-7 text-center shadow-sm dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 100 }}ms">
                        <div class="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-2xl bg-secondary/10 text-secondary">
                            <i class="fa-solid {{ $item['icon'] }} text-xl"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $item['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-4xl 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">Availability</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    What's Included on <span class="text-primary dark:text-secondary">Each Card</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-[480px] 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">Feature</th>
                            <th class="px-6 py-4 text-center font-heading text-xs font-bold uppercase tracking-wide text-primary dark:text-secondary">Personalized</th>
                            <th class="px-6 py-4 text-center font-heading text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Non-Personalized</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ([
                            ['label' => 'Tap In / Tap Out', 'p' => true, 'n' => true],
                            ['label' => 'Digital Transaction History', 'p' => true, 'n' => true],
                            ['label' => 'Balance Inquiry', 'p' => true, 'n' => true],
                            ['label' => 'Freeze / Unfreeze Card', 'p' => true, 'n' => false],
                            ['label' => 'Student / Senior Discounts', 'p' => true, 'n' => false],
                            ['label' => 'Lost Card Recovery', 'p' => true, 'n' => false],
                            ['label' => 'Direct Bank Recharge', 'p' => true, 'n' => false],
                            ['label' => 'Spending Insights', 'p' => true, 'n' => false],
                        ] as $row)
                            <tr class="border-b border-slate-50 last:border-0 dark:border-white/5">
                                <td class="px-6 py-3.5 font-semibold text-slate-700 dark:text-slate-200">{{ $row['label'] }}</td>
                                <td class="px-6 py-3.5 text-center">
                                    <i class="fa-solid {{ $row['p'] ? 'fa-circle-check text-primary dark:text-secondary' : 'fa-circle-xmark text-slate-300 dark:text-slate-600' }}"></i>
                                </td>
                                <td class="px-6 py-3.5 text-center">
                                    <i class="fa-solid {{ $row['n'] ? 'fa-circle-check text-primary dark:text-secondary' : 'fa-circle-xmark text-slate-300 dark:text-slate-600' }}"></i>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>

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