{
  "reasoning": "Melodious è una scuola di musica con forte focus su expertise umana e dedizione personale. Ho scelto '02-warm-artisanal-heritage' adattato al contesto musicale: hero dominante in rosso primario, alternanza sezioni testo/immagini con gallery di docenti e studio, palette calda (rosso + oro + cream) che evoca intimità e trasformazione. Typography bold moderna comunica autorità; layout fluido verticale scandisce il percorso formativo come storytelling.",
  "selected_reference_style": "02-warm-artisanal-heritage",
  "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 || \"#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<!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;500;600;700&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\" />\n</head>\n<body>\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: 'Playfair Display', 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      line-height: 1.6;\n      background-color: var(--color-background);\n    }\n    \n    a {\n      color: var(--color-primary);\n      text-decoration: none;\n      transition: opacity 0.3s ease;\n    }\n    \n    a:hover {\n      opacity: 0.8;\n    }\n  </style>\n\n  <!-- HEADER -->\n  <header class=\"header\">\n    <div class=\"header-container\">\n      <div class=\"logo-area\">\n        {data.images.logo && (\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} class=\"logo\" />\n        )}\n        <h1 class=\"brand-name\">{data.business_name}</h1>\n      </div>\n      <nav class=\"nav-main\" aria-label={i.nav_label || \"Navigazione principale\"}>\n        <a href=\"#servizi\">{i.nav_services}</a>\n        <a href=\"#docenti\">{i.nav_team}</a>\n        <a href=\"#galleria\">{i.nav_gallery}</a>\n        <a href=\"#contatti\">{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\" class=\"lang-active\">{loc.toUpperCase()}</span>\n              : <a href={href} class=\"lang-link\">{loc.toUpperCase()}</a>;\n          })}\n        </nav>\n      )}\n    </div>\n  </header>\n\n  <!-- HERO -->\n  <section class=\"hero\">\n    <div class=\"hero-content\">\n      <h2 class=\"hero-title\">{copy.hero_tagline}</h2>\n      <p class=\"hero-subtitle\">{data.category}</p>\n      <a href=\"#servizi\" class=\"cta-primary\">{i.cta_discover}</a>\n    </div>\n  </section>\n\n  <!-- ABOUT SECTION -->\n  <section class=\"about\" id=\"chi-siamo\">\n    <div class=\"about-container\">\n      <div class=\"about-text\">\n        <h3 class=\"section-title\">{i.section_story}</h3>\n        <p class=\"about-intro\">{copy.story_intro}</p>\n        <p class=\"about-body\">{copy.story_paragraph}</p>\n        <div class=\"credentials-list\">\n          <div class=\"credential-item\">\n            <span class=\"credential-label\">{i.credential_training}</span>\n          </div>\n          <div class=\"credential-item\">\n            <span class=\"credential-label\">{i.credential_orchestra}</span>\n          </div>\n          <div class=\"credential-item\">\n            <span class=\"credential-label\">{i.credential_dedication}</span>\n          </div>\n        </div>\n      </div>\n      <div class=\"about-visual\">\n        {data.images.team && data.images.team.length > 0 && (\n          <img src={imgUrl(data.images.team[0].path)} alt={data.images.team[0].alt} class=\"about-image\" />\n        )}\n      </div>\n    </div>\n  </section>\n\n  <!-- SERVICES SECTION -->\n  <section class=\"services\" id=\"servizi\">\n    <div class=\"services-container\">\n      <h3 class=\"section-title\">{i.section_services}</h3>\n      <p class=\"section-intro\">{copy.services_intro}</p>\n      <div class=\"services-grid\">\n        {data.products_or_services && data.products_or_services.map(service => (\n          <article class=\"service-card\">\n            <h4 class=\"service-name\">{service.name}</h4>\n            {service.description && <p class=\"service-desc\">{service.description}</p>}\n          </article>\n        ))}\n      </div>\n    </div>\n  </section>\n\n  <!-- TEAM SECTION -->\n  {data.images.team && data.images.team.length > 0 && (\n    <section class=\"team\" id=\"docenti\">\n      <div class=\"team-container\">\n        <h3 class=\"section-title\">{i.section_team}</h3>\n        <p class=\"section-intro\">{copy.team_intro}</p>\n        <div class=\"team-grid\">\n          {data.images.team.map((member, idx) => (\n            <div class=\"team-card\">\n              <img src={imgUrl(member.path)} alt={member.alt} class=\"team-image\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- GALLERY SECTION -->\n  {data.images.gallery && data.images.gallery.length > 0 && (\n    <section class=\"gallery\" id=\"galleria\">\n      <div class=\"gallery-container\">\n        <h3 class=\"section-title\">{i.section_gallery}</h3>\n        <p class=\"section-intro\">{copy.gallery_intro}</p>\n        <div class=\"gallery-grid\">\n          {data.images.gallery.map(photo => (\n            <div class=\"gallery-item\">\n              <img src={imgUrl(photo.path)} alt={photo.alt} />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )}\n\n  <!-- FOOTER -->\n  <footer class=\"footer\">\n    <div class=\"footer-container\">\n      <div class=\"footer-content\">\n        <div class=\"footer-brand\">\n          {data.images.logo && (\n            <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} class=\"footer-logo\" />\n          )}\n          <p class=\"footer-tagline\">{data.description && data.description.substring(0, 120)}...</p>\n        </div>\n        <div class=\"footer-links\">\n          <h5>{i.footer_nav}</h5>\n          <a href=\"#chi-siamo\">{i.nav_story}</a>\n          <a href=\"#servizi\">{i.nav_services}</a>\n          <a href=\"#galleria\">{i.nav_gallery}</a>\n        </div>\n      </div>\n      <div class=\"footer-bottom\">\n        <p class=\"footer-credit\">{i.footer_credits}</p>\n      </div>\n    </div>\n  </footer>\n\n  <style>\n    /* HEADER */\n    .header {\n      background-color: var(--color-primary);\n      color: white;\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.1);\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-area {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n    }\n    \n    .logo {\n      width: 50px;\n      height: 50px;\n      border-radius: 50%;\n      object-fit: contain;\n    }\n    \n    .brand-name {\n      font-family: var(--font-heading);\n      font-size: 1.8rem;\n      font-weight: 700;\n      margin: 0;\n    }\n    \n    .nav-main {\n      display: flex;\n      gap: 2rem;\n      margin: 0 auto;\n    }\n    \n    .nav-main a {\n      color: white;\n      font-weight: 500;\n      border-bottom: 2px solid transparent;\n      padding-bottom: 0.5rem;\n      transition: border-color 0.3s ease;\n    }\n    \n    .nav-main a:hover {\n      border-bottom-color: var(--color-accent);\n    }\n    \n    .lang-switcher {\n      display: flex;\n      gap: 0.6em;\n      font-size: 0.85rem;\n      font-weight: 600;\n      letter-spacing: 0.05em;\n    }\n    \n    .lang-active {\n      color: var(--color-accent);\n      font-weight: 700;\n    }\n    \n    .lang-link {\n      color: rgba(255, 255, 255, 0.7);\n      transition: color 0.3s ease;\n    }\n    \n    .lang-link:hover {\n      color: white;\n    }\n    \n    /* HERO */\n    .hero {\n      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);\n      color: white;\n      padding: 8rem 2rem;\n      text-align: center;\n      min-height: 70vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    \n    .hero-content {\n      max-width: 700px;\n    }\n    \n    .hero-title {\n      font-family: var(--font-heading);\n      font-size: clamp(2.5rem, 8vw, 5rem);\n      font-weight: 700;\n      margin-bottom: 1rem;\n      line-height: 1.2;\n    }\n    \n    .hero-subtitle {\n      font-size: 1.5rem;\n      font-weight: 400;\n      margin-bottom: 2rem;\n      opacity: 0.95;\n    }\n    \n    .cta-primary {\n      display: inline-block;\n      background-color: var(--color-accent);\n      color: var(--color-text);\n      padding: 1rem 2.5rem;\n      border-radius: 4px;\n      font-weight: 600;\n      font-size: 1.1rem;\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n    \n    .cta-primary:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 16px rgba(201, 162, 39, 0.3);\n    }\n    \n    /* ABOUT */\n    .about {\n      background-color: white;\n      padding: 5rem 2rem;\n    }\n    \n    .about-container {\n      max-width: 1200px;\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 3rem;\n      align-items: center;\n    }\n    \n    .section-title {\n      font-family: var(--font-heading);\n      font-size: 2.5rem;\n      font-weight: 700;\n      color: var(--color-primary);\n      margin-bottom: 1.5rem;\n      letter-spacing: 0.02em;\n    }\n    \n    .about-intro {\n      font-size: 1.3rem;\n      font-weight: 600;\n      color: var(--color-secondary);\n      margin-bottom: 1.5rem;\n    }\n    \n    .about-body {\n      font-size: 1rem;\n      line-height: 1.8;\n      margin-bottom: 2rem;\n      color: var(--color-text);\n    }\n    \n    .credentials-list {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n    \n    .credential-item {\n      padding-left: 2rem;\n      position: relative;\n    }\n    \n    .credential-item::before {\n      content: \"♪\";\n      position: absolute;\n      left: 0;\n      color: var(--color-accent);\n      font-size: 1.5rem;\n      font-weight: bold;\n    }\n    \n    .credential-label {\n      font-weight: 600;\n      color: var(--color-text);\n    }\n    \n    .about-image {\n      width: 100%;\n      height: auto;\n      border-radius: 8px;\n      object-fit: cover;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n    }\n    \n    /* SERVICES */\n    .services {\n      background-color: var(--color-background);\n      padding: 5rem 2rem;\n    }\n    \n    .services-container {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n    \n    .section-intro {\n      font-size: 1.1rem;\n      color: var(--color-text);\n      margin-bottom: 3rem;\n      line-height: 1.7;\n    }\n    \n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 2rem;\n    }\n    \n    .service-card {\n      background-color: white;\n      padding: 2rem;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n      border-left: 4px solid var(--color-accent);\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n    \n    .service-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);\n    }\n    \n    .service-name {\n      font-family: var(--font-heading);\n      font-size: 1.3rem;\n      font-weight: 600;\n      color: var(--color-primary);\n      margin-bottom: 0.8rem;\n    }\n    \n    .service-desc {\n      font-size: 0.95rem;\n      color: var(--color-text);\n      line-height: 1.6;\n    }\n    \n    /* TEAM */\n    .team {\n      background-color: white;\n      padding: 5rem 2rem;\n    }\n    \n    .team-container {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n    \n    .team-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n      gap: 2rem;\n    }\n    \n    .team-card {\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);\n      transition: transform 0.3s ease;\n    }\n    \n    .team-card:hover {\n      transform: scale(1.02);\n    }\n    \n    .team-image {\n      width: 100%;\n      height: 350px;\n      object-fit: cover;\n      display: block;\n    }\n    \n    /* GALLERY */\n    .gallery {\n      background-color: var(--color-background);\n      padding: 5rem 2rem;\n    }\n    \n    .gallery-container {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n    \n    .gallery-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: 1.5rem;\n    }\n    \n    .gallery-item {\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\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    /* FOOTER */\n    .footer {\n      background-color: var(--color-text);\n      color: white;\n      padding: 4rem 2rem 2rem;\n    }\n    \n    .footer-container {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n    \n    .footer-content {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 3rem;\n      margin-bottom: 2rem;\n      padding-bottom: 2rem;\n      border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n    }\n    \n    .footer-brand {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n    \n    .footer-logo {\n      width: 50px;\n      height: 50px;\n      border-radius: 50%;\n      object-fit: contain;\n    }\n    \n    .footer-tagline {\n      font-size: 0.95rem;\n      line-height: 1.6;\n      color: rgba(255, 255, 255, 0.8);\n    }\n    \n    .footer-links {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n    \n    .footer-links h5 {\n      font-size: 1.1rem;\n      font-weight: 600;\n      margin-bottom: 0.5rem;\n      color: var(--color-accent);\n    }\n    \n    .footer-links a {\n      color: rgba(255, 255, 255, 0.8);\n      transition: color 0.3s ease;\n    }\n    \n    .footer-links a:hover {\n      color: var(--color-accent);\n    }\n    \n    .footer-bottom {\n      text-align: center;\n      padding-top: 2rem;\n      border-top: 1px solid rgba(255, 255, 255, 0.2);\n    }\n    \n    .footer-credit {\n      font-size: 0.9rem;\n      color: rgba(255, 255, 255, 0.6);\n    }\n    \n    /* RESPONSIVE */\n    @media (max-width: 768px) {\n      .header-container {\n        flex-direction: column;\n        gap: 1rem;\n      }\n      \n      .nav-main {\n        flex-wrap: wrap;\n        gap: 1rem;\n        margin: 0;\n      }\n      \n      .about-container {\n        grid-template-columns: 1fr;\n      }\n      \n      .footer-content {\n        grid-template-columns: 1fr;\n      }\n      \n      .hero {\n        padding: 4rem 1.5rem;\n        min-height: auto;\n      }\n    }\n  </style>\n</body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 150,
      "description": "Headline emozionale e accattivante per la sezione hero. Comunica la passione per la musica e la trasformazione personale.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_intro",
      "type": "text",
      "max_chars": 100,
      "description": "Sottotitolo narrativo per la sezione 'Chi siamo'. Poche parole che introducono l'expertise di Benedetta.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 500,
      "description": "Racconto dettagliato della storia formativa e del percorso musicale. Tone caldo e aspirazionale.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_intro",
      "type": "text",
      "max_chars": 200,
      "description": "Introduzione atmosferica alla sezione servizi/corsi. Descrivi brevemente l'offerta formativa senza dettagli specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "team_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Tagline per la sezione docenti/team. Comunica dedizione e professionalità.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Breve descrizione atmosferica della galleria studio/spazi. Evoca l'ambiente creativo e professionale.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "category",
    "description",
    "products_or_services[]",
    "products_or_services[].name",
    "images.logo",
    "images.logo.path",
    "images.logo.alt",
    "images.team",
    "images.team[].path",
    "images.team[].alt",
    "images.gallery",
    "images.gallery[].path",
    "images.gallery[].alt",
    "available_locales",
    "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_label": "Navigazione principale",
    "nav_services": "Corsi",
    "nav_team": "Docenti",
    "nav_gallery": "Studio",
    "nav_story": "Chi siamo",
    "nav_contacts": "Contatti",
    "section_story": "Chi siamo",
    "section_services": "I nostri corsi",
    "section_team": "I nostri docenti",
    "section_gallery": "Il nostro studio",
    "credential_training": "Formazione presso Accademia Musicale di Firenze",
    "credential_orchestra": "Membro Orchestra Giovanile di Firenze",
    "credential_dedication": "Diplomata in Pianoforte Classico",
    "cta_discover": "Scopri i corsi",
    "footer_nav": "Navigazione",
    "footer_credits": "Realizzato con dedizione per la musica",
    "lang_switcher_label": "Lingua"
  }
}