@php
    $benefits = [
        'Fully cashless travel across partner routes',
        'Fast boarding with sub-second tap validation',
        'Bank-grade secure payment processing',
        'Recharge anytime — online, app, or counter',
        'Lower waiting time and shorter queues at boarding',
    ];
@endphp

<section id="about" class="py-20 dark:bg-ink lg:py-28">
    <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">
            <div class="relative">
                <div class="aspect-square w-full overflow-hidden rounded-3xl shadow-xl">
                    <img src="https://picsum.photos/seed/yatra-about-hero/700/700"
                         srcset="https://picsum.photos/seed/yatra-about-hero/700/700 700w, https://picsum.photos/seed/yatra-about-hero/1400/1400 1400w"
                         sizes="(min-width: 1024px) 50vw, 100vw"
                         alt="Commuters boarding a Yatra Card partner bus in Kathmandu"
                         width="700" height="700" loading="lazy"
                         class="h-full w-full object-cover">
                </div>
                <div class="absolute top-5 left-5 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 lg:order-2">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">About Yatra Card</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">
                Yatra Card is Nepal's NFC-based digital transport payment card — designed to replace cash
                fares with a single tap. Built for commuters, students, and daily travelers, it works
                seamlessly across partner buses and transit operators nationwide.
            </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">
                            <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>