{{-- Consejos de redacción (con ejemplo bueno/mejorable) y preguntas frecuentes. --}}
@php
    $tips = [
        ['Título', 'Evento de la Facultad', 'Estudiantes de Administración ganan concurso regional de planes de negocio'],
        ['Resumen', 'Se realizó un evento importante.', 'Un equipo de quinto ciclo obtuvo el primer lugar con un plan para productores de Abancay.'],
        ['Foto', 'Afiche escaneado del evento', 'Estudiantes recibiendo el premio, en horizontal'],
    ];
    $faq = [
        ['¿Por qué no aparece mi noticia en el sitio?', 'Revisa su estado en la franja: si es Borrador, nadie la ve; si es Programada, saldrá en la fecha elegida (hasta 10 minutos después). Si la acabas de publicar y no la ves, recarga la página del sitio.'],
        ['¿Puedo cambiar la fecha de una noticia ya publicada?', 'Una noticia publicada conserva su fecha al editarla, para no desordenar el listado. Si necesitas otra fecha, pásala a Programada con la fecha nueva.'],
        ['¿Cómo quito la noticia fijada?', 'Edítala y apaga «Fijar en la portada». La portada mostrará entonces la noticia más reciente.'],
        ['¿Qué pasa si elimino una noticia por error?', 'Está en la pestaña Papelera. Usa ⋯ → Restaurar y vuelve a su estado anterior.'],
        ['¿Puedo borrar una categoría?', 'Solo si no tiene noticias. Si las tiene, cámbiales primero la categoría.'],
        ['¿Qué tan grande puede ser una foto?', 'Hasta 10 MB. El sistema la reduce solo para que el sitio cargue rápido.'],
    ];
@endphp

<div class="grid gap-8 xl:grid-cols-2">
    <section>
        <h3 class="text-lg font-extrabold text-gray-950 [font-stretch:110%] dark:text-white">Cómo escribir una buena noticia</h3>
        <div class="mt-4 space-y-3">
            @foreach ($tips as [$label, $weak, $strong])
                <article class="overflow-hidden rounded-2xl ring-1 ring-gray-200 dark:ring-white/10">
                    <p class="bg-gray-50 px-4 py-2 font-bold text-gray-950 dark:bg-white/5 dark:text-white">{{ $label }}</p>
                    <div class="grid sm:grid-cols-2">
                        <p class="flex gap-2 px-4 py-3 text-gray-600 dark:text-gray-300">
                            <x-filament::icon icon="heroicon-o-x-circle" class="mt-0.5 size-5 shrink-0 text-[#b42318] dark:text-[#ff9b8f]" aria-hidden="true" />
                            <span><span class="sr-only">Mejorable: </span>{{ $weak }}</span>
                        </p>
                        <p class="flex gap-2 border-t border-gray-200 bg-[#5a9a46]/8 px-4 py-3 font-medium text-gray-900 sm:border-t-0 sm:border-s dark:border-white/10 dark:text-white">
                            <x-filament::icon icon="heroicon-o-check-circle" class="mt-0.5 size-5 shrink-0 text-[#3d7a2c] dark:text-[#8fd07a]" aria-hidden="true" />
                            <span><span class="sr-only">Mejor: </span>{{ $strong }}</span>
                        </p>
                    </div>
                </article>
            @endforeach
        </div>
    </section>

    <section>
        <h3 class="text-lg font-extrabold text-gray-950 [font-stretch:110%] dark:text-white">Preguntas frecuentes</h3>
        <div class="mt-4 divide-y divide-gray-200 rounded-2xl ring-1 ring-gray-200 dark:divide-white/10 dark:ring-white/10">
            @foreach ($faq as [$question, $answer])
                <details class="group px-4 py-3 open:bg-gray-50 dark:open:bg-white/5">
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-3 font-semibold text-gray-950 dark:text-white">
                        {{ $question }}
                        <x-filament::icon icon="heroicon-m-chevron-down" class="size-5 shrink-0 text-gray-400 transition group-open:rotate-180" aria-hidden="true" />
                    </summary>
                    <p class="mt-2 max-w-[62ch]">{{ $answer }}</p>
                </details>
            @endforeach
        </div>
    </section>
</div>