/* global React */

/* ============ TESTIMONIALS ============ */
const NG_GOOGLE_REVIEWS = "https://g.page/r/CcinzdOf1qY3EAE";
const TESTI = [
{ q: "Mi sono messa a cercare online qualcuno che mi aiutasse con la gestione dei pasti e tra tanti piatti pronti ho trovato loro: una manna dal cielo. Inserisci il tuo piano alimentare e te lo preparano esattamente come lo richiedi.", n: "Marzia B.", r: "Recensione Google · 5★", a: "MB" },
{ q: "Ho fatto la settimana di prova e mi sono trovata davvero bene. Hanno rispettato fedelmente il mio piano nutrizionale. Super attenti e disponibili.", n: "Maria Elena F.", r: "Settimana di prova · Google", a: "ME" },
{ q: "Il cibo era ottimo, porzioni perfette in base alle nostre esigenze e servizio veloce ed efficiente. Serena è sempre stata super disponibile.", n: "Wanda Melara", r: "Local Guide · Google", a: "WM" },
{ q: "Ottimo servizio per pranzi freschi consegnati a domicilio. Prezzi onesti, ottima qualità dei prodotti e servizio efficiente. Ottima la possibilità di variare a piacere i piatti e personalizzare la dieta.", n: "Giovanni Minto", r: "Local Guide · Google", a: "GM" },
{ q: "La svolta della mia alimentazione! Grazie a Nutrigo ho finalmente detto addio ai soliti due o tre piatti che finivano sempre per stufarmi. Le loro proposte sono eccezionali, buonissime, addirittura meglio di quelle di un ristorante.", n: "Ilaria La Cava", r: "Recensione Google · 5★", a: "IL" }];


function TestimonialsSection() {
  return (
    <section className="ng-section" data-screen-label="07 Testimonianze">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Chi ci sceglie</p>
          <h2 className="ng-h2">Persone che seguono un piano. E che non vogliono pensarci.</h2>
          <a href={NG_GOOGLE_REVIEWS} target="_blank" rel="noopener" style={{display:"inline-block",marginTop:"12px",fontWeight:600,color:"#178f80",textDecoration:"none",fontSize:"14px"}}>★★★★★ 5,0 su Google — leggi tutte le recensioni →</a>
        </div>
        <div className="ng-testi">
          {TESTI.map((t, i) =>
          <div className="ng-testi__card" key={i}>
              <div className="ng-testi__stars">
                {[0, 1, 2, 3, 4].map((k) =>
              <svg key={k} width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                  </svg>
              )}
              </div>
              <p className="ng-testi__quote">"{t.q}"</p>
              <div className="ng-testi__person">
                <span className="ng-testi__avatar">{t.a}</span>
                <div>
                  <div className="ng-testi__name">{t.n}</div>
                  <div className="ng-testi__role">{t.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ TRUST / CERTIFICATIONS ============ */
function TrustSection() {
  const items = [
  { t: "HACCP certificato", d: "Cucina in regola con il sistema di analisi dei rischi alimentari, audit trimestrale.", icon: "shield" },
  { t: "Pesatura al grammo", d: "Bilance certificate, scarto medio inferiore al 2% sui macronutrienti dichiarati.", icon: "scale" },
  { t: "Catena del freddo", d: "Box refrigerato 2–4°C dalla cucina alla porta. Sigillo a vista, etichetta tracciabile.", icon: "snow" },
  { t: "Ingredienti tracciabili", d: "Filiera corta, fornitori certificati. Origine pubblicata in etichetta su ogni piatto.", icon: "leaf" }];

  const Icon = ({ k }) => {
    if (k === "shield") return <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2l8 3v7c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V5l8-3z" stroke="currentColor" strokeWidth="1.6" /><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    if (k === "scale") return <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3v18M5 7l7-2 7 2M3 14l4-7 4 7H3zM13 14l4-7 4 7h-8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /></svg>;
    if (k === "snow") return <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2v20M4 6l16 12M4 18L20 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>;
    return <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M11 19c-4 0-7-3-7-7 0-5 4-9 11-9 0 7-4 11-9 11l5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;
  };
  return (
    <section className="ng-section ng-section--soft" data-screen-label="08 Sicurezza">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Sicurezza alimentare</p>
          <h2 className="ng-h2">Quello che mangi è quello che è scritto.</h2>
          <p className="ng-lead">Un piano alimentare funziona solo se i numeri sono veri. Ecco come ce ne assicuriamo.</p>
        </div>
        <div className="ng-trust-grid">
          {items.map((i) =>
          <div className="ng-trust-item" key={i.t}>
              <span className="ng-trust-item__icon"><Icon k={i.icon} /></span>
              <h4>{i.t}</h4>
              <p>{i.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ SUSTAINABILITY (rimossa box ritiro) ============ */
function SustainabilitySection() {
  return null;
}

/* ============ B2B ============ */
const B2B_ROLES = {
  nutrizionista: {
    label: "Nutrizionista",
    longLabel: "Sono un nutrizionista",
    sublabel: "Biologo, dietista, medico nutrizionista",
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
        <path d="M9 2v4M15 2v4M9 11h6M9 15h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <rect x="5" y="4" width="14" height="18" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      </svg>
    ),
    eyebrow: "Per nutrizionisti",
    h2: "Il tuo piano, eseguito esattamente come l'hai scritto.",
    sub: "I tuoi pazienti smettono di dirti \"non ho avuto tempo di cucinare\". Vedi l'aderenza dal portale, modifichi i piani in tempo reale, mantieni il rapporto clinico al centro — Nutrigo si occupa solo dell'esecuzione.",
    bullets: [
      "Portale dedicato: invii il piano, monitori l'aderenza in tempo reale",
      "Pesatura al grammo certificata, niente \"sostituzioni a occhio\"",
      "Il paziente resta libero: può scegliere Nutrigo o no, in qualsiasi momento",
      "Modifichi e versiona i piani direttamente dal portale, senza attriti",
      "Programma di collaborazione opzionale per i pazienti che attivi tu"],

    panelTitle: "Portale nutrizionista — anteprima",
    panelRows: [
      ["Pazienti attivi", "24"],
      ["Aderenza media", "94%"],
      ["Piani in revisione", "3"],
      ["Pasti consegnati / mese", "612"],
      ["Soddisfazione pazienti", "4.8 / 5"]]

  },
  trainer: {
    label: "Personal trainer",
    longLabel: "Sono un personal trainer",
    sublabel: "Coach, preparatore atletico, allenatore",
    icon: (
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
        <path d="M6 9v6M18 9v6M9 7v10M15 7v10M3 11h3M18 11h3M3 13h3M18 13h3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
    eyebrow: "Per personal trainer",
    h2: "L'allenamento è tuo. La cucina la facciamo noi.",
    sub: "I tuoi clienti seguono macro e calorie senza scuse logistiche. Tu imposti il target nutrizionale, vedi l'aderenza dal portale, e integri i pasti nel tuo programma di allenamento senza che il cliente debba pensare alla spesa.",
    bullets: [
      "Portale dedicato: imposti macro/kcal, monitori l'aderenza in tempo reale",
      "Pasti pesati al grammo: i tuoi target sono rispettati davvero",
      "Il cliente resta libero: scelta opzionale, mai un vincolo",
      "Aggiorni i target dal portale, effettivi dalla settimana successiva",
      "Programma di collaborazione opzionale per i clienti che attivi tu"],

    panelTitle: "Portale trainer — anteprima",
    panelRows: [
      ["Clienti attivi", "31"],
      ["Aderenza media", "92%"],
      ["Target da rivedere", "4"],
      ["Pasti consegnati / mese", "806"],
      ["Soddisfazione clienti", "4.9 / 5"]]

  }
};

function B2BSection() {
  const [role, setRole] = React.useState("nutrizionista");
  const r = B2B_ROLES[role];
  return (
    <section className="ng-section" id="professionisti" data-screen-label="10 Per professionisti">
      <div className="ng-container">
        <div className="ng-section__head" style={{ marginBottom: 28 }}>
          <p className="ng-eyebrow">Per professionisti</p>
          <h2 className="ng-h2">Il tuo piano, la nostra cucina. Il tuo paziente, il suo risultato.</h2>
          <p className="ng-lead">Nutrigo è uno strumento al servizio dei nutrizionisti e dei personal trainer di Milano e hinterland. Tu prescrivi, noi eseguiamo. Scegli il tuo ruolo per scoprire come funziona.</p>
        </div>

        {/* Toggle pill segmented control */}
        <div className="ng-b2b__toggle-wrap">
          <div className="ng-b2b__toggle" role="tablist" aria-label="Tipo di professionista">
            {Object.entries(B2B_ROLES).map(([k, v]) => (
              <button
                key={k}
                role="tab"
                aria-selected={role === k}
                className={"ng-b2b__toggle-pill" + (role === k ? " is-active" : "")}
                onClick={() => setRole(k)}>
                <span className="ng-b2b__toggle-dot" aria-hidden="true"></span>
                <span className="ng-b2b__toggle-label">{v.label}</span>
              </button>
            ))}
          </div>
        </div>
        {/* legacy hero hidden */}
        <div className="ng-b2b__hero" hidden role="tablist" aria-label="legacy">
          {Object.entries(B2B_ROLES).map(([k, v]) => (
            <button key={k} role="tab" aria-selected={role === k} onClick={() => setRole(k)} hidden>
              <span>{v.icon}</span>
              <span>
                <span>{v.longLabel}</span>
                <span>{v.sublabel}</span>
              </span>
              <span aria-hidden="true">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <circle cx="10" cy="10" r="9" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M6 10.5 9 13.5 14.5 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </button>
          ))}
        </div>

        <div className="ng-b2b">
          <div>
            <p className="ng-eyebrow">{r.eyebrow}</p>
            <h3 className="ng-h2" style={{ fontSize: "clamp(28px, 3.4vw, 40px)" }}>{r.h2}</h3>
            <p>{r.sub}</p>
            <ul className="ng-b2b__list">
              {r.bullets.map((b, i) => <li key={i}><Check size={18} /> {b}</li>)}
            </ul>
            <B2BForm role={role} />
          </div>
          <div className="ng-b2b__panel">
            <div style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 14 }}>{r.panelTitle}</div>
            {r.panelRows.map(([lbl, val], i) =>
            <div key={i} className="ng-b2b__panel-row"><span className="lbl">{lbl}</span><span className="val">{val}</span></div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ============ FAQ ============ */
const FAQ_ITEMS = [
{ q: "Devo avere già un piano del nutrizionista?", a: "Sì. Nutrigo non sostituisce un nutrizionista: prepara e consegna pasti personalizzati a Milano seguendo il piano che ti ha già dato il tuo professionista. Se non hai un nutrizionista, possiamo metterti in contatto con un partner certificato." },
{ q: "Come vi mando il piano del nutrizionista?", a: "Dopo aver attivato l'abbonamento ti contattiamo e ci mandi il piano come preferisci: PDF, foto, screenshot o messaggio. Nessun caricamento obbligatorio prima di pagare." },
{ q: "Cosa succede se il piano cambia?", a: "Ci mandi il piano aggiornato quando vuoi: applichiamo le modifiche dalla settimana successiva, senza riconfigurare niente." },
{ q: "I pasti sono freschi o surgelati?", a: "Freschi, sigillati sottovuoto. Cuciniamo entro 24 ore dalla consegna, condimenti e salse separati. Si conservano in frigo per 4–5 giorni." },
{ q: "Posso mettere in pausa o cambiare piano?", a: "Sì. Salti una settimana o cambi piano dal tuo account, senza chiamare nessuno. Pagamento mensile o trimestrale, con prezzo bloccato per tutta la durata scelta." },
{ q: "Posso scegliere quanti giorni a settimana ricevere i pasti?", a: "Sì. Scegli tra 5 o 6 giorni a settimana in fase di configurazione. Il prezzo si adatta automaticamente: 5 giorni = 22 giorni/mese, 6 giorni = 26 giorni/mese." },
{ q: "In quali zone consegnate?", a: "Tutta Milano (CAP 20121–20162) e i comuni della prima cintura: Sesto San Giovanni, Cinisello Balsamo, Cologno Monzese, Cusano Milanino, Bresso, Cormano, Cusago, Trezzano sul Naviglio, Corsico, Buccinasco, Assago, San Donato, San Giuliano, Segrate, Vimodrone, Cernusco sul Naviglio, Pioltello e Monza. Stesso costo di consegna ovunque. Verifica il tuo CAP nella sezione Zone." },
{ q: "Consegnate anche fuori Milano città?", a: "Sì. Copriamo 18 comuni dell'hinterland milanese e Monza, con la stessa frequenza (1 o 2 consegne a settimana) e senza sovrapprezzo. Se il tuo CAP non è in lista ma sei nelle vicinanze, scrivici: valutiamo caso per caso." },
{ q: "Quanto costa?", a: "Tre piani, prezzi mensili IVA inclusa per 6 giorni/settimana: Solo pranzo €286/mese, Pranzo + cena €481/mese, Piano completo (spuntini + pranzo + cena) €598/mese. Per 5 giorni/settimana il prezzo si riduce proporzionalmente. Il trimestrale è scontato del 10%. Nessun costo nascosto di consegna o configurazione." }];


function FAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="ng-section ng-section--soft" id="faq" data-screen-label="11 FAQ">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Domande frequenti</p>
          <h2 className="ng-h2">Quello che ci chiedono prima di iniziare.</h2>
        </div>
        <div className="ng-faq">
          {FAQ_ITEMS.map((f, i) =>
          <div key={i} className={"ng-faq__item" + (open === i ? " is-open" : "")}>
              <button className="ng-faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="ng-faq__icon">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="ng-faq__a">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============ FINAL CTA ============ */
function FinalCTA() {
  return (
    <section className="ng-section" data-screen-label="12 CTA finale">
      <div className="ng-container">
        <div className="ng-final">
          <p className="ng-eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Posti limitati · Milano</p>
          <h2 className="ng-h2">Inizia subito.</h2>
          <p>Prima consegna entro 7 giorni a Milano e in 18 comuni dell'hinterland.</p>
          <a href="#top" className="ng-btn ng-btn--white">Inizia ora <ArrowRight /></a>
        </div>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="ng-footer">
      <div className="ng-container">
        <div className="ng-footer__grid">
          <div>
            <a href="/pasti_personalizzati_a_milano/" className="ng-logo ng-logo--footer" aria-label="Nutrigo — home"><img src={(window.NG_ROOT || "") + "logo-nutrigo.png"} alt="Nutrigo" className="ng-logo__img" /></a>
            <p className="ng-footer__brand-text">Servizio di consegna pasti personalizzati a Milano e nell'hinterland (Sesto, Cinisello, Cologno, Segrate, Monza e altri 13 comuni), basati sul piano alimentare del tuo nutrizionista.</p>
          </div>
          <div>
            <h5>Prodotto</h5>
            <ul>
              <li><a href="#come-funziona">Come funziona</a></li>
              <li><a href="#menu">Menu</a></li>
              <li><a href="#prezzi">Prezzi</a></li>
              <li><a href="#zone">Zone di consegna</a></li>
            </ul>
          </div>
          <div>
            <h5>Per professionisti</h5>
            <ul>
              <li><a href="#professionisti">Per nutrizionisti e PT</a></li>
              <li><a href="#professionisti-onboard">Diventa partner</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Azienda</h5>
            <ul>
              <li><a href="mailto:ciao@nutrigo.io">Contatti</a></li>
              <li><a href="mailto:lavoraconnoi@nutrigo.io">Lavora con noi</a></li>
              <li><a href="mailto:stampa@nutrigo.io">Stampa</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="ng-footer__bottom">
          <span>Copyright 2026 Nutrigo. All Rights Reserved. — NUTRIGO S.R.L. — Capitale sociale € 10.000,00 — P.IVA 14734550966 — Sede legale: Viale Don Luigi Orione 14, 20132 Milano (MI)</span>
          <div className="ng-footer__bottom-links">
            <a href="https://www.iubenda.com/privacy-policy/84717023" className="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe" title="Privacy Policy">Privacy</a>
            <a href={((location.pathname.indexOf("/ordina") !== -1) ? "../" : "") + "termini.html"}>Termini</a>
            <a href="https://www.iubenda.com/privacy-policy/84717023/cookie-policy" className="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe" title="Cookie Policy">Cookie</a>
          </div>
        </div>
      </div>
    </footer>);

}

/* ============ B2B FORM ============ */
function B2BForm({ role = "nutrizionista" }) {
  const isTrainer = role === "trainer";
  const studioLbl = isTrainer ? "Studio / palestra" : "Studio / società";
  const clientiLbl = isTrainer ? "N° clienti potenzialmente interessati" : "N° pazienti potenzialmente interessati";
  const successLbl = isTrainer ? "trainer" : "nutrizionista";
  const [f, setF] = React.useState({ nome: "", studio: "", email: "", tel: "", pazienti: "", note: "" });
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState({});
  const u = (k) => (e) => setF({ ...f, [k]: e.target.value });
  function submit() {
    const errs = {};
    if (!f.nome.trim()) errs.nome = 1;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) errs.email = 1;
    if (!f.tel.trim() || f.tel.replace(/\D/g, "").length < 8) errs.tel = 1;
    setErr(errs);
    if (Object.keys(errs).length) return;
    const payload = { ...f, role };
    if (window.nutrigoTracker?.track) window.nutrigoTracker.track("b2b_lead", payload);
    if (window.nutrigoTracker?.identify) window.nutrigoTracker.identify(f.email, { name: f.nome, nome: f.nome, source: "b2b_" + role, contact_type: role });
    if (window.nutrigoTracker?.addTag) window.nutrigoTracker.addTag("tipo:" + role);
    // Brevo identify diretto: contatto creato con CONTACT_TYPE=role
    try {
      if (window.Brevo && typeof window.Brevo.push === "function") {
        window.Brevo.push(["identify", {
          identifiers: { email_id: f.email },
          attributes: {
            FIRSTNAME: f.nome,
            PHONE: f.tel,
            CONTACT_TYPE: role,
            SOURCE: "b2b_form",
            STUDIO: f.studio || "",
            PAZIENTI: f.pazienti || "",
            NOTE: f.note || ""
          }
        }]);
        window.Brevo.push(["track", "b2b_lead", { email_id: f.email }, { data: payload }]);
      }
    } catch (e) {}
    // Formspree: invia anche per email così non perdi il lead
    try {
      const fd = new FormData();
      Object.entries(payload).forEach(([k, v]) => fd.append(k, v || ""));
      fd.append("CONTACT_TYPE", role);
      fd.append("_subject", "Nuovo " + successLbl + " partner — " + (f.nome || f.email));
      fetch("https://formspree.io/f/xgodygna", { method: "POST", body: fd, headers: { "Accept": "application/json" } });
    } catch (e) {}
    try {
      const leads = JSON.parse(localStorage.getItem("nutrigo:leads") || "[]");
      leads.push({ tipo: "b2b_" + role, ts: Date.now(), ...payload });
      localStorage.setItem("nutrigo:leads", JSON.stringify(leads));
    } catch (e) {}
    setSent(true);
  }
  if (sent) {
    return (
      <div className="ng-b2b-form">
        <div className="ng-b2b-form__success">
          ✅ <b>Richiesta inviata</b><br />
          Ti contattiamo entro 24h per attivare il tuo portale {successLbl}.
        </div>
      </div>);

  }
  return (
    <div className="ng-b2b-form" id="professionisti-onboard">
      <div>
        <h3 className="ng-b2b-form__title">Diventa partner Nutrigo</h3>
        <p className="ng-b2b-form__sub">Compila il form. Ti contattiamo entro 24h per attivare il portale.</p>
      </div>
      <div className="ng-b2b-form__grid">
        <input placeholder="Nome e cognome*" value={f.nome} onChange={u("nome")} style={{ borderColor: err.nome ? "#D9534F" : "" }} />
        <input placeholder={studioLbl} value={f.studio} onChange={u("studio")} />
        <input type="email" placeholder="Email*" value={f.email} onChange={u("email")} style={{ borderColor: err.email ? "#D9534F" : "" }} />
        <input type="tel" placeholder="Telefono*" value={f.tel} onChange={u("tel")} style={{ borderColor: err.tel ? "#D9534F" : "" }} />
        <input className="ng-b2b-form__full" placeholder={clientiLbl} value={f.pazienti} onChange={u("pazienti")} />
        <textarea className="ng-b2b-form__full" placeholder="Note (opzionale)" value={f.note} onChange={u("note")} />
      </div>
      <button className="ng-btn ng-btn--primary" onClick={submit} style={{ justifyContent: "center" }}>
        Invia richiesta <ArrowRight />
      </button>
    </div>);

}

Object.assign(window, { TestimonialsSection, TrustSection, SustainabilitySection, B2BSection, B2BForm, FAQSection, FinalCTA, Footer });