{
  "reasoning": "Melodious è una scuola di musica contemporanea con una palette warm e vibrante (rosso vivace + oro). Ho scelto '02-warm-artisanal-heritage' come base stilistica, adattandolo con il design language richiesto: hero testuale con pattern geometrico in accent color, card servizi in layout modulare alternato, gallery immersiva e team showcase. La tipografia è sans-serif modern bold per headers, il ritmo è scandito da linee divisorie in oro, e il tono narrativo enfatizza la dedizione artistica e l'inclusività.",
  "selected_reference_style": "02-warm-artisanal-heritage",
  "astro_file": "---\nimport { Image } from 'astro:assets';\n\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 href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;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=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      --font-heading: 'Inter', sans-serif;\n      --font-body: 'Inter', sans-serif;\n    }\n\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    html, body {\n      height: 100%;\n      font-family: var(--font-body);\n      color: var(--color-text);\n      background: white;\n      line-height: 1.6;\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    }\n\n    /* HEADER */\n    header {\n      background: var(--color-primary);\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    }\n\n    .header-logo {\n      width: 60px;\n      height: 60px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .header-logo img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n    }\n\n    .header-nav {\n      display: flex;\n      gap: 2rem;\n      align-items: center;\n      flex: 1;\n      justify-content: center;\n    }\n\n    .header-nav a {\n      color: white;\n      font-weight: 500;\n      font-size: 0.95rem;\n      transition: opacity 0.3s ease;\n    }\n\n    .header-nav a:hover {\n      opacity: 0.8;\n      color: white;\n    }\n\n    .lang-switcher {\n      display: flex;\n      gap: 0.6em;\n      align-items: center;\n      font-size: 0.85rem;\n      font-weight: 600;\n      margin-left: auto;\n    }\n\n    .lang-switcher a,\n    .lang-switcher span {\n      color: white;\n      transition: opacity 0.3s ease;\n    }\n\n    .lang-switcher a:hover {\n      opacity: 0.8;\n      color: white;\n    }\n\n    .lang-switcher span[aria-current=\"page\"] {\n      font-weight: 700;\n      color: var(--color-accent);\n    }\n\n    .lang-switcher::before {\n      content: '|';\n      color: rgba(255,255,255,0.4);\n      margin-right: 0.4em;\n    }\n\n    /* HERO */\n    .hero-section {\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      position: relative;\n      overflow: hidden;\n      min-height: 60vh;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .hero-section::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: 400px;\n      height: 400px;\n      background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);\n      opacity: 0.15;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n\n    .hero-section::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 300px;\n      height: 300px;\n      background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);\n      opacity: 0.1;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n\n    .hero-content {\n      position: relative;\n      z-index: 1;\n      max-width: 700px;\n    }\n\n    .hero-content h1 {\n      font-family: var(--font-heading);\n      font-size: clamp(2.5rem, 6vw, 4.5rem);\n      font-weight: 700;\n      letter-spacing: 0.05em;\n      margin-bottom: 1rem;\n      line-height: 1.2;\n    }\n\n    .hero-content .tagline {\n      font-size: 1.25rem;\n      font-weight: 300;\n      letter-spacing: 0.02em;\n      margin-bottom: 2rem;\n      line-height: 1.6;\n      opacity: 0.95;\n    }\n\n    .hero-cta {\n      display: inline-block;\n      background: var(--color-accent);\n      color: var(--color-text);\n      padding: 0.9rem 2.5rem;\n      border-radius: 4px;\n      font-weight: 600;\n      font-size: 1rem;\n      transition: all 0.3s ease;\n      text-decoration: none;\n      border: 2px solid var(--color-accent);\n    }\n\n    .hero-cta:hover {\n      background: transparent;\n      color: var(--color-accent);\n    }\n\n    /* SECTIONS */\n    section {\n      padding: 6rem 2rem;\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    section h2 {\n      font-family: var(--font-heading);\n      font-size: clamp(1.8rem, 4vw, 2.8rem);\n      font-weight: 700;\n      letter-spacing: 0.02em;\n      margin-bottom: 0.5rem;\n      color: var(--color-primary);\n    }\n\n    .section-divider {\n      width: 80px;\n      height: 3px;\n      background: var(--color-accent);\n      margin: 1rem 0 3rem 0;\n    }\n\n    section p {\n      font-size: 1rem;\n      line-height: 1.8;\n      color: var(--color-text);\n      margin-bottom: 1.5rem;\n    }\n\n    /* SERVICES GRID */\n    .services-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 2rem;\n      margin: 3rem 0;\n    }\n\n    .service-card {\n      padding: 2rem;\n      border-radius: 6px;\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .service-card:nth-child(odd) {\n      background: var(--color-primary);\n      color: white;\n    }\n\n    .service-card:nth-child(even) {\n      background: var(--color-accent);\n      color: var(--color-text);\n    }\n\n    .service-card:nth-child(3n) {\n      background: var(--color-secondary);\n      color: white;\n    }\n\n    .service-card h3 {\n      font-family: var(--font-heading);\n      font-size: 1.4rem;\n      font-weight: 700;\n      letter-spacing: 0.01em;\n      margin-bottom: 1rem;\n    }\n\n    .service-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 24px rgba(0,0,0,0.15);\n    }\n\n    /* STORY SECTION */\n    .story-section {\n      background: var(--color-background);\n    }\n\n    .story-text {\n      max-width: 700px;\n      margin: 2rem 0;\n    }\n\n    /* TEAM SECTION */\n    .team-gallery {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: 2rem;\n      margin: 3rem 0;\n    }\n\n    .team-card {\n      border-radius: 6px;\n      overflow: hidden;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n      transition: all 0.3s ease;\n    }\n\n    .team-card img {\n      width: 100%;\n      height: 300px;\n      object-fit: cover;\n      display: block;\n    }\n\n    .team-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 24px rgba(0,0,0,0.2);\n    }\n\n    /* GALLERY SECTION */\n    .gallery-section {\n      background: var(--color-background);\n    }\n\n    .gallery-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));\n      gap: 1.5rem;\n      margin: 3rem 0;\n    }\n\n    .gallery-item {\n      border-radius: 6px;\n      overflow: hidden;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n      transition: all 0.3s ease;\n    }\n\n    .gallery-item img {\n      width: 100%;\n      height: 280px;\n      object-fit: cover;\n      display: block;\n      transition: transform 0.3s ease;\n    }\n\n    .gallery-item:hover img {\n      transform: scale(1.05);\n    }\n\n    .gallery-item:hover {\n      box-shadow: 0 8px 24px rgba(0,0,0,0.15);\n    }\n\n    /* FOOTER */\n    footer {\n      background: var(--color-primary);\n      color: white;\n      padding: 3rem 2rem 1.5rem;\n      text-align: center;\n    }\n\n    .footer-content {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .footer-logo {\n      width: 50px;\n      height: 50px;\n      margin: 0 auto 1.5rem;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .footer-logo img {\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      filter: brightness(0) invert(1);\n    }\n\n    .footer-text {\n      font-size: 0.95rem;\n      line-height: 1.6;\n      margin-bottom: 1.5rem;\n      opacity: 0.95;\n    }\n\n    .footer-divider {\n      width: 60px;\n      height: 2px;\n      background: var(--color-accent);\n      margin: 1.5rem auto;\n      opacity: 0.6;\n    }\n\n    .footer-credit {\n      font-size: 0.85rem;\n      opacity: 0.8;\n      margin-top: 1.5rem;\n      padding-top: 1rem;\n      border-top: 1px solid rgba(255,255,255,0.2);\n    }\n\n    /* RESPONSIVE */\n    @media (max-width: 768px) {\n      .header-nav {\n        flex-direction: column;\n        gap: 1rem;\n        margin-bottom: 1rem;\n      }\n\n      .lang-switcher {\n        margin-left: 0;\n        justify-content: center;\n      }\n\n      .hero-section {\n        padding: 4rem 1.5rem;\n        min-height: 50vh;\n      }\n\n      section {\n        padding: 4rem 1.5rem;\n      }\n\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .team-gallery {\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n      }\n\n      .gallery-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  </style>\n</head>\n<body>\n  <!-- HEADER -->\n  <header>\n    <div class=\"header-container\">\n      {data.images.logo && (\n        <div class=\"header-logo\">\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        </div>\n      )}\n      <nav class=\"header-nav\">\n        <a href=\"#services\">{i.nav_services}</a>\n        <a href=\"#story\">{i.nav_story}</a>\n        <a href=\"#team\">{i.nav_team}</a>\n        <a href=\"#gallery\">{i.nav_gallery}</a>\n      </nav>\n      {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    </div>\n  </header>\n\n  <!-- HERO -->\n  <section class=\"hero-section\" id=\"hero\">\n    <div class=\"hero-content\">\n      <h1>{data.business_name}</h1>\n      <p class=\"tagline\">{copy.hero_tagline}</p>\n      <a href=\"#services\" class=\"hero-cta\">{i.cta_discover}</a>\n    </div>\n  </section>\n\n  <!-- STORY -->\n  <section class=\"story-section\" id=\"story\">\n    <h2>{i.section_title_story}</h2>\n    <div class=\"section-divider\"></div>\n    <div class=\"story-text\">\n      <p>{copy.story_intro}</p>\n      <p>{copy.story_paragraph}</p>\n    </div>\n  </section>\n\n  <!-- SERVICES -->\n  <section id=\"services\">\n    <h2>{i.section_title_services}</h2>\n    <div class=\"section-divider\"></div>\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 -->\n  {data.images.team.length > 0 && (\n    <section id=\"team\">\n      <h2>{i.section_title_team}</h2>\n      <div class=\"section-divider\"></div>\n      <p>{copy.team_intro}</p>\n      <div class=\"team-gallery\">\n        {data.images.team.map((tm) => (\n          <article class=\"team-card\">\n            <img src={imgUrl(tm.path)} alt={tm.alt} />\n          </article>\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- GALLERY -->\n  {data.images.gallery.length > 0 && (\n    <section class=\"gallery-section\" id=\"gallery\">\n      <h2>{i.section_title_gallery}</h2>\n      <div class=\"section-divider\"></div>\n      <p>{copy.gallery_intro}</p>\n      <div class=\"gallery-grid\">\n        {data.images.gallery.map((gal) => (\n          <article class=\"gallery-item\">\n            <img src={imgUrl(gal.path)} alt={gal.alt} />\n          </article>\n        ))}\n      </div>\n    </section>\n  )}\n\n  <!-- FOOTER -->\n  <footer>\n    <div class=\"footer-content\">\n      {data.images.logo && (\n        <div class=\"footer-logo\">\n          <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n        </div>\n      )}\n      <div class=\"footer-divider\"></div>\n      <p class=\"footer-text\">{copy.footer_closing}</p>\n      <p class=\"footer-credit\">{i.footer_credits}</p>\n    </div>\n  </footer>\n</body>\n</html>",
  "content_schema": [
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 120,
      "description": "Sottotitolo atmosferico dell'hero. Breve, evocativo, musicale senza essere specifico.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Introduzione narrativa alla storia di Melodious. Tone: caldo, ispirante, dedizione alla musica.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_paragraph",
      "type": "richtext",
      "max_chars": 500,
      "description": "Paragrafo narrativo che amplia la storia della scuola e della sua filosofia educativa. Può includere elementi della description del dossier ma riformulati in stile atmospheric.",
      "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/gallery. Invita a scoprire l'energia e la comunità.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_intro",
      "type": "text",
      "max_chars": 150,
      "description": "Introduzione agli spazi della scuola di musica. Evoca creatività, professionionalità, apertura.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_closing",
      "type": "text",
      "max_chars": 200,
      "description": "Messaggio di chiusura nel footer. Invitante, ringraziamento implicito, call to action soft.",
      "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.team[]",
    "images.gallery[]",
    "available_locales"
  ],
  "ui_translations": {
    "nav_services": "Lezioni",
    "nav_story": "La nostra storia",
    "nav_team": "Community",
    "nav_gallery": "Spazi",
    "cta_discover": "Scopri le lezioni",
    "section_title_story": "La nostra storia",
    "section_title_services": "Quello che insegniamo",
    "section_title_team": "La nostra community",
    "section_title_gallery": "I nostri spazi",
    "footer_credits": "Realizzato con dedizione musicale",
    "lang_switcher_label": "Lingua"
  }
}