---
import { borisVianArticle, borisVianBody, borisVianImages, borisVianSources } from "../../data/boris-vian";
import BaseLayout from "../../layouts/BaseLayout.astro";
import LocaleCopy from "../../components/LocaleCopy.astro";

const pageCopy = {
  eyebrow: {
    en: "Article / Writing & Literature",
    fr: "Article / Écriture et Littérature",
    nb: "Artikkel / Skriving og Litteratur",
  },
  published: { en: "Published", fr: "Publié", nb: "Publisert" },
  sidebarH2: {
    en: "On the Writing Desk",
    fr: "Au bureau Écriture",
    nb: "På skrivedesken",
  },
  sidebarNote: {
    en: "I write about the things that shaped how I think: music, cities, literature, and the gaps between disciplines where the most interesting ideas live.",
    fr: "J'écris sur les choses qui ont façonné ma façon de penser : la musique, les villes, la littérature, et les espaces entre les disciplines où vivent les idées les plus intéressantes.",
    nb: "Jeg skriver om det som formet måten jeg tenker på: musikk, byer, litteratur og hullene mellom disiplinene der de mest interessante ideene lever.",
  },
  articleKicker: { en: "Introduction", fr: "Introduction", nb: "Introduksjon" },
  articleSubject: { en: "Boris Vian & 'Pataphysique", fr: "Boris Vian & la 'Pataphysique", nb: "Boris Vian & Patafysikk" },
  creditsTitle: { en: "Source Credits", fr: "Sources", nb: "Kildehenvisninger" },
  creditsMeta: {
    en: "Biographical details drawn from standard reference sources. Image attributions per Wikimedia Commons licensing terms.",
    fr: "Détails biographiques tirés de sources de référence standard. Attributions d'images selon les termes de licence Wikimedia Commons.",
    nb: "Biografiske detaljer hentet fra standardreferansekilder. Bildeattribusjon i henhold til Wikimedia Commons-lisensvilkår.",
  },
};
---

<BaseLayout
  title={`${borisVianArticle.title} | Dave Gilligan`}
  description={borisVianArticle.excerpt.en}
>
  <main class="jazz-page">
    <section class="container jazz-hero">
      <div class="jazz-hero__copy">
        <span class="eyebrow"><LocaleCopy copy={pageCopy.eyebrow} /></span>
        <h1>{borisVianArticle.title}</h1>
        <p class="jazz-hero__lede"><LocaleCopy copy={borisVianArticle.subtitle} /></p>
        <p class="jazz-hero__lede"><LocaleCopy copy={borisVianArticle.excerpt} /></p>
      </div>

      <aside class="panel jazz-hero__note">
        <div class="capsule__kicker">
          <span><LocaleCopy copy={pageCopy.published} /></span>
          <span>{borisVianArticle.publishedAt.slice(0, 10)}</span>
        </div>
        <h2><LocaleCopy copy={pageCopy.sidebarH2} /></h2>
        <p><LocaleCopy copy={pageCopy.sidebarNote} /></p>
      </aside>
    </section>

    <section class="container">
      <article class="panel jazz-article article-prose">
        <div class="capsule__kicker">
          <span><LocaleCopy copy={pageCopy.articleKicker} /></span>
          <span><LocaleCopy copy={pageCopy.articleSubject} /></span>
        </div>

        <div class="article-block">
          <figure class="article-fig article-fig--right">
            <img src={borisVianImages[0].src} alt={borisVianImages[0].alt} loading="lazy" />
            <figcaption>
              <span>{borisVianImages[0].credit} / {borisVianImages[0].license}</span>
              <a href={borisVianImages[0].sourceUrl} target="_blank" rel="noreferrer">{borisVianImages[0].sourceLabel}</a>
            </figcaption>
            {borisVianImages[0].note && <p class="article-fig__note">{borisVianImages[0].note}</p>}
          </figure>
          <p><LocaleCopy copy={{ en: borisVianBody.en[0], fr: borisVianBody.fr[0], nb: borisVianBody.nb[0] }} /></p>
          <p><LocaleCopy copy={{ en: borisVianBody.en[1], fr: borisVianBody.fr[1], nb: borisVianBody.nb[1] }} /></p>
        </div>

        <div class="article-block">
          <figure class="article-fig article-fig--left">
            <img src={borisVianImages[1].src} alt={borisVianImages[1].alt} loading="lazy" />
            <figcaption>
              <span>{borisVianImages[1].credit} / {borisVianImages[1].license}</span>
              <a href={borisVianImages[1].sourceUrl} target="_blank" rel="noreferrer">{borisVianImages[1].sourceLabel}</a>
            </figcaption>
            {borisVianImages[1].note && <p class="article-fig__note">{borisVianImages[1].note}</p>}
          </figure>
          <p><LocaleCopy copy={{ en: borisVianBody.en[2], fr: borisVianBody.fr[2], nb: borisVianBody.nb[2] }} /></p>
          <p><LocaleCopy copy={{ en: borisVianBody.en[3], fr: borisVianBody.fr[3], nb: borisVianBody.nb[3] }} /></p>
        </div>

        <div class="article-block">
          <figure class="article-fig article-fig--right">
            <img src={borisVianImages[2].src} alt={borisVianImages[2].alt} loading="lazy" />
            <figcaption>
              <span>{borisVianImages[2].credit} / {borisVianImages[2].license}</span>
              <a href={borisVianImages[2].sourceUrl} target="_blank" rel="noreferrer">{borisVianImages[2].sourceLabel}</a>
            </figcaption>
            {borisVianImages[2].note && <p class="article-fig__note">{borisVianImages[2].note}</p>}
          </figure>
          <p><LocaleCopy copy={{ en: borisVianBody.en[4], fr: borisVianBody.fr[4], nb: borisVianBody.nb[4] }} /></p>
          <p><LocaleCopy copy={{ en: borisVianBody.en[5], fr: borisVianBody.fr[5], nb: borisVianBody.nb[5] }} /></p>
        </div>

        <div class="article-block">
          <figure class="article-fig article-fig--left">
            <img src={borisVianImages[3].src} alt={borisVianImages[3].alt} loading="lazy" />
            <figcaption>
              <span>{borisVianImages[3].credit} / {borisVianImages[3].license}</span>
              <a href={borisVianImages[3].sourceUrl} target="_blank" rel="noreferrer">{borisVianImages[3].sourceLabel}</a>
            </figcaption>
            {borisVianImages[3].note && <p class="article-fig__note">{borisVianImages[3].note}</p>}
          </figure>
          <p><LocaleCopy copy={{ en: borisVianBody.en[6], fr: borisVianBody.fr[6], nb: borisVianBody.nb[6] }} /></p>
          <p><LocaleCopy copy={{ en: borisVianBody.en[7], fr: borisVianBody.fr[7], nb: borisVianBody.nb[7] }} /></p>
          <p><LocaleCopy copy={{ en: borisVianBody.en[8], fr: borisVianBody.fr[8], nb: borisVianBody.nb[8] }} /></p>
        </div>
      </article>
    </section>

    <section class="container source-block">
      <div class="section-header">
        <div class="section-header__title"><LocaleCopy copy={pageCopy.creditsTitle} /></div>
        <div class="section-header__meta"><LocaleCopy copy={pageCopy.creditsMeta} /></div>
      </div>

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

<style>
  .article-prose {
    padding: 1.6rem 2rem;
  }

  .article-block {
    display: flow-root;
    margin-top: 0.5rem;
  }

  .article-fig {
    margin: 0.3rem 0 1rem;
    overflow: hidden;
    border-radius: 1.4rem;
    border: 1px solid var(--line);
    background: rgba(255, 252, 246, 0.84);
    box-shadow: var(--shadow-paper);
  }

  .article-fig--right {
    float: right;
    width: 44%;
    margin-left: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .article-fig--left {
    float: left;
    width: 44%;
    margin-right: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .article-fig img {
    width: 100%;
    height: clamp(13rem, 24vw, 21rem);
    object-fit: cover;
  }

  .article-fig figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    padding: 0.65rem 0.9rem 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .article-fig figcaption a {
    color: var(--teal);
    text-decoration: none;
  }

  .article-fig__note {
    margin: 0.35rem 0.9rem 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
    font-size: 0.86rem;
    font-style: italic;
  }

  @media (max-width: 760px) {
    .article-fig--right,
    .article-fig--left {
      float: none;
      width: 100%;
      margin: 1rem 0;
    }
  }
</style>
