@php
    $positions = config('site_content.jobs');
    $benefits = config('site_content.benefits');
@endphp

@component('layouts.app', [
    'title' => 'Careers',
    'metaDescription' => 'Join the team building cashless transit for Nepal. Open roles in engineering, hardware, operations, and support.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Company',
        'title' => 'Help Us Move Nepal Forward',
        'subtitle' => 'We are a small team solving a very physical problem with software, hardware, and a lot of bus rides.',
    ])

    <section class="pb-16">
        <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-culture/1200/450"
                 srcset="https://picsum.photos/seed/yatra-culture/700/263 700w, https://picsum.photos/seed/yatra-culture/1200/450 1200w, https://picsum.photos/seed/yatra-culture/2000/750 2000w"
                 sizes="100vw"
                 alt="Life at Fintech — the team on-site at a bus terminal"
                 width="1200" height="450" loading="lazy"
                 class="h-64 w-full object-cover sm:h-80 sm:rounded-3xl">
            <div class="absolute inset-0 flex items-end bg-gradient-to-t from-black/70 to-transparent p-8 sm:rounded-3xl">
                <p class="text-sm font-semibold text-white sm:text-base">Life at Fintech — on the road, at the terminals, where the product actually lives.</p>
            </div>
        </div>
    </section>

    <section class="py-20 dark:bg-ink lg:py-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 ($benefits as $i => $b)
                    <div class="glow-card glow-card--{{ $b['theme'] }} glow-card--compact reveal-scale"
                         style="transition-delay: {{ $i * 90 }}ms">
                        <span class="glow-card__glow" aria-hidden="true"></span>
                        <div class="glow-card__icon">
                            <i class="fa-solid {{ $b['icon'] }}"></i>
                        </div>
                        <h3 class="glow-card__title mb-2 text-sm text-slate-900 dark:text-white">{{ $b['title'] }}</h3>
                        <p class="text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $b['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">
            <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-a11y dark:text-secondary">Open Positions</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    Come Build With <span class="text-primary dark:text-secondary">Us</span>
                </h2>
            </div>

            <div class="reveal space-y-3">
                @foreach ($positions as $position)
                    <a href="{{ route('careers.show', $position['slug']) }}"
                       class="flex flex-col items-start justify-between gap-3 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg dark:border-white/10 dark:bg-panel sm:flex-row sm:items-center">
                        <div>
                            <h3 class="font-heading text-base font-bold text-slate-900 dark:text-white">{{ $position['title'] }}</h3>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                                <i class="fa-solid fa-layer-group mr-1 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $position['dept'] }}
                                <span class="mx-2">&middot;</span>
                                <i class="fa-solid fa-location-dot mr-1 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $position['location'] }}
                                <span class="mx-2">&middot;</span>
                                <i class="fa-solid fa-briefcase mr-1 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $position['type'] }}
                            </p>
                        </div>
                        <span class="flex-shrink-0 rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-semibold text-slate-700 transition duration-300 dark:border-white/10 dark:text-slate-200">
                            View Details <i class="fa-solid fa-arrow-right ml-1 text-xs" aria-hidden="true"></i>
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

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