{
  "reasoning": "Autopool è un concessionario auto moderno e strutturato che richiede un'estetica formale, professionale e sicura. Ho scelto 01-modern-minimal perché rispecchia il tono 'sportivo ma serio': una single-hero full-bleed con vetrine di prodotto pulite, tipografia sans-serif contemporanea in blu scuro (brand identity), e layout minimalista senza distrazioni. La palette blu-arancio del brand comunica affidabilità e dinamismo. I servizi sono esposti in modo cristallino, senza marketing eccessivo, per riflettere l'immagine di azienda ben strutturata richiesta.",
  "selected_reference_style": "01-modern-minimal",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\n\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#003DA5\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#6B9FD4\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#E87722\",\n  background: data.visual_identity?.color_palette?.background || \"#F5F5F5\",\n  text:       data.visual_identity?.color_palette?.text       || \"#1A1A1A\",\n};\n\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\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.0\" />\n  <title>{data.business_name} - {data.tagline}</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Manrope:wght@400;600;700&display=swap\" rel=\"stylesheet\" />\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@300;400;600;700&family=Manrope:wght@400;600;700&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:     'Manrope', sans-serif;\n      --font-body:        'Inter', sans-serif;\n    }\n\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    html, body {\n      font-family: var(--font-body);\n      color: var(--color-text);\n      background-color: var(--color-background);\n      line-height: 1.6;\n    }\n\n    a {\n      color: var(--color-primary);\n      text-decoration: none;\n    }\n\n    a:hover {\n      text-decoration: underline;\n    }\n\n    /* HEADER */\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 2rem;\n      background: #FFFFFF;\n      border-bottom: 1px solid #E0E0E0;\n      position: sticky;\n      top: 0;\n      z-index: 100;\n    }\n\n    .logo {\n      height: 50px;\n      display: flex;\n      align-items: center;\n    }\n\n    .logo img {\n      height: 100%;\n      width: auto;\n    }\n\n    .nav {\n      display: flex;\n      gap: 2.5rem;\n      align-items: center;\n      list-style: none;\n    }\n\n    .nav a {\n      font-family: var(--font-heading);\n      font-size: 0.875rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--color-text);\n      transition: color 0.3s ease;\n    }\n\n    .nav a:hover {\n      color: var(--color-primary);\n      text-decoration: none;\n    }\n\n    .nav a.active {\n      color: var(--color-primary);\n      border-bottom: 2px solid var(--color-primary);\n      padding-bottom: 0.25rem;\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 1.5rem;\n    }\n\n    .cta-button {\n      background-color: var(--color-primary);\n      color: #FFFFFF;\n      padding: 0.75rem 1.5rem;\n      border-radius: 0.25rem;\n      font-family: var(--font-heading);\n      font-size: 0.875rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      border: none;\n      cursor: pointer;\n      transition: background-color 0.3s ease;\n    }\n\n    .cta-button:hover {\n      background-color: var(--color-secondary);\n    }\n\n    /* HERO SECTION */\n    .hero-section {\n      min-height: 80vh;\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      overflow: hidden;\n    }\n\n    .hero-image {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      z-index: 1;\n    }\n\n    .hero-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(135deg, rgba(0, 61, 165, 0.7) 0%, rgba(107, 159, 212, 0.5) 100%);\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 2rem;\n      text-align: center;\n    }\n\n    .hero-content {\n      position: relative;\n      z-index: 3;\n      color: #FFFFFF;\n      max-width: 700px;\n    }\n\n    .hero-content h1 {\n      font-family: var(--font-heading);\n      font-size: clamp(2.5rem, 8vw, 4.5rem);\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      margin-bottom: 1rem;\n      line-height: 1.2;\n    }\n\n    .hero-tagline {\n      font-size: clamp(1rem, 2.5vw, 1.5rem);\n      font-weight: 300;\n      margin-bottom: 2rem;\n      letter-spacing: 0.02em;\n      opacity: 0.95;\n    }\n\n    .hero-cta {\n      display: inline-block;\n      background-color: var(--color-accent);\n      color: #FFFFFF;\n      padding: 1rem 2.5rem;\n      font-family: var(--font-heading);\n      font-size: 0.95rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.1em;\n      border: none;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      border-radius: 0.25rem;\n    }\n\n    .hero-cta:hover {\n      background-color: #D66815;\n      transform: translateY(-2px);\n    }\n\n    /* SERVICES BANNER */\n    .services-banner {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    /* SERVICES SECTION */\n    .services-section {\n      padding: 5rem 2rem;\n      background-color: #FFFFFF;\n    }\n\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 3rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .service-card {\n      background: var(--color-background);\n      padding: 2rem;\n      border-left: 4px solid var(--color-accent);\n      transition: all 0.3s ease;\n    }\n\n    .service-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 61, 165, 0.12);\n      transform: translateY(-4px);\n    }\n\n    .service-card h3 {\n      font-family: var(--font-heading);\n      font-size: 1.25rem;\n      font-weight: 700;\n      margin-bottom: 0.75rem;\n      color: var(--color-primary);\n      text-transform: uppercase;\n      letter-spacing: 0.02em;\n    }\n\n    .service-card p {\n      font-size: 0.95rem;\n      line-height: 1.7;\n      color: var(--color-text);\n    }\n\n    /* PRODUCTS SECTION */\n    .products-section {\n      padding: 5rem 2rem;\n      background-color: var(--color-background);\n    }\n\n    .section-title {\n      font-family: var(--font-heading);\n      font-size: 2.5rem;\n      font-weight: 700;\n      text-align: center;\n      margin-bottom: 3rem;\n      color: var(--color-primary);\n      text-transform: uppercase;\n      letter-spacing: 0.02em;\n    }\n\n    .products-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: 2rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .product-card {\n      background: #FFFFFF;\n      border-radius: 0.25rem;\n      overflow: hidden;\n      transition: all 0.3s ease;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .product-card:hover {\n      box-shadow: 0 12px 32px rgba(0, 61, 165, 0.15);\n      transform: translateY(-6px);\n    }\n\n    .product-image {\n      width: 100%;\n      height: 220px;\n      object-fit: cover;\n      display: block;\n    }\n\n    .product-info {\n      padding: 1.5rem;\n    }\n\n    .product-info h3 {\n      font-family: var(--font-heading);\n      font-size: 1.1rem;\n      font-weight: 700;\n      color: var(--color-primary);\n      margin-bottom: 0.5rem;\n    }\n\n    .product-info p {\n      font-size: 0.9rem;\n      color: var(--color-text);\n      line-height: 1.6;\n    }\n\n    /* GALLERY SECTION */\n    .gallery-section {\n      padding: 5rem 2rem;\n      background-color: #FFFFFF;\n    }\n\n    .gallery-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n      gap: 2rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .gallery-item {\n      position: relative;\n      overflow: hidden;\n      border-radius: 0.25rem;\n      aspect-ratio: 16 / 9;\n    }\n\n    .gallery-item img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.4s ease;\n    }\n\n    .gallery-item:hover img {\n      transform: scale(1.05);\n    }\n\n    /* SLIDESHOW SECTION */\n    .slideshow-section {\n      padding: 5rem 2rem;\n      background-color: var(--color-background);\n    }\n\n    .slideshow {\n      max-width: 1000px;\n      margin: 0 auto;\n      position: relative;\n      border-radius: 0.5rem;\n      overflow: hidden;\n    }\n\n    .slideshow img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    /* CONTACTS SECTION */\n    .contacts-section {\n      padding: 4rem 2rem;\n      background-color: #FFFFFF;\n      border-top: 1px solid #E0E0E0;\n    }\n\n    .contacts-container {\n      max-width: 900px;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 3rem;\n    }\n\n    .contact-info h3 {\n      font-family: var(--font-heading);\n      font-size: 1.25rem;\n      font-weight: 700;\n      color: var(--color-primary);\n      margin-bottom: 1.5rem;\n      text-transform: uppercase;\n      letter-spacing: 0.02em;\n    }\n\n    .contact-detail {\n      margin-bottom: 1.5rem;\n      font-size: 0.95rem;\n    }\n\n    .contact-label {\n      font-weight: 600;\n      color: var(--color-secondary);\n      margin-bottom: 0.25rem;\n      text-transform: uppercase;\n      font-size: 0.8rem;\n      letter-spacing: 0.05em;\n    }\n\n    .contact-value {\n      color: var(--color-text);\n      word-break: break-word;\n    }\n\n    .contact-value a {\n      color: var(--color-primary);\n      transition: color 0.3s ease;\n    }\n\n    .contact-value a:hover {\n      color: var(--color-accent);\n    }\n\n    .hours-text {\n      font-size: 0.9rem;\n      line-height: 1.8;\n      color: var(--color-text);\n    }\n\n    /* FOOTER */\n    .footer {\n      background-color: var(--color-primary);\n      color: #FFFFFF;\n      padding: 3rem 2rem 1.5rem;\n      text-align: center;\n    }\n\n    .footer-content {\n      max-width: 1000px;\n      margin: 0 auto;\n    }\n\n    .footer-links {\n      display: flex;\n      justify-content: center;\n      flex-wrap: wrap;\n      gap: 1.5rem;\n      margin-bottom: 2rem;\n      font-size: 0.85rem;\n    }\n\n    .footer-links a {\n      color: #FFFFFF;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      font-weight: 500;\n      transition: color 0.3s ease;\n    }\n\n    .footer-links a:hover {\n      color: var(--color-accent);\n    }\n\n    .footer-divider {\n      display: inline-block;\n      width: 1px;\n      height: 1em;\n      background-color: rgba(255, 255, 255, 0.3);\n      margin: 0 1rem;\n    }\n\n    .footer-credit {\n      font-size: 0.8rem;\n      color: rgba(255, 255, 255, 0.7);\n      margin-top: 1.5rem;\n      padding-top: 1.5rem;\n      border-top: 1px solid rgba(255, 255, 255, 0.2);\n    }\n\n    /* RESPONSIVE */\n    @media (max-width: 768px) {\n      .header {\n        flex-direction: column;\n        gap: 1rem;\n      }\n\n      .nav {\n        gap: 1rem;\n        flex-wrap: wrap;\n        justify-content: center;\n      }\n\n      .nav a {\n        font-size: 0.75rem;\n      }\n\n      .contacts-container {\n        grid-template-columns: 1fr;\n      }\n\n      .hero-overlay {\n        padding: 1rem;\n      }\n\n      .section-title {\n        font-size: 1.75rem;\n      }\n\n      .footer-links {\n        gap: 0.75rem;\n      }\n\n      .footer-divider {\n        display: none;\n      }\n    }\n  </style>\n</head>\n<body>\n  <!-- HEADER -->\n  <header class=\"header\">\n    <div class=\"logo\">\n      {data.images.logo && (\n        <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n      )}\n    </div>\n    <nav class=\"nav\" aria-label=\"Navigazione principale\">\n      <a href=\"#servizi\" class=\"active\">{i.nav_services}</a>\n      <a href=\"#prodotti\">{i.nav_products}</a>\n      <a href=\"#parco\">{i.nav_gallery}</a>\n      <a href=\"#contatti\">{i.nav_contacts}</a>\n    </nav>\n    <div class=\"header-right\">\n      <button class=\"cta-button\" onclick=\"document.getElementById('contatti').scrollIntoView({ behavior: 'smooth' });\">\n        {i.cta_contact}\n      </button>\n    </div>\n  </header>\n\n  <!-- HERO SECTION -->\n  <section class=\"hero-section\">\n    {data.images.hero && (\n      <img src={imgUrl(data.images.hero.path)} alt={data.images.hero.alt} class=\"hero-image\" />\n    )}\n    <div class=\"hero-overlay\">\n      <div class=\"hero-content\">\n        <h1>{data.business_name}</h1>\n        <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n        <a href=\"#servizi\" class=\"hero-cta\">{i.cta_discover}</a>\n      </div>\n    </div>\n  </section>\n\n  <!-- SERVICES BANNER -->\n  {data.images.banner && (\n    <section class=\"services-banner\">\n      <img src={imgUrl(data.images.banner.path)} alt={data.images.banner.alt} style=\"width: 100%; height: auto; display: block;\" />\n    </section>\n  )}\n\n  <!-- SERVICES SECTION -->\n  <section id=\"servizi\" class=\"services-section\">\n    <h2 class=\"section-title\">{i.section_title_services}</h2>\n    <div class=\"services-grid\">\n      {data.products_or_services.map((service) => (\n        <div class=\"service-card\">\n          <h3>{service.name}</h3>\n          <p>{service.description}</p>\n        </div>\n      ))}\n    </div>\n  </section>\n\n  <!-- PRODUCTS SECTION -->\n  <section id=\"prodotti\" class=\"products-section\">\n    <h2 class=\"section-title\">{i.section_title_products}</h2>\n    {data.images.product.length > 0 ? (\n      <div class=\"products-grid\">\n        {data.images.product.map((product) => (\n          <div class=\"product-card\">\n            <img src={imgUrl(product.path)} alt={product.alt} class=\"product-image\" />\n            <div class=\"product-info\">\n              <h3>{product.alt}</h3>\n              <p>{copy.product_description}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n    ) : (\n      <p style=\"text-align: center; color: var(--color-text);\">{i.no_products}</p>\n    )}\n  </section>\n\n  <!-- SLIDESHOW SECTION -->\n  {data.images.slideshow.length > 0 && (\n    <section class=\"slideshow-section\">\n      <h2 class=\"section-title\">{i.section_title_slideshow}</h2>\n      <div class=\"slideshow\">\n        {data.images.slideshow.map((slide) => (\n          <img src={imgUrl(slide.path)} alt={slide.alt} />\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- GALLERY SECTION -->\n  {data.images.gallery.length > 0 && (\n    <section id=\"parco\" class=\"gallery-section\">\n      <h2 class=\"section-title\">{i.section_title_gallery}</h2>\n      <div class=\"gallery-grid\">\n        {data.images.gallery.map((image) => (\n          <div class=\"gallery-item\">\n            <img src={imgUrl(image.path)} alt={image.alt} />\n          </div>\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- CONTACTS SECTION -->\n  <section id=\"contatti\" class=\"contacts-section\">\n    <h2 class=\"section-title\">{i.section_title_contacts}</h2>\n    <div class=\"contacts-container\">\n      <div class=\"contact-info\">\n        <h3>{i.contact_label}</h3>\n        \n        <div class=\"contact-detail\">\n          <div class=\"contact-label\">{i.address_label}</div>\n          <div class=\"contact-value\">{data.contacts.address}</div>\n        </div>\n\n        <div class=\"contact-detail\">\n          <div class=\"contact-label\">{i.phone_label}</div>\n          <div class=\"contact-value\">\n            <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n          </div>\n        </div>\n\n        {data.contacts.email && (\n          <div class=\"contact-detail\">\n            <div class=\"contact-label\">{i.email_label}</div>\n            <div class=\"contact-value\">\n              <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a>\n            </div>\n          </div>\n        )}\n\n        {data.contacts.whatsapp && (\n          <div class=\"contact-detail\">\n            <div class=\"contact-label\">{i.whatsapp_label}</div>\n            <div class=\"contact-value\">\n              <a href={`https://wa.me/${data.contacts.whatsapp.replace(/\\D/g, '')}`} target=\"_blank\" rel=\"noopener\">\n                {data.contacts.whatsapp}\n              </a>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <div class=\"contact-info\">\n        <h3>{i.hours_label}</h3>\n        <div class=\"hours-text\">\n          {data.contacts.hours}\n        </div>\n        <div style=\"margin-top: 2rem;\">\n          <p style=\"font-size: 0.9rem; color: var(--color-text); margin-bottom: 1rem;\">\n            {copy.contact_cta}\n          </p>\n          <a href={`tel:${data.contacts.phone}`} class=\"cta-button\">\n            {i.call_now}\n          </a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- FOOTER -->\n  <footer class=\"footer\">\n    <div class=\"footer-content\">\n      {data.images.logo && (\n        <div style=\"margin-bottom: 1.5rem;\">\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} style=\"height: 35px; filter: brightness(0) invert(1);\" />\n        </div>\n      )}\n      <nav class=\"footer-links\">\n        <a href=\"#servizi\">{i.nav_services}</a>\n        <span class=\"footer-divider\"></span>\n        <a href=\"#prodotti\">{i.nav_products}</a>\n        <span class=\"footer-divider\"></span>\n        <a href=\"#parco\">{i.nav_gallery}</a>\n        <span class=\"footer-divider\"></span>\n        <a href=\"#contatti\">{i.nav_contacts}</a>\n      </nav>\n      <div class=\"footer-credit\">\n        {copy.footer_tagline}\n      </div>\n    </div>\n  </footer>\n</body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 150,
      "description": "Sottotitolo atmosferico per la hero section che cattura l'essenza del business. Esempio: 'Il tuo partner affidabile per ogni esigenza di mobilità.'",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "product_description",
      "type": "text",
      "max_chars": 100,
      "description": "Descrizione breve e accattivante dei veicoli in vendita, utilizzata nelle card prodotto.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contact_cta",
      "type": "text",
      "max_chars": 120,
      "description": "Invito all'azione nella sezione contatti per incoraggiare il contatto diretto.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tagline",
      "type": "text",
      "max_chars": 80,
      "description": "Messaggio di chiusura nel footer, breve e incisivo. Esempio: 'La qualità e l'affidabilità al centro di ogni transazione.'",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "tagline",
    "category",
    "description",
    "contacts.address",
    "contacts.phone",
    "contacts.email",
    "contacts.whatsapp",
    "contacts.hours",
    "products_or_services[]",
    "products_or_services[].name",
    "products_or_services[].description",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.product[]",
    "images.slideshow[]",
    "images.gallery[]"
  ],
  "ui_translations": {
    "nav_services": "Servizi",
    "nav_products": "Veicoli",
    "nav_gallery": "Parco Auto",
    "nav_contacts": "Contatti",
    "section_title_services": "I Nostri Servizi",
    "section_title_products": "Veicoli in Vendita",
    "section_title_slideshow": "Catalogo",
    "section_title_gallery": "Il Nostro Parco",
    "section_title_contacts": "Contattaci",
    "cta_discover": "Scopri di Più",
    "cta_contact": "Contattaci",
    "call_now": "Chiama Ora",
    "contact_label": "Informazioni Contatto",
    "hours_label": "Orari di Apertura",
    "address_label": "Indirizzo",
    "phone_label": "Telefono",
    "email_label": "Email",
    "whatsapp_label": "WhatsApp",
    "no_products": "Nessun veicolo disponibile al momento.",
    "footer_credits": "© 2024 Autopool. Tutti i diritti riservati."
  }
}