@extends('layouts.site')

@section('content')
@php
    $isAr = $locale === 'ar';
    $titleField = $isAr ? 'title_ar' : 'title_en';
    $excerptField = $isAr ? 'excerpt_ar' : 'excerpt_en';
    $typeLabels = [
        'news' => $isAr ? 'أخبار منوعة' : 'News',
        'article' => $isAr ? 'مقالات' : 'Articles',
        'annual_report' => $isAr ? 'تقارير سنوية' : 'Annual Reports',
        'awareness' => $isAr ? 'مواد توعوية' : 'Awareness',
        'media' => $isAr ? 'مواد إعلامية' : 'Media Materials',
        'success_story' => $isAr ? 'قصص نجاح' : 'Success Stories',
    ];
@endphp
<section class="page-hero">
    <div class="container page-hero-inner reveal">
        <span class="eyebrow">{{ $isAr ? 'المركز الإعلامي' : 'Media Center' }}</span>
        <h1>{{ $isAr ? 'أخبار وتقارير ومواد توعوية وقصص نجاح' : 'News, Reports, Awareness, and Success Stories' }}</h1>
    </div>
</section>
<section class="section">
    <div class="container">
        <div class="filter-tabs reveal">
            <a class="{{ $activeType ? '' : 'active' }}" href="{{ url('/' . $locale . '/media') }}">{{ $isAr ? 'الكل' : 'All' }}</a>
            @foreach ($types as $type => $label)
                <a class="{{ $activeType === $type ? 'active' : '' }}" href="{{ url('/' . $locale . '/media/' . $type) }}">{{ $typeLabels[$type] }}</a>
            @endforeach
        </div>
        <div class="content-grid">
            @forelse ($posts as $post)
                <article class="content-card reveal">
                    <img src="{{ \App\Support\MediaUrl::to($post->image) }}" alt="{{ $post->{$titleField} }}">
                    <div>
                        <span class="tag">{{ $typeLabels[$post->type] }}</span>
                        <h3>{{ $post->{$titleField} }}</h3>
                        <p>{{ $post->{$excerptField} }}</p>
                        <a class="text-link" href="{{ url('/' . $locale . '/media/' . $post->type . '/' . $post->slug) }}">{{ $isAr ? 'اقرأ المزيد' : 'Read more' }}</a>
                    </div>
                </article>
            @empty
                <p class="empty-state">{{ $isAr ? 'لا توجد مواد منشورة حالياً.' : 'No published items yet.' }}</p>
            @endforelse
        </div>
        {{ $posts->links() }}
    </div>
</section>
@endsection