<?php
/**
 * Vista: Pagina de Inicio
 * @var array $noticias
 */
$principal = $noticias[0];
$secundarias = array_slice($noticias, 1, 2);
$terciarias = array_slice($noticias, 3);
?>

<!-- Noticia Principal (Hero) -->
<article class="mb-8" itemscope itemtype="https://schema.org/NewsArticle">
    <a href="/noticia/<?= htmlspecialchars($principal['slug']) ?>" class="group block" itemprop="url">
        <div class="relative overflow-hidden rounded-2xl shadow-lg">
            <img
                src="<?= htmlspecialchars($principal['imagen']) ?>"
                alt="<?= htmlspecialchars($principal['imagenAlt'] ?? $principal['titulo']) ?>"
                class="w-full h-[400px] md:h-[520px] 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($principal['categoria']) ?>
                </span>
                <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight mb-3 group-hover:text-primary-300 transition" itemprop="headline">
                    <?= htmlspecialchars($principal['titulo']) ?>
                </h2>
                <p class="text-gray-200 text-sm md:text-base leading-relaxed max-w-3xl mb-4" itemprop="description">
                    <?= htmlspecialchars($principal['resumen']) ?>
                </p>
                <div class="flex items-center text-gray-300 text-xs space-x-4">
                    <span class="flex items-center" itemprop="author">
                        <svg class="w-4 h-4 mr-1" 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($principal['autor']) ?>
                    </span>
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-1" 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($principal['fechaISO']) ?>"><?= htmlspecialchars($principal['fecha']) ?></time>
                    </span>
                </div>
            </div>
        </div>
        <meta itemprop="datePublished" content="<?= htmlspecialchars($principal['fechaISO']) ?>T12:00:00-05:00">
        <meta itemprop="publisher" content="Noticias de Hoy Online">
    </a>
</article>

<!-- Seccion: Lo mas reciente -->
<section class="mb-12" aria-labelledby="reciente-heading">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-3">
            <div class="w-1 h-6 bg-accent rounded-full" aria-hidden="true"></div>
            <h2 id="reciente-heading" class="text-xl font-bold text-gray-900">Lo mas reciente</h2>
        </div>
        <a href="/ultimas" class="text-sm text-primary-600 hover:text-primary-700 font-medium transition" aria-label="Ver todas las noticias recientes">Ver todo &rarr;</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <?php foreach ($secundarias 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">
                    <div class="relative overflow-hidden">
                        <img
                            src="<?= htmlspecialchars($noticia['imagen']) ?>"
                            alt="<?= htmlspecialchars($noticia['imagenAlt'] ?? $noticia['titulo']) ?>"
                            class="w-full h-56 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>

<!-- Titulares Rapidos -->
<section class="mb-12" aria-labelledby="titulares-heading">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex items-center space-x-3 mb-5">
            <div class="w-1 h-6 bg-primary-600 rounded-full" aria-hidden="true"></div>
            <h2 id="titulares-heading" class="text-xl font-bold text-gray-900">Titulares del dia</h2>
        </div>
        <div class="divide-y divide-gray-100" role="list">
            <?php foreach ($terciarias as $index => $noticia): ?>
            <a href="/noticia/<?= htmlspecialchars($noticia['slug']) ?>" class="group flex items-start py-4 first:pt-0 last:pb-0" role="listitem" itemscope itemtype="https://schema.org/NewsArticle">
                <span class="text-3xl font-extrabold text-gray-200 group-hover:text-primary-300 transition mr-4 mt-0.5 flex-shrink-0" aria-hidden="true">
                    <?= str_pad($index + 1, 2, '0', STR_PAD_LEFT) ?>
                </span>
                <div class="flex-1 min-w-0">
                    <span class="inline-block text-xs font-semibold text-primary-600 uppercase tracking-wider mb-1" itemprop="articleSection">
                        <?= htmlspecialchars($noticia['categoria']) ?>
                    </span>
                    <h3 class="text-base font-semibold text-gray-900 leading-snug group-hover:text-primary-600 transition" itemprop="headline">
                        <?= htmlspecialchars($noticia['titulo']) ?>
                    </h3>
                    <p class="text-gray-500 text-sm mt-1 line-clamp-2" itemprop="description">
                        <?= htmlspecialchars($noticia['resumen']) ?>
                    </p>
                    <div class="mt-2 text-xs text-gray-400">
                        <time datetime="<?= htmlspecialchars($noticia['fechaISO']) ?>"><?= htmlspecialchars($noticia['fecha']) ?></time>
                    </div>
                </div>
                <div class="hidden md:block flex-shrink-0 ml-4">
                    <img
                        src="<?= htmlspecialchars($noticia['imagen']) ?>"
                        alt="<?= htmlspecialchars($noticia['imagenAlt'] ?? $noticia['titulo']) ?>"
                        class="w-24 h-24 rounded-lg object-cover"
                        loading="lazy"
                        width="96"
                        height="96"
                        itemprop="image"
                    >
                </div>
                <meta itemprop="datePublished" content="<?= htmlspecialchars($noticia['fechaISO']) ?>T12:00:00-05:00">
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Newsletter -->
<section class="mb-12" aria-labelledby="newsletter-heading">
    <div class="bg-gradient-to-r from-primary-600 to-primary-800 rounded-2xl p-8 md:p-12 text-center">
        <h2 id="newsletter-heading" class="text-2xl md:text-3xl font-bold text-white mb-3">Mantente informado</h2>
        <p class="text-primary-100 text-sm md:text-base mb-6 max-w-xl mx-auto">
            Suscribete a nuestro boletin y recibe las ultimas noticias directamente en tu correo electronico.
        </p>
        <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto" action="/suscribir" method="POST">
            <label for="email-newsletter" class="sr-only">Correo electronico</label>
            <input
                type="email"
                id="email-newsletter"
                name="email"
                placeholder="Tu correo electronico"
                class="flex-1 px-4 py-3 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/50"
                required
                aria-describedby="newsletter-hint"
            >
            <button
                type="submit"
                class="bg-accent hover:bg-red-700 text-white font-semibold px-6 py-3 rounded-lg text-sm transition whitespace-nowrap"
            >
                Suscribirme
            </button>
        </form>
        <p id="newsletter-hint" class="text-primary-200 text-xs mt-3">Prometemos no hacer spam. Puedes cancelar en cualquier momento.</p>
    </div>
</section>
