---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Ticker from '../../components/Ticker.astro';
import Footer from '../../components/Footer.astro';
import AsciiSep from '../../components/AsciiSep.astro';
import { getSerieById, getSiteSettings, fileUrl } from '../../lib/directus';

const { id } = Astro.params;
const serie = id ? await getSerieById(id) : null;

if (!serie || serie.status !== 'published' || !serie.published) {
  return new Response(null, { status: 404, statusText: 'Not Found' });
}

const s = await getSiteSettings();

const categoryLabel: Record<string, string> = {
  'mariage': 'MARIAGE',
  'portrait-lifestyle': 'PORTRAIT / LIFESTYLE',
  'reportage-editorial': 'REPORTAGE / EDITORIAL',
  'evenementiel': 'EVENEMENTIEL',
};
---
<Layout
  title={`${serie.title} — ${categoryLabel[serie.category] ?? serie.category}. ${s.studio_name}.`}
  description={serie.excerpt || `${categoryLabel[serie.category]} a ${serie.lieu}, ${serie.date_shoot}. Photographie documentaire par ${s.studio_name}.`}
>
  <Header studio={s.studio_name} addr={`REALISATION / ${serie.title.toUpperCase()} / ${serie.lieu.toUpperCase()}`} />

  <main id="top">
    <section class="serie-hero">
      <p class="tag">[ {String(serie.index ?? 0).padStart(2, '0')} ] {categoryLabel[serie.category] ?? serie.category}</p>
      <h1 class="serie-hero__title">{serie.title}</h1>
      <p class="serie-hero__sub">{serie.lieu.toUpperCase()} &middot; {serie.date_shoot.toUpperCase()}</p>
      {serie.cover && (
        <figure class="serie-hero__cover">
          <img
            src={fileUrl(serie.cover, { width: 2000, quality: 85, fit: 'cover' })}
            srcset={`${fileUrl(serie.cover, { width: 1000, quality: 80, fit: 'cover' })} 1000w, ${fileUrl(serie.cover, { width: 1600, quality: 80, fit: 'cover' })} 1600w, ${fileUrl(serie.cover, { width: 2000, quality: 85, fit: 'cover' })} 2000w`}
            sizes="(min-width: 1100px) 90vw, 100vw"
            alt={serie.cover_alt || serie.title}
            width="2000"
            height="1250"
          />
        </figure>
      )}
    </section>

    {serie.excerpt && (
      <>
        <AsciiSep label="LEDE" />
        <section class="serie-lede">
          <p>{serie.excerpt}</p>
        </section>
      </>
    )}

    <AsciiSep label="META" />
    <section class="serie-meta">
      <dl>
        <dt>CATEGORIE</dt><dd>{categoryLabel[serie.category] ?? serie.category}</dd>
        <dt>TITRE</dt><dd>{serie.title.toUpperCase()}</dd>
        <dt>LIEU</dt><dd>{serie.lieu.toUpperCase()}</dd>
        <dt>DATE</dt><dd>{serie.date_shoot}</dd>
        {serie.couple && <><dt>COUPLE</dt><dd>{serie.couple.toUpperCase()}</dd></>}
        {serie.client && <><dt>CLIENT</dt><dd>{serie.client.toUpperCase()}</dd></>}
        {typeof serie.invites === 'number' && <><dt>INVITES</dt><dd>{serie.invites}</dd></>}
        {serie.duree && <><dt>DUREE</dt><dd>{serie.duree.toUpperCase()}</dd></>}
        {serie.formule && <><dt>FORMULE</dt><dd>{serie.formule.toUpperCase()}</dd></>}
      </dl>
    </section>

    {serie.gallery.length > 0 && (
      <>
        <AsciiSep label={`GALLERY · ${String(serie.gallery.length).padStart(2, '0')}`} />
        <section class="serie-gallery">
          {serie.gallery.map((fileId, i) => (
            <figure class="serie-gallery__item">
              <span class="serie-gallery__num">{String(i + 1).padStart(2, '0')}</span>
              <img
                src={fileUrl(fileId, { width: 1400, quality: 80 })}
                srcset={`${fileUrl(fileId, { width: 800, quality: 80 })} 800w, ${fileUrl(fileId, { width: 1400, quality: 80 })} 1400w`}
                sizes="(min-width: 900px) 45vw, 100vw"
                alt={`${serie.title} - photo ${i + 1}`}
                loading="lazy"
              />
            </figure>
          ))}
        </section>
      </>
    )}

    <AsciiSep label="CONTACT" />
    <section class="serie-cta">
      <p class="serie-cta__lede">UN PROJET SIMILAIRE ? PARLONS-EN.</p>
      <div class="serie-cta__buttons">
        <a class="cta cta--big" href="/contact">[ DEMANDE DE DEVIS &rarr; ]</a>
        <a class="cta" href="/#realisations">[ &larr; RETOUR REALISATIONS ]</a>
      </div>
    </section>
  </main>

  <Ticker items={[
    `STUDIO ${s.studio_name.toUpperCase()}`,
    `EST. ${s.est_year}`,
    `${s.city} / ${s.country}`,
    'MARIAGE / PORTRAIT / REPORTAGE / EVENEMENT',
    `COUVERTURE ${s.region} + FRANCE`,
    'REPONSE < 48H',
  ]} />
  <Footer studio={s.studio_name} city={s.city} country={s.country} est={s.est_year} />
</Layout>

<style>
  .serie-hero {
    padding: 3rem 1.5rem 2rem;
    border-bottom: 2px solid var(--ink);
  }
  .serie-hero .tag {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--ink-2);
    margin: 0 0 1rem;
  }
  .serie-hero__title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .serie-hero__sub {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    margin: 0 0 2rem;
  }
  .serie-hero__cover {
    margin: 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--paper-elev);
  }
  .serie-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02);
  }
  .serie-hero__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    mix-blend-mode: multiply;
    opacity: 0.32;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .serie-hero__cover:hover::after { opacity: 0; }

  .serie-lede {
    padding: 2rem 1.5rem;
    max-width: 60rem;
  }
  .serie-lede p {
    font-size: 1.05rem;
    line-height: 1.7;
    text-transform: none;
    margin: 0;
  }

  .serie-meta {
    padding: 2rem 1.5rem;
    border-bottom: 2px solid var(--ink);
  }
  .serie-meta dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 2rem;
    margin: 0;
  }
  .serie-meta dt {
    font-size: 0.7rem;
    color: var(--ink-2);
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
  }
  .serie-meta dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.85rem;
  }

  .serie-gallery {
    padding: 2rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .serie-gallery__item {
    margin: 0;
    position: relative;
    background: var(--paper-elev);
    overflow: hidden;
    aspect-ratio: 4 / 5;
  }
  .serie-gallery__item:nth-child(3n) { aspect-ratio: 16 / 10; grid-column: span 2; }
  .serie-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .serie-gallery__item:hover img { transform: scale(1.02); }
  .serie-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    mix-blend-mode: multiply;
    opacity: 0.28;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .serie-gallery__item:hover::after { opacity: 0; }
  .serie-gallery__num {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    font-size: 0.7rem;
    background: var(--paper);
    color: var(--ink);
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .serie-cta {
    padding: 3rem 1.5rem 5rem;
    text-align: center;
  }
  .serie-cta__lede {
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    margin: 0 0 1.5rem;
    font-weight: 700;
  }
  .serie-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 720px) {
    .serie-gallery {
      grid-template-columns: 1fr;
    }
    .serie-gallery__item:nth-child(3n) { grid-column: span 1; }
    .serie-meta dl { grid-template-columns: 1fr 1fr; }
  }
</style>