<?php
declare(strict_types=1);
?>

<section class="home-publicaciones" id="inicio-eventos" aria-labelledby="publicaciones-title">
  <div class="home-publicaciones__shell">
    <div class="home-publicaciones__head">
      <div class="home-publicaciones__copy">
        <p class="home-publicaciones__eyebrow">Comunidad Biblioteca</p>
        <h2 id="publicaciones-title">Eventos y noticias</h2>
      </div>

      <div class="home-publicaciones__controls">
        <button type="button" class="home-publicaciones__arrow" data-posts-prev aria-label="Publicaciones anteriores">
          <span aria-hidden="true">&lt;</span>
        </button>
        <button type="button" class="home-publicaciones__arrow" data-posts-next aria-label="Siguientes publicaciones">
          <span aria-hidden="true">&gt;</span>
        </button>
      </div>
    </div>

    <div class="home-publicaciones__viewport" data-posts-viewport>
      <div class="home-publicaciones__track" data-posts-track>
        <?php foreach ($publicaciones as $item): ?>
          <?php
          $titulo = (string) ($item['titulo'] ?? '');
          $tipo = (string) ($item['tipo'] ?? 'Actualización');
          $canal = (string) ($item['canal'] ?? 'Biblioteca');
          $usuario = (string) ($item['usuario'] ?? 'Biblioteca Unillanos');
          $fechaTexto = (string) ($item['fecha_texto'] ?? '');
          $extracto = (string) ($item['extracto'] ?? '');
          $detalle = (string) ($item['detalle'] ?? '');
          $imagen = (string) ($item['imagen'] ?? '');
          $acento = (string) ($item['acento'] ?? '#8f141b');
          $enlace = (string) ($item['enlace'] ?? '');
          $botonTexto = (string) ($item['boton_texto'] ?? 'Ver publicación');
          $esExterno = str_starts_with($enlace, 'http://') || str_starts_with($enlace, 'https://');
          $inicialesBase = (string) preg_replace('/[^A-Za-z]/', '', $canal);
          $iniciales = strtoupper(substr($inicialesBase, 0, 2));
          ?>
          <article class="social-post" style="--post-accent: <?= htmlspecialchars($acento, ENT_QUOTES, 'UTF-8') ?>;">
            <header class="social-post__top">
              <div class="social-post__avatar"><?= htmlspecialchars($iniciales !== '' ? $iniciales : 'BU', ENT_QUOTES, 'UTF-8') ?></div>
              <div class="social-post__identity">
                <strong><?= htmlspecialchars($canal, ENT_QUOTES, 'UTF-8') ?></strong>
                <span><?= htmlspecialchars($usuario, ENT_QUOTES, 'UTF-8') ?><?php if ($fechaTexto !== ''): ?> | <?= htmlspecialchars($fechaTexto, ENT_QUOTES, 'UTF-8') ?><?php endif; ?></span>
              </div>
              <span class="social-post__type"><?= htmlspecialchars($tipo, ENT_QUOTES, 'UTF-8') ?></span>
            </header>

            <div class="social-post__media">
              <?php if ($imagen !== ''): ?>
                <img src="<?= htmlspecialchars($imagen, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars($titulo, ENT_QUOTES, 'UTF-8') ?>" loading="lazy">
              <?php else: ?>
                <div class="social-post__media-placeholder" aria-hidden="true"></div>
              <?php endif; ?>
            </div>

            <div class="social-post__body">
              <h3><?= htmlspecialchars($titulo, ENT_QUOTES, 'UTF-8') ?></h3>
              <p class="social-post__extract"><?= htmlspecialchars($extracto, ENT_QUOTES, 'UTF-8') ?></p>
              <p class="social-post__detail"><?= htmlspecialchars($detalle, ENT_QUOTES, 'UTF-8') ?></p>
            </div>

            <footer class="social-post__footer">
              <?php if ($enlace !== ''): ?>
                <a
                  class="social-post__link"
                  href="<?= htmlspecialchars($enlace, ENT_QUOTES, 'UTF-8') ?>"
                  <?php if ($esExterno): ?>
                    target="_blank" rel="noopener noreferrer"
                  <?php endif; ?>
                >
                  <?= htmlspecialchars($botonTexto, ENT_QUOTES, 'UTF-8') ?>
                </a>
              <?php endif; ?>
            </footer>
          </article>
        <?php endforeach; ?>
      </div>
    </div>

    <div class="home-publicaciones__dots" data-posts-dots></div>
  </div>
</section>