---
import {
  projectsArticle,
  projectsArticleBody,
  projectsImages,
  projectsSources,
} from "../../data/projects";
import BaseLayout from "../../layouts/BaseLayout.astro";
import LocaleCopy from "../../components/LocaleCopy.astro";
---

<BaseLayout
  title={`${projectsArticle.title} | Dave Gilligan`}
  description={projectsArticle.excerpt.en}
>
  <main class="projects-page">
    <section class="container projects-hero">
      <div class="projects-hero__copy">
        <span class="eyebrow">Article / Projects desk</span>
        <h1>{projectsArticle.title}</h1>
        <p class="projects-hero__lede"><LocaleCopy copy={projectsArticle.excerpt} /></p>
      </div>

      <aside class="panel projects-hero__note">
        <div class="capsule__kicker">
          <span>Published</span>
          <span>{projectsArticle.publishedAt.slice(0, 10)}</span>
        </div>
        <h2>Direct article link</h2>
        <p>
          This is the standalone project article version of the April Trivia & Tunes feature.
        </p>
      </aside>
    </section>

    <section class="container projects-gallery">
      {projectsImages.map((image) => (
        <figure class="projects-gallery__figure">
          <img src={image.src} alt={image.alt} loading="lazy" />
          <figcaption>
            <span>{image.credit}</span>
            <a href={image.sourceUrl} target="_blank" rel="noreferrer">{image.sourceLabel}</a>
          </figcaption>
          {image.note && <p class="projects-gallery__note">{image.note}</p>}
        </figure>
      ))}
    </section>

    <section class="container projects-layout">
      <article class="panel projects-story">
        <div class="capsule__kicker">
          <span>April dispatch</span>
          <span>Music trivia x Blue Note Rhino</span>
        </div>
        {projectsArticleBody.en.map((_, i) => (
          <p><LocaleCopy copy={{ en: projectsArticleBody.en[i], fr: projectsArticleBody.fr[i], nb: projectsArticleBody.nb[i] }} /></p>
        ))}
      </article>

      <aside class="projects-aside">
        <article class="panel projects-artifact">
          <span>Also read</span>
          <p>
            The wider Projects desk keeps the article in context and frames Trivia & Tunes as part
            of the broader build portfolio.
          </p>
          <a class="button button--dark" href="/projects">Open the Projects desk</a>
        </article>
      </aside>
    </section>

    <section class="container source-block">
      <div class="section-header">
        <div class="section-header__title">Source Credits</div>
        <div class="section-header__meta">
          Public references come from live Trivia & Tunes pages and assets. Working-build references are called out separately.
        </div>
      </div>

      <div class="source-list">
        {projectsSources.map((source) => (
          <article>
            {source.href ? (
              <a href={source.href} target="_blank" rel="noreferrer">{source.label}</a>
            ) : (
              <strong>{source.label}</strong>
            )}
            <p>{source.note}</p>
          </article>
        ))}
      </div>
    </section>
  </main>
</BaseLayout>
