// Index / home — case grid

function IndexView({ navigate, layout }) {
  const cases = window.CASES;

  // layout: 'twoUp' (default — Figma), 'evenGrid', 'list', 'asymmetric'
  return (
    <main className="index-view">
      <section className={"case-grid layout-" + layout}>
        {cases.map((c, i) => (
          <CaseCard key={c.id} c={c} i={i} navigate={navigate} layout={layout} />
        ))}
      </section>
    </main>
  );
}

function CaseCard({ c, i, navigate, layout }) {
  // For the 'asymmetric' layout, vary aspect ratios per index for visual rhythm.
  const aspectByLayout = {
    twoUp: "1123 / 638",
    evenGrid: "4 / 3",
    list: "1500 / 420",
    asymmetric: ["3 / 4", "4 / 3", "3 / 4", "16 / 10", "1 / 1", "4 / 3", "3 / 4", "16 / 10"][i % 8],
  };

  // Video aspect ratio (vimeo cases). Falls back to 16/9 if unspecified.
  const videoAr = c.media.kind === "vimeo" ? (c.media.videoAr || "16/9") : undefined;

  return (
    <a
      href={`#/work/${c.id}`}
      className="case-card"
      onClick={(e) => { e.preventDefault(); navigate(`/work/${c.id}`); }}
      style={{ "--aspect": aspectByLayout[layout] || "1123 / 638", "--video-ar": videoAr }}
    >
      <div className="case-thumb" data-media-kind={c.media.kind}>
        <window.MediaPlaceholder kind={c.media.kind} tone={c.media.tone} src={c.media.src} videoAr={videoAr} />
        <div className="case-overlay" aria-hidden="true" />
      </div>
      <div className="case-meta">
        <span className="case-title">{c.title}</span>
        <span className="case-client">{c.client}</span>
      </div>
    </a>
  );
}

window.IndexView = IndexView;