/* global React */
const { useState, useEffect, useRef } = React;

/* ============ Shared icons ============ */
const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8.5L6.5 12L13 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const ArrowRight = () => <span className="ng-btn__arrow" aria-hidden="true">→</span>;

/* ============ NAV ============ */
function Nav() {
  const [stuck, setStuck] = useState(false);
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 4);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"ng-nav" + (stuck ? " is-stuck" : "")}>
      <div className="ng-container ng-nav__inner">
        <a href="/pasti_personalizzati_a_milano/" className="ng-logo" aria-label="Nutrigo — home">
          <img src={(window.NG_ROOT || "") + "logo-nutrigo.png"} alt="Nutrigo" className="ng-logo__img" />
        </a>
        <div className="ng-nav__links">
          <a href="#come-funziona">Come funziona</a>
          <a href="#menu">Menu</a>
          <a href="#prezzi">Prezzi</a>
          <a href="#zone">Zone</a>
          <a href="#professionisti">Per professionisti</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="ng-nav__cta">
          <a href="#top" className="ng-btn ng-btn--primary">
            Inizia <ArrowRight />
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <section className="ng-hero" data-screen-label="01 Hero" id="top">
      <div className="ng-hero__media">
        <image-slot
          id="hero-photo"
          shape="rect"
          anchor="top"
          src={(window.NG_ROOT || "") + "img/hero-photo.webp"}
          placeholder="Foto · Donna + frigo Nutrigo"
        ></image-slot>
      </div>
      <div className="ng-hero__content">
        <div className="ng-hero__inner">
          <div className="ng-hero__badge">Attivo a Milano e hinterland — posti limitati</div>
          <h1>Segui la tua dieta. Senza cucinare.</h1>
          <p className="ng-hero__sub">Nutrigo prepara i tuoi pasti al grammo e li consegna a casa o in ufficio, da €11 al giorno.</p>
          <a className="ng-hero__cta" href="#top">
            <span>Inizia ora</span>
            <span className="ng-hero__cta-arrow">→</span>
          </a>
          <div className="ng-hero__trust">
            <span><Check size={14}/> Pesatura al grammo</span>
            <span><Check size={14}/> Consegna a Milano e hinterland</span>
            
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ HOW IT WORKS ============ */
const HOW_STEPS = [
  { n: "01", t: "Scegli la formula", d: "Solo pranzo, pranzo+cena o completo. Vedi subito il prezzo e attivi." },
  { n: "02", t: "Noi cuciniamo sul tuo piano", d: "Dopo l'attivazione ci mandi il piano del nutrizionista. Pesiamo al grammo, niente sostituzioni." },
  { n: "03", t: "Consegniamo", d: "Sottovuoto, condimenti separati. A Milano e hinterland (Sesto, Monza, Segrate…), una o due volte a settimana." },
  { n: "04", t: "Tu mangi", d: "Riscaldi 2 minuti. Stesso risultato del piano, zero gestione." },
];

/* ============ SEO COPY ============ */
function SeoCopy() {
  return (
    <section className="ng-section ng-section--soft" id="seo-milano" data-screen-label="07 SEO Milano">
      <div className="ng-container ng-seo">
        <div className="ng-seo__head">
          <p className="ng-eyebrow">Pasti personalizzati a Milano</p>
          <h2 className="ng-h2">Il tuo piano alimentare, preparato e consegnato a casa.</h2>
        </div>
        <div className="ng-seo__grid">
          <div className="ng-seo__col">
            <h3>Per chi sono i pasti personalizzati Nutrigo</h3>
            <p>Nutrigo è il servizio di <strong>pasti personalizzati a Milano</strong> per chi segue un piano alimentare e non ha tempo (o voglia) di cucinare. I nostri chef leggono il piano del tuo nutrizionista, calcolano grammature ed equivalenti, e preparano ogni pasto al grammo. Ricevi tutto a casa, sigillato sottovuoto, pronto da scaldare — a Milano e nei comuni dell'hinterland (Sesto San Giovanni, Cinisello, Cologno, Segrate, Monza e altri 13).</p>
            <p>È pensato per professionisti, sportivi, atleti, neo-mamme, persone in percorsi di ricomposizione corporea o post-operatori — chiunque debba seguire un'alimentazione precisa senza dedicare ore a spesa, cucina e meal prep.</p>
          </div>
          <div className="ng-seo__col">
            <h3>Perché scegliere Nutrigo a Milano e hinterland</h3>
            <ul className="ng-seo__list">
              <li><strong>Pesatura al grammo</strong> — ogni macro nel tuo piano è rispettato. Niente "circa".</li>
              <li><strong>Sottovuoto, condimenti separati</strong> — pasti freschi, durano 4–5 giorni in frigo.</li>
              <li><strong>Consegna a Milano e hinterland</strong> — una o due volte a settimana, in tutta la città (CAP 20121–20162) e nei 18 comuni della prima cintura, fino a Monza.</li>
              <li><strong>Piano fluido</strong> — modifichi quantità, escludi alimenti, cambi giorni quando serve.</li>
              <li><strong>Mensile o trimestrale</strong> — scegli la durata che preferisci: sul trimestrale il prezzo scende del 10%.</li>
            </ul>
          </div>
        </div>
        <div className="ng-seo__strip">
          <div className="ng-seo__strip-item"><span className="ng-seo__big">da €11</span><span>al giorno</span></div>
          <div className="ng-seo__strip-item"><span className="ng-seo__big">26</span><span>giorni / mese (6gg)</span></div>
          <div className="ng-seo__strip-item"><span className="ng-seo__big">2</span><span>consegne max / settimana</span></div>
          <div className="ng-seo__strip-item"><span className="ng-seo__big">7gg</span><span>prima consegna</span></div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ variant = "timeline" }) {
  const cls = "ng-how ng-how--" + variant;
  return (
    <section className="ng-section" id="come-funziona" data-screen-label="02 Come funziona">
      <div className="ng-container">
        <div className="ng-section__head">
          <p className="ng-eyebrow">Come funziona</p>
          <h2 className="ng-h2">Come funzionano i pasti personalizzati a Milano</h2>
          <p className="ng-lead">Quattro passaggi, zero gestione. I nostri chef preparano i tuoi pasti seguendo il piano del nutrizionista al grammo, e li consegniamo a casa tua a Milano e nell'hinterland una o due volte a settimana.</p>
        </div>
        <div className={cls}>
          {HOW_STEPS.map(s => (
            <div className="ng-how__step" key={s.n}>
              <span className="ng-how__num">{s.n}</span>
              <h3 className="ng-how__title">{s.t}</h3>
              <p className="ng-how__desc">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ UPLOAD MOCKUP ============ */
function UploadSection({ variant = "dropzone" }) {
  return (
    <section className="ng-section ng-section--soft" id="upload" data-screen-label="03 Upload piano">
      <div className="ng-container ng-upload">
        <div className="ng-upload__copy">
          <p className="ng-eyebrow">Il tuo piano, esattamente</p>
          <h2 className="ng-h2">Carica il piano del nutrizionista in 30 secondi.</h2>
          <p className="ng-lead">Accettiamo qualsiasi formato. Lo leggiamo, lo verifichiamo con te, e da quel momento non devi più pensarci.</p>
          <ul className="ng-upload__list">
            <li><Check size={20}/> PDF, foto, screenshot, testo o link</li>
            <li><Check size={20}/> Verifica con il tuo nutrizionista, se vuoi</li>
            <li><Check size={20}/> Ogni grammo rispettato — niente sostituzioni nascoste</li>
            <li><Check size={20}/> Aggiorni il piano quando vuoi, senza riconfigurare</li>
          </ul>
          <a href="#top" className="ng-btn ng-btn--primary" style={{marginTop: 32}}>
            Carica il tuo piano <ArrowRight />
          </a>
        </div>
        <div>
          {variant === "dropzone" && <UploadDropzone />}
          {variant === "form" && <UploadForm />}
          {variant === "chat" && <UploadChat />}
        </div>
      </div>
    </section>
  );
}

function MockupShell({ path, children }) {
  return (
    <div className="ng-mockup">
      <div className="ng-mockup__bar">
        <span className="ng-mockup__dot"></span>
        <span className="ng-mockup__dot"></span>
        <span className="ng-mockup__dot"></span>
        <span className="ng-mockup__path">{path}</span>
      </div>
      <div className="ng-mockup__body">{children}</div>
    </div>
  );
}

function UploadDropzone() {
  return (
    <MockupShell path="nutrigo.io/configura — passo 1 di 4">
      <div className="ng-dz">
        <div className="ng-dz__icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M12 16V4M12 4L7 9M12 4L17 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        </div>
        <p className="ng-dz__title">Trascina qui il piano alimentare</p>
        <p className="ng-dz__hint">PDF, JPG, PNG o testo · max 10 MB</p>
        <div className="ng-dz__file">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="1.6"/>
            <path d="M14 2v6h6" stroke="currentColor" strokeWidth="1.6"/>
          </svg>
          <div>
            <div className="ng-dz__file-name">Piano_Marco_Maggio.pdf</div>
            <div style={{fontSize: 12, color: "var(--ng-ink-400)"}}>2.187 kcal/giorno · 5 pasti</div>
          </div>
          <span className="ng-dz__file-size">412 KB</span>
        </div>
      </div>
    </MockupShell>
  );
}

function UploadForm() {
  const rows = [
    { l: "Calorie", v: "2.187 kcal", ok: true },
    { l: "Proteine", v: "164 g", ok: true },
    { l: "Carboidrati", v: "232 g", ok: true },
    { l: "Grassi", v: "68 g", ok: true },
    { l: "Pasti/giorno", v: "5", ok: true },
    { l: "Allergie", v: "Lattosio", ok: true },
  ];
  return (
    <MockupShell path="Piano letto · verifica i dati">
      <div className="ng-form">
        {[0,2,4].map(i => (
          <div className="ng-form__row" key={i}>
            {[rows[i], rows[i+1]].map(r => (
              <div className="ng-input" key={r.l}>
                <label>{r.l}</label>
                <div className="ng-input__field ng-input__field--ok">
                  <span>{r.v}</span>
                  <span className="ng-input__check"><Check size={16}/></span>
                </div>
              </div>
            ))}
          </div>
        ))}
        <button className="ng-btn ng-btn--primary" style={{justifyContent:"center", marginTop: 8}}>
          Conferma e prosegui <ArrowRight />
        </button>
      </div>
    </MockupShell>
  );
}

function UploadChat() {
  return (
    <MockupShell path="Verifica con il nutrizionista — opzionale">
      <div className="ng-chat">
        <div className="ng-chat__msg ng-chat__msg--in">Ho ricevuto il piano. Confermo: 2.187 kcal, 5 pasti, no lattosio. Tutto corretto?</div>
        <div className="ng-chat__attach">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="1.6"/><path d="M14 2v6h6" stroke="currentColor" strokeWidth="1.6"/></svg>
          Piano_Marco_Maggio.pdf
        </div>
        <div className="ng-chat__msg ng-chat__msg--out">Confermato. Aggiungete pesce 3× a settimana.</div>
        <div className="ng-chat__msg ng-chat__msg--in">Perfetto. Iniziamo lunedì 12.</div>
      </div>
    </MockupShell>
  );
}

window.NutrigoCore = { Nav, Hero, HowItWorks, UploadSection, SeoCopy, Check, ArrowRight };
Object.assign(window, { Nav, Hero, HowItWorks, UploadSection, SeoCopy, Check, ArrowRight });