script.js

const app = document.querySelector("#app");
const cursor = document.querySelector(".cursor");
const canvas = document.querySelector("#paper-canvas");
const ctx = canvas.getContext("2d", { alpha: true });
const displacement = document.querySelector("#inkDisplacement");
const blurNode = document.querySelector("#inkBlur");
const joanBirthday = { year: 1996, monthIndex: 9, day: 30 };
const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
const cursorFineMedia = "(hover: hover) and (pointer: fine) and (min-width: 761px)";
const cursorFineQuery = window.matchMedia(cursorFineMedia);
let paperImage = null;
let paperData = null;
let paperFrameId = null;
let paperLastFrame = 0;
let paperResizeTimer = null;
const cursorHotspots = {
  arrow: { x: 2, y: 1 },
  pointer: { x: 7, y: 1 },
  text: { x: 2.5, y: 9 },
};
const cursorPosition = {
  x: -80,
  y: -80,
  state: "arrow",
};

function calculateJoanAge(referenceDate = new Date()) {
  const age = referenceDate.getFullYear() - joanBirthday.year;
  const hasHadBirthday =
    referenceDate.getMonth() > joanBirthday.monthIndex ||
    (referenceDate.getMonth() === joanBirthday.monthIndex && referenceDate.getDate() >= joanBirthday.day);

  return hasHadBirthday ? age : age - 1;
}

function renderAge(age = calculateJoanAge()) {
  return String(age).split("").map(escapeHTML).join("<br />");
}

const navItems = [
  { id: "home", label: "Inicio", icon: "home" },
  { id: "joan", label: "Joan" },
  { id: "app", label: "App" },
  { id: "diario", label: "Diario" },
];

const journalEntries = Array.isArray(window.EVOESCO_JOURNAL?.entries)
  ? window.EVOESCO_JOURNAL.entries
  : [];

const selectedImages = [
  {
    id: "01",
    src: "assets/selected-full/evoesco-final-verano-01.webp",
    alt: "Calle de pueblo en luz calida de final de verano",
  },
  {
    id: "03",
    src: "assets/selected-full/evoesco-final-verano-03.webp",
    alt: "Superficie de agua quieta con reflejos calidos",
  },
  {
    id: "04",
    src: "assets/selected-full/evoesco-final-verano-04.webp",
    alt: "Muro envejecido de pueblo con puerta de madera",
  },
  {
    id: "07",
    src: "assets/selected-full/evoesco-final-verano-07.webp",
    alt: "Costa rocosa al atardecer con mar y montes al fondo",
  },
  {
    id: "08",
    src: "assets/selected-full/evoesco-final-verano-08.webp",
    alt: "Azulejos antiguos con hojas secas amarillas",
  },
  {
    id: "09",
    src: "assets/selected-full/evoesco-final-verano-09.webp",
    alt: "Textura urbana calida de final de verano",
  },
  {
    id: "11",
    src: "assets/selected-full/evoesco-final-verano-11.webp",
    alt: "Cortina de lino junto a una ventana abierta al mar",
  },
  {
    id: "14",
    src: "assets/selected-full/evoesco-final-verano-14.webp",
    alt: "Campo seco con un arbol frente al mar",
  },
  {
    id: "15",
    src: "assets/selected-full/evoesco-final-verano-15.webp",
    alt: "Pasillo de piedra que se abre hacia el mar",
  },
  {
    id: "16",
    src: "assets/selected-full/evoesco-final-verano-16.webp",
    alt: "Detalle de azulejos y materia envejecida",
  },
  {
    id: "17",
    src: "assets/selected-full/evoesco-final-verano-17.webp",
    alt: "Escena minima de pueblo con luz baja",
  },
  {
    id: "18",
    src: "assets/selected-full/evoesco-final-verano-18.webp",
    alt: "Tela clara sobre piedra al sol",
  },
  {
    id: "19",
    src: "assets/selected-full/evoesco-final-verano-19.webp",
    alt: "Camino y textura mineral de final de verano",
  },
  {
    id: "20",
    src: "assets/selected-full/evoesco-final-verano-20.webp",
    alt: "Cuencos azules sobre una superficie de piedra",
  },
];

const pages = {
  home: {
    title: "EVO<br class=\"title-break\" />ESCO",
    marquee: "evolución es conciencia",
    kicker: "CONCIENCIA & DIRECCIÓN",
    copy:
      "evoesco nace del deseo de avanzar con más conciencia. De observar lo que nos mueve, lo que nos frena y lo que nos rodea, para convertir esa comprensión en una dirección más propia, más clara y más honesta.",
  },
  joan: {
    title: "JOAN",
    introTitle: "info",
    mainImage: "01",
    detailImages: ["11", "04", "14"],
    rows: [
      ["[Psicología]", "Grado de Psicología por la UNED."],
      ["[Nutrición]", "Técnico Superior en Nutrición y Dietética."],
      [
        "[Cuidado]",
        "Me interesa todo aquello que ayuda a cuidar a las personas por dentro y por fuera: pensamiento, cuerpo, piel, hábitos, alimentación, lenguaje, entorno y forma de vivir.",
      ],
      [
        "[Objetivo]",
        "Que cada persona pueda mirarse con honestidad, cuidarse sin castigarse y compartir lo que descubre por el camino sin miedo a ser juzgada ni tener que esconderse.",
      ],
    ],
    lowerTitle: "Lo que voy a construir",
    lower:
      "evoesco nace de una pregunta que me acompaña desde hace tiempo: por qué a veces sabemos que podríamos vivir de otra manera y, aun así, seguimos repitiendo lo mismo. Quiero construir una herramienta viva para ese momento: mirar con honestidad, entender el bloqueo y recuperar la valentía de moverse.",
  },
  app: {
    title: "APP",
    label: "En construcción",
    heroImage: "15",
    intro:
      "La app de evoesco todavía no está terminada ni tiene una fecha cerrada. Ahora mismo es una idea en construcción: la creación de una herramienta concreta que sirva para para mirar la situación vital con más precisión, poder nombrar lo que bloquea y encontrar el siguiente movimiento posible.",
    sections: [
      {
        label: "[01]",
        title: "La idea central",
        body:
          "evoesco parte de una intuición sencilla: la conciencia no aparece por pensar más, sino por mirar mejor. La app intentará ayudar a transformar una experiencia difusa en lenguaje, una emoción en contexto, un bloqueo en patrón y una intención en un movimiento pequeño que pueda existir fuera de la cabeza.",
        image: "18",
      },
      {
        label: "[02]",
        title: "Escritura guiada, no diario en blanco",
        body:
          "La escritura puede ordenar la experiencia cuando no se queda solo en desahogo. La app debería proponer entradas breves con estructura: qué ha pasado, qué he sentido, qué significado le estoy dando, qué se repite, qué valor está pidiendo atención y qué podría hacer ahora sin convertirme en otro personaje.",
        image: "08",
      },
      {
        label: "[03]",
        title: "Del bloqueo al siguiente movimiento",
        body:
          "El cierre de cada reflexión no debería ser una frase bonita, sino una escena concreta: cuando ocurra esto, haré esto otro, pequeño, realista y revisable. No para medir la vida como rendimiento, sino para dejar una huella honesta de que algo se ha movido.",
        image: "07",
      },
      {
        label: "[04]",
        title: "Lo que no promete",
        body:
          "evoesco no se plantea como terapia, diagnóstico, tratamiento ni sustituto de acompañamiento profesional. Tampoco como una app que garantice bienestar. La ambición es más sobria: construir un instrumento de reflexión, dirección y cuidado cotidiano que ayude a mirar con más precisión.",
        image: "20",
      },
    ],
    figures: [
      {
        title: "De intención a movimiento",
        image: "assets/research/intencion-movimiento.webp",
        body:
          "La investigación sobre cambio de conducta apunta a una idea útil para evoesco: no basta con querer cambiar. La intención necesita una escena, una condición reconocible y una acción pequeña que pueda ejecutarse cuando llegue el momento.",
        stats: [
          ["0.36", "efecto medio observado entre intención y conducta en revisiones sobre metas."],
          ["0.65", "efecto aproximado de los planes si-entonces en metaanálisis de implementation intentions."],
          ["0.40", "efecto pequeño-medio del seguimiento de progreso cuando ayuda a decidir el siguiente paso."],
        ],
      },
      {
        title: "Escribir para tomar distancia",
        image: "assets/research/escritura-distancia.webp",
        body:
          "La escritura expresiva suele mostrar efectos pequeños y variables, pero aporta una pista importante: poner lenguaje a la experiencia puede cambiar la relación con lo vivido cuando hay estructura, distancia y revisión de significado.",
        stats: [
          ["r .075", "tamaño de efecto medio en una revisión amplia sobre escritura expresiva."],
          ["3a persona", "el autodistanciamiento ayuda a observar una escena sin quedar completamente dentro de ella."],
          ["patrón", "la repetición de palabras, temas y momentos puede servir como espejo, no como sentencia."],
        ],
      },
      {
        title: "Cuidado por dentro y por fuera",
        image: "assets/research/cuidado-integral.webp",
        body:
          "El cuidado no es solo una decisión mental ni solo una rutina física. La futura app puede mirar condiciones: descanso, movimiento, comida, estrés, piel, lenguaje y entorno, siempre desde una lectura humilde y no clínica.",
        stats: [
          ["14 / 12", "años adicionales asociados a varios hábitos saludables en estudios poblacionales, hombres / mujeres."],
          ["18-25%", "menor riesgo relativo de depresión asociado a niveles suficientes de actividad física."],
          ["30%", "diferencias observadas en recuperación de barrera cutánea vinculadas a sueño de peor calidad."],
        ],
      },
    ],
    evidence: [
      ["Grant, Franklin & Langford", "Separar reflexión de insight: mirar mucho no equivale a entender mejor."],
      ["Kross, Ayduk & Mischel", "Tomar distancia puede cambiar la forma de procesar una experiencia difícil."],
      ["Pennebaker / Frattaroli", "La escritura guiada muestra efectos pequeños, útiles si se formula sin promesas."],
      ["Gollwitzer & Sheeran", "Los planes si-entonces convierten una intención en una escena concreta."],
      ["Aldao / Webb / Gross", "Regular no es tapar: importa observar, reinterpretar y actuar con flexibilidad."],
      ["Harkin / Michie", "Registrar progreso puede ayudar cuando no se convierte en dashboard moral."],
    ],
    archiveImages: ["01", "03", "04", "07", "08", "09", "11", "14", "15", "16", "17", "18", "19", "20"],
  },
};

function escapeHTML(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

const journalStructuredValueLabels = {
  acceptablePhotoN: "fotos aceptables",
  analyzedN: "muestra analizada",
  condition: "condición",
  effectSizes: "tamaños de efecto",
  excludedN: "personas excluidas",
  exclusionReason: "motivo de exclusión",
  enrolledN: "muestra reclutada",
  experimentalTests: "pruebas experimentales",
  groups: "grupos",
  independentTests: "pruebas independientes",
  independentStudies: "estudios independientes",
  initialN: "muestra inicial",
  n: "muestra",
  participants: "participantes",
  recordsN: "registros",
  reports: "informes",
  reportedMethodN: "N informado en el método",
  population: "población",
  sampleSize: "tamaño de muestra",
  studies: "estudios",
};

const journalEvidenceTypeLabels = {
  book: "libro",
  classic: "estudio clásico",
  dataset: "conjunto de datos",
  limitation: "fuente de limitación",
  meta: "metaanálisis",
  primary: "estudio primario",
  review: "revisión",
  theory: "marco teórico",
};

function formatJournalStructuredValue(value) {
  if (value === undefined || value === null) return "";
  if (typeof value === "number") return Number.isFinite(value) ? escapeHTML(value) : "";
  if (typeof value === "boolean") return value ? "sí" : "no";
  if (typeof value === "string") return escapeHTML(value);
  if (Array.isArray(value)) {
    return value.map(formatJournalStructuredValue).filter(Boolean).join(", ");
  }
  if (typeof value === "object") {
    return Object.entries(value)
      .map(([key, item]) => {
        const formattedItem = formatJournalStructuredValue(item);
        if (!formattedItem) return "";
        const label =
          journalStructuredValueLabels[key] ||
          String(key).replace(/([a-z])([A-Z])/gu, "$1 $2").toLowerCase();
        return `${escapeHTML(label)}: ${formattedItem}`;
      })
      .filter(Boolean)
      .join("; ");
  }
  return escapeHTML(value);
}

const journalSampleKeys = new Set([
  "acceptablePhotoN",
  "analyzedN",
  "effectSizes",
  "enrolledN",
  "experimentalTests",
  "independentTests",
  "independentStudies",
  "initialN",
  "n",
  "participants",
  "recordsN",
  "reports",
  "reportedMethodN",
  "sampleSize",
  "studies",
]);

function collectJournalFacts(value, keys, facts = [], context = "") {
  if (Array.isArray(value)) {
    value.forEach((item) => collectJournalFacts(item, keys, facts, context));
    return facts;
  }
  if (!value || typeof value !== "object") return facts;
  const localContext = value.study || value.label || value.metaAnalysis || value.id || context;
  Object.entries(value).forEach(([key, item]) => {
    if (keys.has(key) && ((typeof item === "string" && item.trim()) || Number.isFinite(item))) {
      const label = journalStructuredValueLabels[key] || key;
      const prefix = localContext ? `${escapeHTML(localContext)} · ` : "";
      facts.push(`${prefix}${label}: ${formatJournalStructuredValue(item)}`);
    }
    if (key !== "sourceIds" && key !== "sourceId" && key !== "sample") collectJournalFacts(item, keys, facts, localContext);
  });
  return facts;
}

function collectJournalStrings(value, keys, strings = []) {
  if (Array.isArray(value)) {
    value.forEach((item) => collectJournalStrings(item, keys, strings));
    return strings;
  }
  if (!value || typeof value !== "object") return strings;
  Object.entries(value).forEach(([key, item]) => {
    if (keys.has(key) && typeof item === "string" && item.trim()) strings.push(item);
    if (key !== "sourceIds" && key !== "sourceId") collectJournalStrings(item, keys, strings);
  });
  return strings;
}

function formatJournalFigureSample(figure) {
  const direct = figure.data?.sample;
  const directText = direct ? formatJournalStructuredValue(direct) : "";
  const nestedFacts = collectJournalFacts(figure.data, journalSampleKeys);
  const facts = [];
  if (directText) facts.push(directText);
  nestedFacts.forEach((fact) => {
    if (!facts.includes(fact)) facts.push(fact);
  });
  if (facts.length) return facts.join("; ");
  return figure.type === "conceptual"
    ? "No aplica: síntesis editorial, no muestra empírica."
    : "La fuente citada no informa N ni otro denominador adyacente.";
}

function formatJournalFigureUnit(figure) {
  if (figure.type === "conceptual") {
    return "No aplica: síntesis editorial, sin escala cuantitativa";
  }
  const direct = figure.data?.unit || figure.data?.unitPolicy || figure.data?.metric;
  if (direct) return formatJournalStructuredValue(direct);
  const nested = collectJournalStrings(figure.data, new Set(["unit", "unitPolicy", "metric"]));
  return nested.length ? escapeHTML([...new Set(nested)].join("; ")) : "La fuente no declara una unidad o escala.";
}

const journalBoundaryInternalKeys = new Set(["id", "sourceId", "sourceIds"]);

function collectJournalBoundaryValues(value) {
  if (value === undefined || value === null) return [];
  if (["string", "number", "boolean"].includes(typeof value)) return [String(value)];
  if (Array.isArray(value)) return value.flatMap(collectJournalBoundaryValues);
  if (typeof value !== "object") return [];
  return Object.entries(value)
    .filter(([key]) => !journalBoundaryInternalKeys.has(key))
    .flatMap(([, item]) => collectJournalBoundaryValues(item));
}

function renderJournalFigureBoundaries(figure) {
  const boundaries = figure.data?.boundaries;
  if (!boundaries || typeof boundaries !== "object") return "";
  const values = Array.isArray(boundaries) ? boundaries : Object.values(boundaries);
  const items = values
    .map((value) => [...new Set(collectJournalBoundaryValues(value))].join(" — "))
    .filter(Boolean)
    .filter((value, index, allValues) => allValues.indexOf(value) === index);
  if (!items.length) return "";
  return `
    <section class="journal-figure-boundaries" aria-label="Límites declarados de la figura">
      <p><strong>Límites declarados.</strong></p>
      <ul class="journal-figure-boundary-list">
        ${items.map((item) => `<li>${escapeHTML(item)}</li>`).join("")}
      </ul>
    </section>
  `;
}

function journalEvidenceTypeLabel(evidenceType) {
  return journalEvidenceTypeLabels[evidenceType] || String(evidenceType || "");
}

function parseRoute(hash = location.hash) {
  const value = String(hash || "#home").replace(/^#/, "");
  if (value === "diario") return { page: "diario", slug: null };
  if (value.startsWith("diario/")) {
    const slug = value.slice("diario/".length);
    const exists = journalEntries.some((entry) => entry.slug === slug);
    return exists ? { page: "entrada", slug } : { page: "diario", slug: null };
  }
  return Object.hasOwn(pages, value)
    ? { page: value, slug: null }
    : { page: "home", slug: null };
}

function routeHref(page, slug = null) {
  if (page === "diario") return "#diario";
  if (
    page === "entrada" &&
    typeof slug === "string" &&
    journalEntries.some((entry) => entry.slug === slug)
  ) {
    return `#diario/${slug}`;
  }
  return Object.hasOwn(pages, page) ? `#${page}` : "#home";
}

function drawPaper() {
  stopPaperAnimation();
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const width = Math.floor(window.innerWidth * dpr);
  const height = Math.floor(window.innerHeight * dpr);
  canvas.width = width;
  canvas.height = height;
  canvas.style.width = `${window.innerWidth}px`;
  canvas.style.height = `${window.innerHeight}px`;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#fffdf1";
  ctx.fillRect(0, 0, width, height);

  const image = ctx.createImageData(width, height);
  for (let i = 0; i < image.data.length; i += 4) {
    const grain = 188 + Math.random() * 58;
    const warm = Math.random() * 20;
    image.data[i] = grain + warm;
    image.data[i + 1] = grain + warm * 0.65;
    image.data[i + 2] = grain - 16;
    image.data[i + 3] = 76 + Math.random() * 88;
  }
  ctx.putImageData(image, 0, 0);
  paperImage = image;
  paperData = image.data;
  paperLastFrame = 0;
  startPaperAnimation();
}

function redrawPaperGrain(offset) {
  const grain = 188 + Math.random() * 58;
  const warm = Math.random() * 20;
  paperData[offset] = grain + warm;
  paperData[offset + 1] = grain + warm * 0.65;
  paperData[offset + 2] = grain - 16;
  paperData[offset + 3] = 72 + Math.random() * 94;
}

function animatePaper(now) {
  paperFrameId = requestAnimationFrame(animatePaper);
  const frameDelay = window.innerWidth >= 1024 ? 48 : 72;
  if (now - paperLastFrame < frameDelay || !paperData || !paperImage) return;

  paperLastFrame = now;
  const totalPixels = paperData.length / 4;
  const mutationRatio = window.innerWidth >= 1024 ? 0.0065 : 0.0048;
  const mutationCount = Math.max(980, Math.floor(totalPixels * mutationRatio));

  for (let i = 0; i < mutationCount; i += 1) {
    redrawPaperGrain(Math.floor(Math.random() * totalPixels) * 4);
  }

  ctx.putImageData(paperImage, 0, 0);
}

function startPaperAnimation() {
  if (motionQuery.matches || document.hidden || paperFrameId !== null) return;
  paperFrameId = requestAnimationFrame(animatePaper);
}

function stopPaperAnimation() {
  if (paperFrameId === null) return;
  cancelAnimationFrame(paperFrameId);
  paperFrameId = null;
}

function schedulePaperResize() {
  clearTimeout(paperResizeTimer);
  paperResizeTimer = setTimeout(drawPaper, 120);
}

function syncPaperMotion() {
  if (motionQuery.matches || document.hidden) {
    stopPaperAnimation();
    return;
  }

  startPaperAnimation();
}

function animateInk() {
  const started = performance.now();
  const duration = 1250;

  function frame(now) {
    const progress = Math.min((now - started) / duration, 1);
    const ease = 1 - Math.pow(1 - progress, 3);
    displacement.setAttribute("scale", String((1 - ease) * 28));
    blurNode.setAttribute("stdDeviation", String((1 - ease) * 5));
    if (progress < 1) requestAnimationFrame(frame);
  }

  document.body.classList.remove("is-ready");
  requestAnimationFrame(frame);
  requestAnimationFrame(() => document.body.classList.add("is-ready"));
}

function linkAttrs(page, slug = null) {
  const href = routeHref(page, slug);
  return `href="${escapeHTML(href)}" data-route="${escapeHTML(href.slice(1))}"`;
}

function homeIcon() {
  return `
    <svg class="home-icon" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3.8 11.4 12 4.2l8.2 7.2" />
      <path d="M6.8 10.4v8.2h10.4v-8.2" />
      <path d="M10.1 18.6v-4.9h3.8v4.9" />
    </svg>
  `;
}

function renderNavItem(item, active) {
  const label = item.icon === "home" ? `${homeIcon()}<span class="sr-only">${item.label}</span>` : item.label;
  const activePage = active === "entrada" ? "diario" : active;
  return `<a ${linkAttrs(item.id)} ${activePage === item.id ? 'aria-current="page"' : ""}>${label}</a>`;
}

function renderHeader(active) {
  return `
    <header class="site-header">
      <a class="logo ink" ${linkAttrs("home")}>
        <p class="logo-title">EVOESCO</p>
        <span class="logo-label">CONCIENCIA / DIRECCIÓN</span>
      </a>
      <nav class="header-nav ink" aria-label="Navegacion principal">
        <ul>
          ${navItems
            .map(
              (item) => `
                <li>
                  ${renderNavItem(item, active)}
                </li>
              `,
            )
            .join("")}
        </ul>
      </nav>
    </header>
  `;
}

function imageById(id) {
  return selectedImages.find((image) => image.id === id);
}

function renderImageFigure(id, className, caption = "") {
  const image = imageById(id);
  if (!image) return "";

  return `
    <figure class="${className} ink">
      <img src="${escapeHTML(image.src)}" alt="${escapeHTML(image.alt)}" loading="lazy" />
      ${caption ? `<figcaption>${escapeHTML(caption)}</figcaption>` : ""}
    </figure>
  `;
}

function renderMarquee(text) {
  const repeated = Array.from({ length: 14 }, () => `<span>${escapeHTML(text)}</span>`).join("");
  return `<div class="marquee ink" aria-hidden="true"><div class="marquee-track">${repeated}${repeated}</div></div>`;
}

function renderHome() {
  const home = pages.home;
  return `
    <main class="home" data-page="home">
      ${renderMarquee(home.marquee)}
      <section class="home-main" aria-labelledby="home-title">
        <div>
          <h1 id="home-title" class="home-title ink">${home.title}</h1>
          <p class="home-kicker ink">${home.kicker}</p>
          <p class="home-copy ink">${home.copy}</p>
        </div>
        <div class="home-bottom">
          <div class="home-version ink">
            <span class="meta-label">Versión</span>
            <span class="meta-value">01.</span>
          </div>
          <div class="home-time ink">
            <span class="meta-label">Hora Local</span>
            <span class="meta-value"><span>Mallorca</span> <span class="js-time">--:--</span></span>
          </div>
          <nav class="home-menu ink" aria-label="Menú de portada">
            <p class="home-menu-label">[Menú]</p>
            <ol class="menu-list">
              <li><span>01</span><a ${linkAttrs("home")}>Inicio</a></li>
              <li><span>02</span><a ${linkAttrs("joan")}>Joan</a></li>
              <li><span>03</span><a ${linkAttrs("app")}>App</a></li>
              <li><span>04</span><a ${linkAttrs("diario")}>Diario</a></li>
            </ol>
          </nav>
          <div class="home-next ink">
            <a class="next-link" ${linkAttrs("joan")}>Siguiente</a>
          </div>
        </div>
      </section>
      <div class="home-social ink" aria-label="Enlaces secundarios">
        <a class="social-link" ${linkAttrs("app")}>App</a>
        <a class="social-link" ${linkAttrs("diario")}>Diario</a>
      </div>
    </main>
  `;
}

function renderPageHero(page) {
  const label = pages[page].label ? `<p class="page-label ink">${pages[page].label}</p>` : "";

  return `
    ${renderHeader(page)}
    <section class="page-hero page-hero--${page}" aria-labelledby="${page}-title">
      <div>
        <h1 id="${page}-title" class="page-title ink">${pages[page].title}</h1>
        ${label}
      </div>
      <div class="scroll-mark ink" aria-hidden="true">
        <div class="scroll-mark__track">
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
          <span>Bajar</span>
        </div>
      </div>
    </section>
  `;
}

function renderJoan() {
  const page = pages.joan;
  const age = calculateJoanAge();
  return `
    <main class="page" data-page="joan">
      ${renderPageHero("joan")}
      <section class="content two-col">
        <div>
          <p class="section-small ink">[Edad]</p>
          <h2 class="section-title ink" aria-label="${age}">${renderAge(age)}</h2>
          ${renderImageFigure(page.mainImage, "joan-main-image")}
        </div>
        <div class="thin-col">
          <p class="section-small ink">${page.introTitle}</p>
          <div class="info-grid">
            ${page.rows
              .map(
                ([label, body]) => `
                  <div class="info-row">
                    <span class="info-row-label ink">${label}</span>
                    <p class="info-row-body ink">${body}</p>
                  </div>
                `,
              )
              .join("")}
          </div>
        </div>
      </section>
      <section class="content two-col">
        <div></div>
        <div class="thin-col">
          <h2 class="section-title ink">${page.lowerTitle}</h2>
          <p class="text-block ink">${page.lower}</p>
        </div>
      </section>
      <section class="content joan-visuals" aria-label="Archivo visual de Joan">
        ${page.detailImages.map((id) => renderImageFigure(id, "joan-detail-image")).join("")}
      </section>
      ${renderFooter("joan")}
    </main>
  `;
}

function renderApp() {
  const page = pages.app;
  return `
    <main class="page" data-page="app">
      ${renderPageHero("app")}
      <section class="content app-publication">
        ${renderImageFigure(page.heroImage, "app-cover", "La app como pasillo: no destino cerrado, sino entrada a una forma de mirar.")}
        <article class="article-flow">
          <p class="article-lead ink">${page.intro}</p>
          ${page.sections
            .map(
              (section) => `
                <section class="article-section article-section--with-media">
                  <div>
                    <p class="section-small ink">${section.label}</p>
                    <h2 class="section-title ink">${section.title}</h2>
                    <p class="text-block ink">${section.body}</p>
                  </div>
                  ${renderImageFigure(section.image, "article-image")}
                </section>
              `,
            )
            .join("")}
          <section class="research-figures" aria-label="Gráficos de investigación">
            ${page.figures
              .map(
                (figure) => `
                  <section class="research-figure">
                    <figure class="research-visual ink">
                      <img src="${escapeHTML(figure.image)}" alt="" loading="eager" />
                    </figure>
                    <div class="research-copy">
                      <p class="section-small ink">[Grafico]</p>
                      <h2 class="section-title ink">${figure.title}</h2>
                      <p class="text-block ink">${figure.body}</p>
                      <ul class="stat-list">
                        ${figure.stats
                          .map(
                            ([value, text]) => `
                              <li class="ink">
                                <span class="stat-value">${value}</span>
                                <span>${text}</span>
                              </li>
                            `,
                          )
                          .join("")}
                      </ul>
                    </div>
                  </section>
                `,
              )
              .join("")}
          </section>
          <section class="article-section evidence-section">
            <p class="section-small ink">[Investigacion]</p>
            <h2 class="section-title ink">Pistas científicas que estoy usando</h2>
            <div class="evidence-grid">
              ${page.evidence
                .map(
                  ([source, insight]) => `
                    <div class="evidence-item ink">
                      <span>${source}</span>
                      <p>${insight}</p>
                    </div>
                  `,
                )
                .join("")}
            </div>
          </section>
          <section class="visual-archive">
            <p class="section-small ink">[Archivo visual]</p>
            <h2 class="section-title ink">Final de verano como lenguaje</h2>
            <p class="text-block ink">Estas imágenes sostienen la atmósfera de la web: calor que no se ha ido del todo, materia gastada, mar, pueblo, tela, azulejo, puerta y luz baja. No ilustran la idea de forma obvia; la acompañan.</p>
            <div class="visual-grid">
              ${page.archiveImages
                .map((id) => renderImageFigure(id, "archive-image", id))
                .join("")}
            </div>
          </section>
          <aside class="research-note ink">
            <p>[Base científica]</p>
            <p>Esta publicación es una síntesis inicial, no una promesa de resultados. Los gráficos son interpretaciones visuales propias basadas en líneas de investigación sobre metacognición, escritura reflexiva, regulación emocional, cambio de conducta y autocuidado.</p>
          </aside>
        </article>
      </section>
      ${renderFooter("app")}
    </main>
  `;
}

function journalLinkAttrs(entry) {
  return linkAttrs("entrada", entry.slug);
}

function renderJournalImage(entry, loading) {
  return `
    <figure class="journal-entry-media">
      <img
        src="${escapeHTML(entry.hero)}"
        alt="${escapeHTML(entry.heroAlt)}"
        width="1600"
        height="1000"
        loading="${loading}"
        decoding="async"
      />
    </figure>
  `;
}

function renderJournalMeta(entry) {
  return `
    <div class="journal-entry-meta" aria-label="Metadatos de la entrada">
      <span>${escapeHTML(entry.category)}</span>
      <span>${escapeHTML(entry.readingTime)} de lectura</span>
    </div>
  `;
}

function renderJournalIndexEntry(entry, { featured = false } = {}) {
  const className = featured ? "journal-featured" : `journal-row journal-row--${entry.number}`;
  const loading = featured ? "eager" : "lazy";
  return `
    <article class="${className}">
      <a class="journal-entry-link ink" ${journalLinkAttrs(entry)}>
        <span class="journal-entry-number">${escapeHTML(entry.number)}</span>
        ${renderJournalImage(entry, loading)}
        <div class="journal-entry-copy">
          ${renderJournalMeta(entry)}
          <h2>${escapeHTML(entry.title)}</h2>
          <p>${escapeHTML(entry.dek)}</p>
          <span class="journal-entry-more">Leer entrada</span>
        </div>
      </a>
    </article>
  `;
}

function renderJournalHero() {
  const journal = window.EVOESCO_JOURNAL || {};
  return `
    <section class="journal-hero" aria-labelledby="journal-title">
      <div>
        <p class="journal-hero-label ink">${escapeHTML(journal.label || "Cuaderno 01")}</p>
        <h1 id="journal-title" class="journal-title ink">DIARIO</h1>
      </div>
      <div class="journal-hero-copy ink">
        <p class="journal-issue">${escapeHTML(journal.label || "Cuaderno 01")} / ${escapeHTML(journal.dateLabel || "9 de julio de 2026")}</p>
        <p class="journal-description">${escapeHTML(journal.description || "")}</p>
      </div>
    </section>
  `;
}

function renderJournalMethod() {
  return `
    <section class="journal-method" aria-labelledby="journal-method-title">
      <p class="section-small ink">[Nota común]</p>
      <div class="journal-method-copy ink">
        <h2 id="journal-method-title">Una experiencia puede abrir una pregunta.</h2>
        <p>Las piezas de este cuaderno parten de escenas humanas concretas y las ponen en relación con investigación, límites y desacuerdos. La evidencia acompaña la mirada; no la convierte en una respuesta cerrada.</p>
      </div>
    </section>
  `;
}

function renderJournalIndex() {
  const [featured, ...rest] = journalEntries;
  return `
    <main class="page journal-index" data-page="diario">
      ${renderHeader("diario")}
      ${renderJournalHero()}
      <section class="journal-featured-section" aria-labelledby="journal-featured-title">
        <p id="journal-featured-title" class="section-small ink">[Entrada destacada]</p>
        ${featured ? renderJournalIndexEntry(featured, { featured: true }) : ""}
      </section>
      <section class="journal-list" aria-label="Entradas del Cuaderno 01">
        ${rest.map((entry) => renderJournalIndexEntry(entry)).join("")}
      </section>
      ${renderJournalMethod()}
      ${renderFooter("diario")}
    </main>
  `;
}

function renderJournalSourceLink(source) {
  if (!source || !/^https:\/\//u.test(String(source.href || ""))) return "";
  const label = `${source.authors} (${source.year}). ${source.title}`;
  return `<a class="journal-source-link" href="${escapeHTML(source.href)}" target="_blank" rel="noreferrer">${escapeHTML(label)}</a>`;
}

function renderBibliography(sources = []) {
  return `
    <ol class="journal-bibliography">
      ${sources
        .map(
          (source) => `
            <li class="journal-bibliography-item">
              ${renderJournalSourceLink(source)}
              <span class="journal-source-publication">${escapeHTML(source.publication)}</span>
              <span class="journal-source-type">${escapeHTML(journalEvidenceTypeLabel(source.evidenceType))}</span>
              <p class="journal-source-note">${escapeHTML(source.note)}</p>
              <p class="journal-source-limit">${escapeHTML(source.limitations)}</p>
            </li>
          `,
        )
        .join("")}
    </ol>
  `;
}

function renderJournalFigure(entry, figureId) {
  const figure = Array.isArray(entry.figures)
    ? entry.figures.find(({ id }) => id === figureId)
    : null;
  if (!figure) throw new TypeError("Unknown journal figure: " + figureId);

  const titleId = `journal-figure-${figure.id}-title`;
  const descriptionId = `journal-figure-${figure.id}-description`;
  const visualMarkup =
    typeof window.renderJournalVisual === "function"
      ? window.renderJournalVisual(figure, entry)
      : "";
  const sources = (figure.sourceIds || [])
    .map((sourceId) => entry.sources.find(({ id }) => id === sourceId))
    .filter(Boolean);
  const sample = formatJournalFigureSample(figure);
  const unit = formatJournalFigureUnit(figure);
  const valueSources = [
    figure.valueSource,
    ...collectJournalStrings(figure.data, new Set(["valueSource"])),
  ].filter(Boolean).filter((value, index, values) => values.indexOf(value) === index);
  const boundaries = renderJournalFigureBoundaries(figure);
  const caution =
    figure.data?.caution ||
    (figure.type === "conceptual"
      ? "Síntesis editorial; no es una figura publicada ni representa una secuencia causal demostrada."
      : figure.caution || figure.limitations || "");
  const provenance = [
    valueSources.length
      ? valueSources.map((value) => `<p><strong>Procedencia.</strong> ${escapeHTML(value)}</p>`).join("")
      : "",
    `<p><strong>Muestra.</strong> ${sample}</p>`,
    `<p><strong>Unidad / escala.</strong> ${unit}</p>`,
    sources.length ? `<ul>${sources.map((source) => `<li>${renderJournalSourceLink(source)}</li>`).join("")}</ul>` : "",
  ].join("");

  return `
    <figure class="journal-figure" aria-labelledby="${escapeHTML(titleId)}" aria-describedby="${escapeHTML(descriptionId)}">
      ${typeof visualMarkup === "string" && visualMarkup ? `<div class="journal-figure-visual">${visualMarkup}</div>` : ""}
      ${boundaries}
      <figcaption class="journal-figure-caption">
        <h3 id="${escapeHTML(titleId)}">${escapeHTML(figure.title)}</h3>
        <p id="${escapeHTML(descriptionId)}" class="journal-figure-description">${escapeHTML(figure.description)}</p>
        <p class="journal-figure-summary"><strong>Resumen textual.</strong> ${escapeHTML(figure.accessibleSummary)}</p>
        <div class="journal-figure-provenance">
          ${provenance}
        </div>
        ${caution ? `<p class="journal-figure-caution"><strong>Cautela / límite.</strong> ${escapeHTML(caution)}</p>` : ""}
      </figcaption>
    </figure>
  `;
}

function renderArticleBlock(block, entry) {
  if (block.type === "paragraph") return `<p>${escapeHTML(block.text)}</p>`;
  if (block.type === "heading") return `<h2 id="${escapeHTML(block.id)}">${escapeHTML(block.text)}</h2>`;
  if (block.type === "quote") return `<blockquote>${escapeHTML(block.text)}</blockquote>`;
  if (block.type === "note") return `<aside class="journal-note">${escapeHTML(block.text)}</aside>`;
  if (block.type === "list") {
    return `<ul>${block.items.map((item) => `<li>${escapeHTML(item)}</li>`).join("")}</ul>`;
  }
  if (block.type === "figure") return renderJournalFigure(entry, block.figureId);
  throw new TypeError("Unknown journal block: " + block.type);
}

function renderJournalBoundary() {
  return `
    <section class="journal-evidence-boundary" aria-labelledby="journal-evidence-boundary-title">
      <h2 id="journal-evidence-boundary-title">Lo que sabemos / Lo que no sabemos</h2>
      <div class="journal-evidence-boundary-grid">
        <div>
          <h3>Lo que sabemos</h3>
          <p>La investigación reúne asociaciones, modelos y resultados situados que ayudan a precisar la experiencia descrita.</p>
        </div>
        <div>
          <h3>Lo que no sabemos</h3>
          <p>Estos hallazgos no convierten una tarea de laboratorio en una regla personal ni eliminan sus límites de muestra, medida o contexto.</p>
        </div>
      </div>
    </section>
  `;
}

function renderJournalNavigation(entry) {
  const currentIndex = journalEntries.findIndex(({ slug }) => slug === entry.slug);
  const previous = currentIndex > 0 ? journalEntries[currentIndex - 1] : null;
  const next = currentIndex < journalEntries.length - 1 ? journalEntries[currentIndex + 1] : null;
  const previousAttrs = previous ? journalLinkAttrs(previous) : linkAttrs("diario");
  const nextAttrs = next ? journalLinkAttrs(next) : linkAttrs("diario");

  return `
    <nav class="journal-navigation ink" aria-label="Navegación del Diario">
      <a class="journal-navigation-prev" ${previousAttrs}>
        <span>Anterior</span>
        <strong>${escapeHTML(previous ? previous.title : "Índice del Diario")}</strong>
      </a>
      <a class="journal-navigation-index" ${linkAttrs("diario")}>
        <span>Volver</span>
        <strong>Índice</strong>
      </a>
      <a class="journal-navigation-next" ${nextAttrs}>
        <span>Siguiente</span>
        <strong>${escapeHTML(next ? next.title : "Índice del Diario")}</strong>
      </a>
    </nav>
  `;
}

function renderJournalSections(entry) {
  const hasFigureBlocks = entry.sections.some((section) =>
    section.blocks.some((block) => block.type === "figure"),
  );

  return entry.sections
    .map((section, sectionIndex) => {
      const insertedFigureIndex = !hasFigureBlocks
        ? sectionIndex === 2
          ? 0
          : sectionIndex === 4
            ? 1
            : -1
        : -1;
      const insertedFigure =
        insertedFigureIndex >= 0 && entry.figures[insertedFigureIndex]
          ? renderJournalFigure(entry, entry.figures[insertedFigureIndex].id)
          : "";

      return `
        <section class="journal-article-section" aria-labelledby="${escapeHTML(section.id)}">
          <h2 id="${escapeHTML(section.id)}">${escapeHTML(section.title)}</h2>
          ${section.blocks.map((block) => renderArticleBlock(block, entry)).join("")}
          ${insertedFigure}
        </section>
      `;
    })
    .join("");
}

function renderJournalEntry(entry) {
  const journalDate = window.EVOESCO_JOURNAL?.dateLabel || entry.date;
  return `
    <main class="page journal-article" data-page="entrada">
      ${renderHeader("entrada")}
      <article class="journal-article-content ink">
        <header class="journal-article-header">
          <div class="journal-article-meta" aria-label="Metadatos de la entrada">
            <span>${escapeHTML(entry.number)}</span>
            <span>${escapeHTML(journalDate)}</span>
            <span>${escapeHTML(entry.category)}</span>
            <span>${escapeHTML(entry.readingTime)} de lectura</span>
          </div>
          <h1 class="journal-article-title">${escapeHTML(entry.title)}</h1>
          <p class="journal-article-dek">${escapeHTML(entry.dek)}</p>
        </header>
        <div class="journal-article-hero">
          ${renderJournalImage(entry, "eager")}
        </div>
        <div class="journal-article-body">
          ${renderJournalSections(entry)}
          ${renderJournalBoundary()}
          <section class="journal-bibliography-section" aria-labelledby="journal-bibliography-title">
            <h2 id="journal-bibliography-title">Bibliografía</h2>
            ${renderBibliography(entry.sources)}
          </section>
          <aside class="journal-article-note" role="note">
            <h2>Nota / límite</h2>
            <p>Esta entrada es una síntesis editorial. No constituye consejo psicológico o sanitario y no sustituye la lectura de las fuentes originales.</p>
          </aside>
        </div>
      </article>
      ${renderJournalNavigation(entry)}
      ${renderFooter("entrada")}
    </main>
  `;
}

function renderFooter(active) {
  return `
    <footer class="footer" aria-label="Pie de página">
      <div class="footer-head ink">
        <nav>
          <p class="footer-label">[Menú]</p>
          <ul class="footer-list">
            ${navItems
              .map(
                (item) => `<li>${renderNavItem(item, active)}</li>`,
              )
              .join("")}
          </ul>
        </nav>
        <div>
          <p class="footer-label">[Proyecto]</p>
          <p>evoesco</p>
          <p>Manifiesto + App</p>
        </div>
        <div>
          <p class="footer-label">[Estado]</p>
          <p>Manifiesto vivo</p>
        </div>
      </div>
      <div class="footer-bottom ink">evoesco</div>
    </footer>
  `;
}

function currentRoute() {
  return parseRoute(location.hash);
}

if ("scrollRestoration" in history) history.scrollRestoration = "manual";

function render(route = currentRoute(), { push = false } = {}) {
  const resolvedRoute = typeof route === "string" ? parseRoute(route) : route;
  document.body.classList.add("is-changing");
  const doRender = () => {
    if (resolvedRoute.page === "home") app.innerHTML = renderHome();
    if (resolvedRoute.page === "joan") app.innerHTML = renderJoan();
    if (resolvedRoute.page === "app") app.innerHTML = renderApp();
    if (resolvedRoute.page === "diario") app.innerHTML = renderJournalIndex();
    if (resolvedRoute.page === "entrada") {
      const entry = journalEntries.find(({ slug }) => slug === resolvedRoute.slug);
      app.innerHTML = entry ? renderJournalEntry(entry) : renderJournalIndex();
    }
    if (push) {
      history.pushState(
        { route: resolvedRoute },
        "",
        routeHref(resolvedRoute.page, resolvedRoute.slug),
      );
    }
    window.scrollTo(0, 0);
    updateTime();
    setTimeout(() => {
      document.body.classList.remove("is-changing");
      animateInk();
    }, 60);
  };

  setTimeout(doRender, document.body.classList.contains("is-ready") ? 220 : 0);
}

function updateTime() {
  document.querySelectorAll(".js-time").forEach((node) => {
    const now = new Intl.DateTimeFormat("es-ES", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
      timeZone: "Europe/Madrid",
    }).format(new Date());
    node.textContent = now;
  });
}

function isCursorPointerTarget(target) {
  return Boolean(
    target.closest(
      "a, button, [role='button'], [data-route], summary, select, label, input[type='button'], input[type='submit'], input[type='reset']",
    ),
  );
}

function isCursorTextTarget(target) {
  if (target.closest("input, textarea, [contenteditable='true']")) return true;
  return Boolean(
    target.closest(
      "p, h1, h2, h3, h4, h5, h6, blockquote, figcaption, li, dd, dt, .home-copy, .home-kicker, .meta-value, .section-small, .section-title, .text-block, .info-row-body, .page-title, .page-label, .evidence-item, .footer-label, .footer p",
    ),
  );
}

function resolveCursorState(target) {
  if (!target || !(target instanceof Element)) return "arrow";
  if (isCursorPointerTarget(target)) return "pointer";
  if (isCursorTextTarget(target)) return "text";
  return "arrow";
}

function setCursorState(nextState) {
  if (!cursor || cursorPosition.state === nextState) return;
  cursor.classList.remove("cursor--arrow", "cursor--pointer", "cursor--text");
  cursor.classList.add(`cursor--${nextState}`);
  cursorPosition.state = nextState;
  paintCursorAt(cursorPosition.x, cursorPosition.y);
}

function paintCursorAt(clientX, clientY) {
  if (!cursor) return;
  cursorPosition.x = clientX;
  cursorPosition.y = clientY;
  const hotspot = cursorHotspots[cursorPosition.state] || cursorHotspots.arrow;
  cursor.style.transform = `translate3d(${clientX - hotspot.x}px, ${clientY - hotspot.y}px, 0)`;
}

function syncCursorAvailability() {
  if (!cursor) return;
  const canUseCustomCursor = window.matchMedia(cursorFineMedia).matches;
  document.body.classList.toggle("cursor-ready", canUseCustomCursor);

  if (!canUseCustomCursor) {
    cursor.classList.remove("cursor--visible", "cursor--down");
  }
}

function setupCustomCursor() {
  if (!cursor) return;

  syncCursorAvailability();

  window.addEventListener("mousemove", (event) => {
    if (!window.matchMedia(cursorFineMedia).matches) {
      syncCursorAvailability();
      return;
    }
    cursor.classList.add("cursor--visible");
    setCursorState(resolveCursorState(event.target));
    paintCursorAt(event.clientX, event.clientY);
  });

  document.addEventListener("mouseleave", () => {
    cursor.classList.remove("cursor--visible", "cursor--down");
  });

  document.addEventListener("mousedown", () => {
    if (window.matchMedia(cursorFineMedia).matches) cursor.classList.add("cursor--down");
  });

  document.addEventListener("mouseup", () => {
    cursor.classList.remove("cursor--down");
  });

  cursorFineQuery.addEventListener("change", syncCursorAvailability);
  window.addEventListener("resize", syncCursorAvailability);
  requestAnimationFrame(syncCursorAvailability);
}

document.addEventListener("click", (event) => {
  const routeLink = event.target.closest("[data-route]");
  if (!routeLink) return;
  event.preventDefault();
  render(parseRoute(routeLink.dataset.route), { push: true });
});

window.addEventListener("hashchange", () => render(currentRoute()));

window.addEventListener("resize", schedulePaperResize);
document.addEventListener("visibilitychange", syncPaperMotion);
motionQuery.addEventListener("change", syncPaperMotion);
setInterval(updateTime, 30000);

setupCustomCursor();
drawPaper();
render(currentRoute());