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

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

      <aside class="panel jazz-hero__note">
        <div class="capsule__kicker">
          <span>Field note</span>
          <span>{jazzArticle.publishedAt.slice(0, 10)}</span>
        </div>
        <h2>{jazzArticle.title}</h2>
        <p>{jazzHero.note}</p>
        <div class="jazz-hero__actions">
          <a class="button button--dark" href="/articles/kongsberg-jazz-2026">Read the article</a>
        </div>
      </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>Editorial</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>Artist route</span>
            <span>2026</span>
          </div>
          <ul class="jazz-list">
            {jazzPicks.map((pick) => (
              <li>
                <span>{pick.day}</span>
                <strong>{pick.artist}</strong>
                <p>{pick.detail}</p>
                <a href={pick.href} target="_blank" rel="noreferrer">Festival programme</a>
              </li>
            ))}
          </ul>
        </article>

        <article class="panel jazz-sidebar__card">
          <div class="capsule__kicker">
            <span>Free route</span>
            <span>No ticket panic</span>
          </div>
          <ul class="jazz-list">
            {jazzFreeNotes.map((note) => (
              <li>
                <strong>{note.title}</strong>
                <p>{note.summary}</p>
                <a href={note.href} target="_blank" rel="noreferrer">Open details</a>
              </li>
            ))}
          </ul>
        </article>
      </aside>
    </section>

    <section class="container jazz-venues">
      <div class="section-header">
        <div class="section-header__title">Night Rooms</div>
        <div class="section-header__meta">
          The venues matter because jazz is never only a poster. It is also a staircase, a basement,
          a courtyard, an outdoor stage, and the timing of who drifts where after the formal set.
        </div>
      </div>

      <div class="jazz-venue-grid">
        {jazzVenues.map((venue) => (
          <article class="jazz-venue-card">
            <h3>{venue.name}</h3>
            <p>{venue.summary}</p>
            <a href={venue.href} target="_blank" rel="noreferrer">Open venue</a>
          </article>
        ))}
      </div>
    </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>
