<?php
/**
 * Vista: Categoria
 * @var array $noticias
 * @var string $categoriaNombre
 * @var string $categoriaSlug
 */
?>

<!-- Breadcrumb -->
<nav class="mb-6" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-2 text-sm text-gray-500">
        <li><a href="/" class="hover:text-primary-600 transition">Inicio</a></li>
        <li aria-hidden="true"><span class="mx-1">/</span></li>
        <li class="text-gray-900 font-medium"><?= htmlspecialchars($categoriaNombre) ?></li>
    </ol>
</nav>

<!-- Encabezado de categoria -->
<div class="mb-8">
    <div class="flex items-center space-x-3 mb-2">
        <div class="w-1 h-8 bg-primary-600 rounded-full"></div>
        <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900"><?= htmlspecialchars($categoriaNombre) ?></h1>
    </div>
    <p class="text-gray-500 ml-5"><?= count($noticias) ?> <?= count($noticias) === 1 ? 'noticia' : 'noticias' ?> publicadas</p>
</div>

<?php if (empty($noticias)): ?>

<!-- Sin noticias -->
<div class="bg-white rounded-xl shadow-sm p-12 text-center">
    <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
    <h2 class="text-xl font-bold text-gray-900 mb-2">No hay noticias</h2>
    <p class="text-gray-500">Aun no se han publicado noticias en esta categoria.</p>
    <a href="/" class="inline-block mt-6 bg-primary-600 hover:bg-primary-700 text-white font-semibold px-6 py-3 rounded-lg transition">Volver al inicio</a>
</div>

<?php else: ?>

<!-- Primera noticia (hero) -->
<?php $primera = $noticias[array_key_first($noticias)]; ?>
<article class="mb-10" itemscope itemtype="https://schema.org/NewsArticle">
    <a href="/noticia/<?= htmlspecialchars($primera['slug']) ?>" class="group block" itemprop="url">
        <div class="relative overflow-hidden rounded-2xl shadow-lg">
            <img
                src="<?= htmlspecialchars($primera['imagen']) ?>"
                alt="<?= htmlspecialchars($primera['imagenAlt'] ?? $primera['titulo']) ?>"
                class="w-full h-[350px] md:h-[450px] object-cover transition-transform duration-500 group-hover:scale-105"
                loading="eager"
                width="800"
                height="450"
                itemprop="image"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-6 md:p-10">
                <span class="inline-block bg-accent text-white text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full mb-3" itemprop="articleSection">
                    <?= htmlspecialchars($primera['categoria']) ?>
                </span>
                <h2 class="text-2xl md:text-3xl font-bold text-white leading-tight mb-3 group-hover:text-primary-300 transition" itemprop="headline">
                    <?= htmlspecialchars($primera['titulo']) ?>
                </h2>
                <p class="text-gray-200 text-sm md:text-base leading-relaxed max-w-3xl mb-4" itemprop="description">
                    <?= htmlspecialchars($primera['resumen']) ?>
                </p>
                <div class="flex items-center text-gray-300 text-xs space-x-4">
                    <span itemprop="author">
                        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                        <?= htmlspecialchars($primera['autor']) ?>
                    </span>
                    <span>
                        <svg class="w-4 h-4 mr-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <time datetime="<?= htmlspecialchars($primera['fechaISO']) ?>"><?= htmlspecialchars($primera['fecha']) ?></time>
                    </span>
                </div>
            </div>
        </div>
        <meta itemprop="datePublished" content="<?= htmlspecialchars($primera['fechaISO']) ?>T12:00:00-05:00">
    </a>
</article>

<?php
$resto = array_slice(array_values($noticias), 1);
if (!empty($resto)):
?>

<!-- Resto de noticias -->
<section aria-labelledby="mas-noticias-heading">
    <div class="flex items-center space-x-3 mb-6">
        <div class="w-1 h-6 bg-accent rounded-full" aria-hidden="true"></div>
        <h2 id="mas-noticias-heading" class="text-xl font-bold text-gray-900">Mas noticias</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <?php foreach ($resto as $noticia): ?>
        <article class="group" itemscope itemtype="https://schema.org/NewsArticle">
            <a href="/noticia/<?= htmlspecialchars($noticia['slug']) ?>" class="block" itemprop="url">
                <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden h-full">
                    <div class="relative overflow-hidden">
                        <img
                            src="<?= htmlspecialchars($noticia['imagen']) ?>"
                            alt="<?= htmlspecialchars($noticia['imagenAlt'] ?? $noticia['titulo']) ?>"
                            class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
                            loading="lazy"
                            width="800"
                            height="450"
                            itemprop="image"
                        >
                        <span class="absolute top-3 left-3 bg-white/90 backdrop-blur-sm text-gray-800 text-xs font-semibold px-3 py-1 rounded-full" itemprop="articleSection">
                            <?= htmlspecialchars($noticia['categoria']) ?>
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-bold text-gray-900 leading-snug mb-2 group-hover:text-primary-600 transition" itemprop="headline">
                            <?= htmlspecialchars($noticia['titulo']) ?>
                        </h3>
                        <p class="text-gray-500 text-sm leading-relaxed mb-4 line-clamp-3" itemprop="description">
                            <?= htmlspecialchars($noticia['resumen']) ?>
                        </p>
                        <div class="flex items-center text-gray-400 text-xs space-x-3">
                            <span itemprop="author"><?= htmlspecialchars($noticia['autor']) ?></span>
                            <span aria-hidden="true">&bull;</span>
                            <time datetime="<?= htmlspecialchars($noticia['fechaISO']) ?>"><?= htmlspecialchars($noticia['fecha']) ?></time>
                        </div>
                    </div>
                </div>
                <meta itemprop="datePublished" content="<?= htmlspecialchars($noticia['fechaISO']) ?>T12:00:00-05:00">
            </a>
        </article>
        <?php endforeach; ?>
    </div>
</section>

<?php endif; ?>
<?php endif; ?>
