@php
    $timeline = [
        ['year' => '2023', 'title' => 'Founded in Kathmandu', 'desc' => 'Yatra Card started as a pilot with two bus operators and 500 riders.'],
        ['year' => '2024', 'title' => 'NRB License Granted', 'desc' => 'Became a licensed payment service provider under Nepal Rastra Bank.'],
        ['year' => '2025', 'title' => '100,000 Cards Issued', 'desc' => 'Crossed 100K active cards and 500+ partner buses across the valley.'],
        ['year' => '2026', 'title' => 'Nationwide Expansion', 'desc' => 'Rolling out to Pokhara, Bhaktapur, and inter-city routes.'],
    ];
    $values = [
        ['icon' => 'fa-heart', 'title' => 'Rider First', 'desc' => 'Every decision starts with what makes a commute easier.'],
        ['icon' => 'fa-shield-halved', 'title' => 'Trust & Security', 'desc' => 'We treat every rupee and every data point with the same care.'],
        ['icon' => 'fa-bolt', 'title' => 'Built for Speed', 'desc' => 'Fast boarding, fast recharge, fast support.'],
        ['icon' => 'fa-people-group', 'title' => 'Inclusive by Design', 'desc' => 'Discounts and accessibility for students, seniors, and everyone in between.'],
    ];
    $leadership = [
        ['name' => 'Rojina Maharjan', 'role' => 'Chief Executive Officer', 'img' => 44],
        ['name' => 'Sagar Bhattarai', 'role' => 'Chief Technology Officer', 'img' => 51],
        ['name' => 'Nisha Karki', 'role' => 'Head of Operations', 'img' => 29],
        ['name' => 'Dipesh Shrestha', 'role' => 'Head of Partnerships', 'img' => 60],
    ];
@endphp

@component('layouts.app', [
    'title' => 'About Us',
    'metaDescription' => 'The story behind Yatra Card — our mission, timeline, and the team building cashless transit for Nepal.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Company',
        'title' => 'Building Nepal\'s Cashless Commute',
        'subtitle' => 'We started with a simple frustration — fumbling for change on a moving bus — and built a card to end it.',
    ])

    @include('partials.home.about')

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-5xl px-6">
            <div class="grid grid-cols-1 gap-10 lg:grid-cols-2">
                <div class="reveal-left rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                    <div class="mb-4 grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                        <i class="fa-solid fa-bullseye"></i>
                    </div>
                    <h3 class="mb-2 font-heading text-lg font-bold text-slate-900 dark:text-white">Our Mission</h3>
                    <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                        Make every bus ride in Nepal cashless, fast, and fair — for commuters, operators, and the
                        cities they move through.
                    </p>
                </div>
                <div class="reveal-right rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                    <div class="mb-4 grid h-12 w-12 place-items-center rounded-xl bg-secondary/10 text-secondary">
                        <i class="fa-solid fa-eye"></i>
                    </div>
                    <h3 class="mb-2 font-heading text-lg font-bold text-slate-900 dark:text-white">Our Vision</h3>
                    <p class="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                        A Nepal where one card carries you from a Kathmandu city bus to an inter-city coach —
                        no cash, no separate tickets, no friction.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 dark:bg-ink 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">Our Journey</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    From Pilot to <span class="text-primary dark:text-secondary">Platform</span>
                </h2>
            </div>

            <div class="relative space-y-10 border-l-2 border-dashed border-slate-200 pl-8 dark:border-white/10">
                @foreach ($timeline as $i => $item)
                    <div class="reveal-left relative" style="transition-delay: {{ $i * 100 }}ms">
                        <span class="absolute -left-[2.55rem] grid h-8 w-8 place-items-center rounded-full bg-gradient-to-br from-primary to-secondary text-xs font-bold text-white shadow-md">
                            {{ $i + 1 }}
                        </span>
                        <p class="font-heading text-sm font-bold text-secondary">{{ $item['year'] }}</p>
                        <h3 class="mt-1 font-heading text-lg font-bold text-slate-900 dark:text-white">{{ $item['title'] }}</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $item['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="relative overflow-hidden py-20 dark:bg-ink lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal grid grid-cols-1 gap-4 sm:grid-cols-3">
                <img src="https://picsum.photos/seed/yatra-team-1/600/450"
                     srcset="https://picsum.photos/seed/yatra-team-1/600/450 600w, https://picsum.photos/seed/yatra-team-1/1200/900 1200w"
                     sizes="(min-width: 640px) 66vw, 100vw"
                     alt="Yatra Card field operations team"
                     width="600" height="450" loading="lazy"
                     class="h-56 w-full rounded-2xl object-cover shadow-md sm:col-span-2 sm:h-72">
                <div class="grid grid-rows-2 gap-4">
                    <img src="https://picsum.photos/seed/yatra-team-2/400/220"
                         srcset="https://picsum.photos/seed/yatra-team-2/400/220 400w, https://picsum.photos/seed/yatra-team-2/800/440 800w"
                         sizes="(min-width: 640px) 33vw, 100vw"
                         alt="Yatra Card counter staff assisting a rider"
                         width="400" height="220" loading="lazy"
                         class="h-full w-full rounded-2xl object-cover shadow-md">
                    <img src="https://picsum.photos/seed/yatra-team-3/400/220"
                         srcset="https://picsum.photos/seed/yatra-team-3/400/220 400w, https://picsum.photos/seed/yatra-team-3/800/440 800w"
                         sizes="(min-width: 640px) 33vw, 100vw"
                         alt="Yatra Card engineers reviewing a terminal install"
                         width="400" height="220" loading="lazy"
                         class="h-full w-full rounded-2xl object-cover shadow-md">
                </div>
            </div>
        </div>
    </section>

    @include('partials.home.stats')

    <section 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-14 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Core Values</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    What Drives <span class="text-primary dark:text-secondary">Every Decision</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($values as $i => $value)
                    <div class="reveal-scale rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 90 }}ms">
                        <div class="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                            <i class="fa-solid {{ $value['icon'] }}"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-sm font-bold text-slate-900 dark:text-white">{{ $value['title'] }}</h3>
                        <p class="text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $value['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <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">Leadership</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    The People Behind <span class="text-primary dark:text-secondary">Yatra Card</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($leadership as $i => $person)
                    <div class="reveal-scale group rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 90 }}ms">
                        <img src="https://i.pravatar.cc/96?img={{ $person['img'] }}" alt="{{ $person['name'] }}"
                             width="72" height="72" loading="lazy"
                             class="mx-auto mb-4 h-[72px] w-[72px] rounded-full border-2 border-slate-100 object-cover dark:border-white/10">
                        <h3 class="font-heading text-sm font-bold text-slate-900 dark:text-white">{{ $person['name'] }}</h3>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ $person['role'] }}</p>
                        <a href="#" aria-label="{{ $person['name'] }} on LinkedIn"
                           class="mt-3 inline-grid h-8 w-8 place-items-center rounded-lg bg-slate-100 text-slate-500 transition duration-300 hover:bg-secondary hover:text-white dark:bg-white/5 dark:text-slate-400">
                            <i class="fa-brands fa-linkedin-in text-xs"></i>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

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