@php
    $benefits = [
        'Contactless Smart Fare Cards',
        'Tap-to-Pay Validator Systems',
        'Centralized Transaction Processing',
        'Automated Settlement & Reconciliation',
        'Real-time System Monitoring',
        'Card Lifecycle Management',
        'Technical Support & Maintenance',
    ];
@endphp

<section id="about" class="py-20 dark:bg-ink lg:py-28">
    <div class="mx-auto grid max-w-screen-2xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-12 lg:gap-16">
        <div class="reveal-left order-2 md:order-1">
            <div class="relative">
                <div class="aspect-square w-full overflow-hidden rounded-3xl shadow-xl">
                    <img src="{{ asset('images/brandings/about-card.jpeg') }}" {{-- srcset="https://picsum.photos/seed/yatra-about-hero/700/700 700w, https://picsum.photos/seed/yatra-about-hero/1400/1400 1400w" --}}
                        sizes="(min-width: 768px) 50vw, 100vw"
                        alt="Commuters boarding a Fintech partner bus in Kathmandu" width="700" height="700"
                        loading="lazy" class="h-full w-full object-cover">
                </div>
                <div
                    class="absolute -bottom-6 -right-6 flex items-center gap-3 rounded-2xl bg-white/95 px-4 py-3 shadow-xl backdrop-blur dark:bg-panel/95">
                    <span
                        class="grid h-9 w-9 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                        <i class="fa-solid fa-credit-card"></i>
                    </span>
                    <div>
                        <p class="font-heading text-sm font-bold text-slate-800 dark:text-white">Tap &amp; Go</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Instant fare deduction</p>
                    </div>
                </div>
                {{-- <div class="absolute -bottom-6 -right-6 rounded-2xl bg-white px-5 py-4 shadow-xl dark:bg-panel">
                    <p class="font-heading text-2xl font-extrabold text-primary dark:text-secondary">99.9%</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Uptime</p>
                </div> --}}
            </div>
        </div>

        <div class="reveal-right order-1 md:order-2">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">About
                Fintech</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                One Card for <span class="text-primary dark:text-secondary">Every Journey</span> Across Nepal
            </h2>
            <p class="mt-5 text-base leading-relaxed text-slate-600 dark:text-slate-400">
                Fintech International Pvt. Ltd. is a Nepal Rastra Bank (NRB) licensed Payment Service Provider (PSP)
                committed to transforming the way people pay for public transportation in Nepal. We develop secure,
                reliable, and innovative digital payment infrastructure that enables faster, smarter, and more
                transparent fare collection across the country's public transport network.
                <br>
                Founded with a vision to accelerate Nepal's digital payment ecosystem, Fintech International specializes
                in closed-loop, contactless fare payment solutions designed specifically for the unique demands of
                public transportation. Our technology combines smart cards, onboard validators, and a centralized
                transaction platform to deliver seamless, cashless travel experiences for commuters while helping
                transport operators improve operational efficiency, revenue assurance, and financial transparency.
            </p>
            <ul class="mt-7 space-y-4">
                @foreach ($benefits as $benefit)
                    <li class="flex items-start gap-3">
                        <span
                            class="mt-0.5 grid h-6 w-6 flex-shrink-0 place-items-center rounded-full bg-secondary/10 text-secondary-a11y dark:text-secondary">
                            <i class="fa-solid fa-check text-xs"></i>
                        </span>
                        <span class="text-sm text-slate-700 dark:text-slate-300">{{ $benefit }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>