@php
    $positions = [
        ['title' => 'Backend Engineer (Laravel)', 'dept' => 'Engineering', 'location' => 'Kathmandu · Hybrid'],
        ['title' => 'Embedded Systems Engineer (NFC)', 'dept' => 'Hardware', 'location' => 'Kathmandu · On-site'],
        ['title' => 'Field Operations Associate', 'dept' => 'Operations', 'location' => 'Kathmandu Valley'],
        ['title' => 'Customer Support Specialist', 'dept' => 'Support', 'location' => 'Remote · Nepal'],
        ['title' => 'Product Designer', 'dept' => 'Design', 'location' => 'Kathmandu · Hybrid'],
    ];
    $benefits = [
        ['icon' => 'fa-house-laptop', 'title' => 'Hybrid & Remote Friendly', 'desc' => 'Work from the office, home, or a mix — role dependent.'],
        ['icon' => 'fa-heart-pulse', 'title' => 'Health Insurance', 'desc' => 'Medical coverage for you and your immediate family.'],
        ['icon' => 'fa-graduation-cap', 'title' => 'Learning Budget', 'desc' => 'Annual budget for courses, books, and conferences.'],
        ['icon' => 'fa-bus', 'title' => 'Free Yatra Card', 'desc' => 'Every employee rides free on partner routes.'],
    ];
@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 Yatra Card — 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 Yatra Card — 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="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 {{ $b['icon'] }}"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-sm font-bold 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" x-data="{ modalOpen: false, selectedRole: '' }">
        <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">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)
                    <div 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"></i>{{ $position['dept'] }}
                                <span class="mx-2">&middot;</span>
                                <i class="fa-solid fa-location-dot mr-1 text-secondary"></i>{{ $position['location'] }}
                            </p>
                        </div>
                        <button type="button" @click="selectedRole = '{{ $position['title'] }}'; modalOpen = true"
                                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 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-200 dark:hover:border-secondary dark:hover:text-secondary">
                            Apply
                        </button>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Application modal -->
        <div x-show="modalOpen" x-cloak x-transition.opacity
             @keydown.escape.window="modalOpen = false"
             class="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-4">
            <div @click.outside="modalOpen = false" x-transition
                 class="w-full max-w-lg rounded-2xl bg-white p-8 shadow-2xl dark:bg-panel">
                <div class="mb-6 flex items-start justify-between">
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wide text-secondary">Applying for</p>
                        <h3 class="font-heading text-lg font-bold text-slate-900 dark:text-white" x-text="selectedRole"></h3>
                    </div>
                    <button @click="modalOpen = false" aria-label="Close" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <form @submit.prevent="modalOpen = false; window.showToast('Application Submitted!', 'We\'ll review it and get back to you within a week.', 'fa-briefcase')" class="space-y-4">
                    <div>
                        <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Name</label>
                        <input type="text" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email</label>
                        <input type="email" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Resume / Portfolio Link</label>
                        <input type="url" placeholder="https://" required class="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Why this role? (optional)</label>
                        <textarea rows="3" class="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary"></textarea>
                    </div>
                    <button type="submit" class="w-full rounded-xl bg-primary py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-[1.01] dark:bg-secondary">
                        Submit Application
                    </button>
                </form>
            </div>
        </div>
    </section>

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