<!DOCTYPE html>
<html>
<head>
  <title>CAÑAMERO | Programa Fiestas 2025</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="icono.png" type="image/x-icon">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;

      background-image: url('fondo1.jpg');
      background-size: cover;
      background-position: center;
      position: relative;
    }

    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      pointer-events: none;
    }

    #pdf-container {
      display: flex;
      position: relative;
      align-items: center;
      width: 100%;
      height: 100vh;
    }

    #pdf-canvas {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    }

    .page-controls {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      z-index: 1;
    }

    .page-controls button {
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      color: #fff;
      cursor: pointer;
    }
    #prev-page{
      border-radius: 0 10px 10px 0;
    }
    #next-page{
      border-radius: 10px 0 0 10px;
    }
  </style>
  <script src="pdf.js/build/pdf.js"></script>
</head>
<body>
  <div id="pdf-container">
    <canvas id="pdf-canvas"></canvas>
    <div class="page-controls">
      <button id="prev-page">Anterior</button>
      <button id="next-page">Siguiente</button>
    </div>
  </div>

  <script>
    const pdfPath = 'fiestas2025.pdf';
    const canvas = document.getElementById('pdf-canvas');
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');
    let currentPage = 1;
    let pdfInstance = null;

    function renderPage(pageNumber) {
      pdfInstance.getPage(pageNumber).then(page => {
        var desiredWidth = 300;
        var viewport = page.getViewport({ scale: 5, });
        var scale = desiredWidth / viewport.width;
        var scaledViewport = page.getViewport({ scale: scale, });

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: canvas.getContext('2d'),
          viewport: viewport
        };
        page.render(renderContext);
      });
    }

    function loadPdf() {
      pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
        pdfInstance = pdf;
        renderPage(currentPage);
      });
    }

    function goToPrevPage() {
      if (currentPage <= 1) return;
      currentPage--;
      renderPage(currentPage);
    }

    function goToNextPage() {
      if (currentPage >= pdfInstance.numPages) return;
      currentPage++;
      renderPage(currentPage);
    }

    prevPageBtn.addEventListener('click', goToPrevPage);
    nextPageBtn.addEventListener('click', goToNextPage);

    loadPdf();
  </script>
</body>
</html>