/* global React */
/* ============================================================
   NUTRIGO — CONFIGURATORE HERO (13 step)
   Pricing dal Business Plan 3 maggio 2026:
   - Solo pranzo:               €11,00/gg
   - Pranzo + cena:             €18,50/gg
   - Spuntini + pranzo + cena:  €23,00/gg
   - 5gg = 22 gg/mese · 6gg = 26 gg/mese
   - Sconto trimestrale: -10%
============================================================ */

const NG_PIANI = [
  null,
  { id: 1, nome: "Solo pranzo",     desc: "Pranzo",                   ppg: 11.00, gg5: 242, gg6: 286 },
  { id: 2, nome: "Pranzo + cena",   desc: "Pranzo + cena",            ppg: 18.50, gg5: 407, gg6: 481 },
  { id: 3, nome: "Piano completo",  desc: "Spuntini + pranzo + cena", ppg: 23.00, gg5: 506, gg6: 598, featured: true }
];
const NG_GG = { 5: 22, 6: 26 };
const NG_DISC = 0.10;

// Obiettivi (tag selezionabili in S15 — multi-selezione).
// L'id viene usato come tag CRM con prefisso "obiettivo-".
const NG_OBIETTIVI = [
  { id: "perdere-peso",     label: "Perdere peso" },
  { id: "aumentare-massa",  label: "Aumentare massa" },
  { id: "mantenimento",     label: "Mantenimento" },
  { id: "performance",      label: "Performance sportiva" },
  { id: "salute",           label: "Salute & energia" },
  { id: "definizione",      label: "Definizione" }
];

function ngCalc(piano, giorni, dur) {
  const ppg = NG_PIANI[piano].ppg;
  const gg = NG_GG[giorni] || 22;
  const m1 = ppg * gg;
  const disc = dur === 3 ? NG_DISC : 0;
  return {
    ppg, gg,
    m1: Math.round(m1),
    mFin: Math.round(m1 * (1 - disc)),
    saving: dur === 3 ? Math.round(m1 * 3 * disc) : 0
  };
}
const ngFmt = n => "€" + Math.round(n).toLocaleString("it-IT");
const ngFmtD = n => "€" + n.toFixed(2).replace(".", ",");
const ngConsLabel = n => n === 1 ? "1 consegna · Lunedì" : "2 consegne · Lunedì + Giovedì";

function ngTrack(name, params) {
  // Inoltra al tracker Nutrigo se presente, altrimenti al dataLayer GTM
  if (window.nutrigoTracker && typeof window.nutrigoTracker.track === "function") {
    try { window.nutrigoTracker.track(name, params || {}); } catch (e) {}
  }
  window.dataLayer = window.dataLayer || [];
  const payload = { event: name };
  if (params) Object.assign(payload, params);
  window.dataLayer.push(payload);
}

/* ============ FORMSPREE: upload piano alimentare =============
   Endpoint: sostituisci REPLACE_ME con il tuo form ID Formspree
   (https://formspree.io/f/xxxxxxxx). Riceverai un'email con il
   file allegato e tutti i dati del lead.
============================================================== */
/* Primary: endpoint Nutrigo (PHP su Aruba). Fallback: Formspree.
   Cambia NUTRIGO_SUBMIT_ENDPOINT a "" per usare solo Formspree. */
const NUTRIGO_SUBMIT_ENDPOINT = ""; // disattivato: usiamo Formspree. Riattiveremo nella Fase 1.
const FORMSPREE_ENDPOINT = "https://formspree.io/f/xgodygna";
async function uploadPianoToFormspree(file, form, notes) {
  if (!file) return;
  const buildFD = () => {
    const fd = new FormData();
    fd.append("piano_file", file, file.name);
    fd.append("nome", form.nome || "");
    fd.append("email", form.email || "");
    fd.append("telefono", form.tel || "");
    fd.append("cap", form.cap || "");
    fd.append("note", notes || "");
    fd.append("_form", "configuratore_piano");
    fd.append("_subject", "Nuovo piano caricato \u2014 " + (form.nome || form.email));
    return fd;
  };
  // 1) Nutrigo endpoint
  if (NUTRIGO_SUBMIT_ENDPOINT) {
    try {
      const r = await fetch(NUTRIGO_SUBMIT_ENDPOINT, { method: "POST", body: buildFD(), headers: { "Accept": "application/json" } });
      if (r.ok) { ngTrack("cfg_plan_sent_ok", { name: file.name, size: file.size, via: "nutrigo" }); return; }
    } catch (e) {}
  }
  // 2) Fallback Formspree
  try {
    const r = await fetch(FORMSPREE_ENDPOINT, { method: "POST", body: buildFD(), headers: { "Accept": "application/json" } });
    if (r.ok) ngTrack("cfg_plan_sent_ok", { name: file.name, size: file.size, via: "formspree" });
    else ngTrack("cfg_plan_sent_fail", { status: r.status });
  } catch (e) {
    ngTrack("cfg_plan_sent_fail", { error: String(e).slice(0, 80) });
  }
}

/* ============ MAIN COMPONENT ============ */
function HeroConfigurator() {
  const [step, setStep] = React.useState(1);
  const [stack, setStack] = React.useState([1]);
  const [piano, setPiano] = React.useState(3);
  const [giorni, setGiorni] = React.useState(6);
  const [consegne, setConsegne] = React.useState(2);
  const [dur, setDur] = React.useState(3);
  const [hasNutri, setHasNutri] = React.useState(null);
  const [wantNutri, setWantNutri] = React.useState(null);
  const [form, setForm] = React.useState({ nome:"", tel:"", email:"", obiettivo:"", obiettiviTags:[], cap:"" });
  const [errors, setErrors] = React.useState({});
  const [planFile, setPlanFile] = React.useState(null);
  const [planNotes, setPlanNotes] = React.useState("");

  const progs = {1:0,15:4,2:8,3:16,4:50,5:100,6:25,7:45,8:62,9:78,10:100,11:100,12:50,13:100};
  const noBack = {1:true,5:true,13:true};

  // Lock scroll della landing quando l'utente è dentro al configuratore (step != 1).
  // Usa la tecnica position:fixed+top:-Y che funziona anche su iOS Safari/Android
  // (overflow:hidden da solo non è sufficiente su mobile).
  React.useEffect(() => {
    const locked = step !== 1;
    if (locked) {
      const y = window.scrollY || window.pageYOffset || 0;
      document.body.dataset.ngCfgScrollY = String(y);
      document.body.style.top = `-${y}px`;
      document.body.classList.add("ng-cfg-locked");
    } else {
      const y = parseInt(document.body.dataset.ngCfgScrollY || "0", 10);
      document.body.classList.remove("ng-cfg-locked");
      document.body.style.top = "";
      delete document.body.dataset.ngCfgScrollY;
      if (!Number.isNaN(y)) window.scrollTo(0, y);
    }
    return () => {
      document.body.classList.remove("ng-cfg-locked");
      document.body.style.top = "";
    };
  }, [step]);

  function go(n, evt) {
    if (evt) ngTrack(evt);
    setStep(n);
    setStack(s => [...s, n]);
  }
  function back() {
    if (stack.length <= 1) return;
    ngTrack("cfg_back", { from: step });
    const next = [...stack];
    next.pop();
    setStack(next);
    setStep(next[next.length - 1]);
  }
  function autoGo(n, delay = 320) {
    setTimeout(() => go(n), delay);
  }

  React.useEffect(() => { ngTrack("cfg_hero_view"); }, []);
  React.useEffect(() => { ngTrack("cfg_step_view", { step }); }, [step]);

  function selPiano(n) {
    setPiano(n);
    ngTrack("cfg_piano_" + n, { cfg_piano: NG_PIANI[n].nome, cfg_ppg: NG_PIANI[n].ppg });
  }
  function selGiorni(n) {
    setGiorni(n);
    ngTrack("cfg_giorni_" + n, { cfg_giorni: n });
  }
  function selConsegne(n) {
    setConsegne(n);
    ngTrack("cfg_consegne_" + n, { cfg_consegne: n });
  }
  function selDur(n) {
    setDur(n);
    ngTrack("cfg_durata_" + n, { cfg_durata: n });
  }

  function validateForm(opts) {
    const errs = {};
    if (!form.nome.trim()) errs.nome = "Nome richiesto";
    if (!form.tel.trim() || form.tel.replace(/\D/g, "").length < 8) errs.tel = "Telefono non valido";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "Email non valida";
    if (opts && opts.requireCap) {
      const cap = (form.cap || "").trim();
      if (!/^\d{5}$/.test(cap)) errs.cap = "CAP non valido (5 cifre)";
    }
    setErrors(errs);
    return Object.keys(errs).length === 0;
  }

  // Applica i tag obiettivo al lead nel CRM (prefisso "obiettivo-")
  // Chiamato da TUTTI i submit (nutri / diretto / finale).
  function applyObiettiviTags() {
    const ids = form.obiettiviTags || [];
    if (!ids.length) return;
    if (window.nutrigoTracker && typeof window.nutrigoTracker.addTag === "function") {
      ids.forEach(id => window.nutrigoTracker.addTag("obiettivo-" + id));
    }
  }

  // Toggle handler per le chip obiettivo in S15Obiettivo
  function toggleObiettivo(id) {
    const current = form.obiettiviTags || [];
    const set = new Set(current);
    const wasSelected = set.has(id);
    if (wasSelected) set.delete(id); else set.add(id);
    const next = Array.from(set);
    setForm({ ...form, obiettiviTags: next });
    ngTrack("cfg_obiettivo_toggled", { id, selected: !wasSelected, count: next.length });
  }

  function submitNutri() {
    if (!validateForm()) return;
    applyObiettiviTags();
    const obiettiviLabels = (form.obiettiviTags || [])
      .map(id => (NG_OBIETTIVI.find(o => o.id === id) || {}).label)
      .filter(Boolean);
    ngTrack("cfg_submit_nutri", {
      cfg_email: form.email, cfg_nome: form.nome,
      cfg_tel: form.tel, cfg_obiettivo: form.obiettivo,
      cfg_obiettivi: obiettiviLabels
    });
    if (window.nutrigoTracker?.identify) {
      window.nutrigoTracker.identify(form.email, { name: form.nome, source: "cfg_nutri", contact_type: "nutrizionista" });
      window.nutrigoTracker.addTag("tipo:nutrizionista");
    }
    if (window.Brevo) {
      window.Brevo.push(["identify", {
        identifiers: { email_id: form.email },
        attributes: { FIRSTNAME: form.nome, PHONE: form.tel, CONTACT_TYPE: "nutrizionista", SOURCE: "cfg_nutri" }
      }]);
    }
    // Formspree: invia anche per email così non perdi il lead
    try {
      const fd = new FormData();
      fd.append("nome", form.nome || "");
      fd.append("email", form.email || "");
      fd.append("tel", form.tel || "");
      fd.append("obiettivo", form.obiettivo || "");
      fd.append("CONTACT_TYPE", "nutrizionista");
      fd.append("SOURCE", "cfg_nutri");
      fd.append("_subject", "Nuovo nutrizionista interessato — " + (form.nome || form.email));
      fetch(FORMSPREE_ENDPOINT, { method: "POST", body: fd, headers: { "Accept": "application/json" } });
    } catch (e) {}
    saveLead("nutrizionista_richiesto");
    go(5);
  }
  function submitDiretto() {
    if (!validateForm({ requireCap: true })) return;
    applyObiettiviTags();
    ngTrack("cfg_submit_direct", { cfg_email: form.email, cfg_nome: form.nome, cfg_tel: form.tel, cfg_cap: form.cap, cfg_obiettivi: (form.obiettiviTags || []) });
    if (window.nutrigoTracker?.identify) {
      window.nutrigoTracker.identify(form.email, { name: form.nome, source: "cfg_direct", contact_type: "cliente" });
      window.nutrigoTracker.addTag("tipo:cliente");
    }
    if (window.Brevo) {
      window.Brevo.push(["identify", {
        identifiers: { email_id: form.email },
        attributes: { FIRSTNAME: form.nome, PHONE: form.tel, CONTACT_TYPE: "cliente", SOURCE: "cfg_direct", CAP: form.cap }
      }]);
    }
    // Formspree: notifica via email anche senza allegato
    try {
      const fd = new FormData();
      fd.append("nome", form.nome || "");
      fd.append("email", form.email || "");
      fd.append("tel", form.tel || "");
      fd.append("cap", form.cap || "");
      fd.append("obiettivo", form.obiettivo || "");
      fd.append("CONTACT_TYPE", "cliente");
      fd.append("SOURCE", "cfg_direct");
      fd.append("_subject", "Nuovo contatto diretto — " + (form.nome || form.email));
      fetch(FORMSPREE_ENDPOINT, { method: "POST", body: fd, headers: { "Accept": "application/json" } });
    } catch (e) {}
    saveLead("contatto_diretto");
    go(13);
  }
  function submitFinale() {
    if (!validateForm({ requireCap: true })) return;
    applyObiettiviTags();
    const r = ngCalc(piano, giorni, dur);
    ngTrack("cfg_submit", {
      cfg_piano: NG_PIANI[piano].nome,
      cfg_giorni: giorni, cfg_consegne: consegne, cfg_durata: dur,
      cfg_prezzo: r.mFin, cfg_ppg: r.ppg,
      cfg_email: form.email, cfg_nome: form.nome, cfg_tel: form.tel, cfg_cap: form.cap,
      cfg_obiettivi: (form.obiettiviTags || [])
    });
    if (window.nutrigoTracker?.identify) {
      window.nutrigoTracker.identify(form.email, { name: form.nome, source: "cfg_completo", contact_type: "cliente" });
      window.nutrigoTracker.addTag("tipo:cliente");
    }
    if (window.Brevo) {
      window.Brevo.push(["identify", {
        identifiers: { email_id: form.email },
        attributes: {
          FIRSTNAME: form.nome, PHONE: form.tel, CONTACT_TYPE: "cliente", SOURCE: "cfg_completo", CAP: form.cap,
          PIANO: NG_PIANI[piano].nome, GIORNI: giorni, CONSEGNE: consegne, DURATA: dur, PREZZO: r.mFin
        }
      }]);
    }
    // Se c'è un piano caricato, lo invia a Formspree
    if (planFile && planFile._raw) {
      uploadPianoToFormspree(planFile._raw, form, planNotes);
      // anche per la versione "carico ora" senza pagamento
    }
    // Anche la submitNutri/Diretto se il file era stato caricato
    saveLead("piano_configurato", { piano, giorni, consegne, dur, prezzo: r.mFin });
    go(13);
  }
  function saveLead(tipo, extra) {
    try {
      const leads = JSON.parse(localStorage.getItem("nutrigo:leads") || "[]");
      leads.push({
        tipo, ts: Date.now(),
        nome: form.nome, email: form.email, tel: form.tel, cap: form.cap, obiettivo: form.obiettivo,
        ...(extra || {})
      });
      localStorage.setItem("nutrigo:leads", JSON.stringify(leads));
    } catch (e) {}
  }

  const r = ngCalc(piano, giorni, dur);
  const p = NG_PIANI[piano];

  return (
    <section className="ng-cfg" id="top" data-screen-label="01 Configuratore">
      <h1 className="ng-sr-only">Pasti personalizzati a Milano consegnati a domicilio</h1>
      {!noBack[step] && (
        <button className="ng-cfg__back" onClick={back}>← Indietro</button>
      )}
      <div className="ng-cfg__progress">
        <div className="ng-cfg__progress-fill" style={{ width: (progs[step] || 0) + "%" }} />
      </div>

      {step === 1 && <S1Hero onStart={() => go(15, "cfg_start")} onSkip={() => go(12, "cfg_skip_to_form")} />}
      {step === 15 && <S15Obiettivo selected={form.obiettiviTags} onToggle={toggleObiettivo} onNext={() => go(6)} />}
      {step === 2 && <S2Nutri value={hasNutri} onSel={(v) => { setHasNutri(v); ngTrack("cfg_nutri_" + v); autoGo(v === "si" ? 6 : 3); }} />}
      {step === 3 && <S3WantNutri value={wantNutri} onSel={(v) => { setWantNutri(v); ngTrack("cfg_nutri_service_" + v); if (v === "si") autoGo(4); else autoGo(1, 600); }} />}
      {step === 4 && <S4FormNutri form={form} setForm={setForm} errors={errors} onSubmit={submitNutri} />}
      {step === 5 && <S5ConfNutri />}
      {step === 6 && <S6Piano value={piano} onSel={selPiano} onNext={() => go(7)} />}
      {step === 7 && <S7Giorni value={giorni} onSel={selGiorni} onNext={() => go(8)} />}
      {step === 8 && <S8Consegne value={consegne} onSel={selConsegne} onNext={() => go(9)} />}
      {step === 9 && <S9Durata value={dur} onSel={selDur} piano={piano} giorni={giorni} onNext={() => go(11)} />}
      {step === 10 && <S10Prezzo r={r} p={p} giorni={giorni} consegne={consegne} dur={dur} onNext={() => go(11)} />}
      {step === 11 && <S11FormFinale form={form} setForm={setForm} errors={errors} r={r} p={p} giorni={giorni} consegne={consegne} dur={dur} onSubmit={submitFinale} />}
      {step === 12 && <S12FormDiretto form={form} setForm={setForm} errors={errors} onSubmit={submitDiretto} />}
      {step === 13 && <S13Conferma piano={p} giorni={giorni} consegne={consegne} dur={dur} prezzo={r.mFin} />}

      <div className="ng-cfg__below">
        <span className="ng-cfg__below-label">↓ Continua il sito</span>
        <a href="#come-funziona" className="ng-cfg__pill">Come funziona</a>
        <span className="ng-cfg__below-arrow">›</span>
        <a href="#menu" className="ng-cfg__pill">Menu</a>
        <span className="ng-cfg__below-arrow">›</span>
        <a href="#prezzi" className="ng-cfg__pill">Prezzi</a>
        <span className="ng-cfg__below-arrow">›</span>
        <a href="#zone" className="ng-cfg__pill">Zone</a>
        <span className="ng-cfg__below-arrow">›</span>
        <a href="#faq" className="ng-cfg__pill">FAQ</a>
      </div>
    </section>
  );
}

/* ============ STEP COMPONENTS ============ */
function S1Hero({ onStart, onSkip }) {
  return (
    <div className="ng-cfg__hero">
      <div className="ng-cfg__hero-img">
        <image-slot id="cfg-hero-img" shape="rect" anchor="top" src={(window.NG_ROOT || "") + "img/cfg-hero-img.webp"} placeholder="Foto · Donna + frigo Nutrigo (4:5)"></image-slot>
        <div className="ng-cfg__hero-overlay" />
      </div>
      <div className="ng-cfg__hero-card">
        <div className="ng-cfg__badge">
          <span className="ng-cfg__badge-dot" />
          Attivo a Milano · posti limitati
        </div>
        <h1 className="ng-cfg__h1">Segui la tua dieta. Senza cucinare.</h1>
        <p className="ng-cfg__sub">Nutrigo prepara i tuoi pasti al grammo e li consegna a casa o in ufficio, da €11 al giorno.</p>
        <button className="ng-cfg__btn ng-cfg__btn--primary" onClick={onStart}>
          Inizia ora <span>→</span>
        </button>
        <div className="ng-cfg__trust">
          <span><span className="ng-cfg__trust-dot" />Pesatura al grammo</span>
          <span><span className="ng-cfg__trust-dot" />Consegna a Milano</span>
          
        </div>
      </div>
    </div>
  );
}

function StepShell({ stepN, total, title, sub, hint, children }) {
  return (
    <div className="ng-cfg__step">
      <div className="ng-cfg__step-left">
        <div className="ng-cfg__step-num">{stepN ? `Passo ${stepN} di ${total}` : "Prima di iniziare"}</div>
        <h2 className="ng-cfg__step-title">{title}</h2>
        {sub && <p className="ng-cfg__step-sub">{sub}</p>}
      </div>
      <div className="ng-cfg__step-right">
        {hint && <p className="ng-cfg__hint">{hint}</p>}
        {children}
      </div>
    </div>
  );
}

function ChoiceCard({ icon, title, sub, active, onClick }) {
  return (
    <div className={"ng-cfg__choice" + (active ? " is-active" : "")} onClick={onClick}>
      <div className="ng-cfg__choice-icon">{icon}</div>
      <div className="ng-cfg__choice-body">
        <div className="ng-cfg__choice-title">{title}</div>
        <div className="ng-cfg__choice-sub">{sub}</div>
      </div>
      <div className="ng-cfg__choice-radio" />
    </div>
  );
}

function S2Nutri({ value, onSel }) {
  return (
    <StepShell title="Hai già un nutrizionista?" sub="Il servizio Nutrigo esegue il piano alimentare che ti ha prescritto il tuo professionista. Senza un piano strutturato non possiamo garantire la personalizzazione."
      hint="Questa informazione ci serve per indirizzarti nel modo giusto fin da subito.">
      <div className="ng-cfg__choices">
        <ChoiceCard icon="✅" title="Sì, ho già il mio nutrizionista"
          sub="Ho un piano alimentare strutturato e voglio che Nutrigo lo esegua per me."
          active={value === "si"} onClick={() => onSel("si")} />
        <ChoiceCard icon="🤔" title="No, non ho un nutrizionista"
          sub="Voglio seguire un piano alimentare ma non ho ancora un professionista di riferimento."
          active={value === "no"} onClick={() => onSel("no")} />
      </div>
    </StepShell>
  );
}

function S3WantNutri({ value, onSel }) {
  return (
    <StepShell title="Vuoi un nutrizionista Nutrigo?" sub="I nostri nutrizionisti partner costruiranno il tuo piano su misura e lo passeranno direttamente alla cucina. Tu non devi fare nulla.">
      <div className="ng-cfg__nutri-box">
        <div className="ng-cfg__nutri-icon">🥗</div>
        <div>
          <div className="ng-cfg__nutri-title">Il servizio nutrizionista Nutrigo</div>
          <p className="ng-cfg__nutri-sub">Piano alimentare personalizzato + integrazione diretta con la cucina. Una volta definito il piano, Nutrigo lo esegue ogni settimana senza che tu debba fare nulla.</p>
          <ul className="ng-cfg__nutri-feats">
            <li>Prima consulenza per definire obiettivi e preferenze</li>
            <li>Piano alimentare settimanale personalizzato</li>
            <li>Aggiornamenti periodici in base ai progressi</li>
            <li>Integrazione diretta con Nutrigo — zero passaggi manuali</li>
          </ul>
        </div>
      </div>
      <div className="ng-cfg__choices">
        <ChoiceCard icon="✅" title="Sì, voglio essere contattato"
          sub="Lascio i miei contatti. Mi richiamerete voi per fissare la consulenza."
          active={value === "si"} onClick={() => onSel("si")} />
        <ChoiceCard icon="🔄" title="No, mi organizzo da solo"
          sub="Troverò un nutrizionista autonomamente e tornerò quando avrò il piano."
          active={value === "no"} onClick={() => onSel("no")} />
      </div>
    </StepShell>
  );
}

function FormField({ label, full, error, ...props }) {
  return (
    <div className={"ng-cfg__field" + (full ? " ng-cfg__field--full" : "")}>
      <label>{label}</label>
      <input {...props} className={error ? "is-error" : ""} />
      {error && <span className="ng-cfg__field-err">{error}</span>}
    </div>
  );
}

function S4FormNutri({ form, setForm, errors, onSubmit }) {
  const u = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <div className="ng-cfg__step">
      <div className="ng-cfg__step-left">
        <h2 className="ng-cfg__step-title">Ti mettiamo in contatto con il nostro nutrizionista.</h2>
        <p className="ng-cfg__step-sub">Ti richiameremo entro 24 ore per fissare la prima consulenza e costruire il tuo piano su misura.</p>
      </div>
      <div className="ng-cfg__step-right">
        <div className="ng-cfg__recap ng-cfg__recap--col">
          <div className="ng-cfg__recap-label">Richiesta nutrizionista Nutrigo</div>
          <div className="ng-cfg__recap-mini">Prima consulenza · Piano personalizzato · Integrazione diretta con la cucina</div>
        </div>
        <div className="ng-cfg__form-grid">
          <FormField label="Nome e cognome" placeholder="Marco Rossi" value={form.nome} onChange={u("nome")} error={errors.nome} />
          <FormField label="Telefono" type="tel" placeholder="+39 333 000 0000" value={form.tel} onChange={u("tel")} error={errors.tel} />
          <FormField label="Email" type="email" full placeholder="marco@email.com" value={form.email} onChange={u("email")} error={errors.email} />
          <FormField label="Altri dettagli (opzionale)" full placeholder="es. allergie, intolleranze, sport praticati..." value={form.obiettivo} onChange={u("obiettivo")} />
        </div>
        <button className="ng-cfg__submit" onClick={onSubmit}>Invia la richiesta →</button>
        <p className="ng-cfg__microtrust">Nessun pagamento · Ti richiamiamo noi · Zero spam</p>
      </div>
    </div>
  );
}

// Icone obiettivo — SVG stroke 1.5, viewBox 24, coerenti col brand
function ObiettivoIcon({ id }) {
  const s = { width: 36, height: 36, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (id) {
    case "perdere-peso":
      // bilancia con freccia in giù
      return (
        <svg {...s}>
          <rect x="3" y="9" width="18" height="11" rx="2"/>
          <path d="M8 9V7a4 4 0 0 1 8 0v2"/>
          <path d="M12 13v4"/>
          <path d="M10 15l2 2 2-2"/>
        </svg>
      );
    case "aumentare-massa":
      // manubrio
      return (
        <svg {...s}>
          <path d="M6 9v6"/>
          <path d="M4 7v10"/>
          <path d="M18 9v6"/>
          <path d="M20 7v10"/>
          <path d="M6 12h12"/>
        </svg>
      );
    case "mantenimento":
      // equilibrio / bilancia
      return (
        <svg {...s}>
          <path d="M12 4v16"/>
          <path d="M5 8h14"/>
          <path d="M7 8l-3 6a3 3 0 0 0 6 0z"/>
          <path d="M17 8l-3 6a3 3 0 0 0 6 0z"/>
        </svg>
      );
    case "performance":
      // fulmine
      return (
        <svg {...s}>
          <path d="M13 2L4 14h7l-1 8 9-12h-7z"/>
        </svg>
      );
    case "salute":
      // cuore
      return (
        <svg {...s}>
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      );
    case "definizione":
      // target
      return (
        <svg {...s}>
          <circle cx="12" cy="12" r="9"/>
          <circle cx="12" cy="12" r="5"/>
          <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
        </svg>
      );
    default:
      return null;
  }
}

// Descrizioni brevi per ogni obiettivo (mostrate sulla card)
const NG_OBIETTIVO_DESC = {
  "perdere-peso":    "Calo di peso controllato e sostenibile",
  "aumentare-massa": "Surplus calorico e proteine mirate",
  "mantenimento":    "Stabilità di peso e composizione",
  "performance":     "Energia e recupero per lo sport",
  "salute":          "Benessere quotidiano e qualità",
  "definizione":     "Tono muscolare e bassa percentuale grasso"
};

/* ============ S15: OBIETTIVO (universale, mostrato a tutti dopo l'Hero) ============ */
function S15Obiettivo({ selected, onToggle, onNext }) {
  React.useEffect(() => { ngTrack("cfg_obiettivo_view"); }, []);
  const [picking, setPicking] = React.useState(null);

  // Click su una card: seleziona (mantenendo la possibilità multi tramite long-press / shift),
  // poi avanza dopo una breve pausa visiva. Per ora UX semplice: click = scegli + avanza.
  function pick(id) {
    if (picking) return;
    setPicking(id);
    // Marca come selezionato se non lo è già (usa il toggle esistente per coerenza tracking/CRM)
    if (!(selected || []).includes(id)) onToggle(id);
    // Dopo 350ms (animazione di selezione) avanza
    setTimeout(() => {
      ngTrack("cfg_obiettivo_continue", { count: 1, ids: [id], auto: true });
      onNext();
    }, 380);
  }

  return (
    <StepShell
      stepN={null}
      total={null}
      title="Qual è il tuo obiettivo?"
      sub="Clicca quello principale. Potrai aggiungerne altri parlando con il nutrizionista."
      hint="Useremo questa informazione per costruire il tuo piano e proporti i menu più adatti."
    >
      <div className="ng-cfg__obiettivi">
        {NG_OBIETTIVI.map(o => {
          const isPicked = picking === o.id;
          const isSelected = (selected || []).includes(o.id);
          return (
            <button
              key={o.id}
              type="button"
              className={"ng-cfg__obiettivo" + (isPicked || isSelected ? " is-active" : "")}
              onClick={() => pick(o.id)}
              disabled={!!picking}
            >
              <span className="ng-cfg__obiettivo-icon">
                <ObiettivoIcon id={o.id} />
              </span>
              <span className="ng-cfg__obiettivo-label">{o.label}</span>
              <span className="ng-cfg__obiettivo-desc">{NG_OBIETTIVO_DESC[o.id]}</span>
            </button>
          );
        })}
      </div>
    </StepShell>
  );
}

function S5ConfNutri() {
  React.useEffect(() => { ngTrack("cfg_confirm_nutri_view"); }, []);
  return (
    <div className="ng-cfg__conf">
      <div className="ng-cfg__conf-left">
        <div className="ng-cfg__conf-circle">🥗</div>
        <h2 className="ng-cfg__conf-title">Richiesta inviata!</h2>
        <p className="ng-cfg__conf-sub">Ti richiamiamo entro 24 ore per fissare la prima consulenza con il tuo nutrizionista Nutrigo.</p>
      </div>
      <div className="ng-cfg__conf-right">
        <div className="ng-cfg__conf-tags">
          <ConfTag label="Tipo richiesta" value="Nutrizionista Nutrigo" />
          <ConfTag label="Zona" value="Milano" />
          <ConfTag label="Prossimo step" value="Chiamata · 20 min" />
          <ConfTag label="Tempistica" value="Entro 24h" />
        </div>
      </div>
    </div>
  );
}
function ConfTag({ label, value }) {
  return (
    <div className="ng-cfg__conf-tag">
      <div className="ng-cfg__conf-tag-l">{label}</div>
      <div className="ng-cfg__conf-tag-v">{value}</div>
    </div>
  );
}

// Icona piano — visualizza i pasti inclusi (pranzo, cena, spuntini)
function PianoIcon({ id }) {
  const s = { width: 44, height: 44, viewBox: "0 0 44 44", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  // Tre lunch boxes affiancati a indicare i pasti coperti.
  // Stato "full" = riempito, "empty" = solo contorno
  function Box({ x, full }) {
    return (
      <g transform={`translate(${x}, 14)`}>
        <rect x="0" y="0" width="16" height="16" rx="3"/>
        {full && (
          <>
            <circle cx="5.5" cy="6" r="2" fill="currentColor" stroke="none"/>
            <circle cx="11" cy="9" r="2.5" fill="currentColor" stroke="none"/>
            <path d="M2 13h12" strokeWidth="1.2"/>
          </>
        )}
      </g>
    );
  }
  if (id === 1) {
    // Solo pranzo
    return <svg {...s}><Box x={14} full={true}/><text x="22" y="40" fontSize="6" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">pranzo</text></svg>;
  }
  if (id === 2) {
    // Pranzo + cena
    return <svg {...s}><Box x={4} full={true}/><Box x={24} full={true}/><text x="12" y="40" fontSize="5.5" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">pranzo</text><text x="32" y="40" fontSize="5.5" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">cena</text></svg>;
  }
  // Piano completo
  return (
    <svg {...s} viewBox="0 0 56 44">
      <g transform="translate(2,14)"><rect width="14" height="16" rx="3"/><circle cx="5" cy="6" r="1.8" fill="currentColor" stroke="none"/><circle cx="10" cy="9" r="2.2" fill="currentColor" stroke="none"/></g>
      <g transform="translate(20,14)"><rect width="14" height="16" rx="3"/><circle cx="5" cy="6" r="1.8" fill="currentColor" stroke="none"/><circle cx="10" cy="9" r="2.2" fill="currentColor" stroke="none"/></g>
      <g transform="translate(38,14)"><rect width="14" height="16" rx="3"/><circle cx="5" cy="6" r="1.8" fill="currentColor" stroke="none"/><circle cx="10" cy="9" r="2.2" fill="currentColor" stroke="none"/></g>
      <text x="9" y="40" fontSize="4.5" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">spuntini</text>
      <text x="27" y="40" fontSize="4.5" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">pranzo</text>
      <text x="45" y="40" fontSize="4.5" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="DM Sans, sans-serif" fontWeight="500">cena</text>
    </svg>
  );
}

function S6Piano({ value, onSel, onNext }) {
  const [picking, setPicking] = React.useState(null);
  // Copy "ideale per" — sostituisce i prezzi su S6. Il prezzo finale viene mostrato solo a S10.
  const meta = {
    1: { ideale: "Chi vuole iniziare", desc: "Pranzo controllato, cena libera", what: "Pranzo pesato al grammo" },
    2: { ideale: "Chi vuole risultati", desc: "Copertura su pranzo e cena", what: "Pranzo e cena pesati al grammo" },
    3: { ideale: "Chi non vuole pensieri", desc: "Tutta la giornata pianificata", what: "Spuntini + pranzo + cena" }
  };
  function pick(id) {
    if (picking) return;
    setPicking(id);
    onSel(id);
    setTimeout(() => onNext(), 380);
  }
  return (
    <StepShell stepN={1} total={4} title="Scegli il tuo piano." sub="Il pranzo è sempre incluso. Aggiungi cena e spuntini in base al tuo piano alimentare."
      hint="Tutti i pasti sono pesati al grammo secondo il tuo piano nutrizionale. Vedrai il prezzo nel riepilogo finale.">
      <div className="ng-cfg__plan-cards">
        {NG_PIANI.slice(1).map(p => {
          const m = meta[p.id] || {};
          const isSel = picking === p.id || value === p.id;
          return (
            <button
              key={p.id}
              type="button"
              className={"ng-cfg__plan-card" + (isSel ? " is-active" : "") + (p.id === 3 ? " is-featured" : "")}
              onClick={() => pick(p.id)}
              disabled={!!picking}
            >
              {p.id === 3 && <span className="ng-cfg__plan-card-badge">Più scelto</span>}
              <span className="ng-cfg__plan-card-icon"><PianoIcon id={p.id}/></span>
              <span className="ng-cfg__plan-card-name">{p.nome}</span>
              <span className="ng-cfg__plan-card-what">{m.what}</span>
              <span className="ng-cfg__plan-card-divider" />
              <span className="ng-cfg__plan-card-ideale-lbl">Ideale per</span>
              <span className="ng-cfg__plan-card-ideale">{m.ideale}</span>
              <span className="ng-cfg__plan-card-desc">{m.desc}</span>
            </button>
          );
        })}
      </div>
    </StepShell>
  );
}

function S7Giorni({ value, onSel, onNext }) {
  return (
    <StepShell stepN={2} total={4} title="Quanti giorni a settimana?" sub="Scegli quanti giorni vuoi che Nutrigo copra la tua alimentazione."
      hint="La box copre i giorni da te scelti, da lunedì a sabato.">
      <div className="ng-cfg__opts">
        <OptCard active={value === 5} onClick={() => onSel(5)} icon="💼" title="5 giorni" label={<>Lun–Ven<br/>22 giorni/mese</>} sub="Solo lavorativi" />
        <OptCard active={value === 6} onClick={() => onSel(6)} icon="📅" title="6 giorni" label={<>Lun–Sab<br/>26 giorni/mese</>} sub="Copertura completa" badge="Consigliato" />
      </div>
      <button className="ng-cfg__next" onClick={onNext}>Continua →</button>
    </StepShell>
  );
}
function OptCard({ icon, title, label, sub, active, onClick, badge, price }) {
  return (
    <div className={"ng-cfg__opt" + (active ? " is-active" : "")} onClick={onClick}>
      {badge && <span className="ng-cfg__opt-badge">{badge}</span>}
      <div className="ng-cfg__opt-icon">{icon}</div>
      <div className="ng-cfg__opt-title">{title}</div>
      <div className="ng-cfg__opt-label">{label}</div>
      {price && <div className="ng-cfg__opt-price">{price}</div>}
      {sub && <div className="ng-cfg__opt-sub">{sub}</div>}
    </div>
  );
}

function S8Consegne({ value, onSel, onNext }) {
  return (
    <StepShell stepN={3} total={4} title="Quante consegne a settimana?" sub="Più consegne = pasti più freschi. Una sola consegna = massima comodità logistica."
      hint="Entrambe le opzioni coprono gli stessi giorni. Cambia solo quando arriva la box.">
      <div className="ng-cfg__opts">
        <DelCard active={value === 1} onClick={() => onSel(1)} icon="📦" title="1 consegna"
          desc="Ricevi tutta la settimana in una volta. Massima comodità — sei a casa una volta sola." tag="Lunedì mattina" />
        <DelCard active={value === 2} onClick={() => onSel(2)} icon="🚚" title="2 consegne"
          desc="Ricevi metà settimana per volta. Pasti più freschi e frigo sempre organizzato." tag="Lunedì + Giovedì" badge="Più fresco" />
      </div>
      <button className="ng-cfg__next" onClick={onNext}>Continua →</button>
    </StepShell>
  );
}
function DelCard({ icon, title, desc, tag, active, onClick, badge }) {
  return (
    <div className={"ng-cfg__del" + (active ? " is-active" : "")} onClick={onClick}>
      {badge && <span className="ng-cfg__opt-badge">{badge}</span>}
      <div className="ng-cfg__del-check">{active ? "✓" : ""}</div>
      <div className="ng-cfg__del-icon">{icon}</div>
      <div className="ng-cfg__del-title">{title}</div>
      <p className="ng-cfg__del-desc">{desc}</p>
      <span className="ng-cfg__del-tag">{tag}</span>
    </div>
  );
}

function S9Durata({ value, onSel, piano, giorni, onNext }) {
  return (
    <StepShell stepN={4} total={4} title="Per quanti mesi?" sub="I risultati si vedono dalla 4ª settimana. Con l'abbonamento trimestrale ottieni il prezzo migliore."
      hint="Prezzo bloccato per tutta la durata scelta. Rinnovo automatico alla scadenza, con avviso prima.">
      <div className="ng-cfg__opts">
        <OptCard active={value === 1} onClick={() => onSel(1)} icon="📆" title="1 mese"
          label="Mensile"
          sub="Provi senza impegno" />
        <OptCard active={value === 3} onClick={() => onSel(3)} icon="📆📆📆" title="3 mesi"
          label="Trimestrale"
          sub="Tempo per vedere i risultati · Prezzo migliore"
          badge="Più conveniente" />
      </div>
      <button className="ng-cfg__next" onClick={onNext}>Vedi il tuo preventivo →</button>
    </StepShell>
  );
}

function S10Prezzo({ r, p, giorni, consegne, dur, onNext }) {
  React.useEffect(() => {
    ngTrack("cfg_price_view", {
      cfg_piano: p.nome, cfg_giorni: giorni, cfg_consegne: consegne,
      cfg_durata: dur, cfg_prezzo: r.mFin
    });
  }, []);
  return (
    <div className="ng-cfg__price">
      <div className="ng-cfg__price-left">
        <div className="ng-cfg__price-lbl">Il tuo piano personalizzato</div>
        <div className="ng-cfg__price-amt">{ngFmt(r.mFin)}</div>
        <div className="ng-cfg__price-per">/ mese{dur === 3 ? " · per 3 mesi" : ""}</div>
        {r.saving > 0 && (
          <div className="ng-cfg__price-save">🎉 Risparmi {ngFmt(r.saving)} vs mensile</div>
        )}
      </div>
      <div className="ng-cfg__price-right">
        <div className="ng-cfg__price-rows">
          <PriceRow label="Piano" value={p.desc} />
          <PriceRow label="Giorni / settimana" value={`${giorni} giorni · ${r.gg} giorni/mese`} />
          <PriceRow label="Consegne" value={ngConsLabel(consegne)} />
          <PriceRow label="Durata" value={`${dur} ${dur === 1 ? "mese" : "mesi"}`} />
          <PriceRow label="Zona" value="Consegna a Milano" />
        </div>
        <p className="ng-cfg__price-ppg">Solo <strong>{ngFmtD(r.ppg)}</strong> al giorno · IVA inclusa</p>
        <button className="ng-cfg__next" onClick={onNext}>Prenota la call senza alcun impegno →</button>
      </div>
    </div>
  );
}
function PriceRow({ label, value }) {
  return <div className="ng-cfg__price-row"><span>{label}</span><b>{value}</b></div>;
}

function S11FormFinale({ form, setForm, errors, r, p, giorni, consegne, dur, onSubmit }) {
  React.useEffect(() => { ngTrack("cfg_form_view"); }, []);
  const u = (k) => (e) => setForm({ ...form, [k]: e.target.value });  return (
    <div className="ng-cfg__step">
      <div className="ng-cfg__step-left">
        <h2 className="ng-cfg__step-title">Dove ti richiamiamo?</h2>
        <p className="ng-cfg__step-sub">Nessun impegno. Ti contatteremo entro 24 ore per confermare il tuo piano e organizzare la prima consegna.</p>
      </div>
      <div className="ng-cfg__step-right">
        <div className="ng-cfg__recap">
          <div className="ng-cfg__recap-label">{p.nome} · {giorni}gg · {ngConsLabel(consegne)} · {dur} {dur === 1 ? "mese" : "mesi"}</div>
          <div className="ng-cfg__recap-prev">Preventivo pronto dopo l'invio</div>
        </div>
        <div className="ng-cfg__price-note">
          <span className="ng-cfg__price-note-icon">✓</span>
          <div>
            <strong>Il tuo preventivo personalizzato ti aspetta.</strong>
            <span>Lascia un contatto e ti mostriamo subito il prezzo. Nessun pagamento richiesto.</span>
          </div>
        </div>
        <div className="ng-cfg__form-grid">
          <FormField label="Nome e cognome" placeholder="Marco Rossi" value={form.nome} onChange={u("nome")} error={errors.nome} />
          <FormField label="Telefono" type="tel" placeholder="+39 333 000 0000" value={form.tel} onChange={u("tel")} error={errors.tel} />
          <FormField label="Email" type="email" placeholder="marco@email.com" value={form.email} onChange={u("email")} error={errors.email} />
          <FormField label="CAP di consegna" type="text" inputMode="numeric" maxLength={5} placeholder="20121" value={form.cap} onChange={u("cap")} error={errors.cap} />
        </div>
        <button className="ng-cfg__submit" onClick={onSubmit}>Vedi il tuo preventivo →</button>
        <p className="ng-cfg__microtrust">Nessun pagamento richiesto · Ti mostriamo subito il preventivo · Zero spam</p>
      </div>
    </div>
  );
}

function S12FormDiretto({ form, setForm, errors, onSubmit }) {
  React.useEffect(() => { ngTrack("cfg_form_direct_view"); }, []);
  const u = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <div className="ng-cfg__step">
      <div className="ng-cfg__step-left">
        <h2 className="ng-cfg__step-title">Dove ti richiamiamo?</h2>
        <p className="ng-cfg__step-sub">Nessun impegno. Ti contatteremo entro 24 ore per costruire insieme il tuo piano.</p>
      </div>
      <div className="ng-cfg__step-right">
        <div className="ng-cfg__recap">
          <div className="ng-cfg__recap-label">Contatto diretto</div>
          <div className="ng-cfg__recap-price">Call gratuita</div>
        </div>
        <div className="ng-cfg__form-grid">
          <FormField label="Nome e cognome" placeholder="Marco Rossi" value={form.nome} onChange={u("nome")} error={errors.nome} />
          <FormField label="Telefono" type="tel" placeholder="+39 333 000 0000" value={form.tel} onChange={u("tel")} error={errors.tel} />
          <FormField label="Email" type="email" placeholder="marco@email.com" value={form.email} onChange={u("email")} error={errors.email} />
          <FormField label="CAP di consegna" type="text" inputMode="numeric" maxLength={5} placeholder="20121" value={form.cap} onChange={u("cap")} error={errors.cap} />
        </div>
        <button className="ng-cfg__submit" onClick={onSubmit}>Invia e prenota la call →</button>
        <p className="ng-cfg__microtrust">Nessun pagamento richiesto · Ti richiamiamo noi · Zero spam</p>
      </div>
    </div>
  );
}

function S13Conferma({ piano, giorni, consegne, dur, prezzo }) {
  React.useEffect(() => { ngTrack("cfg_confirm_view"); }, []);
  return (
    <div className="ng-cfg__conf">
      <div className="ng-cfg__conf-left">
        <div className="ng-cfg__conf-circle">✅</div>
        <h2 className="ng-cfg__conf-title">Richiesta inviata!</h2>
        <p className="ng-cfg__conf-sub">Ti richiamiamo entro 24 ore per confermare i dettagli e organizzare la prima consegna a Milano.</p>
      </div>
      <div className="ng-cfg__conf-right">
        <div className="ng-cfg__conf-tags">
          <ConfTag label="Piano" value={`${piano.nome} · ${giorni}gg · ${dur} ${dur === 1 ? "mese" : "mesi"} · ${ngFmt(prezzo)}/mese`} />
          <ConfTag label="Consegne" value={ngConsLabel(consegne)} />
          <ConfTag label="Prossimo step" value="Call · 15 min" />
          <ConfTag label="Tempistica" value="Entro 24h" />
        </div>
      </div>
    </div>
  );
}

/* ============ S14: SCELTA + UPLOAD PIANO ============ */
function S14UploadPiano({ file, setFile, notes, setNotes, onNext }) {
  const [mode, setMode] = React.useState(null); // null | "ora" | "dopo"
  const inputRef = React.useRef(null);
  React.useEffect(() => { ngTrack("cfg_upload_view"); }, []);
  function onPick(f) {
    if (!f) return;
    setFile({ name: f.name, size: f.size, type: f.type, _raw: f });
    ngTrack("cfg_plan_uploaded", { name: f.name, size: f.size });
  }
  if (!mode) {
    return (
      <StepShell title="Quando vuoi inviarci il tuo piano?" sub="Possiamo riceverlo subito o dopo la call con il nostro team."
        hint="In entrambi i casi i tuoi dati restano privati e visibili solo a chef + nutrizionista.">
        <button className="ng-cfg__opt" onClick={() => { ngTrack("cfg_upload_choose_ora"); setMode("ora"); }}>
          <div className="ng-cfg__opt-title">📤 Lo carico ora</div>
          <div className="ng-cfg__opt-sub">Allego subito il PDF/foto del piano. Velocizziamo l'avvio.</div>
        </button>
        <button className="ng-cfg__opt" onClick={() => { ngTrack("cfg_upload_choose_dopo"); setMode("dopo"); setTimeout(onNext, 280); }}>
          <div className="ng-cfg__opt-title">📞 Lo invio dopo la call</div>
          <div className="ng-cfg__opt-sub">Ne parliamo prima con il nostro team, poi lo inoltro via email.</div>
        </button>
      </StepShell>
    );
  }
  return (
    <StepShell title="Carica il tuo piano alimentare" sub="Lo leggiamo noi e lo trasformiamo in pasti reali. Accettiamo qualsiasi formato."
      hint="PDF, foto, screenshot di un'app: va bene tutto. I tuoi dati restano privati.">
      <div className="ng-cfg__upload" onClick={() => inputRef.current?.click()}
           onDragOver={(e) => e.preventDefault()}
           onDrop={(e) => { e.preventDefault(); onPick(e.dataTransfer.files?.[0]); }}>
        {!file ? (
          <>
            <div className="ng-cfg__upload-icon">↑</div>
            <div className="ng-cfg__upload-title">Trascina il piano o clicca per caricare</div>
            <div className="ng-cfg__upload-hint">PDF, JPG, PNG, DOC · max 10 MB</div>
          </>
        ) : (
          <div className="ng-cfg__upload-file">
            <div className="ng-cfg__upload-file-icon">📄</div>
            <div style={{flex:1}}>
              <div className="ng-cfg__upload-file-name">{file.name}</div>
              <div className="ng-cfg__upload-file-size">{(file.size/1024).toFixed(0)} KB · caricato</div>
            </div>
            <button className="ng-cfg__upload-remove" onClick={(e) => { e.stopPropagation(); setFile(null); }}>×</button>
          </div>
        )}
        <input ref={inputRef} type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style={{display:"none"}}
               onChange={(e) => onPick(e.target.files?.[0])} />
      </div>
      <div className="ng-cfg__field ng-cfg__field--full" style={{marginTop:14}}>
        <label>Note (opzionale)</label>
        <input type="text" placeholder="es. Allergie, preferenze, indicazioni del nutrizionista..."
               value={notes} onChange={(e) => setNotes(e.target.value)} />
      </div>
      <div style={{display:"flex", gap:10, marginTop:"auto"}}>
        <button className="ng-cfg__next" style={{flex:1, background:"transparent", color:"var(--ng-ink-500)", border:"1px solid var(--ng-ink-200)"}} onClick={() => setMode(null)}>← Indietro</button>
        <button className="ng-cfg__next" style={{flex:2}} disabled={!file} onClick={onNext}>Continua →</button>
      </div>
    </StepShell>
  );
}

Object.assign(window, { HeroConfigurator });