@extends('layouts.app')

@section('content')
    <x-page-hero title="Resources" subtitle="Articles and answers about HMIS, ABDM, ABHA and digital health." :breadcrumbs="[['label' => 'Resources']]" />

    {{-- Blog --}}
    <section class="section" id="blog">
        <div class="container-page">
            <x-section-heading title="Latest articles" />

            @if ($posts->isEmpty())
                <p>No articles yet. Please check back soon.</p>
            @else
                <div class="grid gap-6 md:grid-cols-3">
                    @foreach ($posts as $post)
                        <x-card :title="$post['title']" :eyebrow="$post['date']->format('j M Y')" :href="route('resources.show', $post['slug'])" link-label="Read article">
                            {{ $post['summary'] }}
                        </x-card>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    {{-- FAQ --}}
    <section class="section bg-slate-50" id="faq">
        <div class="container-page max-w-3xl">
            <x-section-heading title="Frequently asked questions" />
            <div class="border-t border-slate-200">
                @foreach (config('site.faq') as $faq)
                    <x-faq-item :question="$faq['q']">{{ $faq['a'] }}</x-faq-item>
                @endforeach
            </div>
        </div>
    </section>
@endsection