@extends('layouts.app')

@section('content')
  @php
    // Quick links: editable in Foundation Settings → 404 Page. Fall back to a
    // sensible default set when the repeater is empty.
    $links = array_values(array_filter(
      $options['error_404_links'] ?? [],
      fn ($l) => ! empty($l['label']) && ! empty($l['url'])
    ));

    if (empty($links)) {
      $links = [
        ['label' => 'Events',  'url' => home_url('/events')],
        ['label' => 'Grants',  'url' => home_url('/grants')],
        ['label' => 'Donate',  'url' => home_url('/donate')],
        ['label' => 'Contact', 'url' => home_url('/contact')],
      ];
    }
  @endphp

  <section class="relative min-h-svh -mt-nav pt-nav flex items-center overflow-hidden bg-green-950">
    {{-- Background gradient --}}
    <div class="absolute inset-0 bg-gradient-to-t from-green-950 via-green-950 to-green-900/50"></div>

    {{-- Oversized faint watermark --}}
    <span aria-hidden="true"
          class="pointer-events-none select-none absolute -right-[2vw] top-1/2 -translate-y-1/2 font-display font-medium leading-none text-white/[0.04] text-[38vw] md:text-[28vw]">404</span>

    {{-- Content --}}
    <div class="relative z-10 w-full px-[5vw] py-24 max-w-3xl">
      <div class="inline-flex items-center gap-2 text-xs font-medium tracking-[0.12em] uppercase text-green-200 mb-5">
        <span class="inline-block w-6 h-0.5 bg-green-400 rounded-full"></span>
        404 Error
      </div>

      <h1 class="font-display text-[clamp(2.5rem,5vw,4.5rem)] font-medium leading-[1.1] text-white mb-5">
        Page not found
      </h1>

      <p class="text-lg font-light text-white/60 max-w-xl leading-relaxed mb-9">
        The page you&rsquo;re looking for doesn&rsquo;t exist or may have moved. Let&rsquo;s get you back on track.
      </p>

      <div class="flex flex-col items-start gap-7 sm:flex-row sm:items-center sm:gap-9">
        <x-btn variant="gold" href="{{ home_url('/') }}" :arrow="true">Back to Home</x-btn>

        <nav aria-label="Helpful links" class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
          @foreach ($links as $link)
            <a href="{{ $link['url'] }}"
               class="text-green-200 no-underline transition-colors hover:text-white">{{ $link['label'] }}</a>
          @endforeach
        </nav>
      </div>
    </div>
  </section>
@endsection