@php
    $securityFeatures = [
        ['icon' => 'fa-fingerprint', 'title' => 'Biometric App Login', 'desc' => 'Face ID and fingerprint unlock for the Yatra Card app — no passwords to remember or leak.'],
        ['icon' => 'fa-key', 'title' => 'OTP Verification', 'desc' => 'One-time codes confirm every recharge and account change from a new device.'],
        ['icon' => 'fa-lock', 'title' => 'End-to-End Encryption', 'desc' => 'AES-256 encryption protects every transaction, at rest and in transit.'],
        ['icon' => 'fa-shield-halved', 'title' => 'PCI DSS Compliance', 'desc' => 'Card data is handled under PCI-DSS Level 1 standards — never stored in plain text.'],
        ['icon' => 'fa-robot', 'title' => 'AI Fraud Detection', 'desc' => 'Machine learning models flag unusual tap patterns and block suspicious activity in real time.'],
        ['icon' => 'fa-user-check', 'title' => 'KYC & AML', 'desc' => 'Personalized cards are verified against national KYC and anti-money-laundering standards.'],
        ['icon' => 'fa-cloud', 'title' => 'Secure Cloud Infrastructure', 'desc' => 'Multi-region redundancy and continuous monitoring keep the platform available and safe.'],
        ['icon' => 'fa-mobile-retro', 'title' => 'Device Verification', 'desc' => 'New devices logging into your account are verified before any sensitive action is allowed.'],
    ];
@endphp

@component('layouts.app', [
    'title' => 'Security',
    'metaDescription' => 'How Yatra Card protects every tap — biometric login, end-to-end encryption, AI fraud detection, and PCI-DSS compliance.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Product',
        'title' => 'Enterprise-Grade Security You Can Trust',
        'subtitle' => 'Every tap, recharge, and login is protected by the same standards used by major banks and payment networks.',
    ])

    <section class="pb-16 dark:bg-ink">
        <div class="reveal relative mx-auto max-w-7xl overflow-hidden rounded-3xl px-0 sm:px-6">
            <img src="https://picsum.photos/seed/yatra-security/1200/420"
                 srcset="https://picsum.photos/seed/yatra-security/700/245 700w, https://picsum.photos/seed/yatra-security/1200/420 1200w, https://picsum.photos/seed/yatra-security/2000/700 2000w"
                 sizes="100vw"
                 alt="Secure data infrastructure protecting every Yatra Card transaction"
                 width="1200" height="420" loading="lazy"
                 class="h-56 w-full object-cover sm:h-72 sm:rounded-3xl">
            <div class="absolute inset-0 bg-slate-950/50 sm:rounded-3xl"></div>
            <div class="absolute inset-0 flex items-center justify-center text-center sm:rounded-3xl">
                <p class="max-w-lg px-6 text-lg font-bold text-white">Every transaction runs through the same infrastructure standards trusted by major banks.</p>
            </div>
        </div>
    </section>

    <section class="pb-20 dark:bg-ink lg:pb-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($securityFeatures as $i => $item)
                    <div class="reveal group 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 % 4) * 80 }}ms">
                        <div class="mb-4 grid h-12 w-12 place-items-center rounded-xl bg-emerald-500/10 text-emerald-600 transition duration-300 group-hover:scale-110 dark:text-emerald-400">
                            <i class="fa-solid {{ $item['icon'] }}"></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 text-center">
            <p class="reveal mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Certifications</p>
            <h2 class="reveal font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Licensed, Audited, <span class="text-primary dark:text-secondary">Accountable</span>
            </h2>

            <div class="reveal mt-10 flex flex-wrap justify-center gap-3">
                @foreach ([
                    ['icon' => 'fa-landmark', 'label' => 'NRB Licensed'],
                    ['icon' => 'fa-shield-halved', 'label' => 'PCI-DSS Level 1'],
                    ['icon' => 'fa-certificate', 'label' => 'ISO 27001'],
                    ['icon' => 'fa-award', 'label' => 'ISO 9001'],
                ] as $badge)
                    <span class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 dark:border-white/10 dark:bg-panel dark:text-slate-200">
                        <i class="fa-solid {{ $badge['icon'] }} text-secondary"></i>
                        {{ $badge['label'] }}
                    </span>
                @endforeach
            </div>

            <div class="reveal mx-auto mt-10 flex max-w-md items-center justify-center gap-3 rounded-2xl border border-emerald-500/20 bg-emerald-500/5 px-6 py-4">
                <span class="h-2.5 w-2.5 rounded-full bg-emerald-500 pulse-dot"></span>
                <p class="text-sm text-slate-600 dark:text-slate-300">
                    All systems operational · <strong class="text-emerald-600 dark:text-emerald-400">99.97% uptime</strong> last 90 days
                </p>
            </div>
        </div>
    </section>

    <section class="py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-3xl 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">Rider Checklist</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    Keep Your Own Account <span class="text-primary dark:text-secondary">Locked Down</span>
                </h2>
            </div>

            <div class="reveal space-y-3">
                @foreach ([
                    ['q' => 'Enable Face ID or fingerprint login', 'a' => 'Turn this on in the app under Settings → Security. It stops anyone but you from opening the app, even with your phone unlocked.'],
                    ['q' => 'Never share your OTP with anyone', 'a' => 'Yatra Card staff will never call or message asking for your one-time code. If someone does, it\'s a scam — report it immediately.'],
                    ['q' => 'Freeze your card the moment it\'s lost', 'a' => 'Freezing takes one tap in the app and stops all further transactions instantly, even before you report it formally.'],
                    ['q' => 'Review your transaction history monthly', 'a' => 'A quick scan catches anything unfamiliar early — the sooner it\'s flagged, the faster it\'s resolved.'],
                    ['q' => 'Keep your app and phone OS updated', 'a' => 'Updates often include security patches that close vulnerabilities before they can be exploited.'],
                ] as $item)
                    <div x-data="{ open: false }" class="overflow-hidden rounded-xl border border-slate-100 bg-white dark:border-white/10 dark:bg-panel">
                        <button @click="open = !open"
                                class="flex w-full items-center gap-4 px-6 py-4 text-left text-sm font-semibold text-slate-800 dark:text-white">
                            <span class="grid h-6 w-6 flex-shrink-0 place-items-center rounded-full border-2 transition duration-300"
                                  :class="open ? 'border-emerald-500 bg-emerald-500 text-white' : 'border-slate-300 dark:border-white/20'">
                                <i class="fa-solid fa-check text-[10px]" x-show="open"></i>
                            </span>
                            <span class="flex-1">{{ $item['q'] }}</span>
                            <i class="fa-solid fa-chevron-down text-xs text-secondary transition duration-300" :class="open && 'rotate-180'"></i>
                        </button>
                        <div x-show="open" x-collapse x-cloak>
                            <p class="px-6 pb-5 pl-16 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['a'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="reveal mt-10 flex flex-col items-center gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-8 text-center dark:border-white/10 dark:bg-surface sm:flex-row sm:text-left">
                <span class="grid h-14 w-14 flex-shrink-0 place-items-center rounded-2xl bg-red-500/10 text-red-500">
                    <i class="fa-solid fa-bug text-xl"></i>
                </span>
                <div class="flex-1">
                    <h3 class="font-heading text-base font-bold text-slate-900 dark:text-white">Found a Security Issue?</h3>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">We run a responsible disclosure program — report vulnerabilities and we'll respond within 24 hours.</p>
                </div>
                <a href="mailto:security@yatracard.com.np"
                   class="flex-shrink-0 rounded-xl bg-red-500 px-5 py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-105">
                    Report a Vulnerability
                </a>
            </div>
        </div>
    </section>

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