@php
    // `motion` maps each card to a distinct hand-tuned CSS animation in
    // app.css (feature-icon--<motion>) — no two features share the same
    // gesture, so the grid doesn't read as one animation copy-pasted twelve
    // times. See resources/css/app.css "FEATURE ICON MOTION".
    $tabs = [
        'travel' => [
            'label' => 'Everyday Travel',
            'features' => [
                ['icon' => 'fa-right-left', 'motion' => 'tap', 'title' => 'Tap In / Tap Out', 'desc' => 'Simple boarding and alighting — just tap your card at the terminal.'],
                ['icon' => 'fa-wifi', 'motion' => 'nfc', 'title' => 'NFC Technology', 'desc' => 'Contactless, chip-based communication for instant, reliable reads.'],
                ['icon' => 'fa-bolt', 'motion' => 'bolt', 'title' => 'Instant Fare Deduction', 'desc' => 'Fare is calculated and deducted automatically in under a second.'],
                ['icon' => 'fa-route', 'motion' => 'route', 'title' => 'Multi-Route Support', 'desc' => 'One card works across all partner buses and routes.'],
            ],
        ],
        'account' => [
            'label' => 'Account & Money',
            'features' => [
                ['icon' => 'fa-wallet', 'motion' => 'wallet', 'title' => 'Recharge Easily', 'desc' => 'Top up via bank, mobile wallet, QR, or authorized counters.'],
                ['icon' => 'fa-file-invoice', 'motion' => 'history', 'title' => 'Digital Transaction History', 'desc' => 'View every trip and recharge in your app, anytime.'],
                ['icon' => 'fa-magnifying-glass-dollar', 'motion' => 'search', 'title' => 'Balance Inquiry', 'desc' => 'Check your remaining balance anytime via app, SMS, or terminal.'],
                ['icon' => 'fa-ticket', 'motion' => 'ticket', 'title' => 'Electronic Ticket', 'desc' => 'No paper tickets — your card is proof of fare payment.'],
            ],
        ],
        'security' => [
            'label' => 'Security & Discounts',
            'features' => [
                ['icon' => 'fa-lock', 'motion' => 'lock', 'title' => 'Secure Transactions', 'desc' => 'Every tap is encrypted end-to-end with bank-grade security.'],
                ['icon' => 'fa-shield-halved', 'motion' => 'shield', 'title' => 'Lost Card Protection', 'desc' => 'Freeze your card instantly and recover your balance if lost.'],
                ['icon' => 'fa-graduation-cap', 'motion' => 'grad', 'title' => 'Student Discount', 'desc' => 'Verified students get reduced fares automatically applied.'],
                ['icon' => 'fa-person-cane', 'motion' => 'cane', 'title' => 'Senior Citizen Discount', 'desc' => 'Special concessional rates for senior citizens on every trip.'],
            ],
        ],
    ];
@endphp

<section id="features" x-data="{ tab: 'travel' }" class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
    <div class="mx-auto max-w-7xl px-6">
        <div class="reveal mx-auto mb-12 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Features</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Everything You Need for <span class="text-primary dark:text-secondary">Cashless Travel</span>
            </h2>
        </div>

        <div class="reveal mb-12 flex flex-wrap justify-center gap-2">
            @foreach ($tabs as $key => $group)
                <button
                    type="button"
                    @click="tab = '{{ $key }}'"
                    :class="tab === '{{ $key }}'
                        ? 'bg-primary text-white shadow-md dark:bg-secondary'
                        : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                    class="rounded-xl px-5 py-2.5 text-sm font-semibold transition duration-300"
                >
                    {{ $group['label'] }}
                </button>
            @endforeach
        </div>

        @foreach ($tabs as $key => $group)
            <div x-show="tab === '{{ $key }}'" x-cloak
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($group['features'] as $i => $feature)
                    <div class="group reveal-scale rounded-2xl border border-slate-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 60 }}ms">
                        <div class="feature-icon-badge mb-4 grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary transition duration-300 group-hover:scale-110 group-hover:bg-primary group-hover:text-white dark:bg-secondary/10 dark:text-secondary dark:group-hover:bg-secondary dark:group-hover:text-ink"
                             data-motion="{{ $feature['motion'] }}">
                            <span class="feature-icon-badge__shine" aria-hidden="true"></span>
                            <span class="feature-icon-badge__ring" aria-hidden="true"></span>
                            <i class="fa-solid {{ $feature['icon'] }} feature-icon-badge__glyph"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $feature['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $feature['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</section>