@component('layouts.app', [
    'title' => $job['title'],
    'metaDescription' => $job['summary'],
])
    @include('partials.page-hero', [
        'eyebrow' => $job['dept'] . ' · ' . $job['location'],
        'title' => $job['title'],
        'subtitle' => $job['summary'],
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28">
        <div class="mx-auto max-w-5xl px-6">
            <a href="{{ route('careers') }}" class="reveal mb-8 inline-flex items-center gap-2 text-sm font-semibold text-slate-500 transition hover:text-primary dark:text-slate-400 dark:hover:text-secondary">
                <i class="fa-solid fa-arrow-left text-xs" aria-hidden="true"></i> Back to Open Positions
            </a>

            <!-- Job meta bar -->
            <div class="reveal mb-10 grid grid-cols-2 gap-4 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel sm:grid-cols-3 lg:grid-cols-6">
                @foreach ([
                    ['icon' => 'fa-layer-group', 'label' => 'Department', 'value' => $job['dept']],
                    ['icon' => 'fa-location-dot', 'label' => 'Location', 'value' => $job['location']],
                    ['icon' => 'fa-briefcase', 'label' => 'Type', 'value' => $job['type']],
                    ['icon' => 'fa-chart-line', 'label' => 'Level', 'value' => $job['level']],
                    ['icon' => 'fa-calendar', 'label' => 'Posted', 'value' => $job['posted']],
                    ['icon' => 'fa-hourglass-half', 'label' => 'Apply By', 'value' => $job['deadline']],
                ] as $meta)
                    <div>
                        <p class="mb-1 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">
                            <i class="fa-solid {{ $meta['icon'] }} text-secondary-a11y dark:text-secondary" aria-hidden="true"></i> {{ $meta['label'] }}
                        </p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $meta['value'] }}</p>
                    </div>
                @endforeach
            </div>

            <div class="grid grid-cols-1 gap-10 lg:grid-cols-5">
                <div class="reveal-left lg:col-span-3">
                    <div>
                        <h2 class="mb-3 font-heading text-lg font-bold text-slate-900 dark:text-white">Responsibilities</h2>
                        <ul class="space-y-2.5">
                            @foreach ($job['responsibilities'] as $item)
                                <li class="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-300">
                                    <i class="fa-solid fa-circle-check mt-0.5 text-primary dark:text-secondary" aria-hidden="true"></i>
                                    <span>{{ $item }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="mt-8">
                        <h2 class="mb-3 font-heading text-lg font-bold text-slate-900 dark:text-white">Requirements</h2>
                        <ul class="space-y-2.5">
                            @foreach ($job['requirements'] as $item)
                                <li class="flex items-start gap-3 text-sm text-slate-600 dark:text-slate-300">
                                    <i class="fa-solid fa-circle-check mt-0.5 text-primary dark:text-secondary" aria-hidden="true"></i>
                                    <span>{{ $item }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="mt-8">
                        <h2 class="mb-3 font-heading text-lg font-bold text-slate-900 dark:text-white">Benefits</h2>
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            @foreach (config('site_content.benefits') as $b)
                                <div class="flex items-start gap-3 rounded-xl border border-slate-100 p-3 dark:border-white/10">
                                    <span class="grid h-9 w-9 flex-shrink-0 place-items-center rounded-lg bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                        <i class="fa-solid {{ $b['icon'] }} text-sm" aria-hidden="true"></i>
                                    </span>
                                    <div>
                                        <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $b['title'] }}</p>
                                        <p class="text-xs text-slate-500 dark:text-slate-400">{{ $b['desc'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Standard apply form -->
                <div class="reveal-right lg:col-span-2">
                    <div class="sticky top-24 rounded-2xl border border-slate-100 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-panel"
                         x-data="{
                             submitting: false,
                             submitted: false,
                             resumeFileName: '',
                             handleResume(e) { if (e.target.files[0]) this.resumeFileName = e.target.files[0].name; },
                             submit(el) {
                                 if (!window.validateForm(el)) return;
                                 this.submitting = true;
                                 setTimeout(() => {
                                     this.submitting = false;
                                     this.submitted = true;
                                     window.showToast('Application Submitted!', 'We\'ll review it and get back to you within a week.', 'fa-briefcase');
                                 }, 900);
                             },
                         }">
                        <template x-if="!submitted">
                            <div>
                                <h2 class="mb-1 font-heading text-lg font-bold text-slate-900 dark:text-white">Apply for This Role</h2>
                                <p class="mb-5 text-xs text-slate-500 dark:text-slate-400">Takes about two minutes.</p>

                                <form class="space-y-4" @submit.prevent="submit($el)">
                                    <div>
                                        <label for="job-name" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Full Name</label>
                                        <input id="job-name" name="name" type="text" required minlength="3" autocomplete="name"
                                               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 class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                        <div>
                                            <label for="job-email" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email</label>
                                            <input id="job-email" name="email" type="email" required autocomplete="email"
                                                   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 for="job-phone" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Phone</label>
                                            <input id="job-phone" name="phone" type="tel" required autocomplete="tel"
                                                   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>
                                    <div>
                                        <label for="job-linkedin" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">LinkedIn / Portfolio URL</label>
                                        <input id="job-linkedin" name="linkedin" type="url" required placeholder="https://"
                                               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 for="job-resume" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Resume / CV</label>
                                        <label for="job-resume"
                                               class="flex cursor-pointer items-center gap-3 rounded-xl border border-dashed border-slate-300 px-4 py-3.5 text-xs text-slate-500 transition hover:border-primary dark:border-white/20 dark:text-slate-400">
                                            <i class="fa-solid fa-cloud-arrow-up text-slate-400" aria-hidden="true"></i>
                                            <span x-text="resumeFileName || 'Click to upload (PDF or DOCX)'"></span>
                                        </label>
                                        <input id="job-resume" type="file" accept=".pdf,.doc,.docx" required class="sr-only" @change="handleResume($event)">
                                    </div>
                                    <div>
                                        <label for="job-cover-letter" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Cover Letter (optional)</label>
                                        <textarea id="job-cover-letter" name="coverLetter" rows="3" placeholder="Why this role?"
                                                  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>
                                    <div>
                                        <label for="job-source" class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">How did you hear about us?</label>
                                        <select id="job-source" name="source" 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">
                                            <option value="" disabled selected>Select one</option>
                                            <option>Job Board</option>
                                            <option>LinkedIn</option>
                                            <option>Referral</option>
                                            <option>Fintech Website</option>
                                            <option>Other</option>
                                        </select>
                                    </div>
                                    <label class="flex items-start gap-2.5">
                                        <input type="checkbox" required class="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary dark:border-white/20 dark:bg-surface dark:text-secondary">
                                        <span class="text-xs text-slate-500 dark:text-slate-400">I consent to Fintech storing my application details for recruitment purposes.</span>
                                    </label>
                                    <button type="submit" :disabled="submitting"
                                            class="w-full rounded-xl bg-primary py-3 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-[1.01] disabled:cursor-not-allowed disabled:opacity-60 dark:bg-secondary dark:text-ink">
                                        <span x-show="!submitting">Submit Application</span>
                                        <span x-show="submitting" x-cloak><i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i> Submitting…</span>
                                    </button>
                                </form>
                            </div>
                        </template>

                        <template x-if="submitted">
                            <div class="py-6 text-center">
                                <div class="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-emerald-100 text-xl text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
                                    <i class="fa-solid fa-check" aria-hidden="true"></i>
                                </div>
                                <h3 class="font-heading text-lg font-bold text-slate-900 dark:text-white">Application Received</h3>
                                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">We'll review your application and get back to you within a week.</p>
                                <a href="{{ route('careers') }}" class="mt-5 inline-block text-sm font-semibold text-primary underline dark:text-secondary">View other open roles</a>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>

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