{
  "reasoning": "Autopool is a structured, professional used-car dealership with a modern, cool color palette (primary dark blue #003DA5, secondary light blue, accent orange). The dossier requests a 'sportivo' feel that conveys a well-organized, serious business. I've adapted the warm-artisanal reference style into a clean, contemporary automotive aesthetic: modern sans-serif typography, generous whitespace, professional imagery of vehicles and showroom, and a direct, confident tone. The cool primary blue (instead of warm terracotta) and accent orange create energy while maintaining corporate credibility. Layout emphasizes trust: hero with vehicles, services grid, product showcase, and clear contact/financing CTAs.",
  "selected_reference_style": "02-warm-artisanal-heritage-adapted-to-automotive",
  "astro_file": "---\nimport { Image } from 'astro:assets';\n\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    || '#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---\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}</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link href=\"https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Inter:wght@400;500;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=Manrope:wght@400;600;700&family=Inter:wght@400;500;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      h1, h2, h3, h4, h5, h6 {\n        font-family: var(--font-heading);\n        font-weight: 700;\n        letter-spacing: 0.02em;\n      }\n\n      h1 {\n        font-size: clamp(2rem, 5vw, 4rem);\n        line-height: 1.2;\n      }\n\n      h2 {\n        font-size: clamp(1.5rem, 4vw, 2.5rem);\n        line-height: 1.3;\n      }\n\n      h3 {\n        font-size: 1.25rem;\n        line-height: 1.4;\n      }\n\n      p {\n        font-size: 0.95rem;\n        line-height: 1.7;\n      }\n\n      a {\n        color: var(--color-primary);\n        text-decoration: none;\n        transition: color 0.3s ease;\n      }\n\n      a:hover {\n        color: var(--color-accent);\n      }\n\n      button, .btn, .cta {\n        display: inline-block;\n        padding: 0.9rem 1.8rem;\n        background-color: var(--color-primary);\n        color: white;\n        font-weight: 600;\n        font-size: 0.95rem;\n        border: none;\n        border-radius: 0.25rem;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n\n      button:hover, .btn:hover, .cta:hover {\n        background-color: var(--color-accent);\n        transform: translateY(-2px);\n      }\n\n      /* HEADER */\n      header {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        background-color: white;\n        border-bottom: 1px solid #e0e0e0;\n        z-index: 100;\n        padding: 1rem 2rem;\n      }\n\n      .header-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 2rem;\n      }\n\n      .logo-wrapper {\n        flex-shrink: 0;\n      }\n\n      .logo-wrapper img {\n        height: 45px;\n        width: auto;\n      }\n\n      nav {\n        display: flex;\n        align-items: center;\n        gap: 2rem;\n        flex: 1;\n      }\n\n      nav a {\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: var(--color-text);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n\n      nav a:hover {\n        color: var(--color-primary);\n      }\n\n      .nav-spacer {\n        flex: 1;\n      }\n\n      .header-cta {\n        padding: 0.7rem 1.5rem;\n        font-size: 0.85rem;\n        white-space: nowrap;\n      }\n\n      /* HERO */\n      .hero-section {\n        margin-top: 70px;\n        min-height: 70vh;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n      }\n\n      .hero-with-image {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .hero-with-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .hero-overlay {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, rgba(0, 61, 165, 0.75) 0%, rgba(107, 159, 212, 0.6) 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        color: white;\n        padding: 2rem;\n      }\n\n      .hero-overlay h1 {\n        margin-bottom: 1rem;\n        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      }\n\n      .hero-overlay .hero-tagline {\n        font-size: 1.3rem;\n        max-width: 600px;\n        margin-bottom: 2rem;\n        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n      }\n\n      .hero-overlay .hero-cta {\n        background-color: var(--color-accent);\n        color: white;\n      }\n\n      .hero-text-only {\n        width: 100%;\n        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n        color: white;\n        padding: 6rem 2rem;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        min-height: 70vh;\n      }\n\n      .hero-text-only h1 {\n        margin-bottom: 1rem;\n      }\n\n      .hero-text-only .hero-tagline {\n        font-size: 1.3rem;\n        max-width: 600px;\n        margin-bottom: 2rem;\n      }\n\n      .hero-text-only .hero-cta {\n        background-color: var(--color-accent);\n      }\n\n      /* SECTIONS */\n      section {\n        padding: 80px 2rem;\n        max-width: 1200px;\n        margin: 0 auto;\n      }\n\n      .section-title {\n        text-align: center;\n        margin-bottom: 3rem;\n        position: relative;\n      }\n\n      .section-title h2 {\n        margin-bottom: 0.5rem;\n      }\n\n      .section-title .eyebrow {\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--color-accent);\n        font-weight: 600;\n        margin-bottom: 0.5rem;\n      }\n\n      .section-subtitle {\n        font-size: 1rem;\n        color: #666;\n        margin-top: 0.5rem;\n      }\n\n      /* ABOUT SECTION */\n      .about-section {\n        background-color: white;\n      }\n\n      .about-container {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 4rem;\n        align-items: center;\n      }\n\n      .about-text h3 {\n        margin-bottom: 1rem;\n        color: var(--color-primary);\n      }\n\n      .about-text p {\n        margin-bottom: 1.5rem;\n        color: #555;\n      }\n\n      .about-image img {\n        width: 100%;\n        height: auto;\n        border-radius: 0.5rem;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n      }\n\n      @media (max-width: 768px) {\n        .about-container {\n          grid-template-columns: 1fr;\n          gap: 2rem;\n        }\n      }\n\n      /* SERVICES SECTION */\n      .services-section {\n        background-color: var(--color-background);\n      }\n\n      .services-banner {\n        width: 100%;\n        margin: -80px -2rem 3rem -2rem;\n        padding: 3rem 2rem;\n      }\n\n      .services-banner img {\n        width: 100%;\n        height: auto;\n        max-height: 300px;\n        object-fit: cover;\n        border-radius: 0.5rem;\n      }\n\n      .services-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n        gap: 2rem;\n        margin-top: 2rem;\n      }\n\n      .service-card {\n        background-color: white;\n        padding: 2rem;\n        border-radius: 0.5rem;\n        border-left: 4px solid var(--color-accent);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        transition: all 0.3s ease;\n      }\n\n      .service-card:hover {\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n        transform: translateY(-4px);\n      }\n\n      .service-card h3 {\n        color: var(--color-primary);\n        margin-bottom: 1rem;\n        font-size: 1.15rem;\n      }\n\n      .service-card p {\n        color: #666;\n        font-size: 0.9rem;\n      }\n\n      /* PRODUCTS SECTION */\n      .products-section {\n        background-color: white;\n      }\n\n      .products-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        gap: 2rem;\n      }\n\n      .product-card {\n        background-color: var(--color-background);\n        border-radius: 0.5rem;\n        overflow: hidden;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        transition: all 0.3s ease;\n      }\n\n      .product-card:hover {\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n        transform: translateY(-4px);\n      }\n\n      .product-image {\n        width: 100%;\n        height: 220px;\n        overflow: hidden;\n        background-color: #e0e0e0;\n      }\n\n      .product-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .product-info {\n        padding: 1.5rem;\n      }\n\n      .product-info h3 {\n        color: var(--color-primary);\n        margin-bottom: 0.5rem;\n        font-size: 1.1rem;\n      }\n\n      .product-info p {\n        color: #666;\n        font-size: 0.85rem;\n      }\n\n      /* SLIDESHOW/GALLERY SECTION */\n      .slideshow-section {\n        background-color: var(--color-background);\n      }\n\n      .slideshow-container {\n        position: relative;\n        width: 100%;\n        max-width: 900px;\n        margin: 0 auto;\n        border-radius: 0.5rem;\n        overflow: hidden;\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n      }\n\n      .slide {\n        display: none;\n      }\n\n      .slide.active {\n        display: block;\n      }\n\n      .slide img {\n        width: 100%;\n        height: auto;\n        display: block;\n      }\n\n      .slide-nav {\n        position: absolute;\n        bottom: 2rem;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        gap: 0.5rem;\n        z-index: 10;\n      }\n\n      .slide-dot {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background-color: rgba(255, 255, 255, 0.5);\n        cursor: pointer;\n        transition: all 0.3s ease;\n      }\n\n      .slide-dot.active {\n        background-color: white;\n        width: 28px;\n        border-radius: 6px;\n      }\n\n      /* GALLERY SECTION */\n      .gallery-section {\n        background-color: white;\n      }\n\n      .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n        gap: 2rem;\n      }\n\n      .gallery-item {\n        border-radius: 0.5rem;\n        overflow: hidden;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        aspect-ratio: 4 / 3;\n      }\n\n      .gallery-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.3s ease;\n      }\n\n      .gallery-item:hover img {\n        transform: scale(1.05);\n      }\n\n      /* CTA SECTION */\n      .cta-section {\n        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n        color: white;\n        text-align: center;\n        padding: 4rem 2rem;\n      }\n\n      .cta-section h2 {\n        margin-bottom: 1.5rem;\n        color: white;\n      }\n\n      .cta-section p {\n        font-size: 1.1rem;\n        margin-bottom: 2rem;\n        max-width: 600px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .cta-section .cta-button {\n        background-color: var(--color-accent);\n        color: white;\n      }\n\n      /* CONTACT SECTION */\n      .contact-section {\n        background-color: var(--color-background);\n      }\n\n      .contact-container {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 4rem;\n      }\n\n      .contact-info h3 {\n        color: var(--color-primary);\n        margin-bottom: 1.5rem;\n        font-size: 1.2rem;\n      }\n\n      .contact-item {\n        margin-bottom: 1.5rem;\n      }\n\n      .contact-item .label {\n        font-weight: 600;\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--color-accent);\n        margin-bottom: 0.3rem;\n      }\n\n      .contact-item p {\n        color: #555;\n        margin: 0;\n      }\n\n      .contact-item a {\n        color: var(--color-primary);\n        font-weight: 600;\n      }\n\n      .hours-box {\n        background-color: white;\n        padding: 1.5rem;\n        border-radius: 0.5rem;\n        border-left: 4px solid var(--color-primary);\n      }\n\n      .hours-box h4 {\n        color: var(--color-primary);\n        margin-bottom: 1rem;\n      }\n\n      .hours-box p {\n        font-size: 0.85rem;\n        color: #666;\n        margin: 0.3rem 0;\n      }\n\n      .contact-form {\n        background-color: white;\n        padding: 2rem;\n        border-radius: 0.5rem;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n      }\n\n      .contact-form h3 {\n        color: var(--color-primary);\n        margin-bottom: 1.5rem;\n      }\n\n      .form-group {\n        margin-bottom: 1.5rem;\n      }\n\n      .form-group label {\n        display: block;\n        font-weight: 600;\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--color-text);\n        margin-bottom: 0.5rem;\n      }\n\n      .form-group input,\n      .form-group textarea {\n        width: 100%;\n        padding: 0.8rem;\n        border: 1px solid #ddd;\n        border-radius: 0.25rem;\n        font-family: var(--font-body);\n        font-size: 0.95rem;\n        transition: border-color 0.3s ease;\n      }\n\n      .form-group input:focus,\n      .form-group textarea:focus {\n        outline: none;\n        border-color: var(--color-primary);\n        box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.1);\n      }\n\n      .form-group textarea {\n        resize: vertical;\n        min-height: 120px;\n      }\n\n      /* FOOTER */\n      footer {\n        background-color: var(--color-primary);\n        color: white;\n        padding: 3rem 2rem 1rem;\n      }\n\n      .footer-container {\n        max-width: 1200px;\n        margin: 0 auto;\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 2rem;\n        margin-bottom: 2rem;\n      }\n\n      .footer-section h4 {\n        margin-bottom: 1rem;\n        font-size: 1rem;\n      }\n\n      .footer-section p,\n      .footer-section a {\n        font-size: 0.85rem;\n        line-height: 1.8;\n        color: rgba(255, 255, 255, 0.9);\n      }\n\n      .footer-section a:hover {\n        color: var(--color-accent);\n      }\n\n      .footer-bottom {\n        border-top: 1px solid rgba(255, 255, 255, 0.2);\n        padding-top: 1.5rem;\n        text-align: center;\n        font-size: 0.8rem;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      /* RESPONSIVE */\n      @media (max-width: 768px) {\n        header {\n          padding: 0.8rem 1rem;\n        }\n\n        .header-container {\n          flex-direction: column;\n          gap: 1rem;\n        }\n\n        nav {\n          flex-direction: column;\n          gap: 1rem;\n          width: 100%;\n        }\n\n        .nav-spacer {\n          display: none;\n        }\n\n        .hero-section {\n          margin-top: 140px;\n        }\n\n        section {\n          padding: 50px 1.5rem;\n        }\n\n        .contact-container {\n          grid-template-columns: 1fr;\n          gap: 2rem;\n        }\n      }\n    </style>\n  </head>\n  <body>\n    <!-- HEADER -->\n    <header>\n      <div class=\"header-container\">\n        {data.images.logo && (\n          <div class=\"logo-wrapper\">\n            <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n          </div>\n        )}\n        <nav>\n          <a href=\"#servizi\">{i.nav_services}</a>\n          <a href=\"#veicoli\">{i.nav_vehicles}</a>\n          <a href=\"#gallery\">{i.nav_gallery}</a>\n          <a href=\"#contatti\">{i.nav_contacts}</a>\n        </nav>\n        <div class=\"nav-spacer\"></div>\n        <a href=\"#contatti\" class=\"btn header-cta\">{i.cta_contact}</a>\n      </div>\n    </header>\n\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            <h1>{data.business_name}</h1>\n            <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n            <a href=\"#contatti\" class=\"hero-cta\">{i.cta_discover}</a>\n          </div>\n        </div>\n      ) : (\n        <div class=\"hero-text-only\">\n          <h1>{data.business_name}</h1>\n          <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n          <a href=\"#contatti\" class=\"hero-cta\">{i.cta_discover}</a>\n        </div>\n      )}\n    </section>\n\n    <!-- ABOUT/STORY SECTION -->\n    <section class=\"about-section\" id=\"about\">\n      <div class=\"section-title\">\n        <div class=\"eyebrow\">{i.section_eyebrow_story}</div>\n        <h2>{i.section_title_story}</h2>\n      </div>\n      <div class=\"about-container\">\n        <div class=\"about-text\">\n          <h3>{copy.story_title}</h3>\n          <p>{copy.story_paragraph}</p>\n          <p>{copy.story_values}</p>\n        </div>\n        {data.images.gallery.length > 0 && (\n          <div class=\"about-image\">\n            <img src={imgUrl(data.images.gallery[0].path)} alt={data.images.gallery[0].alt} />\n          </div>\n        )}\n      </div>\n    </section>\n\n    <!-- SERVICES SECTION -->\n    <section class=\"services-section\" id=\"servizi\">\n      <div class=\"section-title\">\n        <div class=\"eyebrow\">{i.section_eyebrow_services}</div>\n        <h2>{i.section_title_services}</h2>\n        <p class=\"section-subtitle\">{copy.services_intro}</p>\n      </div>\n      \n      {data.images.banner && (\n        <div class=\"services-banner\">\n          <img src={imgUrl(data.images.banner.path)} alt={data.images.banner.alt} />\n        </div>\n      )}\n\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/VEHICLES SECTION -->\n    {data.images.product.length > 0 && (\n      <section class=\"products-section\" id=\"veicoli\">\n        <div class=\"section-title\">\n          <div class=\"eyebrow\">{i.section_eyebrow_products}</div>\n          <h2>{i.section_title_products}</h2>\n          <p class=\"section-subtitle\">{copy.products_intro}</p>\n        </div>\n        <div class=\"products-grid\">\n          {data.images.product.map((product, idx) => {\n            const serviceInfo = data.products_or_services[0];\n            return (\n              <div class=\"product-card\">\n                <div class=\"product-image\">\n                  <img src={imgUrl(product.path)} alt={product.alt} />\n                </div>\n                <div class=\"product-info\">\n                  <h3>{product.alt || `Veicolo ${idx + 1}`}</h3>\n                  <p>{serviceInfo?.description || copy.product_description}</p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n    )}\n\n    <!-- SLIDESHOW SECTION -->\n    {data.images.slideshow.length > 0 && (\n      <section class=\"slideshow-section\">\n        <div class=\"section-title\">\n          <div class=\"eyebrow\">{i.section_eyebrow_slideshow}</div>\n          <h2>{i.section_title_slideshow}</h2>\n        </div>\n        <div class=\"slideshow-container\">\n          {data.images.slideshow.map((slide, idx) => (\n            <div class=\"slide\" data-slide={idx}>\n              <img src={imgUrl(slide.path)} alt={slide.alt} />\n            </div>\n          ))}\n          <div class=\"slide-nav\">\n            {data.images.slideshow.map((_, idx) => (\n              <div class=\"slide-dot\" data-dot={idx}></div>\n            ))}\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- GALLERY SECTION -->\n    {data.images.gallery.length > 0 && (\n      <section class=\"gallery-section\" id=\"gallery\">\n        <div class=\"section-title\">\n          <div class=\"eyebrow\">{i.section_eyebrow_gallery}</div>\n          <h2>{i.section_title_gallery}</h2>\n        </div>\n        <div class=\"gallery-grid\">\n          {data.images.gallery.map((item) => (\n            <div class=\"gallery-item\">\n              <img src={imgUrl(item.path)} alt={item.alt} />\n            </div>\n          ))}\n        </div>\n      </section>\n    )}\n\n    <!-- CTA SECTION -->\n    <section class=\"cta-section\">\n      <h2>{copy.cta_section_title}</h2>\n      <p>{copy.cta_section_text}</p>\n      <a href=\"#contatti\" class=\"cta-button\">{i.cta_contact_now}</a>\n    </section>\n\n    <!-- CONTACT SECTION -->\n    <section class=\"contact-section\" id=\"contatti\">\n      <div class=\"section-title\">\n        <div class=\"eyebrow\">{i.section_eyebrow_contact}</div>\n        <h2>{i.section_title_contacts}</h2>\n      </div>\n      <div class=\"contact-container\">\n        <div class=\"contact-info\">\n          <h3>{i.contact_info_title}</h3>\n          \n          <div class=\"contact-item\">\n            <div class=\"label\">{i.contact_address}</div>\n            <p>{data.contacts.address}</p>\n          </div>\n\n          <div class=\"contact-item\">\n            <div class=\"label\">{i.contact_phone}</div>\n            <p><a href=\"tel:{data.contacts.phone}\">{data.contacts.phone}</a></p>\n          </div>\n\n          {data.contacts.whatsapp && (\n            <div class=\"contact-item\">\n              <div class=\"label\">WhatsApp</div>\n              <p><a href=\"https://wa.me/{data.contacts.whatsapp.replace(/[^0-9]/g, '')}\" target=\"_blank\">{data.contacts.whatsapp}</a></p>\n            </div>\n          )}\n\n          <div class=\"contact-item\">\n            <div class=\"label\">{i.contact_email}</div>\n            <p><a href=\"mailto:{data.contacts.email}\">{data.contacts.email}</a></p>\n          </div>\n\n          <div class=\"hours-box\">\n            <h4>{i.contact_hours}</h4>\n            <p>{data.contacts.hours}</p>\n          </div>\n        </div>\n\n        <div class=\"contact-form\">\n          <h3>{i.contact_form_title}</h3>\n          <form>\n            <div class=\"form-group\">\n              <label for=\"name\">{i.form_name}</label>\n              <input type=\"text\" id=\"name\" name=\"name\" required />\n            </div>\n            <div class=\"form-group\">\n              <label for=\"email\">{i.form_email}</label>\n              <input type=\"email\" id=\"email\" name=\"email\" required />\n            </div>\n            <div class=\"form-group\">\n              <label for=\"phone\">{i.form_phone}</label>\n              <input type=\"tel\" id=\"phone\" name=\"phone\" />\n            </div>\n            <div class=\"form-group\">\n              <label for=\"message\">{i.form_message}</label>\n              <textarea id=\"message\" name=\"message\" required></textarea>\n            </div>\n            <button type=\"submit\" class=\"btn\">{i.form_send}</button>\n          </form>\n        </div>\n      </div>\n    </section>\n\n    <!-- FOOTER -->\n    <footer>\n      <div class=\"footer-container\">\n        <div class=\"footer-section\">\n          <h4>{i.footer_about}</h4>\n          <p>{data.description}</p>\n        </div>\n        <div class=\"footer-section\">\n          <h4>{i.footer_services}</h4>\n          <p>\n            {data.products_or_services.map((s, i) => (\n              <>{s.name}{i < data.products_or_services.length - 1 ? ' • ' : ''}</>\n            ))}\n          </p>\n        </div>\n        <div class=\"footer-section\">\n          <h4>{i.footer_contact}</h4>\n          <p>{data.contacts.address}</p>\n          <p><a href=\"tel:{data.contacts.phone}\">{data.contacts.phone}</a></p>\n          <p><a href=\"mailto:{data.contacts.email}\">{data.contacts.email}</a></p>\n        </div>\n      </div>\n      <div class=\"footer-bottom\">\n        <p>{i.footer_credits} • {i.footer_legal}</p>\n      </div>\n    </footer>\n\n    <script>\n      // Slideshow functionality\n      const slides = document.querySelectorAll('.slide');\n      const dots = document.querySelectorAll('.slide-dot');\n      let currentSlide = 0;\n\n      function showSlide(n) {\n        slides.forEach(slide => slide.classList.remove('active'));\n        dots.forEach(dot => dot.classList.remove('active'));\n        if (slides[n]) {\n          slides[n].classList.add('active');\n          dots[n].classList.add('active');\n        }\n      }\n\n      dots.forEach((dot, idx) => {\n        dot.addEventListener('click', () => {\n          currentSlide = idx;\n          showSlide(currentSlide);\n        });\n      });\n\n      if (slides.length > 0) {\n        showSlide(0);\n        // Auto-advance slideshow every 5 seconds\n        setInterval(() => {\n          currentSlide = (currentSlide + 1) % slides.length;\n          showSlide(currentSlide);\n        }, 5000);\n      }\n\n      // Smooth scroll for anchor links\n      document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n        anchor.addEventListener('click', function (e) {\n          e.preventDefault();\n          const target = document.querySelector(this.getAttribute('href'));\n          if (target) {\n            target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n          }\n        });\n      });\n    </script>\n  </body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 150,
      "description": "Main tagline for hero section. Atmospheric pitch: emphasize quality, trust, and vehicle selection without listing specifics.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_title",
      "type": "text",
      "max_chars": 80,
      "description": "Subheading for the story section. Example: 'Affidabilità e qualità'.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 400,
      "description": "Narrative about the dealership: heritage, professionalism, commitment to customers. May reference dossier facts like vehicles, service, or location atmosphere.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_values",
      "type": "richtext",
      "max_chars": 300,
      "description": "Core values or mission statement: trust, transparency, rapid service, fair pricing. Atmospheric, not list-like.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Brief introduction to services section. Highlight scope: buying, selling, financing, guarantees.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "products_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduction to vehicle showcase. Emphasize selection, condition, immediate availability.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "product_description",
      "type": "text",
      "max_chars": 120,
      "description": "Generic vehicle descriptor used as fallback in product cards (e.g., 'Fully inspected and guaranteed').",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "cta_section_title",
      "type": "text",
      "max_chars": 80,
      "description": "Title for the main CTA section. Example: 'Pronto a trovare la tua auto?'.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "cta_section_text",
      "type": "text",
      "max_chars": 200,
      "description": "Supporting text for CTA section. Encourage action: easy contact, quick response, financing available.",
      "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[]",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.product[]",
    "images.slideshow[]",
    "images.gallery[]"
  ],
  "ui_translations": {
    "nav_services": "Servizi",
    "nav_vehicles": "Veicoli",
    "nav_gallery": "Gallery",
    "nav_contacts": "Contatti",
    "section_eyebrow_story": "CHI SIAMO",
    "section_title_story": "Professionalità e affidabilità al primo posto",
    "section_eyebrow_services": "I NOSTRI SERVIZI",
    "section_title_services": "Soluzioni complete per l'auto",
    "section_eyebrow_products": "PARCO AUTO",
    "section_title_products": "Ampia scelta di veicoli",
    "section_eyebrow_slideshow": "SCOPRI",
    "section_title_slideshow": "I nostri modelli in dettaglio",
    "section_eyebrow_gallery": "STRUTTURE",
    "section_title_gallery": "La nostra sede e il nostro parco",
    "section_eyebrow_contact": "CONTATTACI",
    "section_title_contacts": "Siamo qui per te",
    "cta_discover": "Scopri i veicoli",
    "cta_contact": "Contattaci",
    "cta_contact_now": "Contattaci ora",
    "contact_info_title": "Informazioni di contatto",
    "contact_address": "Indirizzo",
    "contact_phone": "Telefono",
    "contact_email": "Email",
    "contact_hours": "Orari di apertura",
    "contact_form_title": "Invia un messaggio",
    "form_name": "Nome",
    "form_email": "Email",
    "form_phone": "Telefono",
    "form_message": "Messaggio",
    "form_send": "Invia",
    "footer_about": "Chi siamo",
    "footer_services": "Servizi",
    "footer_contact": "Contatti",
    "footer_credits": "Realizzato con cura da Autopool",
    "footer_legal": "© 2024 Autopool. Tutti i diritti riservati."
  }
}