script.js

// Selección de los elementos de la página
const themeToggle = document.getElementById('themeToggle');
const downloadBtn = document.getElementById('downloadBtn');
const poster = document.getElementById('poster');
const posterImage = document.getElementById('posterImage');

// Cambia entre modo claro y oscuro
themeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const activeTheme = document.body.classList.contains('dark-mode') ? 'Modo claro' : 'Modo oscuro';
  themeToggle.textContent = activeTheme;
});

// Descarga el cartel como PNG usando canvas y dibujo manual
downloadBtn.addEventListener('click', async () => {
  const canvasWidth = 1200;
  const canvasHeight = 1600;
  const canvas = document.createElement('canvas');
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  const ctx = canvas.getContext('2d');

  if (!ctx) {
    alert('No se pudo crear el lienzo de descarga.');
    return;
  }

  const isDark = document.body.classList.contains('dark-mode');
  const bgColor = isDark ? '#111111' : '#f8f5f0';
  const textColor = isDark ? '#f5f5f5' : '#111111';
  const mutedColor = isDark ? '#c3c3c3' : '#4a4a4a';

  // Fondo del cartel
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);

  // Borde suave tipo póster impreso
  ctx.strokeStyle = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
  ctx.lineWidth = 8;
  ctx.strokeRect(32, 32, canvasWidth - 64, canvasHeight - 64);

  // Título grande
  ctx.fillStyle = textColor;
  ctx.font = 'bold 72px Inter, sans-serif';
  ctx.textAlign = 'center';
  const title = '¿HAS SOÑADO CON ESTE HOMBRE?';
  wrapText(ctx, title, canvasWidth / 2, 160, canvasWidth - 180, 88);

  // Carga de la imagen principal
  const img = await loadImage(posterImage.src);
  const imageWidth = 820;
  const imageHeight = Math.round((img.height / img.width) * imageWidth);
  const imageX = (canvasWidth - imageWidth) / 2;
  const imageY = 260;

  ctx.save();
  ctx.shadowColor = 'rgba(0, 0, 0, 0.12)';
  ctx.shadowBlur = 32;
  ctx.shadowOffsetY = 18;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(imageX - 18, imageY - 18, imageWidth + 36, imageHeight + 36);
  ctx.restore();
  ctx.drawImage(img, imageX, imageY, imageWidth, imageHeight);

  // Texto descriptivo
  ctx.fillStyle = mutedColor;
  ctx.font = '24px Inter, sans-serif';
  const description = 'Cada noche, en todo el mundo, cientos de personas sueñan con esta cara. Si durante tus sueños también se te aparece o tienes alguna información, contáctanos.';
  wrapText(ctx, description, canvasWidth / 2, imageY + imageHeight + 100, canvasWidth - 180, 42);

  // Texto final en negrita
  ctx.fillStyle = textColor;
  ctx.font = 'bold 32px Inter, sans-serif';
  ctx.fillText('www.thisman.org', canvasWidth / 2, canvasHeight - 110);

  // Crear enlace de descarga y simular clic
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png');
  link.download = 'cartel-thisman.png';
  link.click();
});

// Función para cargar la imagen del cartel usando promesas
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'anonymous';
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('No se pudo cargar la imagen')); 
    image.src = src;
  });
}

// Envuelve el texto en varias líneas dentro del canvas
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
  const words = text.split(' ');
  let line = '';
  let currentY = y;

  for (let n = 0; n < words.length; n++) {
    const testLine = line + words[n] + ' ';
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;

    if (testWidth > maxWidth && n > 0) {
      ctx.fillText(line.trim(), x, currentY);
      line = words[n] + ' ';
      currentY += lineHeight;
    } else {
      line = testLine;
    }
  }

  if (line) {
    ctx.fillText(line.trim(), x, currentY);
  }
}