script.js

/**
 * Renders the whole page from PORTFOLIO (data.js), then wires up the lightbox.
 */

const ROMAN_NUMERALS = [
  [1000, "M"], [900, "CM"], [500, "D"], [400, "CD"],
  [100, "C"], [90, "XC"], [50, "L"], [40, "XL"],
  [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"],
];

function toRoman(num) {
  let result = "";
  let remaining = num;
  for (const [value, symbol] of ROMAN_NUMERALS) {
    while (remaining >= value) {
      result += symbol;
      remaining -= value;
    }
  }
  return result;
}

function imgPath(folder, n) {
  return `images/${folder}/${folder}-${n}.webp`;
}

function thumbPath(folder, n) {
  return `images/${folder}/thumbs/${folder}-${n}.webp`;
}

function galleryImageMeta(gallery, item) {
  const n = typeof item === "object" ? item.n : item;
  const alt = typeof item === "object" && item.alt ? item.alt : gallery.defaultAlt;
  return { n, alt, thumb: thumbPath(gallery.folder, n), full: imgPath(gallery.folder, n) };
}

function renderNav(pieces, hero) {
  const links = pieces
    .map((piece) => `<a href="#${piece.id}">${piece.title}</a>`)
    .join("");
  const logo = hero.image ? `<img class="brand__logo" src="${hero.image}" alt="" />` : "";

  return `
    <header class="site-header">
      <div class="site-header__row">
        <a class="brand" href="#top">${logo}Evangelia Batoglou</a>
        <a class="nav-cta" href="#works"><span class="nav-cta__label">Works</span><span class="nav-cta__icon" aria-hidden="true">&rarr;</span></a>
      </div>
      <div class="quick-nav-wrap">
        <nav class="quick-nav" aria-label="Jump to a piece">${links}</nav>
      </div>
    </header>
  `;
}

function renderHero(hero) {
  const description = hero.description.map((line) => `<span>${line}</span>`).join("");
  const cta = hero.cta
    .map((btn) => {
      const cls = btn.primary ? "link-arrow link-arrow--primary" : "link-arrow";
      const target = btn.external ? ' target="_blank" rel="noopener noreferrer"' : "";
      const arrow = btn.external ? "&#8599;" : "&rarr;";
      return `<a class="${cls}" href="${btn.href}"${target}>${btn.label} <span aria-hidden="true">${arrow}</span></a>`;
    })
    .join("");
  const art = hero.image
    ? `<div class="hero__art"><img src="${hero.image}" alt="Illustrated portrait of Evangelia Batoglou dancing" /></div>`
    : "";

  return `
    <section id="top" class="hero">
      <div class="hero__grid">
        <div class="hero__content">
          <p class="eyebrow">${hero.eyebrow}</p>
          <h1>${hero.title}<span class="hero__tagline">${hero.tagline}</span></h1>
          <div class="hero__description">${description}</div>
          <div class="hero__cta">${cta}</div>
        </div>
        ${art}
      </div>
    </section>
  `;
}

function renderVideos(videos) {
  if (!videos || !videos.length) return "";
  const links = videos
    .map(
      (v) =>
        `<a class="video-link" href="${v.url}" target="_blank" rel="noopener noreferrer"><span class="video-link__icon">&#9654;</span>${v.label}</a>`
    )
    .join("");

  return `
    <p class="entry__watch">
      <b>Watch</b>
      <span class="sources sources--videos">${links}</span>
    </p>
  `;
}

function renderGallery(gallery) {
  if (!gallery) return "";

  const imgs = gallery.images
    .map((item) => {
      const meta = galleryImageMeta(gallery, item);
      return `<img src="${meta.thumb}" data-full="${meta.full}" alt="${meta.alt}" loading="lazy" />`;
    })
    .join("");

  return `
    <div class="entry__gallery">
      <p class="photos">
        <b>Gallery</b>
        <span class="gallery">${imgs}</span>
      </p>
    </div>
  `;
}

function renderEvent(event) {
  if (!event) return "";
  return `<a class="entry__event" href="${event.url}" target="_blank" rel="noopener noreferrer">Event: ${event.label}</a>`;
}

function renderFeatureImage(piece) {
  if (!piece.gallery) return "";
  const meta = galleryImageMeta(piece.gallery, piece.gallery.images[0]);
  return `
    <div class="entry__media">
      <img src="${meta.full}" alt="${meta.alt}" loading="lazy" />
    </div>
  `;
}

function renderPiece(piece, index) {
  const number = toRoman(index + 1);
  const subtitle = piece.subtitle ? `<span class="piece__subtitle">${piece.subtitle}</span>` : "";
  const yearLine = piece.year ? `<p class="entry__meta">${piece.year}</p>` : "";
  const eventLine = piece.event ? `<p class="entry__meta">${renderEvent(piece.event)}</p>` : "";
  const description = piece.description.map((line) => `<span>${line}</span>`).join("");
  const media = renderFeatureImage(piece);

  return `
    <article id="${piece.id}" class="entry${media ? "" : " entry--no-media"}">
      <div class="entry__split">
        ${media}
        <div class="entry__content">
          <span class="entry__index">${number}</span>
          <h2>${piece.title}${subtitle}</h2>
          ${yearLine}
          ${eventLine}
          <div class="description">${description}</div>
          ${renderVideos(piece.videos)}
        </div>
      </div>
      ${renderGallery(piece.gallery)}
    </article>
  `;
}

function renderResources(resources) {
  if (!resources) return "";
  const links = resources.links
    .map(
      (link) =>
        `<a class="resource-link" href="${link.url}" target="_blank" rel="noopener noreferrer">
          <span class="resource-link__icon">&#9776;</span>
          <span class="resource-link__label">${link.label}</span>
          <span class="resource-link__arrow" aria-hidden="true">&rarr;</span>
        </a>`
    )
    .join("");

  return `
    <section class="resources">
      <p class="entry__watch">
        <b>${resources.label}</b>
        <span class="sources sources--resources">${links}</span>
      </p>
    </section>
  `;
}

function renderFooter(footer) {
  const target = document.querySelector("footer");
  target.innerHTML = `
    <span>${footer.text}</span>
    <a href="${footer.url}" target="_blank" rel="noopener noreferrer">${footer.name}</a>
    <i>${footer.emoji}</i>
  `;
}

function renderPage() {
  document.querySelector("#nav-root").innerHTML = renderNav(PORTFOLIO.pieces, PORTFOLIO.hero);
  document.querySelector("#hero-root").innerHTML = renderHero(PORTFOLIO.hero);

  const works = document.querySelector("#works");
  works.innerHTML =
    PORTFOLIO.pieces.map(renderPiece).join("") + renderResources(PORTFOLIO.resources);

  renderFooter(PORTFOLIO.footer);
}

function initLightbox() {
  const lightbox = document.getElementById("lightbox");
  const lbImage = lightbox.querySelector("img");
  const counter = lightbox.querySelector(".lb-counter");
  const closeBtn = document.getElementById("close");
  const prevBtn = lightbox.querySelector(".lb-prev");
  const nextBtn = lightbox.querySelector(".lb-next");

  let currentImages = [];
  let currentIndex = 0;

  function updateNavButtons() {
    prevBtn.disabled = currentIndex === 0;
    nextBtn.disabled = currentIndex === currentImages.length - 1;
    counter.textContent = `${currentIndex + 1} / ${currentImages.length}`;
  }

  function openLightbox(allImages, index) {
    currentImages = allImages;
    currentIndex = index;

    lbImage.src = currentImages[index].dataset.full || currentImages[index].src;
    lbImage.alt = currentImages[index].alt || "";
    lightbox.classList.add("is-open");
    updateNavButtons();
  }

  function showImage(index) {
    currentIndex = index;
    const img = currentImages[currentIndex];
    lbImage.style.transform = "scale(0.95)";
    setTimeout(() => {
      lbImage.src = img.dataset.full || img.src;
      lbImage.alt = img.alt || "";
      lbImage.style.transform = "scale(1)";
      updateNavButtons();
    }, 120);
  }

  function showPrevImage() {
    if (currentIndex > 0) showImage(currentIndex - 1);
  }

  function showNextImage() {
    if (currentIndex < currentImages.length - 1) showImage(currentIndex + 1);
  }

  function closeLightbox() {
    lightbox.classList.remove("is-open");
  }

  document.querySelectorAll(".gallery").forEach((gallery) => {
    const images = Array.from(gallery.querySelectorAll("img"));
    images.forEach((img, index) => {
      img.addEventListener("click", () => openLightbox(images, index));
    });
  });

  prevBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    showPrevImage();
  });

  nextBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    showNextImage();
  });

  closeBtn.addEventListener("click", closeLightbox);
  lightbox.addEventListener("click", (e) => {
    if (e.target === lightbox) closeLightbox();
  });

  document.addEventListener("keydown", (e) => {
    if (!lightbox.classList.contains("is-open")) return;
    if (e.key === "Escape") closeLightbox();
    else if (e.key === "ArrowLeft") showPrevImage();
    else if (e.key === "ArrowRight") showNextImage();
  });
}

function initQuickNavScroll() {
  const quickNav = document.querySelector(".quick-nav");
  if (!quickNav) return;

  quickNav.addEventListener(
    "wheel",
    (e) => {
      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
      quickNav.scrollLeft += e.deltaY;
      e.preventDefault();
    },
    { passive: false }
  );
}

function initHeaderScrollState() {
  const header = document.querySelector(".site-header");
  if (!header) return;
  const onScroll = () => header.classList.toggle("is-scrolled", window.scrollY > 12);
  document.addEventListener("scroll", onScroll, { passive: true });
  onScroll();
}

document.addEventListener("DOMContentLoaded", () => {
  renderPage();
  initLightbox();
  initHeaderScrollState();
  initQuickNavScroll();
});