<?php
session_start();
if (!isset($_SESSION['usuario'])) {
    header("Location: ../index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Literatura - Lengua y Literatura</title>
  <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>

<main class="page-main" style="margin-top:80px;">
  <article class="content-article">
    <h1>Literatura Clásica y Moderna</h1>
    <p>Explora autores y obras que marcaron la historia de la literatura universal.</p>

    <section class="lit-grid">
      <article class="lit-card">
        <h2>Don Quijote</h2>
        <img src="https://www.crisol.com.pe/media/catalog/product/cache/f6d2c62455a42b0d712f6c919e880845/9/7/9788408270881_0dqzsviz3oiwevu0.jpg" alt="Don Quijote" loading="lazy">
        <p>Lectura guiada de capítulos seleccionados.</p>
        <audio controls>
          <source src="../recursos/don-quijote-resumen.mp3" type="audio/mp3">
          Tu navegador no soporta audio.
        </audio>
      </article>

      <article class="lit-card">
        <h2>La Odisea</h2>
        <img src="https://www.loqueleo.com/co/uploads/2021/01/resized/360_la-odisea-1.JPG" alt="La Odisea" loading="lazy">
        <p>Resumen y análisis de los personajes principales.</p>
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/ndj37zSR5Uo" frameborder="0" allowfullscreen></iframe>
      </article>

      <article class="lit-card">
        <h2>Romeo y Julieta</h2>
        <img src="https://images.cdn2.buscalibre.com/fit-in/360x360/1b/3d/1b3d13ee1322464e244fbb0b23dc11db.jpg" alt="Romeo y Julieta" loading="lazy">
        <p>Análisis de escenas clave y vocabulario.</p>
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/fnCMmba4Y6w" frameborder="0" allowfullscreen></iframe>
      </article>
    </section>

    <div class="tabla-responsiva-wrapper">
      <table class="tabla-responsiva">
        <caption>Comparación de obras literarias</caption>
        <thead>
          <tr>
            <th>Obra</th>
            <th>Autor</th>
            <th>Época</th>
            <th>Género</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Don Quijote</td>
            <td>Miguel de Cervantes</td>
            <td>Siglo XVII</td>
            <td>Novela</td>
          </tr>
          <tr>
            <td>La Odisea</td>
            <td>Homero</td>
            <td>Antigua</td>
            <td>Epopeya</td>
          </tr>
          <tr>
            <td>Romeo y Julieta</td>
            <td>William Shakespeare</td>
            <td>Renacimiento</td>
            <td>Tragedia</td>
          </tr>
        </tbody>
      </table>
    </div>
  </article>
</main>

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

</body>
</html>