@extends('layouts.site')

@section('title', optional($page)->meta_title ?: 'Downloads')
@section('meta_description', optional($page)->meta_description ?? 'Policies, forms and useful documents.')

@section('content')
    <div class="mx-auto max-w-7xl px-4 py-14 lg:px-8 lg:py-20">
        <header data-aos="fade-up">
            @if($page && filled($page->intro))
                <p class="max-w-3xl text-neutral-700">{{ $page->intro }}</p>
            @endif
            <h1 class="mt-6 font-display text-4xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Downloads</h1>
        </header>

        <ul class="mt-12 divide-y divide-neutral-100 rounded-xl border border-neutral-100 bg-[var(--color-surface-alt)]" role="list" data-aos="fade-up">
            @forelse($downloads as $download)
                <li id="{{ $download->slug }}" class="flex flex-col gap-2 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <span class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">{{ $download->title }}</span>
                        @if(filled($download->category))
                            <span class="ml-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">{{ $download->category }}</span>
                        @endif
                        @if(filled($download->description))
                            <p class="mt-2 max-w-2xl text-sm text-neutral-600">{{ $download->description }}</p>
                        @endif
                    </div>
                    <a class="mt-3 inline-flex min-h-[44px] items-center text-sm font-semibold text-[var(--color-accent)] underline-offset-4 hover:underline sm:mt-0" href="{{ route('downloads.file', $download) }}">Download file</a>
                </li>
            @empty
                <li class="px-6 py-8 text-neutral-700">Documents will appear here when published.</li>
            @endforelse
        </ul>

        <nav class="mt-12 text-sm text-neutral-600" aria-label="Breadcrumb">
            <ol class="flex flex-wrap gap-2">
                <li><a class="underline-offset-4 hover:underline" href="{{ route('home') }}">Home</a></li>
                <li aria-hidden="true">/</li>
                <li class="text-neutral-900">Downloads</li>
            </ol>
        </nav>
    </div>
@endsection