---
import { jazzArticle, jazzBody, jazzImages, jazzSources } from "../../data/jazz";
import BaseLayout from "../../layouts/BaseLayout.astro";
---

<BaseLayout
  title={`${jazzArticle.title} | Dave Gilligan`}
  description={jazzArticle.excerpt}
>
  <main class="jazz-page">
    <section class="container jazz-hero">
      <div class="jazz-hero__copy">
        <span class="eyebrow">Article / Jazz and Music</span>
        <h1>{jazzArticle.title}</h1>
        <p class="jazz-hero__lede">{jazzArticle.excerpt}</p>
      </div>

      <aside class="panel jazz-hero__note">
        <div class="capsule__kicker">
          <span>Published</span>
          <span>{jazzArticle.publishedAt.slice(0, 10)}</span>
        </div>
        <h2>Direct article link</h2>
        <p>
          This is the clean standalone version of the Kongsberg Jazz piece, separate from the
          wider jazz desk.
        </p>
      </aside>
    </section>

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

    <section class="container jazz-layout">
      <article class="panel jazz-article">
        <div class="capsule__kicker">
          <span>Field report</span>
          <span>Kongsberg x Paris</span>
        </div>
        {jazzBody.map((paragraph) => (
          <p>{paragraph}</p>
        ))}
      </article>

      <aside class="jazz-sidebar">
        <article class="panel jazz-sidebar__card">
          <div class="capsule__kicker">
            <span>Also read</span>
            <span>Jazz desk</span>
          </div>
          <p>
            The wider jazz issue includes venue notes, free-show pointers, and the more
            magazine-like version of this piece.
          </p>
          <a class="button button--dark" href="/jazz-music">Open Jazz and Music</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">
          Festival details and venue framing are paraphrased from the official festival and venue
          sites linked below.
        </div>
      </div>

      <div class="source-list">
        {jazzSources.map((source) => (
          <article>
            <a href={source.href} target="_blank" rel="noreferrer">{source.label}</a>
          </article>
        ))}
      </div>
    </section>
  </main>
</BaseLayout>
