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

const s = await getSiteSettings();
const SITE = {
  studio: s.studio_name,
  city: s.city,
  country: s.country,
  email: s.email,
  est: s.est_year,
};

interface Formule {
  num: string;
  name: string;
  included: string[];
  price: string;
  featured?: boolean;
}
interface Block {
  slug: string;
  num: string;
  title: string;
  tagline: string;
  formules: Formule[];
}

const BLOCKS: Block[] = [
  {
    slug: 'mariage',
    num: '01',
    title: 'MARIAGE',
    tagline: "DOCUMENTAIRE / SOBRE / SANS MISE EN SCENE.",
    formules: [
      { num: '01.1', name: 'DEMI-JOURNEE', included: ['4 a 5h de couverture', 'Ceremonie + cocktail', '~250 photos retouchees', 'Livraison sous 4 semaines'], price: '1 200&euro;' },
      { num: '01.2', name: 'JOURNEE COMPLETE *', included: ['Preparatifs jusqu\'au bal', 'Couverture continue', '~600 photos retouchees', 'Galerie privee 12 mois', 'Un tirage 30x40 offert'], price: '2 200&euro;', featured: true },
      { num: '01.3', name: 'SUR-MESURE', included: ['Multi-jours / destination', 'Film argentique en option', 'Tirage editorial', 'Brief sur-mesure'], price: 'A PARTIR DE 3 000&euro;' },
    ],
  },
  {
    slug: 'portrait',
    num: '02',
    title: 'PORTRAIT / LIFESTYLE',
    tagline: 'INDIVIDU / COUPLE / FAMILLE / EDITORIAL PERSO.',
    formules: [
      { num: '02.1', name: 'SEANCE 1H', included: ['1h de shooting (interieur ou exterieur)', '15 photos retouchees', 'Livraison sous 2 semaines'], price: '400&euro;' },
      { num: '02.2', name: 'SEANCE ETENDUE 2H *', included: ['2h / multi-lieux possible', '30 photos retouchees', 'Livraison sous 2 semaines'], price: '700&euro;', featured: true },
      { num: '02.3', name: 'SUR-MESURE', included: ['Demi-journee ou +', 'Serie editoriale completee', 'Tirages haute qualite', 'Direction artistique partagee'], price: 'SUR DEVIS' },
    ],
  },
  {
    slug: 'reportage',
    num: '03',
    title: 'REPORTAGE / EDITORIAL',
    tagline: 'PRESSE / MAGAZINE / PROJET D\'AUTEUR / DOCUMENTAIRE LONG.',
    formules: [
      { num: '03.1', name: 'DEMI-JOURNEE', included: ['4h de captation', '~150 photos retouchees', 'Droits d\'usage editorial inclus'], price: '500&euro;' },
      { num: '03.2', name: 'JOURNEE COMPLETE *', included: ['Couverture continue 8h', '~300 photos retouchees', 'Selection editoriale + brute', 'Droits etendus'], price: '900&euno;'.replace('&euno;', '&euro;'), featured: true },
      { num: '03.3', name: 'PROJET LONG / SUR-MESURE', included: ['Multi-jours / multi-sessions', 'Suivi editorial complet', 'Tirage expo en option', 'Co-publication possible'], price: 'SUR DEVIS' },
    ],
  },
  {
    slug: 'evenementiel',
    num: '04',
    title: 'EVENEMENTIEL',
    tagline: 'SOIREES PRO / LANCEMENTS / ANNIVERSAIRES / COCKTAILS.',
    formules: [
      { num: '04.1', name: '2H', included: ['Captation continue 2h', '~80 photos retouchees', 'Livraison sous 1 semaine'], price: '700&euro;' },
      { num: '04.2', name: 'DEMI-JOURNEE *', included: ['4h de captation', '~200 photos retouchees', 'Galerie privee partageable'], price: '1 100&euro;', featured: true },
      { num: '04.3', name: 'JOURNEE / EVENT MULTI-LIEUX', included: ['8h continues', '~400 photos retouchees', 'Multi-lieux ou multi-jours possible'], price: '1 800&euro;' },
    ],
  },
];

const mailSubject = encodeURIComponent("Demande de devis");
const mailBody = encodeURIComponent(`Bonjour,

Mon projet :
- Type (mariage / portrait / reportage / evenementiel) :
- Date approximative :
- Lieu :
- Duree estimee :
- Budget indicatif :
- Quelques mots sur le contexte :

A bientot.`);
---
<Layout title={`Tarifs — ${SITE.studio}. Mariage, portrait, reportage, evenementiel.`}>
  <Header studio={SITE.studio} addr={`TARIFS / 2026 / STUDIO ${SITE.studio.toUpperCase()}`} />
  <main id="top">
    <section class="page-head">
      <p class="tag">TARIFS / 2026</p>
      <h1 class="page-title"><span class="ital">quatre</span> TERRAINS,<br />TROIS FORMULES PAR TERRAIN.</h1>
      <p class="page-lede">PRIX INDICATIFS, ALIGNES SUR LE MARCHE PACA / COTE D'AZUR. DEVIS PERSONNALISE POUR CHAQUE PROJET. FORMULE * = LA PLUS DEMANDEE DANS CHAQUE CATEGORIE.</p>
    </section>

    {BLOCKS.map((block) => (
      <>
        <AsciiSep label={`${block.num} &middot; ${block.title}`} />
        <section class="tarif-block" id={block.slug}>
          <header class="block-head">
            <p class="tag">[{block.num}] {block.title}.</p>
            <p class="block-tagline">{block.tagline}</p>
          </header>
          <div class="formule-grid">
            {block.formules.map((f) => (
              <article class={`formule${f.featured ? ' formule--featured' : ''}`}>
                <header>
                  <p class="formule-num">{f.num}</p>
                  <h3 class="formule-name">{f.name}</h3>
                  <p class="formule-price" set:html={`${f.price}`}></p>
                </header>
                <ul class="formule-list">
                  {f.included.map((line) => <li>{line.toUpperCase()}</li>)}
                </ul>
                <a class="formule-cta" href={`mailto:${SITE.email}?subject=${mailSubject}%20${encodeURIComponent(block.title)}%20${encodeURIComponent(f.name)}&body=${mailBody}`}>
                  [ DEMANDER UN DEVIS &#x2192; ]
                </a>
              </article>
            ))}
          </div>
        </section>
      </>
    ))}

    <AsciiSep label="ZZ &middot; CONTACT / DEVIS" />
    <section class="devis-final">
      <p class="tag">PROJET SUR-MESURE OU HORS GRILLE ?</p>
      <h2 class="devis-title">PARLE-MOI <span class="ital">de ton projet.</span></h2>
      <p class="devis-body">CHAQUE PROJET EST UNIQUE. SI TES BESOINS NE COLLENT PAS A UNE FORMULE STANDARD, ECRIS-MOI : ON CONSTRUIT UN DEVIS ADAPTE. REPONSE SOUS 48H.</p>
      <a class="cta cta--big" href={`mailto:${SITE.email}?subject=${mailSubject}&body=${mailBody}`}>
        [ {SITE.email.toUpperCase()} ]
      </a>
      <p class="contact__addr">STUDIO {SITE.studio.toUpperCase()} &middot; {SITE.city} &middot; {SITE.country}</p>
    </section>
  </main>
  <Ticker />
  <Footer studio={SITE.studio} city={SITE.city} country={SITE.country} est={SITE.est} />
</Layout>

<style>
  .page-head { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 2.5vw, 1.75rem); border-bottom: 2px solid var(--ink); }
  .page-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
  }
  .page-title .ital { color: var(--accent); font-weight: 300; padding: 0; text-transform: lowercase; }
  .page-lede { max-width: 60ch; color: var(--ink-2); font-size: 0.8125rem; letter-spacing: 0.04em; margin: 0; }

  .tarif-block { border-bottom: 2px solid var(--ink); }
  .block-head { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.75rem) 1rem; }
  .block-tagline { font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-2); margin: 0; }

  .formule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ink);
  }
  .formule {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-right: 1px solid var(--ink);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--paper);
  }
  .formule:last-child { border-right: none; }
  .formule--featured { background: color-mix(in oklab, var(--accent) 8%, var(--paper)); }
  [data-theme="dark"] .formule--featured { background: color-mix(in oklab, var(--accent) 18%, var(--paper-elev)); }

  .formule header { display: flex; flex-direction: column; gap: 0.5rem; }
  .formule-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--accent); letter-spacing: 0.18em; font-weight: 700; margin: 0; }
  .formule-name { font-family: var(--mono); font-weight: 700; font-size: 1.125rem; margin: 0; letter-spacing: 0.02em; }
  .formule-price {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    color: var(--ink);
    margin: 0.25rem 0 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .formule--featured .formule-price { color: var(--accent); }

  .formule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .formule-list li {
    padding-left: 1.25rem;
    position: relative;
  }
  .formule-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
  }

  .formule-cta {
    display: inline-block;
    margin-top: auto;
    padding: 0.7rem 0;
    border-top: 1px dashed var(--ink-2);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s;
  }
  .formule-cta:hover { color: var(--ink); }

  .devis-final {
    padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 2.5vw, 1.75rem);
    border-bottom: 2px solid var(--ink);
  }
  .devis-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0 0 1.25rem;
  }
  .devis-title .ital { color: var(--accent); font-weight: 300; padding: 0; }
  .devis-body { max-width: 56ch; color: var(--ink-2); font-size: 0.8125rem; letter-spacing: 0.06em; margin: 0 0 2rem; }

  @media (max-width: 900px) {
    .formule-grid { grid-template-columns: 1fr; }
    .formule { border-right: none; border-bottom: 1px solid var(--ink); }
    .formule:last-child { border-bottom: none; }
  }
</style>
