{
  "reasoning": "Melodious è una scuola di musica contemporanea con eredità classica forte. Ho scelto 'warm-artisanal-heritage' come fondamento, ma l'ho adattato al brief di stile richiesto: fondo chiaro respirante, logo minimalista in hero, sans-serif geometrico clean, uso strategico del rosso (#E53935) solo su CTA e accenti. La palette calda (rosso + burgundy + oro) crea sofisticazione moderna. Le sezioni di team e gallery mostrano la comunità vivace; il flusso verticale enfatizza lo spazio bianco. Vibe: contemporanea, colti, accessibile.",
  "selected_reference_style": "warm-artisanal-heritage",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\n\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#E53935\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#8B2E2E\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#C9A227\",\n  background: data.visual_identity?.color_palette?.background || \"#F5F5F5\",\n  text:       data.visual_identity?.color_palette?.text       || \"#2C2C2C\",\n};\n---\n\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;500;600;700&family=Playfair+Display:wght@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;500;600;700&family=Playfair+Display:wght@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:        'Manrope', 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, 3.5rem);\n      line-height: 1.2;\n    }\n\n    h2 {\n      font-size: clamp(1.75rem, 4vw, 2.5rem);\n      line-height: 1.3;\n      margin-top: 2rem;\n      margin-bottom: 1.5rem;\n    }\n\n    h3 {\n      font-size: clamp(1.25rem, 2.5vw, 1.5rem);\n      margin-top: 1.5rem;\n      margin-bottom: 1rem;\n    }\n\n    p {\n      font-size: 1rem;\n      margin-bottom: 1rem;\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-secondary);\n      text-decoration: underline;\n    }\n\n    button, .cta {\n      background-color: var(--color-primary);\n      color: #FFFFFF;\n      padding: 0.875rem 2rem;\n      border: none;\n      border-radius: 4px;\n      font-family: var(--font-body);\n      font-size: 1rem;\n      font-weight: 600;\n      cursor: pointer;\n      display: inline-block;\n      transition: background-color 0.3s ease, transform 0.2s ease;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n    }\n\n    button:hover, .cta:hover {\n      background-color: var(--color-secondary);\n      transform: translateY(-2px);\n    }\n\n    section {\n      padding: 5rem 2rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .header {\n      background-color: #FFFFFF;\n      padding: 1.5rem 2rem;\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n    }\n\n    .logo {\n      width: 60px;\n      height: 60px;\n      border-radius: 50%;\n      overflow: hidden;\n      background-color: var(--color-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .logo img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .business-name {\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: var(--color-text);\n      letter-spacing: 0.05em;\n    }\n\n    .nav {\n      display: flex;\n      gap: 2rem;\n      align-items: center;\n    }\n\n    .nav a {\n      font-size: 0.95rem;\n      font-weight: 500;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      position: relative;\n      padding-bottom: 0.25rem;\n    }\n\n    .nav a::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 0;\n      height: 2px;\n      background-color: var(--color-primary);\n      transition: width 0.3s ease;\n    }\n\n    .nav a:hover::after {\n      width: 100%;\n    }\n\n    .lang-switcher {\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      font-size: 0.85rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-left: 2rem;\n    }\n\n    .lang-switcher a,\n    .lang-switcher span {\n      padding: 0.25rem 0.75rem;\n      border-radius: 3px;\n      transition: all 0.3s ease;\n    }\n\n    .lang-switcher a {\n      color: var(--color-text);\n      opacity: 0.65;\n    }\n\n    .lang-switcher a:hover {\n      opacity: 1;\n      background-color: rgba(229, 57, 53, 0.1);\n    }\n\n    .lang-switcher span[aria-current=\"page\"] {\n      color: #FFFFFF;\n      background-color: var(--color-primary);\n      font-weight: 700;\n    }\n\n    /* HERO SECTION */\n    .hero-section {\n      background: linear-gradient(135deg, var(--color-background) 0%, #FFFFFF 100%);\n      padding: 6rem 2rem;\n      text-align: center;\n      min-height: 60vh;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .hero-content {\n      max-width: 800px;\n    }\n\n    .hero-logo {\n      width: 120px;\n      height: 120px;\n      margin: 0 auto 2rem;\n      border-radius: 50%;\n      overflow: hidden;\n      background-color: var(--color-primary);\n      box-shadow: 0 10px 30px rgba(229, 57, 53, 0.15);\n    }\n\n    .hero-logo img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .hero-headline {\n      font-size: clamp(2.5rem, 6vw, 4rem);\n      font-weight: 700;\n      color: var(--color-text);\n      letter-spacing: 0.03em;\n      margin-bottom: 1rem;\n    }\n\n    .hero-tagline {\n      font-size: 1.25rem;\n      color: var(--color-secondary);\n      margin-bottom: 2.5rem;\n      font-weight: 500;\n      line-height: 1.6;\n    }\n\n    .hero-cta {\n      margin-top: 2rem;\n      display: inline-block;\n    }\n\n    /* STORY SECTION */\n    .story-section {\n      background-color: #FFFFFF;\n      border-top: 3px solid var(--color-accent);\n      border-bottom: 3px solid var(--color-accent);\n    }\n\n    .story-content {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 3rem;\n      align-items: center;\n    }\n\n    .story-text h2 {\n      color: var(--color-secondary);\n      margin-bottom: 1.5rem;\n    }\n\n    .story-text p {\n      color: var(--color-text);\n      margin-bottom: 1.5rem;\n      line-height: 1.8;\n      font-weight: 400;\n    }\n\n    .story-highlight {\n      background-color: rgba(229, 57, 53, 0.1);\n      padding: 2rem;\n      border-left: 4px solid var(--color-primary);\n      border-radius: 4px;\n      margin: 2rem 0;\n    }\n\n    .story-highlight p {\n      font-style: italic;\n      color: var(--color-secondary);\n      margin: 0;\n    }\n\n    /* SERVICES SECTION */\n    .services-section {\n      background-color: var(--color-background);\n    }\n\n    .section-title {\n      text-align: center;\n      font-size: clamp(2rem, 4vw, 2.5rem);\n      color: var(--color-text);\n      margin-bottom: 1rem;\n      letter-spacing: 0.02em;\n    }\n\n    .section-subtitle {\n      text-align: center;\n      font-size: 1.1rem;\n      color: var(--color-secondary);\n      margin-bottom: 3rem;\n      font-weight: 500;\n    }\n\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 2rem;\n      margin-top: 2.5rem;\n    }\n\n    .service-card {\n      background-color: #FFFFFF;\n      padding: 2.5rem 2rem;\n      border-radius: 6px;\n      border: 1px solid rgba(229, 57, 53, 0.1);\n      text-align: center;\n      transition: all 0.3s ease;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n    }\n\n    .service-card:hover {\n      box-shadow: 0 12px 24px rgba(229, 57, 53, 0.15);\n      transform: translateY(-4px);\n      border-color: var(--color-primary);\n    }\n\n    .service-card h3 {\n      color: var(--color-primary);\n      margin-bottom: 1rem;\n      font-size: 1.4rem;\n    }\n\n    /* TEAM SECTION */\n    .team-section {\n      background-color: #FFFFFF;\n      border-top: 3px solid var(--color-secondary);\n    }\n\n    .team-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: 2.5rem;\n      margin-top: 2.5rem;\n    }\n\n    .team-image {\n      width: 100%;\n      border-radius: 8px;\n      overflow: hidden;\n      aspect-ratio: 16/9;\n      background-color: #E0E0E0;\n      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n    }\n\n    .team-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.3s ease;\n    }\n\n    .team-image:hover img {\n      transform: scale(1.05);\n    }\n\n    /* GALLERY SECTION */\n    .gallery-section {\n      background-color: var(--color-background);\n    }\n\n    .gallery-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n      gap: 2rem;\n      margin-top: 2.5rem;\n    }\n\n    .gallery-item {\n      position: relative;\n      overflow: hidden;\n      border-radius: 6px;\n      aspect-ratio: 4/3;\n      background-color: #E0E0E0;\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n      transition: all 0.3s ease;\n    }\n\n    .gallery-item img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.3s ease, filter 0.3s ease;\n    }\n\n    .gallery-item:hover img {\n      transform: scale(1.08);\n      filter: brightness(0.9);\n    }\n\n    /* FOOTER */\n    .footer {\n      background-color: var(--color-text);\n      color: #FFFFFF;\n      padding: 4rem 2rem 2rem;\n      text-align: center;\n    }\n\n    .footer-content {\n      max-width: 1200px;\n      margin: 0 auto 2rem;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 2rem;\n      margin-bottom: 2rem;\n    }\n\n    .footer-column h4 {\n      font-size: 1rem;\n      margin-bottom: 1rem;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      font-weight: 600;\n    }\n\n    .footer-column p,\n    .footer-column a {\n      font-size: 0.9rem;\n      color: rgba(255, 255, 255, 0.85);\n      line-height: 1.8;\n    }\n\n    .footer-column a:hover {\n      color: var(--color-primary);\n      text-decoration: underline;\n    }\n\n    .footer-divider {\n      border-top: 1px solid rgba(255, 255, 255, 0.2);\n      margin: 2rem 0;\n    }\n\n    .footer-bottom {\n      font-size: 0.85rem;\n      color: rgba(255, 255, 255, 0.7);\n    }\n\n    /* RESPONSIVE */\n    @media (max-width: 768px) {\n      .header {\n        flex-direction: column;\n        gap: 1rem;\n      }\n\n      .nav {\n        flex-wrap: wrap;\n        gap: 1rem;\n        justify-content: center;\n      }\n\n      .lang-switcher {\n        margin-left: 0;\n        order: 3;\n        width: 100%;\n        justify-content: center;\n      }\n\n      .story-content {\n        grid-template-columns: 1fr;\n        gap: 2rem;\n      }\n\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .footer-content {\n        grid-template-columns: 1fr;\n      }\n    }\n  </style>\n</head>\n<body>\n  <!-- HEADER -->\n  <header class=\"header\">\n    <div class=\"header-left\">\n      {data.images.logo && (\n        <div class=\"logo\">\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        </div>\n      )}\n      <div class=\"business-name\">{data.business_name}</div>\n    </div>\n    <nav class=\"nav\">\n      <a href=\"#story\">{i.nav_story}</a>\n      <a href=\"#services\">{i.nav_services}</a>\n      <a href=\"#team\">{i.nav_team}</a>\n      <a href=\"#gallery\">{i.nav_gallery}</a>\n      <a href=\"#contacts\">{i.nav_contacts}</a>\n    </nav>\n    {data.available_locales && data.available_locales.length > 1 && (\n      <nav aria-label={i.lang_switcher_label || \"Lingua\"} class=\"lang-switcher\">\n        {data.available_locales.map((loc, idx) => {\n          const isActive = loc === lang;\n          const base = import.meta.env.BASE_URL.replace(/\\/$/, '');\n          const href = idx === 0 ? `${base}/` : `${base}/${loc}/`;\n          return isActive\n            ? <span aria-current=\"page\">{loc.toUpperCase()}</span>\n            : <a href={href}>{loc.toUpperCase()}</a>;\n        })}\n      </nav>\n    )}\n  </header>\n\n  <!-- HERO SECTION -->\n  <section class=\"hero-section\" id=\"hero\">\n    <div class=\"hero-content\">\n      {data.images.logo && (\n        <div class=\"hero-logo\">\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        </div>\n      )}\n      <h1 class=\"hero-headline\">{data.business_name}</h1>\n      <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n      <a href=\"#services\" class=\"cta hero-cta\">{i.cta_discover}</a>\n    </div>\n  </section>\n\n  <!-- STORY SECTION -->\n  <section class=\"story-section\" id=\"story\">\n    <div class=\"story-content\">\n      <div class=\"story-text\">\n        <h2>{i.section_title_story}</h2>\n        <p>{copy.story_paragraph_1}</p>\n        <div class=\"story-highlight\">\n          <p>{copy.story_highlight}</p>\n        </div>\n        <p>{copy.story_paragraph_2}</p>\n      </div>\n      <div class=\"story-visual\">\n        <div style=\"background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 8px; min-height: 400px; display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; font-weight: bold; text-align: center; padding: 2rem;\">\n          🎵 {copy.story_visual_text}\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- SERVICES SECTION -->\n  <section class=\"services-section\" id=\"services\">\n    <h2 class=\"section-title\">{i.section_title_services}</h2>\n    <p class=\"section-subtitle\">{copy.services_intro}</p>\n    <div class=\"services-grid\">\n      {data.products_or_services.map((service) => (\n        <article class=\"service-card\">\n          <h3>{service.name}</h3>\n          {service.description && <p>{service.description}</p>}\n        </article>\n      ))}\n    </div>\n  </section>\n\n  <!-- TEAM SECTION -->\n  {data.images.team && data.images.team.length > 0 && (\n    <section class=\"team-section\" id=\"team\">\n      <h2 class=\"section-title\">{i.section_title_team}</h2>\n      <p class=\"section-subtitle\">{copy.team_intro}</p>\n      <div class=\"team-grid\">\n        {data.images.team.map((img) => (\n          <figure class=\"team-image\">\n            <img src={imgUrl(img.path)} alt={img.alt} />\n          </figure>\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- GALLERY SECTION -->\n  {data.images.gallery && data.images.gallery.length > 0 && (\n    <section class=\"gallery-section\" id=\"gallery\">\n      <h2 class=\"section-title\">{i.section_title_gallery}</h2>\n      <p class=\"section-subtitle\">{copy.gallery_intro}</p>\n      <div class=\"gallery-grid\">\n        {data.images.gallery.map((img) => (\n          <figure class=\"gallery-item\">\n            <img src={imgUrl(img.path)} alt={img.alt} />\n          </figure>\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- FOOTER -->\n  <footer class=\"footer\" id=\"contacts\">\n    <div class=\"footer-content\">\n      <div class=\"footer-column\">\n        <h4>{i.footer_about}</h4>\n        <p>{data.business_name} — {data.category}</p>\n        <p>{copy.footer_tagline}</p>\n      </div>\n      {data.contacts && (\n        <div class=\"footer-column\">\n          <h4>{i.footer_contacts}</h4>\n          {data.contacts.address && <p>📍 {data.contacts.address}</p>}\n          {data.contacts.phone && <p>📞 <a href={`tel:${data.contacts.phone}`}>{data.contacts.phone}</a></p>}\n          {data.contacts.email && <p>✉️ <a href={`mailto:${data.contacts.email}`}>{data.contacts.email}</a></p>}\n          {data.contacts.hours && <p>⏰ {data.contacts.hours}</p>}\n        </div>\n      )}\n      <div class=\"footer-column\">\n        <h4>{i.footer_nav}</h4>\n        <p><a href=\"#story\">{i.nav_story}</a></p>\n        <p><a href=\"#services\">{i.nav_services}</a></p>\n        <p><a href=\"#team\">{i.nav_team}</a></p>\n        <p><a href=\"#gallery\">{i.nav_gallery}</a></p>\n      </div>\n    </div>\n    <div class=\"footer-divider\"></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": "Sottotitolo atmosferico sotto il nome. Evoca il valore della formazione musicale e l'approccio contemporaneo.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph_1",
      "type": "richtext",
      "max_chars": 400,
      "description": "Primo paragrafo della storia. Racconta l'inizio del percorso musicale e la dedizione dall'infanzia.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_highlight",
      "type": "text",
      "max_chars": 200,
      "description": "Citazione o frase chiave estratta dalle esperienze internazionali e dall'orchestra giovanile.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph_2",
      "type": "richtext",
      "max_chars": 300,
      "description": "Secondo paragrafo. Racconta il ruolo attuale nell'insegnamento e la passione trasmessa ai nuovi musicisti.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_visual_text",
      "type": "text",
      "max_chars": 80,
      "description": "Testo breve per la sezione visiva della storia. Una parola-chiave o una frase motivazionale musicale.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Introduzione alla sezione servizi. Descrive l'approccio didattico e l'ampiezza dell'offerta formativa.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "team_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Introduzione alla sezione team. Sottolinea la comunità e l'atmosfera collaborativa della scuola.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Introduzione alla galleria. Descrizione degli spazi e dell'ambiente didattico della scuola.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tagline",
      "type": "text",
      "max_chars": 120,
      "description": "Tagline breve per il footer. Riassume la missione di Melodious in una frase.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "category",
    "description",
    "contacts.address",
    "contacts.phone",
    "contacts.email",
    "contacts.hours",
    "products_or_services[]",
    "products_or_services[].name",
    "images.logo",
    "images.team[]",
    "images.gallery[]",
    "visual_identity.color_palette",
    "available_locales"
  ],
  "ui_translations": {
    "nav_story": "La nostra storia",
    "nav_services": "Lezioni",
    "nav_team": "Comunità",
    "nav_gallery": "Galleria",
    "nav_contacts": "Contatti",
    "section_title_story": "La storia di Melodious",
    "section_title_services": "Le nostre lezioni",
    "section_title_team": "La comunità Melodious",
    "section_title_gallery": "I nostri spazi",
    "cta_discover": "Scopri le lezioni",
    "footer_about": "Chi siamo",
    "footer_contacts": "Contatti",
    "footer_nav": "Navigazione",
    "footer_credits": "Realizzato con cura per Melodious — Scuola di Musica Contemporanea",
    "lang_switcher_label": "Lingua"
  }
}