// v2-media.jsx — project catalog, fetched from the CMS (Payload)

const CMS_MEDIA_API = "https://cms.obsidian-studio.io";

// ── Project catalog — populated by loadProjects() before the app renders ──
let PROJECTS = [];

async function loadProjects() {
  const res = await fetch(`${CMS_MEDIA_API}/api/cases?limit=100&sort=sortOrder&depth=1`);
  const data = await res.json();
  PROJECTS = (data.docs || []).map((doc) => ({
    slug: doc.slug,
    name: doc.name,
    cat: doc.category,
    loc: doc.location,
    year: doc.year,
    summary: doc.summary,
    services: (doc.services || []).map((s) => s.value),
    cover: doc.cover && doc.cover.url,
    gallery: (doc.gallery || []).map((g) => g.image && g.image.url).filter(Boolean),
  }));
  Object.assign(window, { PROJECTS });
  return PROJECTS;
}

const getProject = (slug) => PROJECTS.find(p => p.slug === slug) || PROJECTS[0];

// ── Real-render image card (with optional hover video) ────────
function Photo({ id, ratio = "4/5", alt = "", video, style }) {
  return (
    <div className="plate" style={{ aspectRatio: ratio, ...style }}>
      <img className="plate-photo" src={id} alt={alt} loading="lazy" />
      {video && (
        <video className="plate-video" src={video} muted loop playsInline preload="none"></video>
      )}
    </div>
  );
}

Object.assign(window, { PROJECTS, getProject, loadProjects, Photo });