/* Siste's main app */

const { useState, useEffect, useRef, useCallback } = React;

const C = window.SITE_CONTENT;
const IMG = window.SITE_IMAGES;

// ---- Icons (inline SVG) ----
const Icon = {
  Search: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <circle cx="10.5" cy="10.5" r="6.5" /><line x1="15.5" y1="15.5" x2="20" y2="20" />
    </svg>
  ),
  ArrowRight: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <line x1="3" y1="12" x2="20" y2="12" /><polyline points="14 6 20 12 14 18" />
    </svg>
  ),
  ArrowLeft: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <line x1="21" y1="12" x2="4" y2="12" /><polyline points="10 6 4 12 10 18" />
    </svg>
  ),
  Lock: () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
      <rect x="5" y="11" width="14" height="10" /><path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  Plus: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><line x1="12" y1="4" x2="12" y2="20"/><line x1="4" y1="12" x2="20" y2="12"/></svg>
  ),
};

// ---- Reveal hook ----
/* Un solo modo di raggiungere una sezione, usato dal menu e da tutti i collegamenti
   interni. Le foto piu' in alto si caricano DOPO il click e la pagina si allunga sotto
   i piedi: sul More "Contatti" finiva 4.500px lontano (Stefano 03/09/2026). Quindi si
   ricontrolla tre volte e si corregge, a meno che intanto la persona non abbia scorso
   a mano (rotella, dito o tastiera): in quel caso non le si tocca la pagina. */
function vaiASezione(el) {
  if (!el) return;
  let annullato = false;
  const EV = ["wheel", "touchstart", "keydown"];
  const stop = () => { annullato = true; };
  EV.forEach((ev) => window.addEventListener(ev, stop, { once: true, passive: true }));
  const vai = (morbido) => window.scrollTo({
    top: el.getBoundingClientRect().top + window.scrollY - 60,
    behavior: morbido ? "smooth" : "auto",
  });
  vai(true);
  [700, 1600, 2600].forEach((ms) => setTimeout(() => {
    if (annullato) return;
    if (Math.abs(el.getBoundingClientRect().top - 60) > 8) vai(false);
  }, ms));
  setTimeout(() => EV.forEach((ev) => window.removeEventListener(ev, stop)), 3200);
}

/* Collegamenti interni alla pagina (footer, "scrivici" del B2B, indirizzo con #contact):
   il salto secco del browser sbagliava sezione per lo stesso motivo. */
function useAncore() {
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;                       // href="#" = logo, ha il suo handler
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      history.replaceState(null, "", "#" + id);
      vaiASezione(el);
    };
    document.addEventListener("click", onClick);
    if (location.hash.length > 1) {
      const el = document.getElementById(location.hash.slice(1));
      if (el) setTimeout(() => vaiASezione(el), 400);
    }
    return () => document.removeEventListener("click", onClick);
  }, []);
}

/* ── Consenso cookie (03/09/2026) ────────────────────────────────────────────
   Il riquadro Instagram e' un servizio esterno (Elfsight) e scriveva due cookie
   appena si apriva la pagina, prima di qualsiasi scelta: non e' ammesso. Ora il
   riquadro si carica SOLO dopo un "accetto", e la scelta si ricorda nel browser
   (nessun dato ci arriva). Chi rifiuta vede il sito intero, senza il riquadro. */
const CHIAVE_CONSENSO = "consenso-cookie";
function leggiConsenso() {
  try { return localStorage.getItem(CHIAVE_CONSENSO); } catch (e) { return null; }
}
function scriviConsenso(valore) {
  try {
    if (valore === null) localStorage.removeItem(CHIAVE_CONSENSO);
    else localStorage.setItem(CHIAVE_CONSENSO, valore);
  } catch (e) {}
  window.dispatchEvent(new Event("consenso-cambiato"));
}
window.riapriConsenso = () => scriviConsenso(null);
function useConsenso() {
  const [v, setV] = useState(leggiConsenso());
  useEffect(() => {
    const agg = () => setV(leggiConsenso());
    window.addEventListener("consenso-cambiato", agg);
    return () => window.removeEventListener("consenso-cambiato", agg);
  }, []);
  return v;
}

/* Banner tolto il 03/09/2026: il sito non installa cookie di suo, quindi non c'e'
   niente da accettare all'apertura. Il consenso si chiede dove serve davvero, sul
   riquadro Instagram. Il componente resta qui, pronto se un giorno aggiungiamo
   qualcosa che traccia. */
function BannerCookie({ t }) {
  const consenso = useConsenso();
  if (consenso) return null;
  return (
    <div className="banner-cookie" role="dialog" aria-live="polite">
      <p className="banner-cookie__testo">
        Questo sito usa solo cookie tecnici. Per mostrare i post di Instagram serve un
        servizio esterno che ne installa di suoi: si carica solo se lo accetti.{" "}
        <a href="cookies.html">Cookie policy</a> · <a href="privacy.html">Privacy</a>
      </p>
      <div className="banner-cookie__azioni">
        <button className="banner-cookie__btn banner-cookie__btn--no" onClick={() => scriviConsenso("no")}>Solo necessari</button>
        <button className="banner-cookie__btn banner-cookie__btn--si" onClick={() => scriviConsenso("si")}>Accetto</button>
      </div>
    </div>
  );
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
      /* threshold 0.12 non scattava mai sui blocchi molto alti (il collage della
         campagna e' alto 5.700px: il 12% e' piu' della finestra) e restavano
         invisibili. Ora scatta appena il blocco entra per un decimo di schermo,
         qualunque sia la sua altezza (Stefano 02/09/2026: collage bianco). */
    }, { threshold: 0, rootMargin: "0px 0px -10% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ---- TopBar ----
function TopBar({ lang, setLang, sections, t }) {
  const [solid, setSolid] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const go = (id) => () => {
    setMenuOpen(false);
    vaiASezione(document.getElementById(id));
  };

  return (
    <>
      <header className={`topbar ${solid || menuOpen ? "is-solid" : ""}`} data-screen-label="Top Bar">
        <a href="#" className="logo" onClick={(e) => { e.preventDefault(); setMenuOpen(false); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <img src="assets/logo-nona.png" alt="No-Nà" />
        </a>
        <nav className="topbar__nav">
          <a onClick={go("maison")}>{t.nav.house}</a>
          <a onClick={go("campaign")}>{t.nav.collections}</a>
          <a onClick={go("lookbook")}>{t.nav.lookbook}</a>
          <a onClick={go("b2b")}>{t.nav.b2b}</a>
          <a onClick={go("contact")}>{t.nav.contact}</a>
        </nav>
        <div className="topbar__util">
          <div className="lang-toggle">
            <button onClick={() => setLang("it")} className={lang === "it" ? "is-on" : ""}>IT</button>
            <span className="lang-toggle__sep">/</span>
            <button onClick={() => setLang("en")} className={lang === "en" ? "is-on" : ""}>EN</button>
          </div>
          <button className="icon-btn topbar__search" aria-label="search"><Icon.Search /></button>
          <button
            className={`topbar__burger ${menuOpen ? "is-open" : ""}`}
            onClick={() => setMenuOpen(v => !v)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span></span>
            <span></span>
          </button>
        </div>
      </header>
      <div className={`mobile-menu ${menuOpen ? "is-open" : ""}`} aria-hidden={!menuOpen}>
        <div className="mobile-menu__inner">
          <nav className="mobile-menu__nav">
            <a onClick={go("maison")}><span>01</span>{t.nav.house}</a>
            <a onClick={go("campaign")}><span>02</span>{t.nav.collections}</a>
            <a onClick={go("lookbook")}><span>03</span>{t.nav.lookbook}</a>
            <a onClick={go("b2b")}><span>04</span>{t.nav.b2b}</a>
            <a onClick={go("contact")}><span>05</span>{t.nav.contact}</a>
          </nav>
          <div className="mobile-menu__foot">
            <div className="mobile-menu__lang">
              <button onClick={() => setLang("it")} className={lang === "it" ? "is-on" : ""}>Italiano</button>
              <button onClick={() => setLang("en")} className={lang === "en" ? "is-on" : ""}>English</button>
            </div>
            <div className="mobile-menu__meta">
              <span>No-Nà</span>
              <span>Made in Italy · Since 1991</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// Sul telefono l'apertura usa il taglio verticale, se la foto ce l'ha: una foto
// orizzontale schiacciata in un 390x844 taglia sempre qualcosa, di solito la testa.
function useIsMobile(soglia) {
  const q = "(max-width: " + (soglia || 700) + "px)";
  const [mobile, setMobile] = useState(() =>
    typeof window !== "undefined" && window.matchMedia ? window.matchMedia(q).matches : false);
  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia(q);
    const cambia = e => setMobile(e.matches);
    mq.addEventListener ? mq.addEventListener("change", cambia) : mq.addListener(cambia);
    return () => mq.removeEventListener ? mq.removeEventListener("change", cambia) : mq.removeListener(cambia);
  }, [q]);
  return mobile;
}

// ---- Hero ----
function Hero({ t, autoplay }) {
  const [i, setI] = useState(0);
  const isMobile = useIsMobile(700);
  // In apertura girano solo le foto scelte (heroRotation); IMG.hero resta la campagna intera.
  const slides = (IMG.heroRotation && IMG.heroRotation.length) ? IMG.heroRotation : IMG.hero;
  const videos = IMG.heroVideos || [];
  const total = videos.length > 0 ? videos.length : slides.length;
  const videoRefs = useRef([]);

  useEffect(() => {
    if (!autoplay) return;
    if (videos.length > 0) return; // video advance is handled on 'ended'
    const id = setInterval(() => setI(v => (v + 1) % total), 5400);
    return () => clearInterval(id);
  }, [autoplay, total, videos.length]);

  // Quando cambia slide attiva, fai play del video corrente e pause degli altri
  useEffect(() => {
    if (videos.length === 0) return;
    videoRefs.current.forEach((v, idx) => {
      if (!v) return;
      if (idx === i) { try { v.currentTime = 0; v.play().catch(()=>{}); } catch(e){} }
      else { try { v.pause(); } catch(e){} }
    });
  }, [i, videos.length]);

  const slide = slides[i % slides.length];

  return (
    <section className={`hero ${videos.length > 0 ? 'hero--video' : ''}`} id="home" data-screen-label="01 Hero">
      {videos.length > 0 ? (
        videos.map((vsrc, idx) => (
          <div key={idx} className={`hero__layer ${idx === i ? "is-active" : ""}`}>
            <video
              ref={el => videoRefs.current[idx] = el}
              className={`hero__video hero__video--${idx + 1}`}
              src={vsrc}
              muted
              playsInline
              preload={idx === 0 ? "auto" : "metadata"}
              autoPlay={idx === 0}
              onEnded={() => setI((idx + 1) % total)}
            />
          </div>
        ))
      ) : (
        slides.map((s, idx) => (
          <div key={idx} className={`hero__layer ${idx === i ? "is-active" : ""}`}>
            <div className="hero__img" key={idx + "-" + i} style={{ backgroundImage: `url("${(isMobile && s.srcMobile) ? s.srcMobile : s.src}")`, backgroundPosition: (isMobile && s.srcMobile) ? (s.focusMobile || "center center") : (s.focus || "center top") }} />
          </div>
        ))
      )}
      <div className="hero__inner">
        <div className="hero__copy">
          <div className="hero__eyebrow">{t.hero.eyebrow}</div>
          <h1 className="hero__title">
            {t.hero.title.map((line, idx) => (
              <span key={idx}><span style={{ animationDelay: `${idx * 180}ms` }}>{line}</span></span>
            ))}
          </h1>
          <p className="hero__sub">{t.hero.sub}</p>
          <div className="hero__ctas">
            <button className="btn btn--filled" onClick={() => { const el = document.getElementById("campaign") || document.getElementById("collections"); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }}>
              <span className="btn__label">{t.hero.cta}</span>
              <span className="btn__arrow"><Icon.ArrowRight size={14} /></span>
            </button>
            <button className="btn btn--ghost" onClick={() => { const el = document.getElementById("lookbook"); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }}>
              <span className="btn__label">{t.hero.ctaSecondary}</span>
            </button>
          </div>
        </div>
        <div className="hero__foot">
          {/* La didascalia della foto ("Look 01 / Campagna — picnic, pelle e maglieria")
              e' stata tolta: descriveva lo scatto e faceva solo confusione
              (Stefano 02/09/2026). Il div vuoto tiene i pallini al centro. */}
          <div />
          <div className="hero__dots">
            {slides.map((_, idx) => (
              <button
                key={idx}
                className={`hero__dot ${idx === i ? "is-on" : ""}`}
                onClick={() => setI(idx)}
                aria-label={`Go to slide ${idx + 1}`}
              />
            ))}
          </div>
          <div className="hero__nav">
            <button onClick={() => setI((i - 1 + total) % total)} aria-label="prev"><Icon.ArrowLeft /></button>
            <button onClick={() => setI((i + 1) % total)} aria-label="next"><Icon.ArrowRight /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Campaign Nicola Maggio (grid editorial PE26) ----
function CampaignNM({ t }) {
  const photos = IMG.campaignNM || [];
  if (!photos.length || !t.campaign) return null;
  return (
    <section className="section campaign-nm" id="campaign" data-screen-label="03 Campaign">
      <div className="section__head reveal">
        <div>
          <div className="eyebrow">{t.campaign.eyebrow}</div>
          <h2 className="section__title">{t.campaign.title}</h2>
        </div>
        <p className="body-lede">{t.campaign.sub}</p>
      </div>
      <div className="campaign-nm__grid reveal">
        {(() => {
          // Righe giustificate come sul sito More: dentro una riga le foto hanno
          // la stessa altezza e la riga finisce esatta al bordo, quindi niente
          // buchi bianchi (Stefano 02/09/2026). La larghezza di ciascuna viene
          // dalla sua forma: flex-grow = larghezza/altezza, letta a foto caricata.
          const perRiga = [2, 3, 2, 3, 2, 3, 2, 3]; // 20 foto = 8 righe piene, nessuna riga spaiata
          const righe = []; let i = 0, k = 0;
          while (i < photos.length) {
            const n = perRiga[k % perRiga.length];
            righe.push(photos.slice(i, i + n)); i += n; k++;
          }
          let base = 0;
          return righe.map((riga, ri) => {
            const partenza = base; base += riga.length;
            return (
              <div className="campaign-nm__riga" key={ri}>
                {riga.map((src, j) => {
                  const idx = partenza + j;
                  return (
                    <figure key={idx} className={`campaign-nm__cell campaign-nm__cell--${(idx % 6) + 1}`}
                            style={{ flexGrow: 0.8 }}
                            onClick={() => window.dispatchEvent(new CustomEvent("open-campagna", { detail: { src } }))}>
                      <img src={src} alt={`Campagna AI 26 — ${idx+1}`} loading="lazy"
                           onLoad={(e) => {
                             const im = e.target;
                             if (im.naturalWidth && im.naturalHeight) {
                               im.closest("figure").style.flexGrow = String(im.naturalWidth / im.naturalHeight);
                             }
                           }} />
                    </figure>
                  );
                })}
              </div>
            );
          });
        })()}
      </div>
    </section>
  );
}

// ---- Marquee ----
function Marquee() {
  const phrase = (
    <>
      {/* "Carpi, 1986" e "Phi Phi" erano rimasti dal modello di partenza e non
          c'entrano niente con noi: tolti (Stefano 02/09/2026). */}
      <span>Made in Italy</span><span className="dot">✦</span>
      <span>Fall Winter 2026</span><span className="dot">✦</span>
    </>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">{phrase}{phrase}{phrase}{phrase}</div>
    </div>
  );
}

// ---- Maison / Intro ----
function Maison({ t }) {
  return (
    <section className="section" id="maison" data-screen-label="02 Maison">
      <div className="intro">
        <div className="intro__visual reveal">
          <img src={IMG.intro} alt="" />
        </div>
        <div className="intro__copy">
          <div className="eyebrow reveal">{t.intro.eyebrow}</div>
          <h2 className="h-section intro__title reveal">{t.intro.title}</h2>
          <p className="body-lede reveal">{t.intro.body}</p>
          <div className="intro__stats reveal">
            {[t.intro.stat1, t.intro.stat2, t.intro.stat3].map(([n, l], idx) => (
              <div className="intro__stat" key={idx}>
                <strong>{n}</strong><span>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Collections ----
function Collections({ t }) {
  const goTo = (id) => () => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };
  // Foto ed "Esplora" aprono il catalogo, cioe' la galleria verticale della
  // campagna, sulla foto stessa. Non portano piu' al lookbook piu' in basso
  // (Stefano 02/09/2026). La galleria si apre sul posto: chiudendola si resta qui.
  const onCardClick = (i) => () => {
    const src = (IMG.collectionTiles || [])[i];
    window.dispatchEvent(new CustomEvent("open-campagna", { detail: { src } }));
  };
  const items = (t.collections && t.collections.items) || [];
  if (!items.length) return null;
  // Con una sola linea il titolo sta di fianco alla foto, non sopra.
  const singola = items.length === 1;
  const testa = (
    <div className={singola ? "collections__copy reveal" : "section__head"}>
      <div className={singola ? "eyebrow" : "eyebrow reveal"}>{t.collections.eyebrow}</div>
      <h2 className={singola ? "h-section" : "h-section reveal"}>{t.collections.title}</h2>
    </div>
  );
  return (
    <section className="section section--warm" id="collections" data-screen-label="03 Collections" style={{ maxWidth: "none", padding: 0, scrollMarginTop: "60px" }}>
      <div style={{ maxWidth: "var(--max)", margin: "0 auto", padding: "clamp(64px, 7vw, 100px) var(--gutter) clamp(80px, 10vw, 140px)" }}>
        {!singola && testa}
        <div className={singola ? "collections collections--singola" : "collections"}>
          {items.map((item, i) => (
            <article className="coll-card reveal" key={i} style={{ transitionDelay: `${i * 100}ms`, cursor: "pointer" }} onClick={onCardClick(i)}>
              <div className="coll-card__media">
                <img src={IMG.collectionTiles[i]} alt={item.name} style={{ objectPosition: (IMG.collectionTilesFocus || [])[i] || "50% 20%" }} />
                <div className="coll-card__season">{item.season}</div>
              </div>
              <div className="coll-card__row">
                <h3 className="coll-card__name">{item.name}</h3>
                <span className="coll-card__arrow">— Esplora →</span>
              </div>
              <p className="coll-card__desc">{item.desc}</p>
            </article>
          ))}
          {singola && testa}
        </div>
      </div>
    </section>
  );
}

// ---- Gold Lookbook Modal ----
function GoldLookbookModal() {
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState(null);
  const photos = (IMG.gold && IMG.gold.lookbook) || [];

  React.useEffect(() => {
    const onOpen = () => { setOpen(true); document.body.style.overflow = "hidden"; };
    window.addEventListener("open-gold-lookbook", onOpen);
    return () => window.removeEventListener("open-gold-lookbook", onOpen);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (active !== null) setActive(null);
        else { setOpen(false); document.body.style.overflow = ""; }
      } else if (active !== null && e.key === "ArrowRight") {
        setActive((active + 1) % photos.length);
      } else if (active !== null && e.key === "ArrowLeft") {
        setActive((active - 1 + photos.length) % photos.length);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, active, photos.length]);

  if (!open) return null;
  const close = () => { setOpen(false); setActive(null); document.body.style.overflow = ""; };

  return (
    <div className="gold-lb-modal" onClick={close}>
      <header className="gold-lb-modal__head" onClick={(e) => e.stopPropagation()}>
        <div className="gold-lb-modal__title">
          <div className="gold-lb-modal__eyebrow">Capsule — SS 2026</div>
          <h2>Siste's Gold</h2>
        </div>
        <button className="gold-lb-modal__close" onClick={close} aria-label="Chiudi">×</button>
      </header>
      <div className="gold-lb-modal__grid" onClick={(e) => e.stopPropagation()}>
        {photos.map((src, i) => (
          <figure className="gold-lb-modal__cell" key={i} onClick={() => setActive(i)}>
            <img src={src} alt={`Gold look ${i + 1}`} loading="lazy" />
          </figure>
        ))}
      </div>
      {active !== null && (
        <div className="gold-lb-modal__lightbox" onClick={() => setActive(null)}>
          <button className="gold-lb-modal__lb-prev" onClick={(e) => { e.stopPropagation(); setActive((active - 1 + photos.length) % photos.length); }} aria-label="Precedente">‹</button>
          <img src={photos[active]} alt="" onClick={(e) => e.stopPropagation()} />
          <button className="gold-lb-modal__lb-next" onClick={(e) => { e.stopPropagation(); setActive((active + 1) % photos.length); }} aria-label="Successivo">›</button>
          <div className="gold-lb-modal__lb-count">{active + 1} / {photos.length}</div>
        </div>
      )}
    </div>
  );
}

// ---- Gold ----
function Gold({ t }) {
  const g = IMG.gold;
  return (
    <section className="gold" id="gold" data-screen-label="04 Gold">
      <div className="gold__visual reveal">
        <img className="gold__hero-img" src={g.hero} alt="Siste's Gold campaign" />
        <div className="gold__hero-grain"></div>
      </div>
      <div className="gold__copy">
        <div className="gold__head">
          <div className="eyebrow gold__eyebrow reveal">{t.gold.eyebrow}</div>
          <div className="gold__location reveal">{t.gold.location}</div>
        </div>
        <img className="gold__logo reveal" src={g.logo} alt="Siste's Gold" />
        <p className="gold__body reveal">{t.gold.body}</p>
        <div className="gold__gallery reveal">
          {g.gallery.map((it, idx) => (
            <figure className="gold__gal-item" key={idx} style={{ animationDelay: `${idx * 80}ms` }}>
              <img src={it.src} alt={it.caption} />
              <figcaption>{it.caption}</figcaption>
            </figure>
          ))}
        </div>
        <button className="btn gold__cta reveal" onClick={() => window.dispatchEvent(new Event('open-gold-lookbook'))}>
          <span className="btn__label">{t.gold.cta}</span>
          <span className="btn__arrow"><Icon.ArrowRight size={14} /></span>
        </button>
      </div>
    </section>
  );
}

// ---- Lookbook ----
function Lookbook({ t }) {
  const [active, setActive] = React.useState(null);
  const [page, setPage] = React.useState(0);
  const sectionRef = React.useRef(null);
  // Solo articoli con scontornato _F disponibile (hover swap funzionante)
  const HAS_F = new Set([
    "13A0002T87_13.0168", "13A0003T87_13.0168", "13A0101T61_13.0104", "13A0103T61_13.0168",
    "13A0105J61_13.0177", "13A0106J61_13.0177", "13A0108T75_13A.0602", "13A0109T75_13.0134",
    "13A0110T75_13.0134", "13A0111T75_13.0118", "13A0115T10_13.0457", "13A0116T10_13.0457",
    "13A0130T72_13.0105", "13A0139T61_13.0177", "13A0140T49_13.0457", "13A0142T49_13.0457",
    "13A0146T89_13.0177", "13A0147T10_13.0457", "13A0149T40_13.0177", "13A0153T49_13.0457",
    "13A0154T49_13.0457", "13A0155T49_13.0457", "13A0157T49_13.0457", "13A0159T87_13.0168",
    "13A0160T87_13.0168", "13A0192T49_13.0457", "13A0197T89_13.0177", "13A0200T49_13.0457",
    "13A0205T61_13.0168", "13A0211T75_13.0118", "13A0217T10_13.0457", "13A0218T10_13.0457",
    "13A0223T49_13.0457", "13A0224T75_13.0169", "13A0230T55_13.0104", "13A0233T75_13.0104",
    "13A0236T49_13.0457", "13A0242T92_13.0105", "13A0243T92_13.0168", "13A0244T92_13.0104",
    "13A0246T10_13.0457", "13A0247T10_13.0457", "13A0250T87_13.0147", "13A0251T55_13.0173",
    "13A0252T49_13.0457", "13A0253T49_13.0457", "13A0254T49_13.0457", "13A0256T87_13.0164",
    "13A0257T87_13.0147", "13A0258T87_13.0105", "13A0260T87_13.0118", "13A0304T50_13.0104",
    "13A0305T50_13.0104", "13A0306T50_13.0105", "13A0314T89_13.0177", "13A0316T89_13.0100",
    "13A0318T89_13.0118", "13A0319T89_13.0104", "13A0320T89_13.0147", "13A0322T50_13.0147",
    "13A0323T50_13.0100", "13A0324T50_13.0104", "13A0356T92_13.0104", "13A0357T92_13.0147",
    "13A0358T92_13.0147", "13A0359T92_13.0147", "13A0367T92_13.0168", "13A0380T92_13.0151",
    "13A0405M77_13.0151", "13A0406M77_13.0105", "13A0407M77_13.0105", "13A0409M77_13.0168",
    "13A0410M77_13.0151", "13A0411M77_13.0105", "13A0413M11_13.0134", "13A0419M19_13.0177",
    "13A0420M19_13.0177", "13A0423M77_13.0151", "13A0450M77_13.0168", "13A0501T10_13.0457",
    "13A0509T49_13.0457", "13A0510T40_13.0147", "13A0599T55_13.0173", "13A0600T49_13.0457",
    "13A0602T61_13.0168", "13A0603T61_13.0168", "13A0611T75_13A.0601", "13A0612T75_13.0134",
    "13A0613T75_13A.0601", "13A0614T75_13.0118", "13A0615T75_13.0169", "13A0616T75_13.0164",
    "13A0617T75_13.0164", "13A0621T10_13.0457", "13A0625T91_13.0105", "13A0629T72_13.0105",
    "13A0635T75_13.0105", "13A0636T75_13.0105", "13A0639T55_13.0104", "13A0644T91_13.0147",
    "13A0645T91_13.0169", "13A0646T91_13.0168", "13A0647T91_13.0147", "13A0648T91_13.0104",
    "13A0649T91_13.0105", "13A0652T55_13.0173", "13A0661T61_13.0177", "13A0662T49_13.0457",
    "13A0669T92_13.0177", "13A0670T92_13.0147", "13A0671T92_13.0168", "13A0672T92_13.0104",
    "13A0673T40_13.0177", "13A0675T49_13.0457", "13A0676T87_13.0147", "13A0680T49_13.0457",
    "13A0682T87_13.0147", "13A0683T87_13.0168", "13A0684T87_13.0169", "13A0685T87_13.0169",
    "13A0687T87_13.0521", "13A0688T91_13.0118", "13A0689T87_13.0520", "13A0690T91_13.0118",
    "13A0691T91_13.0177", "13A0692T91_13.0164", "13A0693T91_13.0134", "13A0694T91_13.0129",
    "13A0695T91_13.0134", "13A0697T91_13.0177", "13A0698T91_13.0129", "13A0699T91_13.0129",
    "13A0705T75_13.0134", "13A0708T75_13.0169", "13A0709T75_13.0169", "13A0710T75_13.0164",
    "13A0711T75_13.0164", "13A0720T75_13.0168", "13A0721T75_13.0147", "13A0722T75_13.0105",
    "13A0723T75_13.0104", "13A0725T75_13.0105", "13A0737T49_13.0457", "13A0741M77_13.0151",
    "13A0744T92_13.0177", "13A0745T40_13.0177", "13A0746T40_13.0177", "13A0754T87_13.0169",
    "13A0755T87_13.0520", "13A0758M11_13.0134", "13A0761M19_13A.0700", "13A0762T91_13.0147",
    "13A0769T87_13.0521", "13A0794T40_13.0147", "13A0803T61_13.0104", "13A0807J61_13.0177",
    "13A0812T75_13.0134", "13A0813T75_13.0118", "13A0816T72_13.0105", "13A0819T75_13.0169",
    "13A0823T55_13.0104", "13A0826T75_13.0104", "13A0828T61_13.0177", "13A0832T92_13.0105",
    "13A0833T92_13.0147", "13A0834T92_13.0151", "13A0883T87_13.0105", "13A0884T49_13.0457",
    "13A0900T75_13.0105",
  ]);
  // HAS_F serviva a nascondere i look senza scontornato quando i nomi erano quelli
  // del gestionale PE26. Con il lookbook AI26 l'elenco è già curato in content.js e
  // l'hover si nasconde da solo se il file _F manca (onError), quindi si mostrano tutti.
  const studio = (IMG.lookbook || []);
  const outdoor = (IMG.hero || []).map(h => ({ src: h.src, title: h.piece, code: h.code }));

  // Paginazione: 12 studio per pagina + 2 outdoor in mezzo = 14 foto/pagina
  // (6+2+6: simmetrico sia desktop 6-col che mobile 2-col, niente celle spaiate)
  const PER_PAGE = 12;
  const totalPages = Math.max(1, Math.ceil(studio.length / PER_PAGE));
  const start = page * PER_PAGE;
  const pageStudio = studio.slice(start, start + PER_PAGE);
  const items = [];
  // Nel lookbook ci vanno SOLO i capi fotografati in studio. Gli scatti di campagna
  // erano inseriti a coppie in mezzo alla griglia e confondevano chi sfoglia: sono
  // foto di ambientazione in mezzo a foto di prodotto (Stefano, 02/09/2026: "togli
  // queste foto dai lookbook che fanno confusione"). La campagna resta nella sua
  // sezione e nell'ingranditore, da cui si sfoglia con l'evento open-campagna.
  for (let i = 0; i < pageStudio.length; i++) items.push({ ...pageStudio[i], tag: "tall", seq: "studio", gi: start + i });
  const total = items.length;

  const goToPage = (p) => {
    setPage(p);
    setActive(null);
    if (sectionRef.current) sectionRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Sequenza dell'ingranditore: tutti i look, o tutti gli scatti di campagna se
  // si è aperto uno di quelli. Prima scorreva solo le 14 foto della pagina.
  const seqAttiva = active && active.seq === "outdoor" ? outdoor : studio;
  const nSeq = seqAttiva.length || 1;
  const vai = (d) => setActive(a => a && ({ seq: a.seq, gi: (a.gi + d + nSeq) % nSeq }));

  React.useEffect(() => {
    // Si apre sulla foto cliccata e la pagina NON si muove: chiudendo si torna
    // esattamente dove si era (Stefano 02/09/2026: prima portava nel lookbook).
    const apri = (e) => {
      const src = e && e.detail && e.detail.src;
      const tutte = IMG.hero || [];
      const i = src ? tutte.findIndex(h => h.src === src) : 0;
      setActive({ seq: "outdoor", gi: i < 0 ? 0 : i });
    };
    window.addEventListener("open-campagna", apri);
    return () => window.removeEventListener("open-campagna", apri);
  }, []);

  React.useEffect(() => {
    if (active === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setActive(null);
      else if (e.key === "ArrowRight") vai(1);
      else if (e.key === "ArrowLeft") vai(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active, nSeq]);

  return (
    <section ref={sectionRef} className="lookbook" id="lookbook" data-screen-label="05 Lookbook">
      <div className="lookbook__head">
        <div className="eyebrow reveal">{t.lookbook.eyebrow}</div>
        <div className="reveal">
          <h2 className="h-section" style={{ marginBottom: 20 }}>{t.lookbook.title}</h2>
          <p className="body-lede">{t.lookbook.sub}</p>
        </div>
      </div>
      <div className="lb-grid">
        {items.map((it, i) => {
          // Studio shot _A.jpg -> hover mostra scontornato _F.jpg (stesso articolo)
          const srcHover = /_A\.(jpg|jpeg)$/i.test(it.src)
            ? it.src.replace(/_A\.(jpg|jpeg|JPG|JPEG)$/, "_F.jpg")
            : null;
          return (
            <figure
              className={`lb-grid__cell lb-grid__cell--${it.tag}`}
              key={i}
              onClick={() => setActive({ seq: it.seq, gi: it.gi })}
              style={{ transitionDelay: `${(i % 4) * 60}ms` }}
            >
              <img className="lb-grid__cell-main" src={it.src} alt={it.title || ""} loading="lazy" />
              {srcHover && <img className="lb-grid__cell-hover" src={srcHover} alt="" loading="lazy" onError={(e) => e.currentTarget.style.display = "none"} />}
              <figcaption>{it.code || it.title}</figcaption>
            </figure>
          );
        })}
      </div>
      {totalPages > 1 && (
        <nav className="lb-pagination" aria-label="Paginazione lookbook">
          {Array.from({ length: totalPages }).map((_, i) => (
            <button
              key={i}
              className={`lb-pagination__btn ${i === page ? "is-active" : ""}`}
              onClick={() => goToPage(i)}
              aria-current={i === page ? "page" : undefined}
            >
              {String(i + 1).padStart(2, "0")}
            </button>
          ))}
        </nav>
      )}
      {active !== null && (
        /* Scorrimento verticale come il resto del sito (Simone, 15/08): le frecce
           laterali erano scure sul fondo chiaro e non si vedevano. Si apre sulla foto
           cliccata e si scorre con il dito o con la rotella. */
        <div className="lb-lightbox lb-lightbox--scroll" onClick={() => setActive(null)}>
          <button className="lb-lightbox__close" onClick={() => setActive(null)} aria-label="Chiudi">×</button>
          <div className="lb-scroll" onClick={(e) => e.stopPropagation()}>
            {seqAttiva.map((it, idx) => (
              <img
                key={idx}
                className="lb-scroll__img"
                src={it.src}
                alt={it.title || ""}
                loading={Math.abs(idx - active.gi) < 3 ? "eager" : "lazy"}
                ref={(el) => { if (el && idx === active.gi) requestAnimationFrame(() => {
                  /* scrollIntoView muoveva ANCHE la pagina sotto: chiudendo ci si
                     ritrovava altrove. Qui si sposta solo il contenitore della galleria. */
                  const box = el.parentElement;
                  if (box) box.scrollTop = el.offsetTop - box.offsetTop - Math.max(0, (box.clientHeight - el.clientHeight) / 2);
                }); }}
              />
            ))}
          </div>
          <div className="lb-lightbox__count">{nSeq} foto</div>
        </div>
      )}
    </section>
  );
}

// ---- B2B ----
function B2B({ t }) {
  return (
    <section className="b2b" id="b2b" data-screen-label="06 B2B">
      <div className="b2b__head">
        <div className="eyebrow reveal">{t.b2b.eyebrow}</div>
        <h2 className="h-section reveal">{t.b2b.title}</h2>
        <p className="body-lede reveal">{t.b2b.body}</p>
      </div>
      <div className="b2b__cards reveal">
        {t.b2b.portals.map((p, i) => (
          <a className="b2b-card" href={p.url} target="_blank" rel="noopener" key={i}>
            <div className="b2b-card__img">
              <img src={p.img} alt={p.label} />
            </div>
            <div className="b2b-card__overlay">
              <div className="b2b-card__top">
              </div>
              <div className="b2b-card__bottom">
                <div className="b2b-card__label">{p.label}</div>
                <div className="b2b-card__row">
                  <span className="b2b-card__host">↗ {p.host}</span>
                  <span className="b2b-card__cta">{t.b2b.cta} <Icon.ArrowRight size={14} /></span>
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="b2b__foot reveal">
        <span className="b2b__note">{t.b2b.note} <a href="#contact">{t.b2b.noteCta}</a></span>
      </div>
    </section>
  );
}

// ---- Contact form ----
function ContactForm({ t }) {
  // Generate a random 5-letter captcha once per mount
  const [captcha] = React.useState(() => {
    const chars = "ABCDEFGHKMNPQRSTUVWXYZ23456789";
    let s = "";
    for (let i = 0; i < 5; i++) s += chars[Math.floor(Math.random() * chars.length)];
    return s;
  });
  const [form, setForm] = React.useState({ name: "", email: "", message: "", code: "", privacy: false, website: "" });
  const [status, setStatus] = React.useState(null); // null | "sending" | "sent" | "error"
  const wrapRef = React.useRef(null);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  React.useEffect(() => {
    if (status === "sent" && wrapRef.current) {
      wrapRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }, [status]);
  const submit = async (e) => {
    e.preventDefault();
    if (form.code.trim().toUpperCase() !== captcha) { setStatus("error"); return; }
    setStatus("sending");
    try {
      const r = await fetch("https://dashboard.sistes.it/api/site-contact?brand=nona", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.message,
          website: form.website,
        }),
      });
      const j = await r.json();
      setStatus(j && j.ok ? "sent" : "error");
    } catch (err) {
      setStatus("error");
    }
  };
  if (status === "sent") {
    return (
      <div ref={wrapRef} className="contact-form contact-form--sent reveal" style={{ textAlign: "center", padding: "48px 32px", border: "1px solid rgba(182, 145, 98, 0.3)", borderRadius: "8px", background: "rgba(182, 145, 98, 0.05)" }}>
        <div className="contact-form__check" style={{ fontSize: "48px", color: "var(--gold)", marginBottom: "16px", lineHeight: 1 }}>✓</div>
        <h3 style={{ fontFamily: "var(--f-serif)", fontSize: "28px", fontWeight: 300, fontStyle: "italic", margin: "0 0 12px", color: "var(--ink)" }}>Messaggio inviato</h3>
        <p className="body-lede" style={{ margin: 0 }}>{t.contact.form.sent}</p>
      </div>
    );
  }
  return (
    <form ref={wrapRef} className="contact-form reveal" onSubmit={submit} noValidate>
      <p className="contact-form__intro">{t.contact.form.intro}</p>
      {/* honeypot anti-bot: invisibile agli umani, riempito dai bot → server scarta */}
      <input type="text" name="website" tabIndex={-1} autoComplete="off"
             value={form.website} onChange={set("website")}
             style={{ position: "absolute", left: "-9999px", opacity: 0, height: 0, width: 0 }}
             aria-hidden="true" />
      <div className="contact-form__row">
        <label className="field">
          <span className="field__label">{t.contact.form.name} <em>*</em></span>
          <input type="text" required value={form.name} onChange={set("name")} />
        </label>
        <label className="field">
          <span className="field__label">{t.contact.form.email} <em>*</em></span>
          <input type="email" required value={form.email} onChange={set("email")} />
        </label>
      </div>
      <label className="field">
        <span className="field__label">{t.contact.form.message} <em>*</em></span>
        <textarea required rows="5" value={form.message} onChange={set("message")}></textarea>
      </label>
      <div className="contact-form__captcha">
        <label className="field field--captcha">
          <span className="field__label">{t.contact.form.captchaLabel} <em>*</em></span>
          <input type="text" required value={form.code} onChange={set("code")} maxLength={5} autoComplete="off" />
        </label>
        <div className="captcha-display" aria-label={`Code: ${captcha}`}>
          {captcha.split("").map((c, i) => (
            <span key={i} style={{ transform: `rotate(${(i % 2 === 0 ? -1 : 1) * (3 + i * 2)}deg)` }}>{c}</span>
          ))}
        </div>
      </div>
      <label className="field field--check">
        <input type="checkbox" required checked={form.privacy} onChange={set("privacy")} />
        <span>{t.contact.form.privacy}</span>
      </label>
      {status === "error" && <div className="contact-form__error">{t.contact.form.error}</div>}
      <button type="submit" className="btn btn--filled contact-form__submit" disabled={status === "sending"}>
        <span className="btn__label">{status === "sending" ? "Invio in corso…" : t.contact.form.submit}</span>
        <span className="btn__arrow"><Icon.ArrowRight size={14} /></span>
      </button>
    </form>
  );
}

// ---- Instagram ----
function Instagram({ t }) {
  // Lo script Elfsight parte SOLO col consenso (scrive cookie propri, 03/09/2026).
  const consenso = useConsenso();
  React.useEffect(() => {
    if (consenso !== "si") return;
    if (document.querySelector('script[src="https://elfsightcdn.com/platform.js"]')) return;
    const s = document.createElement("script");
    s.src = "https://elfsightcdn.com/platform.js";
    s.async = true;
    document.body.appendChild(s);
  }, [consenso]);
  return (
    <section className="section section--warm" id="instagram" data-screen-label="07 Instagram" style={{ maxWidth: "none", padding: 0 }}>
      <div style={{ maxWidth: "var(--max)", margin: "0 auto", padding: "clamp(40px, 5vw, 72px) var(--gutter) clamp(56px, 7vw, 96px)" }}>
        <div className="ig__head reveal">
          <div className="eyebrow">{t.instagram.eyebrow}</div>
          <h2 className="h-section">{t.instagram.title}</h2>
          <p className="body-lede">{t.instagram.sub}</p>
        </div>
        <div className="ig__bar reveal">
          <div className="ig__profile">
            <div className="ig__avatar">
              <span>S</span>
            </div>
            <div className="ig__id">
              <strong>No-Nà</strong>
              <span>{t.instagram.handle}</span>
            </div>
          </div>
          <a className="ig__cta" href="https://www.instagram.com/nona.fastfashion/" target="_blank" rel="noopener">
            {t.instagram.cta} <Icon.ArrowRight size={14} />
          </a>
        </div>
        {/* Elfsight Instagram Feed widget: solo col consenso (03/09/2026) */}
        {consenso === "si"
          ? <div className="elfsight-app-07b46e49-3d93-4ffa-85df-df05fc1879e7 reveal"></div>
          : <div className="ig__consenso reveal">
              <p>I post di Instagram arrivano da un servizio esterno che installa cookie propri. Se vuoi vederli qui, dai il consenso: la scelta resta sul tuo browser e la puoi cambiare quando vuoi. <a href="cookies.html">Cookie policy</a></p>
              <button className="btn" onClick={() => scriviConsenso("si")}><span className="btn__label">Mostra i post</span></button>
            </div>}
      </div>
    </section>
  );
}

// ---- Contact ----
function Contact({ t }) {
  return (
    <section className="section" id="contact" data-screen-label="07 Contact">
      <div className="contact">
        <div className="contact__visual reveal">
          <img src={IMG.contact} alt="" />
        </div>
        <div className="contact__copy">
          <div className="eyebrow reveal">{t.contact.eyebrow}</div>
          <div className="contact__blocks reveal">
            {t.contact.blocks.map((b, i) => (
              <div className="contact__block" key={i}>
                <div className="contact__label">{b.label}</div>
                <div className="contact__lines">
                  {b.lines.map((l, j) => {
                    const lower = String(l).toLowerCase();
                    if (lower.includes("@") && /\S+@\S+\.\S+/.test(lower)) {
                      return <a key={j} href={`mailto:${l}`} style={{ textDecoration: "underline", textDecorationColor: "rgba(182,145,98,0.4)", textUnderlineOffset: "3px" }}>{l}</a>;
                    }
                    if (/^\+?[\d\s().\-/]{6,}$/.test(String(l).trim())) {
                      return <a key={j} href={`tel:${String(l).replace(/[^+\d]/g, "")}`} style={{ textDecoration: "underline", textDecorationColor: "rgba(182,145,98,0.4)", textUnderlineOffset: "3px" }}>{l}</a>;
                    }
                    return <span key={j}>{l}</span>;
                  })}
                </div>
              </div>
            ))}
          </div>
          {/* Titolo e sottotitolo scesi qui, attaccati al modulo: in cima si leggeva
              "Scrivici." e poi arrivavano gli indirizzi (Simone 03/09/2026). */}
          <h2 className="h-section reveal contact__invito">{t.contact.title}</h2>
          <p className="body-lede reveal">{t.contact.sub}</p>
          <ContactForm t={t} />
          <div className="contact__legal reveal">
            <div className="contact__legal-co">{t.contact.legalCompany}</div>
            <div className="contact__legal-lines">
              {t.contact.legalLines.map((l, i) => <span key={i}>{l}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Footer ----
function Footer({ t }) {
  return (
    <footer className="footer" data-screen-label="08 Footer">
      <div className="footer__grid">
        <div className="footer__brand">
          <div className="logo logo--footer">
            <img src="assets/logo-nona.png" alt="No-Nà" />
          </div>
          <div className="footer__tagline">{t.footer.tagline}</div>
        </div>
        <div className="footer__col">
          <h4>{t.footer.cols.client[0]}</h4>
          <ul>{t.footer.cols.client.slice(1).map((l, i) => {
            const lower = l.toLowerCase();
            const href = lower.includes("contact") || lower.includes("contatt") ? "#contact"
                       : lower.includes("b2b") ? "#b2b"
                       : "#";
            return <li key={i}><a href={href}>{l}</a></li>;
          })}</ul>
        </div>
        <div className="footer__col">
          <h4>{t.footer.cols.legal[0]}</h4>
          <ul>{t.footer.cols.legal.slice(1).map((l, i) => {
            const lower = l.toLowerCase();
            const href = lower.startsWith("privacy") ? "privacy.html"
                       : lower.startsWith("cookie") ? "cookies.html"
                       : "#";
            return <li key={i}><a href={href}>{l}</a></li>;
          })}</ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>{t.footer.legal}</span>
        <a className="footer__consenso" href="#" onClick={(e) => { e.preventDefault(); window.riapriConsenso(); }}>Preferenze cookie</a>
        <div className="footer__social">
          <a href="https://www.instagram.com/sistesmoda/" target="_blank" rel="noopener">Instagram</a>
          <a href="https://www.facebook.com/sistesmoda/" target="_blank" rel="noopener">Facebook</a>
        </div>
      </div>
    </footer>
  );
}

// ---- Tweaks ----
function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection title="Tema">
        <TweakRadio
          label="Palette"
          value={tweaks.theme}
          options={[
            { value: "warm", label: "Warm" },
            { value: "stone", label: "Stone" },
            { value: "dark", label: "Dark" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Tipografia titoli"
          value={tweaks.font}
          options={[
            { value: "mixed", label: "Mista" },
            { value: "serif", label: "Serif" },
            { value: "display", label: "Sans" },
          ]}
          onChange={(v) => setTweak("font", v)}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakToggle
          label="Slideshow automatico"
          checked={tweaks.autoplay}
          onChange={(v) => setTweak("autoplay", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---- Root ----
function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "warm",
    "font": "mixed",
    "autoplay": true,
    "lang": "it"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(tweaks.lang || "it");
  useEffect(() => { setTweak("lang", lang); }, [lang]);

  useEffect(() => {
    document.body.className = `theme-${tweaks.theme} font-${tweaks.font}`;
  }, [tweaks.theme, tweaks.font]);

  useReveal();
  useAncore();
  const t = C[lang];

  return (
    <>
      <TopBar lang={lang} setLang={setLang} t={t} />
      <Hero t={t} autoplay={tweaks.autoplay} />
      <Maison t={t} />
      {/* La foto grande delle linee sta sopra al collage: prima era sotto e faceva
          doppione con la campagna (Stefano 02/09/2026). */}
      {/* Sezione "Collezione" (card + Esplora) tolta: Stefano 03/09/2026, "la cancelliamo e
          passiamo a quello che si vede sotto". Dal menu Catalogo si arriva dritti al collage. */}
      <CampaignNM t={t} />
      <Lookbook t={t} />
      <B2B t={t} />
      <Instagram t={t} />
      <Contact t={t} />
      <Footer t={t} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);