{
  "reasoning": "Ho scelto lo stile '02-warm-artisanal-heritage': è il fit naturale per un forno fiorentino con storytelling di famiglia (Daisy, produzione interna, materie prime locali). Uso la palette estratta dal sito (viola/oro caldo) con fallback ai toni cream del reference, Fraunces per i titoli (più vicino al feel handwritten/display rilevato) e Inter per il body. Hero senza immagine → blocco tipografico su colore primario; le 4 foto slideshow alimentano una sezione galleria-slideshow dedicata; i prodotti sono card testuali (slot product vuoto).",
  "selected_reference_style": "02-warm-artisanal-heritage",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#8a6a3f\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#d9c4a0\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#8B6F4E\",\n  background: data.visual_identity?.color_palette?.background || \"#f4ead8\",\n  text:       data.visual_identity?.color_palette?.text       || \"#2d2a25\",\n};\nconst hasContacts = data.contacts && (data.contacts.address || data.contacts.phone || data.contacts.email || data.contacts.hours);\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</head>\n<body>\n\n  <!-- HEADER -->\n  <header class=\"site-header\">\n    <div class=\"header-inner\">\n      {data.images.logo && (\n        <a href=\"#top\" class=\"logo-link\">\n          <img class=\"logo-img\" src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        </a>\n      )}\n      <nav class=\"main-nav\" aria-label=\"Main\">\n        <a href=\"#storia\">{i.nav_story}</a>\n        <a href=\"#prodotti\">{i.nav_products}</a>\n        <a href=\"#forno\">{i.nav_gallery}</a>\n        <a href=\"#contatti\">{i.nav_contacts}</a>\n      </nav>\n    </div>\n  </header>\n\n  <!-- HERO (no hero image in dossier: text-on-color) -->\n  <section class=\"hero-section\" id=\"top\">\n    <div class=\"hero-text-only\">\n      <p class=\"hero-eyebrow\">{copy.hero_eyebrow}</p>\n      <h1>{data.business_name}</h1>\n      <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n      <p class=\"hero-sub\">{data.tagline}</p>\n      <a class=\"hero-cta\" href=\"#prodotti\">{i.cta_discover}</a>\n    </div>\n  </section>\n\n  <!-- STORIA -->\n  <section class=\"story-section\" id=\"storia\">\n    <div class=\"container narrow\">\n      <h2 class=\"section-title\">{i.section_title_story}</h2>\n      <p class=\"story-intro\">{copy.story_intro}</p>\n      <p class=\"story-paragraph\">{copy.story_paragraph}</p>\n      <p class=\"story-description\">{data.description}</p>\n    </div>\n  </section>\n\n  <!-- SLIDESHOW -->\n  {data.images.slideshow.length > 0 && (\n    <section class=\"slideshow-section\" id=\"forno\">\n      <div class=\"container\">\n        <h2 class=\"section-title\">{i.section_title_slideshow}</h2>\n        <p class=\"section-intro\">{copy.slideshow_intro}</p>\n        <div class=\"slideshow-grid\">\n          {data.images.slideshow.map((img) => (\n            <figure class=\"slideshow-item\">\n              <img src={imgUrl(img.path)} alt={img.alt} loading=\"lazy\" />\n            </figure>\n          ))}\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- PRODOTTI (text-only cards: product image slot is empty) -->\n  <section class=\"products-section\" id=\"prodotti\">\n    <div class=\"container\">\n      <h2 class=\"section-title\">{i.section_title_products}</h2>\n      <p class=\"section-intro\">{copy.products_intro}</p>\n      <div class=\"products-grid\">\n        {data.products_or_services.map((p) => (\n          <article class=\"product-card\">\n            <h3>{p.name}</h3>\n            <p>{p.description}</p>\n          </article>\n        ))}\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTATTI -->\n  <section class=\"contacts-section\" id=\"contatti\">\n    <div class=\"container narrow\">\n      <h2 class=\"section-title light\">{i.section_title_contacts}</h2>\n      <p class=\"contact-invite\">{copy.contact_invite}</p>\n      {hasContacts && (\n        <ul class=\"contact-list\">\n          {data.contacts.address && (\n            <li><span class=\"contact-label\">{i.label_address}</span> {data.contacts.address}</li>\n          )}\n          {data.contacts.phone && (\n            <li><span class=\"contact-label\">{i.label_phone}</span> <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a></li>\n          )}\n          {data.contacts.email && (\n            <li><span class=\"contact-label\">{i.label_email}</span> <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a></li>\n          )}\n          {data.contacts.hours && (\n            <li><span class=\"contact-label\">{i.label_hours}</span> {data.contacts.hours}</li>\n          )}\n        </ul>\n      )}\n    </div>\n  </section>\n\n  <!-- FOOTER -->\n  <footer class=\"site-footer\">\n    {data.images.logo && (\n      <img class=\"footer-logo\" src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n    )}\n    <p class=\"footer-name\">{data.business_name}</p>\n    <p class=\"footer-tag\">{copy.footer_tag}</p>\n    <p class=\"footer-credits\">{i.footer_credits}</p>\n  </footer>\n\n  <style is:global define:vars={{\n    colorPrimary:    palette.primary,\n    colorSecondary:  palette.secondary,\n    colorAccent:     palette.accent,\n    colorBackground: palette.background,\n    colorText:       palette.text,\n  }}>\n    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Inter:wght@400;500;600&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: 'Fraunces', serif;\n      --font-body: 'Inter', sans-serif;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body {\n      font-family: var(--font-body);\n      background: var(--color-background);\n      color: var(--color-text);\n      line-height: 1.65;\n      font-size: 1rem;\n    }\n    img { max-width: 100%; display: block; }\n    a { color: var(--color-primary); }\n\n    .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }\n    .container.narrow { max-width: 760px; }\n\n    .section-title {\n      font-family: var(--font-heading);\n      font-size: clamp(1.8rem, 3.5vw, 2.6rem);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      font-weight: 400;\n      text-align: center;\n      margin-bottom: 1.2rem;\n      color: var(--color-primary);\n    }\n    .section-title.light { color: var(--color-background); }\n    .section-intro { text-align: center; max-width: 640px; margin: 0 auto 3rem; opacity: 0.85; }\n\n    /* HEADER */\n    .site-header {\n      position: sticky; top: 0; z-index: 50;\n      background: var(--color-background);\n      border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);\n    }\n    .header-inner {\n      max-width: 1100px; margin: 0 auto;\n      display: flex; align-items: center; justify-content: space-between;\n      padding: 0.6rem 1.5rem; gap: 1rem;\n    }\n    .logo-img { height: 56px; width: auto; }\n    .main-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }\n    .main-nav a {\n      font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em;\n      text-decoration: none; color: var(--color-text); font-weight: 500;\n    }\n    .main-nav a:hover { color: var(--color-primary); }\n\n    /* HERO */\n    .hero-section {\n      min-height: 72vh;\n      display: flex; align-items: center; justify-content: center;\n      background: var(--color-primary);\n    }\n    .hero-text-only {\n      color: var(--color-background);\n      padding: 6rem 2rem; text-align: center; width: 100%;\n    }\n    .hero-eyebrow {\n      text-transform: uppercase; letter-spacing: 0.3em;\n      font-size: 0.8rem; margin-bottom: 1.4rem;\n      color: var(--color-secondary);\n    }\n    .hero-text-only h1 {\n      font-family: var(--font-heading);\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      font-weight: 600; line-height: 1.1;\n      margin-bottom: 1.2rem;\n    }\n    .hero-tagline {\n      font-family: var(--font-heading);\n      font-size: clamp(1.1rem, 2.2vw, 1.5rem);\n      font-style: italic; max-width: 620px; margin: 0 auto 0.8rem;\n    }\n    .hero-sub {\n      text-transform: uppercase; letter-spacing: 0.2em;\n      font-size: 0.85rem; opacity: 0.85; margin-bottom: 2.4rem;\n    }\n    .hero-cta {\n      display: inline-block;\n      border: 1px solid var(--color-secondary);\n      color: var(--color-background);\n      padding: 0.85rem 2.4rem;\n      text-decoration: none;\n      text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem;\n      transition: background 0.25s, color 0.25s;\n    }\n    .hero-cta:hover { background: var(--color-secondary); color: var(--color-text); }\n\n    /* STORIA */\n    .story-section { padding: 6rem 0; }\n    .story-intro {\n      font-family: var(--font-heading);\n      font-size: 1.35rem; font-style: italic; text-align: center;\n      margin-bottom: 2rem; color: var(--color-accent);\n    }\n    .story-paragraph { margin-bottom: 1.4rem; }\n    .story-description { opacity: 0.85; }\n\n    /* SLIDESHOW */\n    .slideshow-section {\n      padding: 6rem 0;\n      background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-background));\n    }\n    .slideshow-grid {\n      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;\n    }\n    .slideshow-item { overflow: hidden; }\n    .slideshow-item img {\n      width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;\n      transition: transform 0.4s ease;\n    }\n    .slideshow-item:hover img { transform: scale(1.03); }\n\n    /* PRODOTTI */\n    .products-section { padding: 6rem 0; }\n    .products-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n      gap: 1.5rem;\n    }\n    .product-card {\n      background: #fff;\n      border-top: 3px solid var(--color-primary);\n      padding: 2rem 1.6rem;\n      box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 8%, transparent);\n    }\n    .product-card h3 {\n      font-family: var(--font-heading);\n      font-size: 1.25rem; font-weight: 600;\n      margin-bottom: 0.7rem; color: var(--color-primary);\n    }\n    .product-card p { font-size: 0.95rem; opacity: 0.9; }\n\n    /* CONTATTI */\n    .contacts-section {\n      padding: 6rem 0;\n      background: var(--color-text);\n      color: var(--color-background);\n      text-align: center;\n    }\n    .contact-invite { max-width: 580px; margin: 0 auto 2rem; opacity: 0.9; }\n    .contact-list { list-style: none; display: grid; gap: 0.8rem; }\n    .contact-list a { color: var(--color-secondary); }\n    .contact-label {\n      text-transform: uppercase; letter-spacing: 0.15em;\n      font-size: 0.75rem; color: var(--color-secondary);\n      display: block; margin-bottom: 0.15rem;\n    }\n\n    /* FOOTER */\n    .site-footer {\n      background: var(--color-background);\n      text-align: center; padding: 3.5rem 1.5rem 2.5rem;\n    }\n    .footer-logo { height: 64px; width: auto; margin: 0 auto 1rem; }\n    .footer-name {\n      font-family: var(--font-heading);\n      font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase;\n      color: var(--color-primary); margin-bottom: 0.4rem;\n    }\n    .footer-tag { font-style: italic; opacity: 0.8; margin-bottom: 1.4rem; }\n    .footer-credits { font-size: 0.78rem; opacity: 0.6; }\n\n    @media (max-width: 640px) {\n      .header-inner { flex-direction: column; padding-bottom: 0.9rem; }\n      .slideshow-grid { grid-template-columns: 1fr; }\n      .hero-section { min-height: 60vh; }\n    }\n  </style>\n</body>\n</html>\n",
  "content_schema": [
    {
      "key": "hero_eyebrow",
      "type": "text",
      "max_chars": 60,
      "description": "Micro-label atmosferica sopra il titolo hero (es. evocazione di forno artigianale fiorentino). Nessun fatto specifico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 160,
      "description": "Frase atmosferica del hero, calda e sensoriale, che evoca pane appena sfornato e tradizione. Nessun fatto verificabile.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_intro",
      "type": "text",
      "max_chars": 180,
      "description": "Frase in corsivo che apre la sezione storia, tono evocativo e familiare. Niente nomi, date o indirizzi specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 600,
      "description": "Paragrafo narrativo atmosferico sulla passione artigianale e l'accoglienza della bottega. Tono caldo, niente fatti verificabili (questi sono coperti da data.description).",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "slideshow_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Breve introduzione atmosferica alla galleria fotografica del laboratorio e dei banchi del forno.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "products_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione atmosferica alla sezione specialità, che invita a scoprire dolci e salati. Niente nomi di prodotto specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contact_invite",
      "type": "text",
      "max_chars": 250,
      "description": "Invito caldo a passare in bottega / a contattare il forno. Atmosferico, senza indirizzi o numeri specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tag",
      "type": "text",
      "max_chars": 100,
      "description": "Breve frase di chiusura nel footer, tono affettuoso e artigianale. Nessun fatto specifico.",
      "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",
    "products_or_services[]",
    "images.logo",
    "images.slideshow[]",
    "visual_identity.color_palette.primary",
    "visual_identity.color_palette.secondary",
    "visual_identity.color_palette.accent",
    "visual_identity.color_palette.background",
    "visual_identity.color_palette.text"
  ],
  "ui_translations": {
    "nav_story": "La Storia",
    "nav_products": "Specialità",
    "nav_gallery": "Il Forno",
    "nav_contacts": "Contatti",
    "cta_discover": "Scopri le specialità",
    "section_title_story": "La nostra storia",
    "section_title_products": "Le nostre specialità",
    "section_title_slideshow": "Dentro il forno",
    "section_title_contacts": "Contatti",
    "label_address": "Indirizzo",
    "label_phone": "Telefono",
    "label_email": "Email",
    "label_hours": "Orari",
    "footer_credits": "Realizzato con cura"
  }
}