@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="padding: 8rem 0; text-align: center;">
    <div class="container" style="max-width: 680px;">
      <div style="font-size: 7rem; font-weight: 800; font-family: var(--font-heading); line-height: 1; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem;">
        404
      </div>
      <h1 style="font-size: 2rem; margin-bottom: 1rem;">Looking for Talent That Isn't Here?</h1>
      <p style="color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2.5rem;">
        The page or vacancy reference you requested could not be located. It might have been filled, moved, or retired.
      </p>

      <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="{{ route('home') }}" class="btn btn-primary btn-lg">
          <i class="fas fa-home"></i> Return to Safety (Home)
        </a>
        <a href="{{ route('jobs.index') }}" class="btn btn-outline btn-lg">
          <i class="fas fa-search"></i> Explore Active Roles
        </a>
      </div>
    </div>
  </section>
</main>
@endsection