@extends('layouts.app')

@section('title', $article->title.' — '.config('site.brand.name'))
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($article->excerpt ?: $article->body), 155))

@section('content')

    <article class="mx-auto max-w-3xl px-4 py-14 sm:px-6 lg:px-8">
        <nav class="mb-6 text-sm text-brand-ink/50">
            <a href="{{ route('articles.index', ['locale' => app()->getLocale()]) }}" class="hover:text-brand-green-800">{{ __('site.nav_health_library') }}</a>
        </nav>

        <div data-reveal>
            @if ($article->published_at)
                <span class="text-xs font-semibold uppercase tracking-wide text-brand-ink/40">
                    {{ __('site.article_published_on') }} {{ $article->published_at->translatedFormat('d M Y') }}
                </span>
            @endif
            <h1 class="mt-2 text-2xl font-semibold text-brand-ink sm:text-3xl sm:font-bold lg:text-4xl">{{ $article->title }}</h1>
        </div>

        @if ($article->coverImageUrl())
            <img src="{{ $article->coverImageUrl() }}" alt="{{ $article->title }}" data-reveal
                 class="mt-8 aspect-video w-full rounded-3xl object-cover">
        @endif

        <div class="mt-10 whitespace-pre-line text-lg leading-relaxed text-brand-ink/80" data-reveal>
            {{ $article->body }}
        </div>
    </article>

    @if ($related->isNotEmpty())
        <section class="bg-white py-16">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <h2 class="text-xl font-semibold text-brand-ink sm:text-2xl sm:font-bold" data-reveal>{{ __('site.article_related_title') }}</h2>
                <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($related as $relatedArticle)
                        <x-article-card :article="$relatedArticle" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

@endsection