{
  "reasoning": "Melodious is a music school with a bold red/black/white palette and contemporary feel — perfect match for the bold-contemporary style. I'll use oversized uppercase display headlines with the red as accent, a dark hero with text-only fallback (no hero image), and the gallery for editorial atmosphere. The aesthetic feels editorial and confident, suiting a concert pianist's brand.",
  "selected_reference_style": "04-bold-contemporary",
  "astro_file": "---\nconst { data, copy, i, lang } = Astro.props;\n\nconst palette = {\n  primary:    data.visual_identity?.color_palette?.primary    || \"#C8161D\",\n  secondary:  data.visual_identity?.color_palette?.secondary  || \"#7A1014\",\n  accent:     data.visual_identity?.color_palette?.accent     || \"#E8B33A\",\n  background: data.visual_identity?.color_palette?.background || \"#FFFFFF\",\n  text:       data.visual_identity?.color_palette?.text       || \"#222222\",\n};\n\nconst imgUrl = (p) => `${import.meta.env.BASE_URL.replace(/\\/$/, '')}/images/${p}`;\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\" />\n    <title>{data.business_name}</title>\n    <meta name=\"description\" content={data.description} />\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@300;400;500;700;800&family=Plus+Jakarta+Sans:wght@400;600;800&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: 'Plus Jakarta Sans', sans-serif;\n        --font-body: 'Manrope', sans-serif;\n      }\n\n      * { box-sizing: border-box; margin: 0; padding: 0; }\n\n      html { scroll-behavior: smooth; }\n\n      body {\n        font-family: var(--font-body);\n        color: var(--color-text);\n        background: var(--color-background);\n        line-height: 1.6;\n      }\n\n      img { max-width: 100%; display: block; }\n\n      a { color: inherit; text-decoration: none; }\n\n      .container {\n        max-width: 1280px;\n        margin: 0 auto;\n        padding: 0 2rem;\n      }\n\n      /* HEADER */\n      .site-header {\n        position: sticky;\n        top: 0;\n        z-index: 50;\n        background: #0E0E0E;\n        color: #fff;\n        padding: 1rem 0;\n        border-bottom: 1px solid rgba(255,255,255,0.08);\n      }\n      .header-inner {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 2rem;\n      }\n      .brand {\n        display: flex;\n        align-items: center;\n        gap: 0.85rem;\n      }\n      .brand-logo {\n        width: 44px;\n        height: 44px;\n        border-radius: 6px;\n        object-fit: cover;\n      }\n      .brand-name {\n        font-family: var(--font-heading);\n        font-weight: 800;\n        font-size: 1.15rem;\n        letter-spacing: 0.18em;\n        text-transform: uppercase;\n      }\n      .site-nav {\n        display: flex;\n        gap: 2rem;\n        align-items: center;\n      }\n      .site-nav a {\n        font-size: 0.72rem;\n        letter-spacing: 0.22em;\n        text-transform: uppercase;\n        font-weight: 500;\n        opacity: 0.8;\n        transition: opacity 0.2s;\n      }\n      .site-nav a:hover { opacity: 1; color: var(--color-primary); }\n\n      .lang-switcher {\n        display: inline-flex;\n        gap: 0.5rem;\n        align-items: center;\n        font-size: 0.72rem;\n        letter-spacing: 0.18em;\n        font-weight: 600;\n      }\n      .lang-switcher a { opacity: 0.55; }\n      .lang-switcher a:hover { opacity: 1; }\n      .lang-switcher [aria-current=\"page\"] {\n        color: var(--color-primary);\n        opacity: 1;\n      }\n      .lang-sep { opacity: 0.3; }\n\n      /* HERO — text-only because images.hero is empty */\n      .hero {\n        background: #0E0E0E;\n        color: #fff;\n        padding: 9rem 0 7rem;\n        position: relative;\n        overflow: hidden;\n      }\n      .hero::before {\n        content: \"\";\n        position: absolute;\n        top: -20%;\n        right: -10%;\n        width: 500px;\n        height: 500px;\n        background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);\n        opacity: 0.35;\n        filter: blur(40px);\n      }\n      .hero-eyebrow {\n        font-size: 0.75rem;\n        letter-spacing: 0.35em;\n        text-transform: uppercase;\n        color: var(--color-accent);\n        margin-bottom: 2rem;\n        font-weight: 500;\n      }\n      .hero-title {\n        font-family: var(--font-heading);\n        font-weight: 800;\n        font-size: clamp(3.5rem, 10vw, 9rem);\n        line-height: 0.92;\n        letter-spacing: -0.02em;\n        text-transform: uppercase;\n        margin-bottom: 2rem;\n        position: relative;\n      }\n      .hero-title .accent { color: var(--color-primary); }\n      .hero-tagline {\n        font-size: clamp(1rem, 1.5vw, 1.25rem);\n        max-width: 620px;\n        opacity: 0.85;\n        margin-bottom: 3rem;\n        font-weight: 300;\n      }\n      .hero-cta-row {\n        display: flex;\n        gap: 1rem;\n        flex-wrap: wrap;\n      }\n      .btn {\n        display: inline-block;\n        padding: 1rem 2rem;\n        font-size: 0.72rem;\n        letter-spacing: 0.22em;\n        text-transform: uppercase;\n        font-weight: 600;\n        border: 1px solid currentColor;\n        transition: all 0.2s;\n      }\n      .btn-primary {\n        background: var(--color-primary);\n        border-color: var(--color-primary);\n        color: #fff;\n      }\n      .btn-primary:hover { background: var(--color-secondary); border-color: var(--color-secondary); }\n      .btn-ghost { background: transparent; color: #fff; }\n      .btn-ghost:hover { background: #fff; color: #0E0E0E; }\n\n      /* SECTION */\n      section {\n        padding: 7rem 0;\n      }\n      .section-eyebrow {\n        font-size: 0.7rem;\n        letter-spacing: 0.35em;\n        text-transform: uppercase;\n        color: var(--color-primary);\n        font-weight: 600;\n        margin-bottom: 1.5rem;\n      }\n      .section-title {\n        font-family: var(--font-heading);\n        font-weight: 800;\n        font-size: clamp(2.5rem, 6vw, 5rem);\n        line-height: 1;\n        letter-spacing: -0.015em;\n        text-transform: uppercase;\n        margin-bottom: 3rem;\n      }\n\n      /* STORY */\n      .story { background: var(--color-background); }\n      .story-grid {\n        display: grid;\n        grid-template-columns: 1fr 1.3fr;\n        gap: 5rem;\n        align-items: start;\n      }\n      .story-text p {\n        font-size: 1.05rem;\n        margin-bottom: 1.25rem;\n        line-height: 1.75;\n      }\n      @media (max-width: 860px) {\n        .story-grid { grid-template-columns: 1fr; gap: 2rem; }\n      }\n\n      /* SERVICES */\n      .services {\n        background: #0E0E0E;\n        color: #fff;\n      }\n      .services .section-eyebrow { color: var(--color-accent); }\n      .services-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n        gap: 1px;\n        background: rgba(255,255,255,0.08);\n        border: 1px solid rgba(255,255,255,0.08);\n      }\n      .service-card {\n        background: #0E0E0E;\n        padding: 3rem 2rem;\n        transition: background 0.25s;\n        position: relative;\n      }\n      .service-card:hover { background: #1A1A1A; }\n      .service-num {\n        font-family: var(--font-heading);\n        font-size: 0.7rem;\n        letter-spacing: 0.25em;\n        color: var(--color-primary);\n        font-weight: 700;\n        margin-bottom: 2rem;\n      }\n      .service-name {\n        font-family: var(--font-heading);\n        font-weight: 700;\n        font-size: 1.5rem;\n        text-transform: uppercase;\n        letter-spacing: 0.02em;\n        margin-bottom: 1rem;\n        line-height: 1.15;\n      }\n      .service-desc {\n        font-size: 0.95rem;\n        opacity: 0.7;\n        line-height: 1.6;\n      }\n\n      /* GALLERY */\n      .gallery-section { background: var(--color-background); }\n      .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 1rem;\n      }\n      .gallery-grid img {\n        width: 100%;\n        aspect-ratio: 4/3;\n        object-fit: cover;\n        transition: transform 0.4s;\n      }\n      .gallery-item { overflow: hidden; }\n      .gallery-item:hover img { transform: scale(1.05); }\n      @media (max-width: 860px) {\n        .gallery-grid { grid-template-columns: repeat(2, 1fr); }\n      }\n      @media (max-width: 560px) {\n        .gallery-grid { grid-template-columns: 1fr; }\n      }\n\n      /* CONTACT */\n      .contact {\n        background: var(--color-primary);\n        color: #fff;\n        text-align: center;\n      }\n      .contact .section-eyebrow { color: rgba(255,255,255,0.7); }\n      .contact-title {\n        font-family: var(--font-heading);\n        font-weight: 800;\n        font-size: clamp(2.5rem, 7vw, 5.5rem);\n        text-transform: uppercase;\n        line-height: 0.95;\n        letter-spacing: -0.02em;\n        margin-bottom: 2rem;\n      }\n      .contact-intro {\n        max-width: 600px;\n        margin: 0 auto 3rem;\n        font-size: 1.1rem;\n        opacity: 0.92;\n      }\n      .contact-btn {\n        display: inline-block;\n        background: #0E0E0E;\n        color: #fff;\n        padding: 1.2rem 2.5rem;\n        font-size: 0.75rem;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        font-weight: 600;\n      }\n      .contact-btn:hover { background: #fff; color: var(--color-primary); }\n\n      /* FOOTER */\n      .site-footer {\n        background: #0E0E0E;\n        color: #fff;\n        padding: 4rem 0 2rem;\n      }\n      .footer-inner {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 2rem;\n        padding-bottom: 2rem;\n        border-bottom: 1px solid rgba(255,255,255,0.1);\n        margin-bottom: 2rem;\n      }\n      .footer-brand {\n        display: flex;\n        align-items: center;\n        gap: 0.85rem;\n      }\n      .footer-brand img {\n        width: 50px;\n        height: 50px;\n        border-radius: 6px;\n      }\n      .footer-wordmark {\n        font-family: var(--font-heading);\n        font-weight: 800;\n        font-size: 2.5rem;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n      }\n      .footer-meta {\n        font-size: 0.75rem;\n        letter-spacing: 0.15em;\n        text-transform: uppercase;\n        opacity: 0.5;\n        text-align: center;\n      }\n    </style>\n\n    <header class=\"site-header\">\n      <div class=\"container header-inner\">\n        <a href=\"#top\" class=\"brand\">\n          {data.images.logo && (\n            <img class=\"brand-logo\" src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n          )}\n          <span class=\"brand-name\">{data.business_name}</span>\n        </a>\n        <nav class=\"site-nav\">\n          <a href=\"#story\">{i.nav_story}</a>\n          <a href=\"#services\">{i.nav_services}</a>\n          <a href=\"#gallery\">{i.nav_gallery}</a>\n          <a href=\"#contact\">{i.nav_contact}</a>\n          {data.available_locales.length > 1 && (\n            <nav aria-label={i.lang_switcher_label} 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 (\n                  <>\n                    {idx > 0 && <span class=\"lang-sep\">/</span>}\n                    {isActive\n                      ? <span aria-current=\"page\">{loc.toUpperCase()}</span>\n                      : <a href={href}>{loc.toUpperCase()}</a>}\n                  </>\n                );\n              })}\n            </nav>\n          )}\n        </nav>\n      </div>\n    </header>\n\n    <main id=\"top\">\n      <!-- HERO (text-only fallback) -->\n      <section class=\"hero\">\n        <div class=\"container\">\n          <div class=\"hero-eyebrow\">{copy.hero_eyebrow}</div>\n          <h1 class=\"hero-title\">\n            {data.business_name}<br/>\n            <span class=\"accent\">{copy.hero_accent_word}</span>\n          </h1>\n          <p class=\"hero-tagline\">{copy.hero_tagline}</p>\n          <div class=\"hero-cta-row\">\n            <a class=\"btn btn-primary\" href=\"#services\">{i.cta_discover}</a>\n            <a class=\"btn btn-ghost\" href=\"#contact\">{i.cta_contact}</a>\n          </div>\n        </div>\n      </section>\n\n      <!-- STORY -->\n      <section id=\"story\" class=\"story\">\n        <div class=\"container\">\n          <div class=\"story-grid\">\n            <div>\n              <div class=\"section-eyebrow\">{i.section_eyebrow_story}</div>\n              <h2 class=\"section-title\">{copy.story_title}</h2>\n            </div>\n            <div class=\"story-text\">\n              <p>{copy.story_intro}</p>\n              <p>{data.description}</p>\n              <p>{copy.story_outro}</p>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <!-- SERVICES -->\n      <section id=\"services\" class=\"services\">\n        <div class=\"container\">\n          <div class=\"section-eyebrow\">{i.section_eyebrow_services}</div>\n          <h2 class=\"section-title\">{copy.services_title}</h2>\n          <div class=\"services-grid\">\n            {data.products_or_services.map((p, idx) => (\n              <article class=\"service-card\">\n                <div class=\"service-num\">{String(idx + 1).padStart(2, '0')} / {String(data.products_or_services.length).padStart(2, '0')}</div>\n                <h3 class=\"service-name\">{p.name}</h3>\n                <p class=\"service-desc\">{p.description}</p>\n              </article>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      <!-- GALLERY -->\n      {data.images.gallery.length > 0 && (\n        <section id=\"gallery\" class=\"gallery-section\">\n          <div class=\"container\">\n            <div class=\"section-eyebrow\">{i.section_eyebrow_gallery}</div>\n            <h2 class=\"section-title\">{copy.gallery_title}</h2>\n            <div class=\"gallery-grid\">\n              {data.images.gallery.map(g => (\n                <div class=\"gallery-item\">\n                  <img src={imgUrl(g.path)} alt={g.alt} loading=\"lazy\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </section>\n      )}\n\n      <!-- CONTACT -->\n      <section id=\"contact\" class=\"contact\">\n        <div class=\"container\">\n          <div class=\"section-eyebrow\">{i.section_eyebrow_contact}</div>\n          <h2 class=\"contact-title\">{copy.contact_title}</h2>\n          <p class=\"contact-intro\">{copy.contact_intro}</p>\n          <a class=\"contact-btn\" href={`#`}>{i.cta_contact}</a>\n        </div>\n      </section>\n    </main>\n\n    <footer class=\"site-footer\">\n      <div class=\"container\">\n        <div class=\"footer-inner\">\n          <div class=\"footer-brand\">\n            {data.images.logo && (\n              <img src={imgUrl(data.images.logo.path)} alt={data.images.logo.alt} />\n            )}\n            <span class=\"footer-wordmark\">{data.business_name}</span>\n          </div>\n          <div class=\"footer-meta\">{copy.footer_tag}</div>\n        </div>\n        <div class=\"footer-meta\">© {data.business_name} — {i.footer_credits}</div>\n      </div>\n    </footer>\n  </body>\n</html>\n",
  "content_schema": [
    {
      "key": "hero_eyebrow",
      "type": "text",
      "max_chars": 60,
      "description": "Brevissima etichetta in maiuscolo sopra il titolo hero (es. 'Scuola di musica · Firenze'). Solo atmosfera, no fatti specifici inventati.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "hero_accent_word",
      "type": "text",
      "max_chars": 24,
      "description": "Una sola parola in maiuscolo che funge da accent rosso sotto il nome del brand nell'hero (es. 'MUSICA', 'STUDIO', 'ACCADEMIA'). Evocativa.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "hero_tagline",
      "type": "text",
      "max_chars": 180,
      "description": "Tagline atmosferica sotto il titolone. 1-2 frasi che evocano il mondo della musica classica/moderna senza affermare fatti specifici.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_title",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo della sezione storia, 2-4 parole maiuscole (es. 'Una voce, molte note').",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_intro",
      "type": "richtext",
      "max_chars": 300,
      "description": "Paragrafo introduttivo atmosferico sulla scuola e sulla passione per la musica. Stile evocativo, non factual.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "story_outro",
      "type": "richtext",
      "max_chars": 300,
      "description": "Paragrafo di chiusura della sezione storia: dedizione, ricerca, percorso musicale. Linguaggio sensoriale e caldo.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "services_title",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo grande della sezione corsi/servizi (es. 'I percorsi', 'Discipline').",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "gallery_title",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo della sezione galleria fotografica (es. 'Momenti', 'Dietro le quinte').",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contact_title",
      "type": "text",
      "max_chars": 80,
      "description": "Titolo grande della sezione contatti (es. 'Inizia a suonare', 'Suona con noi').",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "contact_intro",
      "type": "text",
      "max_chars": 220,
      "description": "Frase invitante che precede la CTA contatti. Atmosferica, calorosa, non factual.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    },
    {
      "key": "footer_tag",
      "type": "text",
      "max_chars": 80,
      "description": "Frase breve nel footer, claim sintetico della scuola.",
      "array_source": null,
      "is_array_item": false,
      "array_key": null,
      "field_name": null
    }
  ],
  "data_bindings": [
    "business_name",
    "description",
    "products_or_services[]",
    "images.logo",
    "images.gallery[]",
    "visual_identity.color_palette",
    "available_locales"
  ],
  "ui_translations": {
    "nav_story": "Chi siamo",
    "nav_services": "Corsi",
    "nav_gallery": "Galleria",
    "nav_contact": "Contatti",
    "cta_discover": "Scopri i corsi",
    "cta_contact": "Contattaci",
    "section_eyebrow_story": "Chi siamo",
    "section_eyebrow_services": "Le discipline",
    "section_eyebrow_gallery": "Galleria",
    "section_eyebrow_contact": "Inizia ora",
    "footer_credits": "Tutti i diritti riservati",
    "lang_switcher_label": "Lingua"
  }
}