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

<BaseLayout
  title="Projects Desk | Dave Gilligan"
  description="An April 2026 projects desk feature on Trivia & Tunes, Blue Note Rhino, room-scale music trivia, and the first full vibe-coded product in the portfolio."
>
  <main class="projects-page">
    <section class="container projects-hero">
      <div class="projects-hero__copy">
        <span class="eyebrow"><LocaleCopy copy={projectsFeature.eyebrow} /></span>
        <h1><LocaleCopy copy={projectsFeature.title} /></h1>
        <p class="projects-hero__lede"><LocaleCopy copy={projectsFeature.lede} /></p>

        <div class="projects-hero__actions">
          <a class="button button--dark" href={`/articles/${projectsArticle.slug}`}>Read the April article</a>
          <a class="button button--soft" href="https://triviaandtunes.no/games/" target="_blank" rel="noreferrer">
            Visit Trivia & Tunes
          </a>
        </div>
      </div>

      <aside class="panel projects-hero__note">
        <div class="capsule__kicker">
          <span>Monthly project</span>
          <span>{projectsArticle.publishedAt.slice(0, 10)}</span>
        </div>
        <h2>{projectsArticle.title}</h2>
        <p><LocaleCopy copy={projectsArticle.excerpt} /></p>
        <p><LocaleCopy copy={projectsFeature.note} /></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>Project notebook</span>
          <span>Trivia x AI x room design</span>
        </div>
        {projectsDeskBody.en.map((_, i) => (
          <p><LocaleCopy copy={{ en: projectsDeskBody.en[i], fr: projectsDeskBody.fr[i], nb: projectsDeskBody.nb[i] }} /></p>
        ))}
      </article>

      <aside class="projects-aside">
        {projectsSignals.map((signal) => (
          <article class="panel projects-artifact">
            <span><LocaleCopy copy={signal.title} /></span>
            <p><LocaleCopy copy={signal.summary} /></p>
          </article>
        ))}
      </aside>
    </section>

    <section class="container projects-capabilities">
      <div class="section-header">
        <div class="section-header__title">What Makes It Hot</div>
        <div class="section-header__meta">
          The point is not that the product uses AI. The point is that the AI layer changes how the room behaves.
        </div>
      </div>

      <div class="projects-capabilities__grid">
        {projectsCapabilities.map((capability) => (
          <article class="projects-card">
            <h3><LocaleCopy copy={capability.title} /></h3>
            <p><LocaleCopy copy={capability.body} /></p>
          </article>
        ))}
      </div>
    </section>

    <section class="container projects-promo">
      <article class="panel projects-promo__article">
        <div class="capsule__kicker">
          <span>April feature</span>
          <span>Direct article</span>
        </div>
        <h2>{projectsArticle.title}</h2>
        <p><LocaleCopy copy={projectsArticle.excerpt} /></p>
        <a class="button button--dark" href={`/articles/${projectsArticle.slug}`}>Open the article</a>
      </article>
    </section>

    <section class="container source-block">
      <div class="section-header">
        <div class="section-header__title">Source Credits</div>
        <div class="section-header__meta">
          Public claims come from the live Trivia & Tunes site. Build-state claims are explicitly grounded in the reviewed local repository on April 6, 2026.
        </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>
