{
  "reasoning": "Selected '07-days' (Days Motor Group) reference because Autopool is a multi-service automotive dealer with active stock, promotional services (buy/sell/financing), and needs strong navigation between inventory categories. The navy/red/accent system matches the brand's existing #1E2A78 navy + #E87722 orange palette perfectly, and the card-based product grid with structured price hierarchy fits the used car listings.",
  "selected_reference_style": "07-days",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\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     || \"#E63946\",\n  background: data.visual_identity?.color_palette?.background || \"#FFFFFF\",\n  text:       data.visual_identity?.color_palette?.text       || \"#333740\",\n};\n\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\n---\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    <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;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        --color-light-grey: #F4F5F7;\n        --color-mid-grey:   #6B7280;\n        --font-heading:     'Inter', sans-serif;\n        --font-body:        'Inter', sans-serif;\n      }\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.5;\n        font-weight: 400;\n      }\n      img { max-width: 100%; display: block; }\n      a { color: inherit; text-decoration: none; }\n\n      .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }\n\n      /* HEADER */\n      .topbar {\n        background: var(--color-primary);\n        color: #fff;\n        font-size: 13px;\n        padding: 8px 0;\n      }\n      .topbar-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }\n      .topbar a { opacity: .9; }\n      .topbar a:hover { opacity: 1; }\n\n      .header {\n        background: #fff;\n        border-bottom: 1px solid #eee;\n        position: sticky; top: 0; z-index: 100;\n      }\n      .header-inner {\n        display: flex; align-items: center; justify-content: space-between;\n        padding: 16px 0;\n      }\n      .logo-img { height: 48px; width: auto; }\n      .logo-text {\n        font-family: var(--font-heading);\n        font-weight: 700;\n        font-size: 24px;\n        color: var(--color-primary);\n        letter-spacing: -0.02em;\n      }\n      .nav { display: flex; gap: 28px; align-items: center; }\n      .nav a {\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--color-text);\n        transition: color .15s;\n      }\n      .nav a:hover { color: var(--color-secondary); }\n      .nav .nav-cta {\n        background: var(--color-accent);\n        color: #fff;\n        padding: 10px 18px;\n        border-radius: 4px;\n        font-weight: 600;\n      }\n      @media (max-width: 800px) {\n        .nav { display: none; }\n      }\n\n      /* HERO */\n      .hero-section { position: relative; }\n      .hero-with-image {\n        position: relative;\n        min-height: 70vh;\n        display: flex; align-items: center;\n      }\n      .hero-with-image img {\n        position: absolute; inset: 0;\n        width: 100%; height: 100%;\n        object-fit: cover;\n        z-index: 0;\n      }\n      .hero-overlay {\n        position: relative; z-index: 2;\n        background: linear-gradient(to right, rgba(10,30,71,0.85) 0%, rgba(10,30,71,0.5) 60%, rgba(10,30,71,0.1) 100%);\n        position: absolute; inset: 0;\n      }\n      .hero-content {\n        position: relative; z-index: 3;\n        color: #fff;\n        padding: 80px 0;\n        max-width: 640px;\n      }\n      .hero-eyebrow {\n        font-size: 13px;\n        text-transform: uppercase;\n        letter-spacing: 0.15em;\n        color: var(--color-accent);\n        font-weight: 600;\n        margin-bottom: 16px;\n      }\n      .hero h1 {\n        font-family: var(--font-heading);\n        font-size: clamp(2rem, 5vw, 3.5rem);\n        font-weight: 700;\n        line-height: 1.1;\n        margin-bottom: 20px;\n        letter-spacing: -0.02em;\n      }\n      .hero p { font-size: 18px; margin-bottom: 32px; opacity: .95; }\n      .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }\n      .btn {\n        display: inline-block;\n        padding: 14px 24px;\n        font-size: 14px;\n        font-weight: 600;\n        border-radius: 4px;\n        transition: transform .15s, box-shadow .15s;\n        cursor: pointer;\n        border: none;\n      }\n      .btn-primary { background: var(--color-accent); color: #fff; }\n      .btn-secondary { background: #fff; color: var(--color-primary); }\n      .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }\n\n      .hero-text-only {\n        background: var(--color-primary);\n        color: #fff;\n        padding: 100px 0;\n      }\n\n      /* QUICK ACTIONS STRIP */\n      .quick-actions {\n        background: var(--color-light-grey);\n        padding: 48px 0;\n      }\n      .quick-actions-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n        gap: 24px;\n      }\n      .qa-card {\n        background: #fff;\n        padding: 28px;\n        border-radius: 4px;\n        border-top: 3px solid var(--color-accent);\n      }\n      .qa-card h3 {\n        font-family: var(--font-heading);\n        font-size: 18px;\n        font-weight: 700;\n        color: var(--color-primary);\n        margin-bottom: 8px;\n      }\n      .qa-card p { font-size: 14px; color: var(--color-mid-grey); margin-bottom: 16px; }\n      .qa-link {\n        font-size: 13px;\n        font-weight: 600;\n        color: var(--color-secondary);\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      .qa-link:hover { color: var(--color-accent); }\n\n      /* SECTIONS */\n      section { padding: 80px 0; }\n      .section-header { margin-bottom: 48px; text-align: center; }\n      .section-eyebrow {\n        font-size: 12px;\n        text-transform: uppercase;\n        letter-spacing: 0.2em;\n        color: var(--color-accent);\n        font-weight: 600;\n        margin-bottom: 12px;\n      }\n      .section-header h2 {\n        font-family: var(--font-heading);\n        font-size: clamp(1.75rem, 3.5vw, 2.5rem);\n        font-weight: 700;\n        color: var(--color-primary);\n        letter-spacing: -0.02em;\n      }\n      .section-header p {\n        max-width: 640px;\n        margin: 16px auto 0;\n        color: var(--color-mid-grey);\n      }\n\n      /* STORY */\n      .story { background: #fff; }\n      .story-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 64px;\n        align-items: center;\n      }\n      @media (max-width: 800px) {\n        .story-grid { grid-template-columns: 1fr; gap: 32px; }\n      }\n      .story-text h2 {\n        font-family: var(--font-heading);\n        font-size: clamp(1.75rem, 3.5vw, 2.5rem);\n        font-weight: 700;\n        color: var(--color-primary);\n        margin-bottom: 20px;\n        letter-spacing: -0.02em;\n      }\n      .story-text p { margin-bottom: 16px; color: var(--color-text); font-size: 16px; }\n      .story-image img {\n        width: 100%;\n        height: 420px;\n        object-fit: cover;\n        border-radius: 4px;\n      }\n      .story-text-only {\n        background: var(--color-light-grey);\n        padding: 48px;\n        border-radius: 4px;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--color-primary);\n        text-align: center;\n        font-family: var(--font-heading);\n        font-weight: 600;\n      }\n\n      /* SERVICES / PRODUCTS */\n      .services { background: var(--color-light-grey); }\n      .services-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n        gap: 24px;\n      }\n      .service-card {\n        background: #fff;\n        padding: 32px 28px;\n        border-radius: 4px;\n        box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n        transition: transform .2s, box-shadow .2s;\n      }\n      .service-card:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n      }\n      .service-card .badge {\n        display: inline-block;\n        background: var(--color-primary);\n        color: #fff;\n        font-size: 11px;\n        font-weight: 700;\n        padding: 4px 10px;\n        border-radius: 3px;\n        margin-bottom: 16px;\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n      }\n      .service-card h3 {\n        font-family: var(--font-heading);\n        font-size: 19px;\n        font-weight: 700;\n        color: var(--color-primary);\n        margin-bottom: 12px;\n      }\n      .service-card p { font-size: 14px; color: var(--color-mid-grey); line-height: 1.6; }\n\n      /* STOCK / PRODUCT IMAGES */\n      .stock { background: #fff; }\n      .stock-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n        gap: 24px;\n      }\n      .stock-card {\n        background: #fff;\n        border: 1px solid #e5e7eb;\n        border-radius: 4px;\n        overflow: hidden;\n        transition: box-shadow .2s;\n      }\n      .stock-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }\n      .stock-card-img {\n        aspect-ratio: 4/3;\n        background: var(--color-light-grey);\n        overflow: hidden;\n      }\n      .stock-card-img img { width: 100%; height: 100%; object-fit: cover; }\n      .stock-card-body { padding: 20px; }\n      .stock-card-body h4 {\n        font-family: var(--font-heading);\n        font-size: 16px;\n        font-weight: 600;\n        color: var(--color-primary);\n        margin-bottom: 8px;\n      }\n      .stock-card-meta {\n        display: flex; gap: 8px; flex-wrap: wrap;\n        margin-bottom: 16px;\n      }\n      .chip {\n        font-size: 11px;\n        background: var(--color-light-grey);\n        color: var(--color-text);\n        padding: 4px 10px;\n        border-radius: 12px;\n        font-weight: 500;\n      }\n      .stock-card-cta {\n        display: block;\n        width: 100%;\n        text-align: center;\n        background: var(--color-primary);\n        color: #fff;\n        padding: 10px;\n        font-size: 13px;\n        font-weight: 600;\n        border-radius: 3px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      .stock-card-cta:hover { background: var(--color-accent); }\n\n      /* BANNER CTA */\n      .banner-cta {\n        position: relative;\n        min-height: 360px;\n        display: flex; align-items: center;\n        overflow: hidden;\n      }\n      .banner-cta img {\n        position: absolute; inset: 0;\n        width: 100%; height: 100%;\n        object-fit: cover;\n        z-index: 0;\n      }\n      .banner-cta-overlay {\n        position: absolute; inset: 0;\n        background: linear-gradient(135deg, rgba(10,30,71,0.92), rgba(10,30,71,0.65));\n        z-index: 1;\n      }\n      .banner-cta-content {\n        position: relative; z-index: 2;\n        color: #fff;\n        max-width: 720px;\n        padding: 60px 0;\n      }\n      .banner-cta h2 {\n        font-family: var(--font-heading);\n        font-size: clamp(1.75rem, 3.5vw, 2.5rem);\n        font-weight: 700;\n        margin-bottom: 16px;\n        letter-spacing: -0.02em;\n      }\n      .banner-cta p { font-size: 17px; margin-bottom: 28px; opacity: .95; }\n\n      .banner-text-only {\n        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\n        color: #fff;\n        padding: 80px 0;\n      }\n\n      /* SLIDESHOW / GALLERY */\n      .gallery { background: var(--color-light-grey); }\n      .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n        gap: 16px;\n      }\n      .gallery-grid img {\n        width: 100%;\n        height: 280px;\n        object-fit: cover;\n        border-radius: 4px;\n      }\n\n      .slideshow-section { background: #fff; padding: 0; }\n      .slideshow-section img { width: 100%; max-height: 520px; object-fit: cover; }\n\n      /* CONTACT */\n      .contact { background: #fff; }\n      .contact-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 48px;\n      }\n      @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }\n      .contact-block h3 {\n        font-family: var(--font-heading);\n        font-size: 14px;\n        text-transform: uppercase;\n        letter-spacing: 0.15em;\n        color: var(--color-accent);\n        font-weight: 600;\n        margin-bottom: 8px;\n      }\n      .contact-block p, .contact-block a {\n        font-size: 17px;\n        color: var(--color-text);\n        margin-bottom: 4px;\n        display: block;\n      }\n      .contact-block a:hover { color: var(--color-secondary); }\n      .contact-item { margin-bottom: 32px; }\n      .contact-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }\n\n      /* FOOTER */\n      footer {\n        background: var(--color-primary);\n        color: #fff;\n        padding: 60px 0 24px;\n      }\n      .footer-grid {\n        display: grid;\n        grid-template-columns: 2fr 1fr 1fr;\n        gap: 48px;\n        margin-bottom: 40px;\n      }\n      @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }\n      .footer-brand img { height: 48px; margin-bottom: 16px; filter: brightness(0) invert(1); }\n      .footer-brand p { opacity: .85; font-size: 14px; max-width: 320px; }\n      .footer-col h4 {\n        font-size: 12px;\n        text-transform: uppercase;\n        letter-spacing: 0.15em;\n        margin-bottom: 16px;\n        color: var(--color-accent);\n      }\n      .footer-col p, .footer-col a {\n        font-size: 14px;\n        opacity: .85;\n        display: block;\n        margin-bottom: 6px;\n      }\n      .footer-col a:hover { opacity: 1; }\n      .footer-bottom {\n        border-top: 1px solid rgba(255,255,255,0.15);\n        padding-top: 24px;\n        font-size: 12px;\n        opacity: .7;\n        text-align: center;\n      }\n    </style>\n  </head>\n  <body>\n\n    <!-- TOPBAR -->\n    <div class=\"topbar\">\n      <div class=\"container topbar-inner\">\n        <span>{data.contacts.hours}</span>\n        <span>\n          <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n          {data.contacts.whatsapp && (\n            <span> · <a href={`https://wa.me/${data.contacts.whatsapp.replace(/[^0-9]/g,'')}`}>WhatsApp {data.contacts.whatsapp}</a></span>\n          )}\n        </span>\n      </div>\n    </div>\n\n    <!-- HEADER -->\n    <header class=\"header\">\n      <div class=\"container header-inner\">\n        <a href=\"#top\">\n          {data.images.logo ? (\n            <img class=\"logo-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=\"nav\">\n          <a href=\"#stock\">{i.nav_stock}</a>\n          <a href=\"#services\">{i.nav_services}</a>\n          <a href=\"#story\">{i.nav_story}</a>\n          <a href=\"#contact\">{i.nav_contacts}</a>\n          <a class=\"nav-cta\" href=\"#sell\">{i.cta_sell_car}</a>\n        </nav>\n      </div>\n    </header>\n\n    <!-- HERO -->\n    <section class=\"hero hero-section\" id=\"top\">\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\"></div>\n          <div class=\"container\">\n            <div class=\"hero-content\">\n              <div class=\"hero-eyebrow\">{copy.hero_eyebrow}</div>\n              <h1>{copy.hero_tagline}</h1>\n              <p>{data.tagline}</p>\n              <div class=\"hero-ctas\">\n                <a class=\"btn btn-primary\" href=\"#stock\">{i.cta_view_stock}</a>\n                <a class=\"btn btn-secondary\" href=\"#sell\">{i.cta_sell_car}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div class=\"hero-text-only\">\n          <div class=\"container\">\n            <div class=\"hero-content\">\n              <div class=\"hero-eyebrow\">{copy.hero_eyebrow}</div>\n              <h1>{copy.hero_tagline}</h1>\n              <p>{data.tagline}</p>\n              <div class=\"hero-ctas\">\n                <a class=\"btn btn-primary\" href=\"#stock\">{i.cta_view_stock}</a>\n                <a class=\"btn btn-secondary\" href=\"#sell\">{i.cta_sell_car}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </section>\n\n    <!-- QUICK ACTIONS -->\n    <section class=\"quick-actions\">\n      <div class=\"container\">\n        <div class=\"quick-actions-grid\">\n          <div class=\"qa-card\">\n            <h3>{i.qa_buy_title}</h3>\n            <p>{copy.qa_buy_intro}</p>\n            <a class=\"qa-link\" href=\"#stock\">{i.cta_view_stock} →</a>\n          </div>\n          <div class=\"qa-card\">\n            <h3>{i.qa_sell_title}</h3>\n            <p>{copy.qa_sell_intro}</p>\n            <a class=\"qa-link\" href=\"#sell\">{i.cta_sell_car} →</a>\n          </div>\n          <div class=\"qa-card\">\n            <h3>{i.qa_finance_title}</h3>\n            <p>{copy.qa_finance_intro}</p>\n            <a class=\"qa-link\" href=\"#services\">{i.cta_more} →</a>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- STORY -->\n    <section class=\"story\" id=\"story\">\n      <div class=\"container\">\n        <div class=\"story-grid\">\n          <div class=\"story-text\">\n            <div class=\"section-eyebrow\">{i.section_eyebrow_story}</div>\n            <h2>{copy.story_headline}</h2>\n            <p>{copy.story_paragraph}</p>\n            <p>{data.description}</p>\n            <div style=\"margin-top: 24px;\">\n              <a class=\"btn btn-primary\" href=\"#contact\">{i.cta_contact}</a>\n            </div>\n          </div>\n          <div class=\"story-image\">\n            {data.images.gallery.length > 0 ? (\n              <img src={imgUrl(data.images.gallery[0].path)} alt={data.images.gallery[0].alt} />\n            ) : (\n              <div class=\"story-text-only\">{copy.story_visual_fallback}</div>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- STOCK / PRODUCTS -->\n    {data.images.product.length > 0 && (\n      <section class=\"stock\" id=\"stock\">\n        <div class=\"container\">\n          <div class=\"section-header\">\n            <div class=\"section-eyebrow\">{i.section_eyebrow_stock}</div>\n            <h2>{i.section_title_stock}</h2>\n            <p>{copy.stock_intro}</p>\n          </div>\n          <div class=\"stock-grid\">\n            {data.images.product.map((p) => (\n              <div class=\"stock-card\">\n                <div class=\"stock-card-img\">\n                  <img src={imgUrl(p.path)} alt={p.alt} />\n                </div>\n                <div class=\"stock-card-body\">\n                  <h4>{p.alt}</h4>\n                  <div class=\"stock-card-meta\">\n                    <span class=\"chip\">{i.chip_warranty}</span>\n                    <span class=\"chip\">{i.chip_ready}</span>\n                  </div>\n                  <a class=\"stock-card-cta\" href=\"#contact\">{i.cta_more}</a>\n                </div>\n              </div>\n            ))}\n          </div>\n          <div style=\"text-align: center; margin-top: 40px;\">\n            <a class=\"btn btn-primary\" href=\"#contact\">{i.cta_view_stock}</a>\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- BANNER CTA: SELL YOUR CAR -->\n    <section class=\"banner-cta\" id=\"sell\">\n      {data.images.banner ? (\n        <>\n          <img src={imgUrl(data.images.banner.path)} alt={data.images.banner.alt} />\n          <div class=\"banner-cta-overlay\"></div>\n          <div class=\"container\">\n            <div class=\"banner-cta-content\">\n              <div class=\"hero-eyebrow\">{i.section_eyebrow_sell}</div>\n              <h2>{copy.sell_headline}</h2>\n              <p>{copy.sell_paragraph}</p>\n              <div class=\"hero-ctas\">\n                <a class=\"btn btn-primary\" href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n                {data.contacts.whatsapp && (\n                  <a class=\"btn btn-secondary\" href={`https://wa.me/${data.contacts.whatsapp.replace(/[^0-9]/g,'')}`}>WhatsApp</a>\n                )}\n              </div>\n            </div>\n          </div>\n        </>\n      ) : (\n        <div class=\"banner-text-only\" style=\"width: 100%;\">\n          <div class=\"container\">\n            <div class=\"banner-cta-content\">\n              <div class=\"hero-eyebrow\">{i.section_eyebrow_sell}</div>\n              <h2>{copy.sell_headline}</h2>\n              <p>{copy.sell_paragraph}</p>\n              <div class=\"hero-ctas\">\n                <a class=\"btn btn-primary\" href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </section>\n\n    <!-- SERVICES -->\n    <section class=\"services\" id=\"services\">\n      <div class=\"container\">\n        <div class=\"section-header\">\n          <div class=\"section-eyebrow\">{i.section_eyebrow_services}</div>\n          <h2>{i.section_title_services}</h2>\n          <p>{copy.services_intro}</p>\n        </div>\n        <div class=\"services-grid\">\n          {data.products_or_services.map((s) => (\n            <div class=\"service-card\">\n              <span class=\"badge\">{i.badge_service}</span>\n              <h3>{s.name}</h3>\n              <p>{s.description}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n\n    <!-- SLIDESHOW STRIP -->\n    {data.images.slideshow.length > 0 && (\n      <section class=\"slideshow-section\">\n        <img src={imgUrl(data.images.slideshow[0].path)} alt={data.images.slideshow[0].alt} />\n      </section>\n    )}\n\n    <!-- GALLERY -->\n    {data.images.gallery.length > 1 && (\n      <section class=\"gallery\">\n        <div class=\"container\">\n          <div class=\"section-header\">\n            <div class=\"section-eyebrow\">{i.section_eyebrow_gallery}</div>\n            <h2>{i.section_title_gallery}</h2>\n          </div>\n          <div class=\"gallery-grid\">\n            {data.images.gallery.slice(1).map((g) => (\n              <img src={imgUrl(g.path)} alt={g.alt} />\n            ))}\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- CONTACT -->\n    <section class=\"contact\" id=\"contact\">\n      <div class=\"container\">\n        <div class=\"section-header\">\n          <div class=\"section-eyebrow\">{i.section_eyebrow_contact}</div>\n          <h2>{i.section_title_contact}</h2>\n          <p>{copy.contact_intro}</p>\n        </div>\n        <div class=\"contact-grid\">\n          <div>\n            <div class=\"contact-item contact-block\">\n              <h3>{i.label_address}</h3>\n              <p>{data.contacts.address}</p>\n            </div>\n            <div class=\"contact-item contact-block\">\n              <h3>{i.label_hours}</h3>\n              <p>{data.contacts.hours}</p>\n            </div>\n          </div>\n          <div>\n            <div class=\"contact-item contact-block\">\n              <h3>{i.label_phone}</h3>\n              <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n              {data.contacts.whatsapp && (\n                <a href={`https://wa.me/${data.contacts.whatsapp.replace(/[^0-9]/g,'')}`}>WhatsApp {data.contacts.whatsapp}</a>\n              )}\n            </div>\n            <div class=\"contact-item contact-block\">\n              <h3>{i.label_email}</h3>\n              <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a>\n            </div>\n            <div class=\"contact-cta-row\">\n              <a class=\"btn btn-primary\" href={`tel:${data.contacts.phone}`}>{i.cta_call_now}</a>\n              <a class=\"btn btn-secondary\" href={`mailto:${data.contacts.email}`} style=\"background:var(--color-primary); color:#fff;\">{i.cta_write_us}</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- FOOTER -->\n    <footer>\n      <div class=\"container\">\n        <div class=\"footer-grid\">\n          <div class=\"footer-brand\">\n            {data.images.logo && (\n              <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n            )}\n            <p>{copy.footer_tag}</p>\n          </div>\n          <div class=\"footer-col\">\n            <h4>{i.footer_contacts}</h4>\n            <p>{data.contacts.address}</p>\n            <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n            <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a>\n            {data.contacts.pec && <p>PEC: {data.contacts.pec}</p>}\n          </div>\n          <div class=\"footer-col\">\n            <h4>{i.footer_hours}</h4>\n            <p>{data.contacts.hours}</p>\n          </div>\n        </div>\n        <div class=\"footer-bottom\">\n          © {new Date().getFullYear()} {data.business_name} · {i.footer_legal}\n        </div>\n      </div>\n    </footer>\n\n  </body>\n</html>\n",
  "content_schema": [
    {
      "key": "hero_eyebrow",
      "type": "text",
      "max_chars": 40,
      "description": "Eyebrow corto sopra il titolo hero. Tipo 'Autosalone a Prato' o 'Acquisto e vendita'. Atmosferico, non promozionale.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 90,
      "description": "Headline principale hero. Breve, diretto, evoca fiducia. NO claim verificabili.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "qa_buy_intro",
      "type": "text",
      "max_chars": 140,
      "description": "Frase introduttiva per la card 'Acquista'. Atmosferica, invita a esplorare lo stock.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "qa_sell_intro",
      "type": "text",
      "max_chars": 140,
      "description": "Frase introduttiva per la card 'Vendi'. Atmosferica, parla della facilità del processo.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "qa_finance_intro",
      "type": "text",
      "max_chars": 140,
      "description": "Frase introduttiva per la card 'Finanziamento'. Atmosferica, parla di soluzioni su misura.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_headline",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo della sezione storia. Atmosferico, evoca il rapporto con i clienti.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 420,
      "description": "Paragrafo narrativo sulla storia/identità del salone. Evita inventare anni, nomi propri, dettagli verificabili.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_visual_fallback",
      "type": "text",
      "max_chars": 60,
      "description": "Testo mostrato al posto dell'immagine storia se gallery è vuota.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "stock_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione alla sezione veicoli in pronta consegna. Atmosferico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "sell_headline",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo del banner 'Vendi la tua auto'. Diretto e invitante.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "sell_paragraph",
      "type": "text",
      "max_chars": 260,
      "description": "Paragrafo del banner vendita. Atmosferico, parla di velocità e fiducia.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione alla griglia dei servizi. Atmosferica.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contact_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione alla sezione contatti. Invita a venire in salone.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tag",
      "type": "text",
      "max_chars": 160,
      "description": "Frase breve a piede del logo nel footer. Identitaria, calda.",
      "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.hours",
    "contacts.whatsapp",
    "contacts.pec",
    "products_or_services[]",
    "visual_identity.color_palette",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.slideshow[]",
    "images.product[]",
    "images.gallery[]"
  ],
  "ui_translations": {
    "nav_stock": "Veicoli",
    "nav_services": "Servizi",
    "nav_story": "Chi siamo",
    "nav_contacts": "Contatti",
    "cta_view_stock": "Scopri i veicoli",
    "cta_sell_car": "Vendi la tua auto",
    "cta_contact": "Contattaci",
    "cta_more": "Maggiori informazioni",
    "cta_call_now": "Chiama ora",
    "cta_write_us": "Scrivici",
    "qa_buy_title": "Acquista un'auto",
    "qa_sell_title": "Vendi la tua auto",
    "qa_finance_title": "Finanziamento",
    "section_eyebrow_story": "Chi siamo",
    "section_eyebrow_stock": "Parco auto",
    "section_title_stock": "Veicoli in pronta consegna",
    "section_eyebrow_sell": "Compro auto in contanti",
    "section_eyebrow_services": "Cosa offriamo",
    "section_title_services": "I nostri servizi",
    "section_eyebrow_gallery": "Il nostro salone",
    "section_title_gallery": "Vieni a trovarci",
    "section_eyebrow_contact": "Contatti",
    "section_title_contact": "Dove siamo",
    "chip_warranty": "Garanzia 12 mesi",
    "chip_ready": "Pronta consegna",
    "badge_service": "Servizio",
    "label_address": "Indirizzo",
    "label_hours": "Orari",
    "label_phone": "Telefono",
    "label_email": "Email",
    "footer_contacts": "Contatti",
    "footer_hours": "Orari",
    "footer_legal": "Tutti i diritti riservati"
  }
}