#!/usr/bin/env python3
"""Build the five structural variants of the V4 design service page."""

from pathlib import Path


ROOT = Path(__file__).resolve().parents[1]
SOURCE = ROOT / "servizio-progettazione-grafica-v4-brand-ai.html"

VARIANTS = {
    "editoriale": "Editoriale alternata",
    "mosaico": "Mosaico asimmetrico",
    "collage": "Collage sovrapposto",
    "schede": "Schede immagine/testo",
    "racconto": "Racconto sticky",
}

START = "<!-- ===== HERO STUDIO ===== -->"
END = "<!-- ===== FAQ ===== -->"

MAIN = r'''<!-- ===== HERO STRUTTURA ===== -->
<section class="layout-hero wrap">
  <p class="breadcrumb"><a href="v1-hero-fullwidth-angolo.html#lavori">Servizi</a> / <b>Progettazione grafica</b></p>
  <div class="layout-hero__grid">
    <div class="layout-hero__copy">
      <span class="eyebrow"><span class="reg" aria-hidden="true"></span> SERVIZIO — <b>PROGETTAZIONE GRAFICA &amp; DIGITALE</b></span>
      <h1>Dall'idea al file<br>pronto per la <em>stampa</em>.</h1>
      <p class="lede">Un unico partner dal concept all'esecutivo: logo e identità, impaginazione, file esecutivi a prova di macchina e presenza digitale. Chi progetta parla ogni giorno con chi stampa.</p>
      <div class="hero-actions">
        <a class="btn btn--accent" href="#preventivo">Avvia un progetto</a>
        <a class="btn btn--ghost" href="#metodo">Come lavoriamo</a>
      </div>
    </div>
    <figure class="layout-hero__media service-hero-media visual-enter" data-visual>
      <picture class="service-picture">
        <source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/hero-identity-800.webp 800w, assets/img/services/v4-brand-ai/design/hero-identity-1600.webp 1600w" sizes="(max-width: 760px) 100vw, 58vw">
        <img class="svc-media" src="assets/img/services/v4-brand-ai/design/hero-identity-1600.webp" width="1600" height="1066" fetchpriority="high" alt="Identity board San Marco Vision con la dicitura Dal segno alla stampa">
      </picture>
      <span class="visual-chip">Concept → Esecutivo</span>
      <div class="pantone" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </figure>
  </div>
</section>

<!-- ===== PORTFOLIO STRUTTURALE ===== -->
<section class="layout-portfolio" aria-labelledby="layout-portfolio-title">
  <div class="layout-portfolio__intro wrap reveal">
    <div>
      <span class="eyebrow"><span class="reg" aria-hidden="true"></span> COSA PROGETTIAMO</span>
      <h2 id="layout-portfolio-title">Quattro mestieri,<br>un solo linguaggio.</h2>
    </div>
    <div class="layout-portfolio__lead">
      <p>Tutto ciò che serve per farti riconoscere, su carta e su schermo.</p>
      <span>Dal sistema agli esecutivi</span>
      <h3>Un'identità, molti punti di contatto.</h3>
      <p>La coerenza non limita: crea una struttura riconoscibile capace di vivere su carta, packaging e schermi.</p>
    </div>
  </div>

  <div class="layout-gallery wrap" data-layout-story>
    <div class="layout-images" aria-label="Esempi di progettazione grafica">
      <figure class="layout-image" data-layout-image="0">
        <picture><source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/gallery-identity-800.webp 800w, assets/img/services/v4-brand-ai/design/gallery-identity-1600.webp 1600w" sizes="(max-width:760px) 100vw, 50vw"><img src="assets/img/services/v4-brand-ai/design/gallery-identity-800.webp" width="800" height="533" loading="lazy" decoding="async" alt="Sistema di identità visiva San Marco Vision con stationery e campioni"></picture>
        <figcaption>01 / Identità visiva</figcaption>
      </figure>
      <figure class="layout-image" data-layout-image="1">
        <picture><source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/gallery-editorial-800.webp 800w, assets/img/services/v4-brand-ai/design/gallery-editorial-1600.webp 1600w" sizes="(max-width:760px) 100vw, 50vw"><img src="assets/img/services/v4-brand-ai/design/gallery-editorial-800.webp" width="800" height="533" loading="lazy" decoding="async" alt="Cataloghi aperti e fogli editoriali con griglie modulari"></picture>
        <figcaption>02 / Editoriale</figcaption>
      </figure>
      <figure class="layout-image" data-layout-image="2">
        <picture><source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/gallery-packaging-800.webp 800w, assets/img/services/v4-brand-ai/design/gallery-packaging-1600.webp 1600w" sizes="(max-width:760px) 100vw, 50vw"><img src="assets/img/services/v4-brand-ai/design/gallery-packaging-800.webp" width="800" height="533" loading="lazy" decoding="async" alt="Packaging San Marco Vision con la dicitura Concept verso esecutivo"></picture>
        <figcaption>03 / Packaging</figcaption>
      </figure>
      <figure class="layout-image" data-layout-image="3">
        <picture><source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/gallery-digital-800.webp 800w, assets/img/services/v4-brand-ai/design/gallery-digital-1600.webp 1600w" sizes="(max-width:760px) 100vw, 50vw"><img src="assets/img/services/v4-brand-ai/design/gallery-digital-800.webp" width="800" height="533" loading="lazy" decoding="async" alt="Tablet e smartphone con layout digitali coordinati"></picture>
        <figcaption>04 / Digitale</figcaption>
      </figure>
      <figure class="layout-image" data-layout-image="4">
        <picture><source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/gallery-prepress-800.webp 800w, assets/img/services/v4-brand-ai/design/gallery-prepress-1600.webp 1600w" sizes="(max-width:760px) 100vw, 50vw"><img src="assets/img/services/v4-brand-ai/design/gallery-prepress-800.webp" width="800" height="533" loading="lazy" decoding="async" alt="Prova colore con mire di registro e campioni di carta"></picture>
        <figcaption>05 / Prestampa</figcaption>
      </figure>
    </div>

    <div class="layout-copy">
      <article class="layout-step" id="story-step-01" data-layout-step="0">
        <span class="num">01</span><h3>Logo &amp; identità</h3>
        <p>Marchio, palette, caratteri e linee guida: le basi coerenti del tuo brand.</p>
        <div class="layout-step__meta"><b>Identità visiva</b><span>Un sistema, non un segno isolato.</span><small>Logo / Palette</small></div>
      </article>
      <article class="layout-step" id="story-step-02" data-layout-step="1">
        <span class="num">02</span><h3>Impaginazione</h3>
        <p>Cataloghi, brochure, libri e riviste, curati riga per riga.</p>
        <div class="layout-step__meta"><b>Editoriale</b><span>Gerarchia che guida la lettura.</span><small>Griglia / Impaginazione</small></div>
      </article>
      <article class="layout-step" id="story-step-03" data-layout-step="2">
        <span class="num">03</span><h3>Esecutivi &amp; prepress</h3>
        <p>File pronti per la macchina: abbondanze, crocini, profili colore.</p>
        <div class="layout-step__meta"><b>Packaging</b><span>Grafica già pensata sulla fustella.</span><small>Dieline / Mockup</small></div>
      </article>
      <article class="layout-step" id="story-step-04" data-layout-step="3">
        <span class="num">04</span><h3>Servizi digitali</h3>
        <p>Social kit, template e adattamenti per il web, coerenti con la stampa.</p>
        <div class="layout-step__meta"><b>Digitale</b><span>Coerenza anche sugli schermi.</span><small>Social / Template</small></div>
      </article>
      <article class="layout-step layout-step--prepress" id="story-step-05" data-layout-step="4">
        <span class="num">05</span><h3>Prestampa</h3>
        <p>Ogni dettaglio pronto per la macchina.</p>
        <div class="layout-step__meta"><b>Controllo tecnico</b><span>Ogni dettaglio pronto per la macchina.</span><small>PDF/X / Prova colore</small></div>
      </article>
    </div>
  </div>
</section>

<!-- ===== METODO ===== -->
<section class="layout-method wrap" id="metodo">
  <div class="layout-method__head reveal">
    <span class="eyebrow"><span class="reg" aria-hidden="true"></span> IL METODO</span>
    <h2>Dallo schizzo<br>alla macchina.</h2>
    <p>Cinque passaggi, un dialogo continuo: niente sorprese in stampa.</p>
  </div>
  <div class="layout-flow reveal">
    <article><span>01</span><h3>Ascolto</h3><p>Obiettivi, pubblico, vincoli e budget.</p></article>
    <article><span>02</span><h3>Concept</h3><p>Direzioni creative da scegliere insieme.</p></article>
    <article><span>03</span><h3>Design</h3><p>Sviluppo e affinamento fino all'ok.</p></article>
    <article><span>04</span><h3>Esecutivo</h3><p>File tecnico pronto per la stampa.</p></article>
    <article><span>05</span><h3>Stampa</h3><p>Prova colore e messa in macchina.</p></article>
  </div>
</section>

<!-- ===== INTERLUDIO ===== -->
<section class="wrap visual-interlude layout-interlude" aria-label="Dal concept al file pronto per la stampa">
  <figure class="visual-interlude__stage visual-enter" data-visual>
    <picture class="service-picture">
      <source type="image/webp" srcset="assets/img/services/v4-brand-ai/design/interlude-prepress-800.webp 800w, assets/img/services/v4-brand-ai/design/interlude-prepress-1600.webp 1600w" sizes="(max-width: 760px) 100vw, 90vw">
      <img src="assets/img/services/v4-brand-ai/design/interlude-prepress-1600.webp" width="1600" height="1066" loading="lazy" decoding="async" alt="Schizzi, griglie e prove colore preparati per la prestampa">
    </picture>
    <div class="visual-interlude__veil" aria-hidden="true"></div>
    <div class="design-boards" aria-hidden="true"><i></i><i></i><i></i></div>
    <span class="visual-index">Idea / Sistema / Esecutivo</span>
    <figcaption class="visual-interlude__caption">
      <span class="eyebrow"><span class="reg" aria-hidden="true"></span> DALL'INTUIZIONE ALLA MATERIA</span>
      <h2>Prima si riconosce.<br>Poi si stampa.</h2>
      <p>Ogni scelta visiva viene verificata su supporti, colori e finiture reali prima di diventare un esecutivo.</p>
    </figcaption>
  </figure>
</section>

<!-- ===== VANTAGGIO PREPRESS ===== -->
<section class="layout-advantage wrap">
  <div class="prepress reveal">
    <div>
      <span class="eyebrow"><span class="reg" aria-hidden="true"></span> IL VANTAGGIO</span>
      <h2>Non solo grafica:<br>pronti per la <em>macchina</em>.</h2>
      <p>Il bello di progettare dentro una tipografia? L'esecutivo nasce già giusto per la stampa. Meno rimpalli, meno errori, meno tempo perso.</p>
    </div>
    <ul>
      <li><span class="reg" aria-hidden="true"></span> Abbondanze, crocini e profili colore corretti alla fonte</li>
      <li><span class="reg" aria-hidden="true"></span> Prova colore certificata sullo stesso progetto</li>
      <li><span class="reg" aria-hidden="true"></span> Un unico referente dall'idea alla consegna</li>
      <li><span class="reg" aria-hidden="true"></span> Carta e finiture scelte già in fase di design</li>
    </ul>
  </div>
</section>

'''


def build(slug: str, label: str) -> None:
    source = SOURCE.read_text(encoding="utf-8")
    before, remainder = source.split(START, 1)
    _, after = remainder.split(END, 1)
    page = before + MAIN + END + after
    page = page.replace(
        "<title>Progettazione grafica e servizi digitali — V4 Brand AI | San Marco Vision</title>",
        f"<title>Progettazione grafica — {label} | San Marco Vision</title>",
    )
    page = page.replace(
        '<link rel="stylesheet" href="assets/css/service-v4-brand-ai.css">',
        '<link rel="stylesheet" href="assets/css/service-v4-brand-ai.css">\n<link rel="stylesheet" href="assets/css/service-v4-layouts.css">',
    )
    page = page.replace(
        '<body class="svc-studio" data-service="design" data-rich-version="4">',
        f'<body class="svc-studio" data-service="design" data-rich-version="4" data-layout="{slug}">',
    )
    page = page.replace(
        '<script src="assets/js/service-v4-brand-ai.js" defer></script>',
        '<script src="assets/js/service-v4-brand-ai.js" defer></script>\n<script src="assets/js/service-v4-layouts.js" defer></script>',
    )
    target = ROOT / f"servizio-progettazione-grafica-v4-layout-{slug}.html"
    target.write_text(page, encoding="utf-8")


for variant_slug, variant_label in VARIANTS.items():
    build(variant_slug, variant_label)