{
  "reasoning": "Autopool è un autosalone moderno con identità visiva cool e contemporanea (blu navy, arancio accent, sans-serif geometrico). Il business model è B2C transazionale (compra/vendi/finanzia auto). Ho scelto '04-bold-contemporary' per il suo tono deciso, griglia modulare, e capacità di valorizzare fotografia di prodotto in primo piano — perfetto per un dealer che vuole comunicare affidabilità e modernità senza cedere al calore artigianale. La palette blu/arancio si adatta bene al pattern di sezioni alternate nero/cream con accent color.",
  "selected_reference_style": "04-bold-contemporary",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\n\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\n\nconst palette = {\n  primary: data.visual_identity?.color_palette?.primary || \"#1E3A8A\",\n  secondary: data.visual_identity?.color_palette?.secondary || \"#60A5FA\",\n  accent: data.visual_identity?.color_palette?.accent || \"#E87722\",\n  background: data.visual_identity?.color_palette?.background || \"#F8FAFC\",\n  text: data.visual_identity?.color_palette?.text || \"#0F172A\",\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} — {data.tagline}</title>\n    <style is:global>\n      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\n\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\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-family: 'Inter', sans-serif;\n      }\n\n      html {\n        scroll-behavior: smooth;\n      }\n\n      body {\n        font-family: var(--font-family);\n        color: var(--color-text);\n        line-height: 1.6;\n        background: var(--color-background);\n      }\n\n      a {\n        color: inherit;\n        text-decoration: none;\n      }\n\n      img {\n        max-width: 100%;\n        height: auto;\n        display: block;\n      }\n\n      .container {\n        max-width: 1300px;\n        margin: 0 auto;\n        padding: 0 2rem;\n      }\n\n      /* Header */\n      header {\n        position: sticky;\n        top: 0;\n        z-index: 100;\n        background: white;\n        border-bottom: 1px solid #f0f0f0;\n        padding: 1rem 0;\n      }\n\n      header nav {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        max-width: 1300px;\n        margin: 0 auto;\n        padding: 0 2rem;\n      }\n\n      .logo-link {\n        display: flex;\n        align-items: center;\n      }\n\n      .logo-link img {\n        height: 45px;\n        width: auto;\n      }\n\n      nav ul {\n        display: flex;\n        list-style: none;\n        gap: 3rem;\n      }\n\n      nav a {\n        font-size: 0.85rem;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--color-text);\n        transition: color 0.3s;\n      }\n\n      nav a:hover {\n        color: var(--color-accent);\n      }\n\n      .nav-cta {\n        background: var(--color-accent);\n        color: white !important;\n        padding: 0.7rem 1.5rem;\n        border-radius: 4px;\n        font-size: 0.75rem;\n      }\n\n      /* Hero */\n      .hero-section {\n        min-height: 100vh;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        background: var(--color-primary);\n        overflow: hidden;\n      }\n\n      .hero-image {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      .hero-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: rgba(30, 58, 138, 0.3);\n      }\n\n      .hero-content {\n        position: relative;\n        z-index: 2;\n        text-align: center;\n        color: white;\n        max-width: 800px;\n        padding: 0 2rem;\n      }\n\n      .hero-content h1 {\n        font-size: clamp(2.5rem, 8vw, 5rem);\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 1rem;\n        letter-spacing: -0.02em;\n      }\n\n      .hero-tagline {\n        font-size: clamp(1rem, 3vw, 1.5rem);\n        font-weight: 400;\n        margin-bottom: 2rem;\n        letter-spacing: 0.05em;\n      }\n\n      .hero-cta {\n        display: inline-block;\n        background: var(--color-accent);\n        color: white;\n        padding: 1rem 2.5rem;\n        font-size: 0.85rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        border-radius: 4px;\n        transition: all 0.3s;\n        margin-top: 1rem;\n      }\n\n      .hero-cta:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 20px rgba(232, 119, 34, 0.3);\n      }\n\n      /* Section Alternation */\n      .section-light {\n        background: var(--color-background);\n        padding: 120px 0;\n      }\n\n      .section-dark {\n        background: var(--color-primary);\n        color: white;\n        padding: 120px 0;\n      }\n\n      .section-title {\n        font-size: clamp(2rem, 5vw, 3.5rem);\n        font-weight: 800;\n        margin-bottom: 3rem;\n        letter-spacing: -0.01em;\n      }\n\n      .section-title .accent-word {\n        color: var(--color-accent);\n      }\n\n      .section-eyebrow {\n        font-size: 0.75rem;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.2em;\n        color: var(--color-accent);\n        margin-bottom: 1rem;\n        display: block;\n      }\n\n      /* Grid Layouts */\n      .grid-3 {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n        gap: 2rem;\n        margin-bottom: 3rem;\n      }\n\n      .grid-2 {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n        gap: 3rem;\n        align-items: center;\n      }\n\n      /* Card Styles */\n      .service-card {\n        background: white;\n        padding: 2rem;\n        border-radius: 4px;\n        transition: transform 0.3s, box-shadow 0.3s;\n      }\n\n      .section-dark .service-card {\n        background: rgba(255, 255, 255, 0.08);\n        border: 1px solid rgba(255, 255, 255, 0.15);\n      }\n\n      .service-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);\n      }\n\n      .service-card h3 {\n        font-size: 1.2rem;\n        font-weight: 600;\n        margin-bottom: 1rem;\n      }\n\n      .service-card p {\n        font-size: 0.9rem;\n        line-height: 1.7;\n        opacity: 0.9;\n      }\n\n      /* Product Grid */\n      .product-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n        gap: 2rem;\n      }\n\n      .product-card {\n        background: white;\n        border-radius: 4px;\n        overflow: hidden;\n        transition: transform 0.3s, box-shadow 0.3s;\n      }\n\n      .product-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);\n      }\n\n      .product-image {\n        width: 100%;\n        height: 240px;\n        overflow: hidden;\n        background: #f0f0f0;\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 h4 {\n        font-size: 1rem;\n        font-weight: 600;\n        margin-bottom: 0.5rem;\n      }\n\n      /* Gallery */\n      .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n        gap: 1.5rem;\n      }\n\n      .gallery-item {\n        border-radius: 4px;\n        overflow: hidden;\n        aspect-ratio: 16 / 9;\n      }\n\n      .gallery-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      /* Banner Section */\n      .banner-section {\n        background: var(--color-accent);\n        color: white;\n        padding: 80px;\n        text-align: center;\n        border-radius: 4px;\n        margin: 80px 0;\n      }\n\n      .banner-section h2 {\n        font-size: clamp(1.5rem, 4vw, 2.5rem);\n        font-weight: 700;\n        margin-bottom: 2rem;\n      }\n\n      .banner-cta {\n        display: inline-block;\n        background: white;\n        color: var(--color-accent);\n        padding: 1rem 2.5rem;\n        font-size: 0.85rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        border-radius: 4px;\n        transition: all 0.3s;\n      }\n\n      .banner-cta:hover {\n        transform: scale(1.05);\n        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n      }\n\n      /* Contact Section */\n      .contact-info {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 3rem;\n        margin-bottom: 3rem;\n      }\n\n      .contact-item h4 {\n        font-size: 0.9rem;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        margin-bottom: 0.5rem;\n        color: var(--color-accent);\n      }\n\n      .contact-item p {\n        font-size: 1rem;\n        line-height: 1.8;\n      }\n\n      /* Footer */\n      footer {\n        background: var(--color-primary);\n        color: white;\n        padding: 60px 0 30px;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n      }\n\n      footer .container {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n        gap: 3rem;\n        margin-bottom: 3rem;\n      }\n\n      footer h4 {\n        font-size: 0.9rem;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        margin-bottom: 1rem;\n      }\n\n      footer ul {\n        list-style: none;\n      }\n\n      footer ul li {\n        margin-bottom: 0.8rem;\n      }\n\n      footer a {\n        font-size: 0.9rem;\n        opacity: 0.8;\n        transition: opacity 0.3s;\n      }\n\n      footer a:hover {\n        opacity: 1;\n        color: var(--color-accent);\n      }\n\n      .footer-bottom {\n        text-align: center;\n        padding-top: 30px;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        font-size: 0.85rem;\n        opacity: 0.7;\n      }\n\n      /* Responsive */\n      @media (max-width: 768px) {\n        nav ul {\n          gap: 1.5rem;\n        }\n\n        .grid-3,\n        .product-grid,\n        .gallery-grid {\n          grid-template-columns: 1fr;\n        }\n\n        .grid-2 {\n          grid-template-columns: 1fr;\n        }\n\n        .section-light,\n        .section-dark {\n          padding: 60px 0;\n        }\n\n        .banner-section {\n          padding: 40px 2rem;\n        }\n      }\n    </style>\n\n    <style define:vars={{\n      colorPrimary: palette.primary,\n      colorSecondary: palette.secondary,\n      colorAccent: palette.accent,\n      colorBackground: palette.background,\n      colorText: palette.text,\n    }}>\n    </style>\n  </head>\n\n  <body>\n    <!-- Header -->\n    <header>\n      <nav>\n        <a href=\"#home\" class=\"logo-link\">\n          {data.images.logo && <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />}\n        </a>\n        <ul>\n          <li><a href=\"#vetrine\">{i.nav_vehicles}</a></li>\n          <li><a href=\"#servizi\">{i.nav_services}</a></li>\n          <li><a href=\"#contatti\" class=\"nav-cta\">{i.cta_contact}</a></li>\n        </ul>\n      </nav>\n    </header>\n\n    <!-- Hero Section -->\n    {data.images.hero && (\n      <section class=\"hero-section\" id=\"home\">\n        <div class=\"hero-image\">\n          <img src={imgUrl(data.images.hero.path)} alt={data.images.hero.alt} />\n        </div>\n        <div class=\"hero-overlay\"></div>\n        <div class=\"hero-content\">\n          <h1>{data.business_name}</h1>\n          <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n          <a href=\"#vetrine\" class=\"hero-cta\">{i.cta_discover}</a>\n        </div>\n      </section>\n    )}\n\n    <!-- Vehicles Section -->\n    <section class=\"section-light\" id=\"vetrine\">\n      <div class=\"container\">\n        <span class=\"section-eyebrow\">{i.section_eyebrow_vehicles}</span>\n        <h2 class=\"section-title\">\n          {i.section_title_vehicles}\n        </h2>\n\n        {data.images.product.length > 0 && (\n          <div class=\"product-grid\">\n            {data.images.product.map((prod) => (\n              <div class=\"product-card\">\n                <div class=\"product-image\">\n                  <img src={imgUrl(prod.path)} alt={prod.alt} />\n                </div>\n                <div class=\"product-info\">\n                  <h4>{prod.alt}</h4>\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n\n    <!-- Banner Section -->\n    {data.images.banner && (\n      <section class=\"section-light\">\n        <div class=\"container\">\n          <div class=\"banner-section\">\n            <h2>{i.banner_title}</h2>\n            <a href=\"#contatti\" class=\"banner-cta\">{i.banner_cta}</a>\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- Services Section -->\n    <section class=\"section-dark\" id=\"servizi\">\n      <div class=\"container\">\n        <span class=\"section-eyebrow\">{i.section_eyebrow_services}</span>\n        <h2 class=\"section-title\">\n          {i.section_title_services}<br />\n          <span class=\"accent-word\">Autopool</span>\n        </h2>\n\n        <div class=\"grid-3\">\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      </div>\n    </section>\n\n    <!-- Gallery Section -->\n    {data.images.gallery.length > 0 && (\n      <section class=\"section-light\">\n        <div class=\"container\">\n          <span class=\"section-eyebrow\">{i.section_eyebrow_gallery}</span>\n          <h2 class=\"section-title\">{i.section_title_gallery}</h2>\n          <div class=\"gallery-grid\">\n            {data.images.gallery.map((img) => (\n              <div class=\"gallery-item\">\n                <img src={imgUrl(img.path)} alt={img.alt} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- Slideshow Section (Featured Vehicles) -->\n    {data.images.slideshow.length > 0 && (\n      <section class=\"section-dark\">\n        <div class=\"container\">\n          <span class=\"section-eyebrow\">{i.section_eyebrow_featured}</span>\n          <h2 class=\"section-title\">\n            {i.section_title_featured}\n          </h2>\n          <div style=\"margin-top: 3rem;\">\n            {data.images.slideshow.map((slide) => (\n              <div style=\"margin-bottom: 2rem; border-radius: 4px; overflow: hidden;\">\n                <img src={imgUrl(slide.path)} alt={slide.alt} style=\"width: 100%; height: auto; display: block;\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    )}\n\n    <!-- Contact Section -->\n    <section class=\"section-light\" id=\"contatti\">\n      <div class=\"container\">\n        <span class=\"section-eyebrow\">{i.section_eyebrow_contact}</span>\n        <h2 class=\"section-title\">{i.section_title_contact}</h2>\n\n        <div class=\"contact-info\">\n          <div class=\"contact-item\">\n            <h4>{i.contact_address}</h4>\n            <p>{data.contacts.address}</p>\n          </div>\n          <div class=\"contact-item\">\n            <h4>{i.contact_phone}</h4>\n            <p>\n              <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a>\n              {data.contacts.whatsapp && (\n                <>\n                  <br />\n                  <small>{i.contact_whatsapp}</small>\n                  <br />\n                  <a href={`https://wa.me/${data.contacts.whatsapp.replace(/\\s/g, '')}`}>{data.contacts.whatsapp}</a>\n                </>\n              )}\n            </p>\n          </div>\n          <div class=\"contact-item\">\n            <h4>{i.contact_email}</h4>\n            <p>\n              <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a>\n            </p>\n          </div>\n          <div class=\"contact-item\">\n            <h4>{i.contact_hours}</h4>\n            <p>{data.contacts.hours}</p>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <!-- Footer -->\n    <footer>\n      <div class=\"container\">\n        <div>\n          <h4>{i.footer_about}</h4>\n          <p style=\"font-size: 0.9rem; opacity: 0.85;\">{data.description}</p>\n        </div>\n        <div>\n          <h4>{i.footer_links}</h4>\n          <ul>\n            <li><a href=\"#vetrine\">{i.nav_vehicles}</a></li>\n            <li><a href=\"#servizi\">{i.nav_services}</a></li>\n            <li><a href=\"#contatti\">{i.cta_contact}</a></li>\n          </ul>\n        </div>\n        <div>\n          <h4>{i.footer_info}</h4>\n          <ul>\n            <li>{data.contacts.address}</li>\n            <li><a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a></li>\n            <li><a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"footer-bottom\">\n        <p>{i.footer_credits}</p>\n      </div>\n    </footer>\n  </body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 150,
      "description": "Tagline principale sotto il nome aziendale nel hero. Comunica il valore principale in tono moderno e sicuro.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_intro",
      "type": "richtext",
      "max_chars": 400,
      "description": "Paragrafo introduttivo sulla storia o visione di Autopool. Atmospheric narrative, senza facts specifiche.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "tagline",
    "description",
    "category",
    "contacts.address",
    "contacts.phone",
    "contacts.email",
    "contacts.whatsapp",
    "contacts.hours",
    "products_or_services[]",
    "images.logo",
    "images.hero",
    "images.banner",
    "images.product[]",
    "images.gallery[]",
    "images.slideshow[]"
  ],
  "ui_translations": {
    "nav_vehicles": "Vetrine",
    "nav_services": "Servizi",
    "cta_contact": "Contattaci",
    "cta_discover": "Scopri il nostro parco",
    "section_eyebrow_vehicles": "Scopri il parco auto",
    "section_title_vehicles": "Veicoli in pronta consegna",
    "section_eyebrow_services": "I nostri servizi",
    "section_title_services": "Acquista, vendi o affida a",
    "banner_title": "Vuoi vendere la tua auto usata?",
    "banner_cta": "Ottieni una valutazione",
    "section_eyebrow_gallery": "La nostra struttura",
    "section_title_gallery": "Visita il nostro autosalone",
    "section_eyebrow_featured": "Novità in evidenza",
    "section_title_featured": "Camper e veicoli speciali",
    "section_eyebrow_contact": "Contattaci",
    "section_title_contact": "Informazioni di contatto",
    "contact_address": "Indirizzo",
    "contact_phone": "Telefono",
    "contact_whatsapp": "WhatsApp",
    "contact_email": "Email",
    "contact_hours": "Orari di apertura",
    "footer_about": "Su di noi",
    "footer_links": "Link rapidi",
    "footer_info": "Informazioni",
    "footer_credits": "© 2025 Autopool. Tutti i diritti riservati."
  }
}