<?php
session_start();
if (!isset($_SESSION['usuario'])) {
    header("Location: ../index.php");
    exit;
}

$categoria = isset($_GET['cat']) ? $_GET['cat'] : 'all';

$categorias_validas = array('all', 'gramatica', 'literatura', 'redaccion');
if (!in_array($categoria, $categorias_validas)) {
    $categoria = 'all';
}

$galeria = array(
    array(
        'tipo' => 'img',
        'cat' => 'gramatica',
        'src' => 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcJEJqIS2JY-MlApMQERtD1W7nzGUWB6ACuQ&s',
        'texto' => 'Reglas de acentuación'
    ),
    array(
        'tipo' => 'img',
        'cat' => 'literatura',
        'src' => 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRH6JYQf7vd2pZ28Su4d5AcF5G-wli2mZIXMg&s',
        'texto' => 'Don Quijote'
    ),
    array(
        'tipo' => 'img',
        'cat' => 'redaccion',
        'src' => 'https://i.ytimg.com/vi/6biwPGbwnsI/sddefault.jpg',
        'texto' => 'Redacción creativa'
    ),
    array(
        'tipo' => 'video',
        'cat' => 'literatura',
        'src' => '../recursos/don-quijote-ninos.mp4',
        'texto' => 'Fragmento narrado'
    ),
    array(
        'tipo' => 'audio',
        'cat' => 'gramatica',
        'src' => '../recursos/explicacion-categorias-gramaticales.mp3',
        'texto' => 'Podcast de gramática'
    )
);
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Galería - Lengua y Literatura</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<header class="navbar">
  <div class="logo">Lengua<span>&</span>Literatura</div>
  <nav>
    <?php include("../includes/menu.php"); ?>
  </nav>
  <div class="hamburger">
    <span></span><span></span><span></span>
  </div>
</header>

<section class="hero" style="min-height:50vh; margin-top:80px;">
  <div class="hero-content">
    <h1>Galería <span>Educativa</span></h1>
    <p>Recursos visuales y multimedia del curso.</p>
  </div>
</section>

<section class="gallery-controls">
  <div class="gallery-filter-wrapper">
    <a class="btn-main" href="galeria.php?cat=all">Todo</a>
    <a class="btn-main" href="galeria.php?cat=gramatica">Gramática</a>
    <a class="btn-main" href="galeria.php?cat=literatura">Literatura</a>
    <a class="btn-main" href="galeria.php?cat=redaccion">Redacción</a>
  </div>
</section>

<section class="gallery-grid">
<?php
$hay = false;

foreach ($galeria as $item) {

    if ($categoria != 'all' && $item['cat'] != $categoria) {
        continue;
    }

    $hay = true;
    echo '<figure class="gal-item">';
    
    if ($item['tipo'] == 'img') {
        echo '<img src="'.$item['src'].'" alt="'.$item['texto'].'" loading="lazy">';
    }

    if ($item['tipo'] == 'video') {
        echo '<video controls width="100%">
                <source src="'.$item['src'].'" type="video/mp4">
                Tu navegador no soporta video.
              </video>';
    }

    if ($item['tipo'] == 'audio') {
        echo '<audio controls>
                <source src="'.$item['src'].'" type="audio/mpeg">
                Tu navegador no soporta audio.
              </audio>';
    }

    echo '<figcaption>'.$item['texto'].'</figcaption>';
    echo '</figure>';
}

if (!$hay) {
    echo '<p style="text-align:center;">No hay contenido para esta categoría.</p>';
}
?>
</section>

<footer>
  <div class="footer-content">
    <p>&copy; Curso de Lengua y Literatura – Elvis Santamaría</p>
  </div>
</footer>

</body>
</html>