{
  "reasoning": "Autopool è un autosalone: lo stile 07-days (dealer automotive UK) è il match naturale — palette navy come primary, card prodotto a gerarchia rigida, sezioni alternate bianco/grigio chiaro e CTA dirette. Uso la palette del dossier (navy #1F2A6B, blu #2979FF, oro #C9A227) con Inter sans-modern, e tutte le slot immagine popolate vengono rese ognuna nella propria sezione (hero, banner CTA, product strip, slideshow divider, gallery), mentre storefront/team/background vuoti vengono omessi.",
  "selected_reference_style": "07-days",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\n\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\n\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#0A1E47\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#1B57B3\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#2BB673\",\n  background: data.visual_identity?.color_palette?.background || \"#FFFFFF\",\n  text:       data.visual_identity?.color_palette?.text       || \"#333740\",\n};\n---\n<!DOCTYPE html>\n<html lang={lang}>\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <title>{data.business_name} — {data.tagline}</title>\n  <meta name=\"description\" content={data.description} />\n</head>\n<body>\n\n  <!-- HEADER -->\n  <header class=\"site-header\">\n    <div class=\"header-inner\">\n      <a href=\"#top\" class=\"header-logo\">\n        {data.images.logo ? (\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        ) : (\n          <span class=\"logo-text\">{data.business_name}</span>\n        )}\n      </a>\n      <nav class=\"header-nav\" aria-label={i.nav_aria_label}>\n        <a href=\"#servizi\">{i.nav_services}</a>\n        <a href=\"#parco-auto\">{i.nav_cars}</a>\n        <a href=\"#contatti\">{i.nav_contacts}</a>\n      </nav>\n      <a class=\"header-cta\" href=\"#contatti\">{i.cta_contact}</a>\n    </div>\n  </header>\n\n  <!-- HERO -->\n  <section class=\"hero-section\" id=\"top\">\n    {data.images.hero ? (\n      <div class=\"hero-with-image\">\n        <img class=\"hero-img\" src={imgUrl(data.images.hero.path)} alt={data.images.hero.alt} />\n        <div class=\"hero-overlay\">\n          <p class=\"hero-eyebrow\">{copy.hero_eyebrow}</p>\n          <h1>{data.business_name}</h1>\n          <p class=\"hero-tagline\">{data.tagline}</p>\n          <p class=\"hero-sub\">{copy.hero_subtitle}</p>\n          <div class=\"hero-actions\">\n            <a class=\"btn btn-accent\" href=\"#parco-auto\">{i.cta_discover}</a>\n            <a class=\"btn btn-outline\" href=\"#contatti\">{i.cta_contact}</a>\n          </div>\n        </div>\n      </div>\n    ) : (\n      <div class=\"hero-text-only\">\n        <h1>{data.business_name}</h1>\n        <p class=\"hero-tagline\">{data.tagline}</p>\n        <a class=\"btn btn-accent\" href=\"#parco-auto\">{i.cta_discover}</a>\n      </div>\n    )}\n  </section>\n\n  <!-- INTRO / STORY -->\n  <section class=\"intro-section\">\n    <div class=\"container narrow\">\n      <p class=\"eyebrow\">{i.section_eyebrow_intro}</p>\n      <h2>{i.section_title_intro}</h2>\n      <p class=\"intro-copy\">{copy.story_paragraph}</p>\n      <p class=\"intro-desc\">{data.description}</p>\n    </div>\n  </section>\n\n  <!-- SERVIZI -->\n  <section class=\"services-section\" id=\"servizi\">\n    <div class=\"container\">\n      <p class=\"eyebrow\">{i.section_eyebrow_services}</p>\n      <h2>{i.section_title_services}</h2>\n      <p class=\"section-intro\">{copy.services_intro}</p>\n      <div class=\"services-grid\">\n        {data.products_or_services.map((p) => (\n          <article class=\"service-card\">\n            <h3>{p.name}</h3>\n            <p>{p.description}</p>\n            <a class=\"card-link\" href=\"#contatti\">{i.cta_more}</a>\n          </article>\n        ))}\n      </div>\n    </div>\n  </section>\n\n  <!-- BANNER CTA -->\n  {data.images.banner && (\n    <section class=\"banner-section\">\n      <img class=\"banner-img\" src={imgUrl(data.images.banner.path)} alt={data.images.banner.alt} />\n      <div class=\"banner-overlay\">\n        <h2>{copy.banner_headline}</h2>\n        <p>{copy.banner_text}</p>\n        <a class=\"btn btn-accent\" href=\"#contatti\">{i.cta_sell}</a>\n      </div>\n    </section>\n  )}\n\n  <!-- PARCO AUTO -->\n  <section class=\"cars-section\" id=\"parco-auto\">\n    <div class=\"container\">\n      <p class=\"eyebrow\">{i.section_eyebrow_cars}</p>\n      <h2>{i.section_title_cars}</h2>\n      <p class=\"section-intro\">{copy.cars_intro}</p>\n      {data.images.product.length > 0 && (\n        <div class=\"cars-grid\">\n          {data.images.product.map((img) => (\n            <figure class=\"car-card\">\n              <img src={imgUrl(img.path)} alt={img.alt} loading=\"lazy\" />\n              <figcaption>{img.alt}</figcaption>\n            </figure>\n          ))}\n        </div>\n      )}\n      <div class=\"cars-cta\">\n        <a class=\"btn btn-primary\" href=\"#contatti\">{i.cta_contact}</a>\n      </div>\n    </div>\n  </section>\n\n  <!-- SLIDESHOW / DIVIDER -->\n  {data.images.slideshow.length > 0 && (\n    <section class=\"slideshow-section\">\n      {data.images.slideshow.map((img) => (\n        <div class=\"slide\">\n          <img src={imgUrl(img.path)} alt={img.alt} loading=\"lazy\" />\n        </div>\n      ))}\n      <div class=\"slide-caption\">\n        <p>{copy.slideshow_caption}</p>\n      </div>\n    </section>\n  )}\n\n  <!-- GALLERY -->\n  {data.images.gallery.length > 0 && (\n    <section class=\"gallery-section\" id=\"galleria\">\n      <div class=\"container\">\n        <p class=\"eyebrow\">{i.section_eyebrow_gallery}</p>\n        <h2>{i.section_title_gallery}</h2>\n        <p class=\"section-intro\">{copy.gallery_intro}</p>\n        <div class=\"gallery-grid\">\n          {data.images.gallery.map((g) => (\n            <img src={imgUrl(g.path)} alt={g.alt} loading=\"lazy\" />\n          ))}\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- CONTATTI -->\n  <section class=\"contacts-section\" id=\"contatti\">\n    <div class=\"container\">\n      <p class=\"eyebrow light\">{i.section_eyebrow_contacts}</p>\n      <h2>{i.section_title_contacts}</h2>\n      <p class=\"section-intro light\">{copy.contacts_intro}</p>\n      <div class=\"contacts-grid\">\n        <div class=\"contact-block\">\n          <h3>{i.label_address}</h3>\n          <p>{data.contacts.address}</p>\n        </div>\n        <div class=\"contact-block\">\n          <h3>{i.label_phone}</h3>\n          <p>{data.contacts.phone}</p>\n        </div>\n        <div class=\"contact-block\">\n          <h3>{i.label_email}</h3>\n          <p><a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a></p>\n          {data.contacts.pec && (\n            <p class=\"pec\">{i.label_pec}: {data.contacts.pec}</p>\n          )}\n        </div>\n        <div class=\"contact-block\">\n          <h3>{i.label_hours}</h3>\n          <p>{data.contacts.hours}</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- FOOTER -->\n  <footer class=\"site-footer\">\n    <div class=\"footer-inner\">\n      {data.images.logo && (\n        <img class=\"footer-logo\" src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n      )}\n      <p class=\"footer-tag\">{copy.footer_tag}</p>\n      <p class=\"footer-meta\">{data.business_name} — {data.contacts.address}</p>\n      <p class=\"footer-credits\">{i.footer_credits}</p>\n    </div>\n  </footer>\n\n  <style is:global define:vars={{\n    colorPrimary:    palette.primary,\n    colorSecondary:  palette.secondary,\n    colorAccent:     palette.accent,\n    colorBackground: palette.background,\n    colorText:       palette.text,\n  }}>\n    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n    :root {\n      --color-primary:    var(--colorPrimary);\n      --color-secondary:  var(--colorSecondary);\n      --color-accent:     var(--colorAccent);\n      --color-background: var(--colorBackground);\n      --color-text:       var(--colorText);\n      --font-heading: 'Inter', sans-serif;\n      --font-body: 'Inter', sans-serif;\n      --color-light-grey: #F4F5F7;\n      --radius: 6px;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body {\n      font-family: var(--font-body);\n      color: var(--color-text);\n      background: var(--color-background);\n      line-height: 1.6;\n      font-size: 16px;\n    }\n    img { max-width: 100%; display: block; }\n    a { color: var(--color-secondary); text-decoration: none; }\n\n    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }\n    .container.narrow { max-width: 820px; }\n\n    h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-primary); }\n    h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; margin-bottom: 0.75rem; }\n    h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }\n\n    .eyebrow {\n      text-transform: uppercase;\n      letter-spacing: 0.14em;\n      font-size: 0.78rem;\n      font-weight: 600;\n      color: var(--color-secondary);\n      margin-bottom: 0.5rem;\n    }\n    .eyebrow.light { color: var(--color-accent); }\n    .section-intro { max-width: 700px; margin-bottom: 2.5rem; color: var(--color-text); opacity: 0.85; }\n\n    .btn {\n      display: inline-block;\n      padding: 0.85rem 1.8rem;\n      border-radius: var(--radius);\n      font-weight: 600;\n      font-size: 0.95rem;\n      transition: opacity 0.2s ease;\n    }\n    .btn:hover { opacity: 0.88; }\n    .btn-accent { background: var(--color-accent); color: #fff; }\n    .btn-primary { background: var(--color-primary); color: #fff; }\n    .btn-outline { border: 2px solid #fff; color: #fff; }\n\n    /* HEADER */\n    .site-header {\n      background: var(--color-primary);\n      position: sticky;\n      top: 0;\n      z-index: 50;\n    }\n    .header-inner {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 0.7rem 24px;\n      display: flex;\n      align-items: center;\n      gap: 2rem;\n    }\n    .header-logo img { height: 42px; width: auto; background: #fff; padding: 4px 10px; border-radius: var(--radius); }\n    .logo-text { color: #fff; font-weight: 800; font-size: 1.3rem; }\n    .header-nav { display: flex; gap: 1.6rem; margin-left: auto; }\n    .header-nav a {\n      color: #fff;\n      font-size: 0.9rem;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n    .header-nav a:hover { color: var(--color-accent); }\n    .header-cta {\n      background: var(--color-accent);\n      color: #fff;\n      padding: 0.55rem 1.2rem;\n      border-radius: var(--radius);\n      font-size: 0.85rem;\n      font-weight: 600;\n      white-space: nowrap;\n    }\n\n    /* HERO */\n    .hero-section { position: relative; }\n    .hero-with-image { position: relative; min-height: 78vh; display: flex; }\n    .hero-img {\n      position: absolute; inset: 0;\n      width: 100%; height: 100%;\n      object-fit: cover;\n    }\n    .hero-overlay {\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: flex-start;\n      padding: 6rem 24px;\n      max-width: 1200px;\n      margin: 0 auto;\n      color: #fff;\n    }\n    .hero-with-image::after {\n      content: '';\n      position: absolute; inset: 0;\n      background: linear-gradient(90deg, rgba(10,20,60,0.82) 0%, rgba(10,20,60,0.35) 70%, rgba(10,20,60,0.15) 100%);\n    }\n    .hero-overlay { z-index: 2; }\n    .hero-eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; font-weight: 600; color: var(--color-accent); margin-bottom: 0.8rem; }\n    .hero-overlay h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; }\n    .hero-tagline { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; margin-top: 0.6rem; }\n    .hero-sub { margin-top: 0.8rem; max-width: 560px; opacity: 0.92; }\n    .hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }\n    .hero-text-only {\n      background: var(--color-primary);\n      color: #fff;\n      padding: 7rem 24px;\n      text-align: center;\n    }\n    .hero-text-only h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 5rem); }\n    .hero-text-only .btn { margin-top: 2rem; }\n\n    /* INTRO */\n    .intro-section { padding: 90px 0; background: var(--color-background); }\n    .intro-copy { font-size: 1.15rem; margin-bottom: 1.2rem; }\n    .intro-desc { opacity: 0.85; }\n\n    /* SERVIZI */\n    .services-section { padding: 90px 0; background: var(--color-light-grey); }\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n      gap: 24px;\n    }\n    .service-card {\n      background: #fff;\n      border-radius: var(--radius);\n      padding: 1.8rem;\n      box-shadow: 0 2px 10px rgba(0,0,0,0.06);\n      display: flex;\n      flex-direction: column;\n    }\n    .service-card p { font-size: 0.95rem; opacity: 0.85; flex-grow: 1; }\n    .card-link {\n      margin-top: 1.2rem;\n      font-weight: 600;\n      font-size: 0.88rem;\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n      color: var(--color-secondary);\n    }\n    .card-link:hover { text-decoration: underline; }\n\n    /* BANNER */\n    .banner-section { position: relative; min-height: 360px; display: flex; }\n    .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n    .banner-section::after {\n      content: '';\n      position: absolute; inset: 0;\n      background: rgba(13, 22, 64, 0.72);\n    }\n    .banner-overlay {\n      position: relative;\n      z-index: 2;\n      margin: auto;\n      text-align: center;\n      color: #fff;\n      padding: 4rem 24px;\n      max-width: 760px;\n    }\n    .banner-overlay h2 { color: #fff; }\n    .banner-overlay p { margin: 0.8rem 0 1.8rem; opacity: 0.92; }\n\n    /* PARCO AUTO */\n    .cars-section { padding: 90px 0; background: var(--color-background); }\n    .cars-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 24px;\n    }\n    .car-card {\n      background: #fff;\n      border-radius: var(--radius);\n      overflow: hidden;\n      box-shadow: 0 2px 10px rgba(0,0,0,0.08);\n    }\n    .car-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }\n    .car-card figcaption {\n      padding: 1rem 1.2rem;\n      font-weight: 600;\n      font-size: 0.95rem;\n      color: var(--color-primary);\n    }\n    .cars-cta { text-align: center; margin-top: 2.5rem; }\n\n    /* SLIDESHOW */\n    .slideshow-section { position: relative; }\n    .slide img { width: 100%; max-height: 520px; object-fit: cover; }\n    .slide-caption {\n      position: absolute;\n      left: 0; right: 0; bottom: 0;\n      background: linear-gradient(transparent, rgba(10,20,60,0.75));\n      color: #fff;\n      padding: 3rem 24px 1.6rem;\n      text-align: center;\n      font-weight: 500;\n    }\n\n    /* GALLERY */\n    .gallery-section { padding: 90px 0; background: var(--color-light-grey); }\n    .gallery-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: 24px;\n    }\n    .gallery-grid img {\n      width: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      border-radius: var(--radius);\n    }\n\n    /* CONTATTI */\n    .contacts-section {\n      padding: 90px 0;\n      background: var(--color-primary);\n      color: #fff;\n    }\n    .contacts-section h2 { color: #fff; }\n    .section-intro.light { color: #fff; opacity: 0.8; }\n    .contacts-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n      gap: 24px;\n    }\n    .contact-block {\n      background: rgba(255,255,255,0.07);\n      border-radius: var(--radius);\n      padding: 1.6rem;\n    }\n    .contact-block h3 {\n      color: var(--color-accent);\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      margin-bottom: 0.6rem;\n    }\n    .contact-block p { font-size: 0.95rem; }\n    .contact-block a { color: #fff; text-decoration: underline; }\n    .contact-block .pec { margin-top: 0.4rem; font-size: 0.82rem; opacity: 0.75; }\n\n    /* FOOTER */\n    .site-footer {\n      background: #0c1437;\n      color: #fff;\n      padding: 3.5rem 24px;\n      text-align: center;\n    }\n    .footer-logo { height: 40px; width: auto; margin: 0 auto 1.2rem; background: #fff; padding: 4px 10px; border-radius: var(--radius); }\n    .footer-tag { opacity: 0.85; margin-bottom: 0.8rem; }\n    .footer-meta { font-size: 0.85rem; opacity: 0.65; }\n    .footer-credits { font-size: 0.78rem; opacity: 0.5; margin-top: 1.2rem; }\n\n    @media (max-width: 720px) {\n      .header-nav { display: none; }\n      .hero-with-image { min-height: 62vh; }\n    }\n  </style>\n</body>\n</html>\n",
  "content_schema": [
    {
      "key": "hero_eyebrow",
      "type": "text",
      "max_chars": 60,
      "description": "Micro-frase eyebrow sopra il titolo hero, tono professionale automotive. Solo atmosfera, nessun fatto specifico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "hero_subtitle",
      "type": "text",
      "max_chars": 200,
      "description": "Sottotitolo hero che evoca affidabilità e scelta nell'usato, senza citare numeri, prezzi o garanzie specifiche.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 600,
      "description": "Paragrafo narrativo sull'approccio dell'autosalone: cura, trasparenza, vicinanza al cliente. Atmosferico, niente fatti verificabili.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Frase introduttiva alla griglia servizi, tono rassicurante e diretto. Nessun fatto specifico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "banner_headline",
      "type": "text",
      "max_chars": 80,
      "description": "Headline atmosferica per il banner CTA dedicato a chi vuole vendere la propria auto. Niente cifre o promesse verificabili.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "banner_text",
      "type": "text",
      "max_chars": 200,
      "description": "Testo di supporto del banner CTA: invito caldo ma sobrio a contattare l'autosalone. Solo atmosfera.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "cars_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione alla sezione parco auto: varietà e cura della selezione, in termini atmosferici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "slideshow_caption",
      "type": "text",
      "max_chars": 150,
      "description": "Didascalia evocativa per l'immagine divider a tutta larghezza (viaggio, libertà su strada). Nessun fatto.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Breve introduzione alla galleria della sede e degli spazi, tono accogliente. Nessun fatto specifico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contacts_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Frase di invito al contatto, cordiale e professionale. Nessun dato di contatto nel testo.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tag",
      "type": "text",
      "max_chars": 120,
      "description": "Frase di chiusura del footer, sintesi atmosferica dello spirito del business.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "tagline",
    "description",
    "contacts.address",
    "contacts.phone",
    "contacts.email",
    "contacts.pec",
    "contacts.hours",
    "products_or_services[]",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.slideshow[]",
    "images.product[]",
    "images.gallery[]",
    "visual_identity.color_palette.primary",
    "visual_identity.color_palette.secondary",
    "visual_identity.color_palette.accent",
    "visual_identity.color_palette.background",
    "visual_identity.color_palette.text"
  ],
  "ui_translations": {
    "nav_aria_label": "Navigazione principale",
    "nav_services": "Servizi",
    "nav_cars": "Parco auto",
    "nav_contacts": "Contatti",
    "cta_discover": "Scopri il parco auto",
    "cta_contact": "Contattaci",
    "cta_sell": "Vendi la tua auto",
    "cta_more": "Scopri di più",
    "section_eyebrow_intro": "Chi siamo",
    "section_title_intro": "Il nostro autosalone",
    "section_eyebrow_services": "Cosa facciamo",
    "section_title_services": "I nostri servizi",
    "section_eyebrow_cars": "In pronta consegna",
    "section_title_cars": "Dal nostro parco auto",
    "section_eyebrow_gallery": "La sede",
    "section_title_gallery": "I nostri spazi",
    "section_eyebrow_contacts": "Vieni a trovarci",
    "section_title_contacts": "Contatti e orari",
    "label_address": "Indirizzo",
    "label_phone": "Telefono",
    "label_email": "Email",
    "label_pec": "PEC",
    "label_hours": "Orari",
    "footer_credits": "Realizzato con cura"
  }
}