@extends('layouts.app')

@section('title', __('site.articles_title').' — '.config('site.brand.name'))

@section('content')

    <section class="bg-brand-green-950 py-16 text-center text-white">
        <div class="mx-auto max-w-3xl px-4" data-reveal>
            <span class="section-eyebrow !bg-white/10 !text-brand-lime-400">{{ __('site.nav_health_library') }}</span>
            <h1 class="mt-4 text-3xl font-semibold sm:text-4xl sm:font-bold lg:text-5xl">{{ __('site.articles_title') }}</h1>
            <p class="mt-4 text-brand-green-50/80">{{ __('site.articles_subtitle') }}</p>
        </div>
    </section>

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        @if ($articles->isEmpty())
            <p class="text-center text-brand-ink/60">{{ __('site.articles_empty') }}</p>
        @else
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($articles as $article)
                    <x-article-card :article="$article" style="transition-delay: {{ min($loop->index, 5) * 80 }}ms" />
                @endforeach
            </div>
            <div class="mt-12">
                {{ $articles->links() }}
            </div>
        @endif
    </section>

@endsection