{
  "reasoning": "Autopool è un autosalone moderno e formale con palette navy/blu/arancio: lo stile bold-contemporary corporate automotive (ispirato ai reference dealer 06/07/08) calza meglio della pasticceria, quindi adatto 06-sinclairgroup con la palette del dossier. Header su sfondo bianco con wordmark navy a sinistra (niente riquadro band-aid), griglia auto-fit per i veicoli, lifestyle col gradiente rinforzato e testo in container allineato.",
  "selected_reference_style": "06-sinclairgroup",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#1F2D8A\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#2E6FE0\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#E87722\",\n  background: data.visual_identity?.color_palette?.background || \"#FFFFFF\",\n  text:       data.visual_identity?.color_palette?.text       || \"#1A1A2E\",\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<header class=\"site-header\">\n  <div class=\"container header-inner\">\n    <a class=\"brand\" href=\"#top\">\n      {data.images.logo ? (\n        <img class=\"brand-logo\" src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n      ) : (\n        <span class=\"brand-text\">{data.business_name}</span>\n      )}\n    </a>\n    <nav class=\"main-nav\" aria-label=\"main\">\n      <a href=\"#showroom\">{i.nav_products}</a>\n      <a href=\"#servizi\">{i.nav_services}</a>\n      <a href=\"#parco\">{i.nav_gallery}</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<main id=\"top\">\n  <!-- HERO -->\n  <section class=\"hero-section\">\n    {data.images.hero ? (\n      <div class=\"hero-with-image\">\n        <img src={imgUrl(data.images.hero.path)} alt={data.images.hero.alt} />\n        <div class=\"hero-overlay\">\n          <div class=\"container\">\n            <p class=\"eyebrow eyebrow-light\">{i.hero_eyebrow}</p>\n            <h1>{data.business_name}</h1>\n            <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n            <div class=\"hero-actions\">\n              <a class=\"btn btn-accent\" href=\"#showroom\">{i.cta_discover}</a>\n              <a class=\"btn btn-ghost\" href=\"#contatti\">{i.cta_contact}</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    ) : (\n      <div class=\"hero-text-only\">\n        <div class=\"container\">\n          <p class=\"eyebrow eyebrow-light\">{i.hero_eyebrow}</p>\n          <h1>{data.business_name}</h1>\n          <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n          <div class=\"hero-actions\">\n            <a class=\"btn btn-accent\" href=\"#showroom\">{i.cta_discover}</a>\n            <a class=\"btn btn-ghost\" href=\"#contatti\">{i.cta_contact}</a>\n          </div>\n        </div>\n      </div>\n    )}\n  </section>\n\n  <!-- INTRO -->\n  <section class=\"intro-section\">\n    <div class=\"container narrow\">\n      <p class=\"eyebrow\">{i.section_eyebrow_intro}</p>\n      <h2>{data.tagline}</h2>\n      <p class=\"lead\">{data.description}</p>\n    </div>\n  </section>\n\n  <!-- SHOWROOM (product slot) -->\n  <section id=\"showroom\" class=\"showroom-section\">\n    <div class=\"container\">\n      <p class=\"eyebrow\">{i.section_eyebrow_showroom}</p>\n      <h2>{i.section_title_products}</h2>\n      <p class=\"section-intro\">{copy.showroom_intro}</p>\n      {data.images.product.length > 0 ? (\n        <div class=\"car-grid\">\n          {data.images.product.map((p) => (\n            <article class=\"car-card\">\n              <div class=\"car-media\">\n                <img src={imgUrl(p.path)} alt={p.alt} />\n              </div>\n              <div class=\"car-body\">\n                <h3>{p.alt}</h3>\n                <span class=\"car-badge\">{i.car_badge}</span>\n              </div>\n            </article>\n          ))}\n        </div>\n      ) : (\n        <p class=\"section-intro\">{copy.showroom_intro}</p>\n      )}\n      <div class=\"showroom-actions\">\n        <a class=\"btn btn-accent\" href=\"#contatti\">{i.cta_all_cars}</a>\n      </div>\n    </div>\n  </section>\n\n  <!-- SERVICES -->\n  <section id=\"servizi\" class=\"services-section\">\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=\"service-grid\">\n        {data.products_or_services.map((s) => (\n          <article class=\"service-card\">\n            <h3>{s.name}</h3>\n            <p>{s.description}</p>\n          </article>\n        ))}\n      </div>\n    </div>\n  </section>\n\n  <!-- LIFESTYLE (slideshow slot) -->\n  {data.images.slideshow.length > 0 && (\n    <section class=\"lifestyle-section\">\n      <img src={imgUrl(data.images.slideshow[0].path)} alt={data.images.slideshow[0].alt} />\n      <div class=\"lifestyle-overlay\">\n        <div class=\"container\">\n          <div class=\"lifestyle-text\">\n            <p class=\"eyebrow eyebrow-light\">{i.section_eyebrow_lifestyle}</p>\n            <h2>{copy.lifestyle_title}</h2>\n            <p>{copy.lifestyle_body}</p>\n          </div>\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- BANNER CTA -->\n  {data.images.banner && (\n    <section class=\"banner-section\">\n      <img src={imgUrl(data.images.banner.path)} alt={data.images.banner.alt} />\n      <div class=\"banner-overlay\">\n        <div class=\"container\">\n          <h2>{copy.banner_title}</h2>\n          <p>{copy.banner_body}</p>\n          <a class=\"btn btn-accent\" href=\"#contatti\">{i.cta_sell}</a>\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- PARCO AUTO (gallery slot) -->\n  {data.images.gallery.length > 0 && (\n    <section id=\"parco\" class=\"gallery-section\">\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            <figure class=\"gallery-item\">\n              <img src={imgUrl(g.path)} alt={g.alt} />\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- CONTACTS -->\n  <section id=\"contatti\" class=\"contacts-section\">\n    <div class=\"container\">\n      <p class=\"eyebrow eyebrow-light\">{i.section_eyebrow_contacts}</p>\n      <h2>{i.section_title_contacts}</h2>\n      <p class=\"section-intro contacts-intro\">{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><a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a></p>\n          {data.contacts.whatsapp && (\n            <p>{i.label_whatsapp}: {data.contacts.whatsapp}</p>\n          )}\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>{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</main>\n\n<footer class=\"site-footer\">\n  <div class=\"container footer-inner\">\n    <div class=\"footer-brand\">\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    </div>\n    <div class=\"footer-contact\">\n      <p>{data.contacts.address}</p>\n      <p>{data.contacts.phone} · {data.contacts.email}</p>\n    </div>\n  </div>\n  <div class=\"footer-bottom\">\n    <div class=\"container\">\n      <span>© {data.business_name}</span>\n      <span>{i.footer_credits}</span>\n    </div>\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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');\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: 'Plus Jakarta Sans', system-ui, sans-serif;\n    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;\n  }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  body {\n    font-family: var(--font-body);\n    color: var(--color-text);\n    background: var(--color-background);\n    line-height: 1.6;\n    -webkit-font-smoothing: antialiased;\n  }\n  img { max-width: 100%; display: block; }\n  a { color: inherit; text-decoration: none; }\n  .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }\n  .container.narrow { max-width: 880px; }\n  h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; }\n  .eyebrow {\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    font-size: 0.72rem;\n    font-weight: 600;\n    color: var(--color-secondary);\n    margin-bottom: 0.9rem;\n  }\n  .eyebrow-light { color: rgba(255,255,255,0.85); }\n\n  .btn {\n    display: inline-block;\n    padding: 0.85rem 1.8rem;\n    font-weight: 700;\n    font-size: 0.85rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    border: 2px solid transparent;\n    transition: opacity .2s, background .2s, color .2s;\n  }\n  .btn-accent { background: var(--color-accent); color: #fff; }\n  .btn-accent:hover { opacity: 0.9; }\n  .btn-ghost { border-color: rgba(255,255,255,0.7); color: #fff; }\n  .btn-ghost:hover { background: rgba(255,255,255,0.12); }\n\n  /* HEADER */\n  .site-header {\n    position: sticky; top: 0; z-index: 50;\n    background: var(--color-background);\n    border-bottom: 1px solid #E5E5E5;\n  }\n  .header-inner {\n    display: flex; align-items: center; gap: 1.5rem;\n    padding-top: 14px; padding-bottom: 14px;\n  }\n  .brand-logo { height: 42px; width: auto; }\n  .brand-text { font-weight: 800; font-size: 1.4rem; color: var(--color-primary); }\n  .main-nav { display: flex; gap: 1.6rem; margin-left: auto; }\n  .main-nav a {\n    text-transform: uppercase;\n    font-size: 0.78rem;\n    font-weight: 600;\n    letter-spacing: 0.08em;\n    color: var(--color-text);\n  }\n  .main-nav a:hover { color: var(--color-secondary); }\n  .header-cta {\n    background: var(--color-accent); color: #fff;\n    padding: 0.6rem 1.3rem; font-size: 0.78rem; font-weight: 700;\n    text-transform: uppercase; letter-spacing: 0.07em;\n  }\n\n  /* HERO */\n  .hero-section { position: relative; }\n  .hero-with-image { position: relative; }\n  .hero-with-image img { width: 100%; height: 78vh; min-height: 460px; object-fit: cover; }\n  .hero-overlay {\n    position: absolute; inset: 0;\n    display: flex; align-items: center;\n    background: linear-gradient(90deg, rgba(15,18,60,0.82) 0%, rgba(15,18,60,0.5) 55%, rgba(15,18,60,0.15) 100%);\n  }\n  .hero-overlay h1, .hero-text-only h1 {\n    color: #fff; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800;\n    margin-bottom: 0.6rem;\n  }\n  .hero-tagline { color: rgba(255,255,255,0.92); font-size: clamp(1.05rem, 2vw, 1.4rem); max-width: 560px; margin-bottom: 1.8rem; }\n  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }\n  .hero-text-only {\n    background: var(--color-primary); padding: 6rem 0; min-height: 60vh;\n    display: flex; align-items: center;\n  }\n\n  /* INTRO */\n  .intro-section { padding: 5.5rem 0; text-align: center; }\n  .intro-section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-primary); margin-bottom: 1.4rem; }\n  .lead { font-size: 1.05rem; color: #444; }\n\n  /* SHOWROOM */\n  .showroom-section { padding: 4.5rem 0; background: #F5F5F5; }\n  .showroom-section h2, .services-section h2, .gallery-section h2 {\n    font-size: clamp(1.6rem, 3.5vw, 2.3rem); color: var(--color-primary); margin-bottom: 1rem;\n  }\n  .section-intro { color: #444; max-width: 640px; margin-bottom: 2.5rem; }\n  .car-grid {\n    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 1.6rem;\n  }\n  .car-card { background: #fff; overflow: hidden; box-shadow: 0 1px 0 #E5E5E5; }\n  .car-media { aspect-ratio: 4/3; overflow: hidden; }\n  .car-media img { width: 100%; height: 100%; object-fit: cover; }\n  .car-body { padding: 1.1rem 1.2rem 1.4rem; }\n  .car-body h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); margin-bottom: 0.7rem; }\n  .car-badge {\n    display: inline-block; font-size: 0.68rem; font-weight: 700;\n    text-transform: uppercase; letter-spacing: 0.06em;\n    color: var(--color-secondary); border: 1px solid var(--color-secondary);\n    padding: 0.3rem 0.7rem;\n  }\n  .showroom-actions { margin-top: 2.5rem; }\n\n  /* SERVICES */\n  .services-section { padding: 5rem 0; }\n  .service-grid {\n    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    gap: 1.4rem;\n  }\n  .service-card {\n    border: 1px solid #E5E5E5; padding: 1.6rem 1.5rem;\n    border-top: 3px solid var(--color-accent);\n  }\n  .service-card h3 { font-size: 1.1rem; color: var(--color-primary); margin-bottom: 0.6rem; }\n  .service-card p { color: #555; font-size: 0.95rem; }\n\n  /* LIFESTYLE */\n  .lifestyle-section { position: relative; }\n  .lifestyle-section img { width: 100%; height: 70vh; min-height: 420px; object-fit: cover; }\n  .lifestyle-overlay {\n    position: absolute; inset: 0; display: flex; align-items: flex-end;\n    background: linear-gradient(0deg, rgba(15,20,60,0.85) 0%, rgba(15,20,60,0.35) 60%, transparent 100%);\n    padding-bottom: 3.5rem;\n  }\n  .lifestyle-text { max-width: 620px; }\n  .lifestyle-overlay h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.8rem; }\n  .lifestyle-overlay p { color: rgba(255,255,255,0.92); font-size: 1.05rem; }\n\n  /* BANNER */\n  .banner-section { position: relative; }\n  .banner-section img { width: 100%; height: 340px; object-fit: cover; }\n  .banner-overlay {\n    position: absolute; inset: 0; display: flex; align-items: center;\n    background: linear-gradient(90deg, rgba(31,45,138,0.9) 0%, rgba(31,45,138,0.55) 100%);\n  }\n  .banner-overlay h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 0.7rem; max-width: 560px; }\n  .banner-overlay p { color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; max-width: 520px; }\n\n  /* GALLERY */\n  .gallery-section { padding: 5rem 0; background: #F5F5F5; }\n  .gallery-grid {\n    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 1.4rem;\n  }\n  .gallery-item { overflow: hidden; }\n  .gallery-item img { width: 100%; height: 320px; object-fit: cover; }\n\n  /* CONTACTS */\n  .contacts-section { padding: 5.5rem 0; background: var(--color-primary); color: #fff; }\n  .contacts-section h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom: 1rem; }\n  .contacts-intro { color: rgba(255,255,255,0.85); }\n  .contacts-grid {\n    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    gap: 2rem; margin-top: 2.5rem;\n  }\n  .contact-block h3 {\n    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;\n    color: var(--color-accent); margin-bottom: 0.6rem;\n  }\n  .contact-block p { color: rgba(255,255,255,0.92); font-size: 0.95rem; }\n  .contact-block a:hover { color: var(--color-accent); }\n\n  /* FOOTER */\n  .site-footer { background: #0E1230; color: #fff; padding-top: 3rem; }\n  .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }\n  .footer-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }\n  .footer-tag { color: rgba(255,255,255,0.7); margin-top: 0.9rem; max-width: 320px; font-size: 0.9rem; }\n  .footer-contact p { color: rgba(255,255,255,0.8); font-size: 0.9rem; }\n  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 1.2rem 0; }\n  .footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.6); }\n\n  @media (max-width: 760px) {\n    .main-nav { display: none; }\n    .header-cta { margin-left: auto; }\n  }\n</style>\n</body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 120,
      "description": "Frase hero sintetica e commerciale, distinta dalla descrizione lunga. Solo atmosfera/claim, niente fatti specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "showroom_intro",
      "type": "text",
      "max_chars": 240,
      "description": "Breve introduzione alla selezione di veicoli in showroom. Tono rassicurante, niente fatti inventati.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 240,
      "description": "Introduzione alla sezione servizi. Atmosferica.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "lifestyle_title",
      "type": "text",
      "max_chars": 70,
      "description": "Titolo evocativo per la sezione lifestyle (viaggio/strada).",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "lifestyle_body",
      "type": "text",
      "max_chars": 220,
      "description": "Corpo evocativo per la sezione lifestyle, tono di viaggio e libertà.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "banner_title",
      "type": "text",
      "max_chars": 70,
      "description": "Titolo banner CTA dedicato alla vendita dell'auto.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "banner_body",
      "type": "text",
      "max_chars": 180,
      "description": "Corpo banner che invita a vendere/valutare la propria auto.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione alla galleria del parco auto e della struttura.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contacts_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Frase introduttiva accogliente per la sezione contatti.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tag",
      "type": "text",
      "max_chars": 160,
      "description": "Tagline footer breve e atmosferica.",
      "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.whatsapp",
    "contacts.pec",
    "contacts.hours",
    "products_or_services[]",
    "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",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.slideshow[]",
    "images.product[]",
    "images.gallery[]"
  ],
  "ui_translations": {
    "nav_products": "Auto",
    "nav_services": "Servizi",
    "nav_gallery": "Parco auto",
    "nav_contacts": "Contatti",
    "cta_contact": "Contattaci",
    "cta_discover": "Scopri le auto",
    "cta_all_cars": "Vedi tutte le auto",
    "cta_sell": "Vendi la tua auto",
    "hero_eyebrow": "Autosalone a Prato",
    "section_eyebrow_intro": "Chi siamo",
    "section_eyebrow_showroom": "Disponibili ora",
    "section_eyebrow_services": "Cosa offriamo",
    "section_eyebrow_lifestyle": "In viaggio",
    "section_eyebrow_gallery": "La nostra struttura",
    "section_eyebrow_contacts": "Vieni a trovarci",
    "section_title_products": "Auto in showroom",
    "section_title_services": "I nostri servizi",
    "section_title_gallery": "Il parco auto",
    "section_title_contacts": "Contatti e orari",
    "car_badge": "Revisionata e garantita",
    "label_address": "Indirizzo",
    "label_phone": "Telefono",
    "label_whatsapp": "WhatsApp",
    "label_email": "Email",
    "label_pec": "PEC",
    "label_hours": "Orari",
    "footer_credits": "Realizzato con cura"
  }
}