---
import { readFileSync } from "node:fs";
import path from "node:path";
import FamilyAtlas from "../components/FamilyAtlas.jsx";
import {
  familyLabFeature,
  familyLabFeaturedFilenames,
  familyLabFilters,
  familyLabNotes,
  familyLabStats,
} from "../data/family-lab";
import BaseLayout from "../layouts/BaseLayout.astro";

const manifestPath = path.join(process.cwd(), "public", "images", "family-lab", "facebook-060426", "manifest.json");
const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));

const photos = manifest.map((photo) => ({
  filename: photo.filename,
  src: photo.src,
  title: photo.title,
  description: photo.description,
  tags: photo.tags ?? [],
  namedFile: Boolean(photo.named_file),
}));

const photosByFilename = new Map(photos.map((photo) => [photo.filename, photo]));
const featuredPhotos = familyLabFeaturedFilenames
  .map((filename) => photosByFilename.get(filename))
  .filter(Boolean);
const namedPhotos = photos.filter((photo) => photo.namedFile).slice(0, 12);
---

<BaseLayout
  title="Family Laboratory | Dave Gilligan"
  description="A bright pataphysical family-atlas test page built from the Facebook archive, with a custom editorial collage and a full lightbox for the cleaned photo set."
>
  <main class="family-lab-page">
    <section class="container family-lab-hero">
      <div class="family-lab-hero__copy">
        <span class="eyebrow">{familyLabFeature.eyebrow}</span>
        <h1>{familyLabFeature.title}</h1>
        <p class="family-lab-hero__lede">{familyLabFeature.lede}</p>

        <div class="family-lab-hero__actions">
          <a class="button button--dark" href="#atlas">Open the atlas</a>
          <a class="button button--soft" href="#named-reel">See named frames</a>
        </div>
      </div>

      <aside class="family-lab-hero__montage" aria-label="Featured family collage">
        {featuredPhotos.slice(0, 4).map((photo, index) => (
          <figure class={`family-lab-hero__card family-lab-hero__card--${index + 1}`}>
            <img src={photo.src} alt={photo.title} loading="eager" />
            <figcaption>
              <span>{photo.title}</span>
              <small>{photo.description}</small>
            </figcaption>
          </figure>
        ))}
      </aside>
    </section>

    <section class="container family-lab-manifesto">
      <article class="panel family-lab-manifesto__note">
        <div class="capsule__kicker">
          <span>Visual thesis</span>
          <span>Light paper / domestic cinema / archival swagger</span>
        </div>
        <p>{familyLabFeature.note}</p>
      </article>

      <div class="family-lab-stats">
        {familyLabStats.map((item) => (
          <article>
            <strong>{item.value}</strong>
            <span>{item.label}</span>
            <p>{item.note}</p>
          </article>
        ))}
      </div>
    </section>

    <section class="container family-lab-notes">
      {familyLabNotes.map((note) => (
        <article class="family-lab-notes__item">
          <h2>{note.title}</h2>
          <p>{note.body}</p>
        </article>
      ))}
    </section>

    <section class="container family-lab-strip" id="named-reel">
      <div class="section-header section-header--tight">
        <div class="section-header__title">Named Frames</div>
        <div class="section-header__meta">
          The filenames with actual human memory in them get the first clean spread.
        </div>
      </div>

      <div class="family-lab-strip__rail">
        {namedPhotos.map((photo) => (
          <figure class="family-lab-strip__frame">
            <img src={photo.src} alt={photo.title} loading="lazy" />
            <figcaption>
              <strong>{photo.title}</strong>
              <span>{photo.description}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>

    <section class="container family-lab-atlas-shell">
      <div class="section-header">
        <div class="section-header__title">Archive Atlas</div>
        <div class="section-header__meta">
          Browse the cleaned test corpus, switch filters, and open any frame into a full-screen reading room.
        </div>
      </div>

      <FamilyAtlas client:load photos={photos} featured={featuredPhotos} filters={familyLabFilters} />
    </section>
  </main>
</BaseLayout>
