const { useState, useEffect } = React;

const $src = (id) => {
  const el = document.getElementById(id);
  return el ? el.src : "";
};

const IMG = {
  hero:    $src("img-hero"),
  what:    $src("img-what"),
  philo:   $src("img-philo"),
  founders:$src("img-founders"),
  contact: $src("img-contact"),
  fam1:    $src("img-fam1"),
  fam2:    $src("img-fam2"),
  fam3:    $src("img-fam3"),
  fam4:    $src("img-fam4"),
  fam5:    $src("img-fam5"),
  partner: $src("img-partner"),
};

const SERVICES = [
  { name: "Design",            body: "Sviluppo del concept, brief con i team creativi, esplorazione di soluzioni di design innovative. La fase creativa è il punto di partenza: idee che prendono forma al servizio della visione del brand." },
  { name: "Sviluppo prodotto", body: "Supervisione di prototipi e campioni in fabbrica, completamento puntuale della linea, target pricing con merchandising." },
  { name: "Ricerca materiali", body: "Presenza alle fiere, ricerca e qualifica di nuovi fornitori, valutazione di applicabilità e tempi di rilascio." },
  { name: "Industrializzazione", body: "Analisi tecnica del prodotto, raccomandazioni di processo, pre-production meeting, validazione del primo PPS." },
  { name: "Follow-up produzione", body: "Avanzamento vs. planning, follow-up fornitori, coordinamento operativo. Gestione delle criticità in linea." },
  { name: "Quality Control",   body: "Visite in stabilimento, verifica dell'allineamento con gli standard approvati, metodologia AQL su lotti industriali." },
];

const METHOD_STEPS = [
  {
    n: "01.",
    h: "Collection Design & Material R&D",
    p: "Concept briefing, bespoke design solutions, and global material sourcing (attending major fairs to discover innovative suppliers and exotic leathers).",
    img: "assets/images/metodo_repo/img1v1.png",
  },
  {
    n: "02.",
    h: "Development",
    p: "Translating sketches to reality. Attending R&D meetings, overseeing prototype/sample execution in the factory, and collaborating with merchandising to define target pricing.",
    img: "assets/images/metodo_repo/img2v1.png",
  },
  {
    n: "03.",
    h: "Industrialization",
    p: "Bridging development and production. Managing pre-production meetings, raw material testing, defining scalable production techniques, and securing the first Pre-Production Sample (PPS).",
    img: "assets/images/metodo_repo/img3v1.png",
  },
  {
    n: "04.",
    h: "Production & Quality Control",
    p: "Eyes on the ground. Tracking factory timelines, negotiating schedules, and resolving operational deviations. Final AQL methodology quality control checks prior to shipment.",
    img: "assets/images/metodo_repo/img4v1.png",
  },
];

const TIMELINE = [
  { y: "1952", t: "Scuola del cuoio, Firenze. Inizia a bottega uno dei nomi formativi della pelletteria fiorentina.", img: IMG.fam3 },
  { y: "1960", t: "Pelletterie Mazzini. Enzo Mazzini apre la sua bottega: pochi strumenti, conoscenza tecnica.", img: IMG.fam2 },
  { y: "1980", t: "La fabbrica cresce. Volumi che aumentano, coerenza interna che resta. I nipoti crescono accanto ai banchi.", img: IMG.fam1 },
  { y: "1984", t: "Fendi: diciotto anni di lavoro diretto con le sorelle, sull'asse storico della maison.", img: IMG.fam5 },
  { y: "1990", t: "Chloé, Givenchy, Versace, Gucci, Armani, Samsonite. Fino a 300.000 pezzi/anno.", img: IMG.fam4 },
  { y: "2024", t: "Giacomo e Lorenzo aprono F.lli Mazzini. Quarta generazione di un mestiere." },
];

const HERITAGE_EDITORIAL = [
  "We both started our professional journey in fashion within our family business. Our family history begins in the early 1950s, when our uncle entered Scuola del Cuoio in Florence and started working in a workshop in 1952, inside one of the most important contexts for leather craftsmanship in the city.",
  "In 1960 Enzo Mazzini opened his own bottega, laying the foundations for a name that would become part of the story of Italian leather goods between the 1960s and the 1990s. In 1970 the first factory followed. From 1984 to 2002, the company worked directly with Fendi and the Fendi sisters, before developing important collaborations with Chloé, Givenchy, Versace, Gucci, Armani and Samsonite. At its peak, the productive unit reached up to 300,000 pieces per year.",
  "We grew up inside this Italian entrepreneurial and manufacturing system, not as observers but as part of it. We learned its rhythms, its discipline, its constraints and its possibilities from within.",
  "La storia delle pelletterie Mazzini affonda le sue radici in un momento preciso e fertile dell'Italia del dopoguerra, quando il sistema manifatturiero del paese stava trovando una nuova identità, e la pelle, con la sua tradizione secolare, diventava uno dei materiali simbolo di questa rinascita. È nel 1960 che Enzo Mazzini avvia la sua attività, partendo da ciò che, in quegli anni, costituiva l'essenza stessa dell'impresa artigiana italiana: pochi strumenti, conoscenza tecnica, e una relazione diretta e quasi fisica con il materiale.",
  "Formarsi alla Scuola del Cuoio, in un contesto come quello toscano, significava entrare in un sistema di valori prima ancora che in un mestiere. La pelle non era semplicemente materia da lavorare, ma linguaggio, disciplina e misura. Ogni gesto, ogni taglio, ogni cucitura portava con sé una tradizione stratificata, fatta di precisione e intuizione. Enzo Mazzini si inserisce esattamente in questa linea: non come imprenditore nel senso moderno del termine, ma come artigiano che costruisce, giorno dopo giorno, un sapere concreto.",
  "I primi anni sono necessariamente essenziali. La produzione riguarda sia pelletteria che calzature, ambiti strettamente connessi nella cultura manifatturiera italiana dell'epoca. L'organizzazione è minima, quasi domestica, e il lavoro si sviluppa attorno a una logica di qualità e continuità più che di scala. È in questo contesto che entra Gastone Mazzini, il fratello, segnando un passaggio fondamentale: da iniziativa individuale a impresa familiare.",
  "L'ingresso di Gastone non è soltanto un ampliamento della forza lavoro, ma introduce una dinamica tipica delle aziende italiane di quegli anni, dove la complementarità tra fratelli spesso definisce l'equilibrio dell'intera struttura. Senza bisogno di formalizzazioni, si crea una divisione implicita dei ruoli: da una parte il prodotto, dall'altra la relazione con il mercato. È una struttura semplice, ma estremamente efficace, che permette all'attività di crescere mantenendo una forte coerenza interna.",
  "Nel corso degli anni Sessanta e Settanta, questa base si consolida e si espande. La bottega si trasforma progressivamente in laboratorio, e il laboratorio in azienda. La produzione si articola, i volumi aumentano, e soprattutto si sviluppa una capacità nuova: quella di dialogare con mercati più ampi, anche al di fuori del contesto locale. È il passaggio cruciale che molte realtà italiane compiono in quegli anni, accompagnando l'ascesa del Made in Italy nel mondo.",
  "La pelletteria Mazzini si inserisce in questo movimento con una posizione che, pur non essendo mai esplicitamente definita in termini di comunicazione, appare chiara nella sua sostanza. Non si tratta di un marchio costruito attorno a una narrativa di moda o a un'identità iconica, ma di una realtà profondamente radicata nella competenza produttiva. Il valore non è nella visibilità, ma nella capacità di fare, di sviluppare prodotti solidi, coerenti e affidabili.",
  "Questo orientamento suggerisce una possibile evoluzione verso modelli ibridi, tipici del sistema italiano: da un lato produzione propria, dall'altro collaborazione con altri marchi, sviluppo conto terzi, o partecipazione a filiere più complesse. Anche in assenza di documentazione dettagliata, la sola indicazione di una distribuzione internazionale lascia intendere che l'azienda abbia raggiunto un livello organizzativo e commerciale significativo.",
  "Parallelamente, emerge un elemento che amplia ulteriormente la lettura del contesto familiare: l'esistenza di un archivio estremamente ampio, sviluppato negli anni successivi, che raccoglie centinaia di migliaia di pezzi tra abbigliamento e accessori. Questo tipo di iniziativa non nasce per caso. Presuppone una sensibilità specifica verso il prodotto, la sua evoluzione storica e il suo valore culturale. È un segnale di continuità, di una relazione con la moda e con la materia che va oltre la sola produzione.",
  "Nel complesso, la storia delle pelletterie Mazzini si configura come una traiettoria coerente con il miglior tessuto industriale italiano: un'origine artigianale autentica, uno sviluppo familiare equilibrato, una crescita fondata sulla competenza più che sull'immagine. Non c'è, in questo percorso, la costruzione artificiale di un racconto, ma piuttosto l'emergere naturale di un sapere, che si consolida nel tempo attraverso il lavoro.",
  "Ed è proprio questa assenza di sovrastruttura narrativa a renderla, oggi, particolarmente significativa. In un contesto contemporaneo dove il valore viene spesso costruito a partire dalla comunicazione, storie come quella di Enzo e Gastone Mazzini ricordano che esiste un altro tipo di legittimità: quella che nasce dalla materia, dal gesto, e dalla continuità di un mestiere.",
];

const LOGO_SRC = "assets/images/Fratellimazzini_sign.jpg";

function Logo({ className, style }){
  return <img src={LOGO_SRC} alt="Fratelli Mazzini" className={`logo-img ${className || ''}`} style={style} />;
}

const ROUTES = [
  ["",           "Home"],
  ["heritage",   "Heritage"],
  ["chi-siamo",  "About"],
  ["expertise",  "Expertise"],
  ["metodo",     "Metodo"],
  ["partner",    "Partner"],
  ["contatti",   "Contatti"],
];

function useRoute(){
  const getRoute = () => {
    const hashRoute = (location.hash || "").replace(/^#\/?/, "");
    if (hashRoute) return hashRoute;
    return location.pathname.replace(/^\/+/, "").replace(/\/+$/, "");
  };
  const [r, setR] = useState(getRoute);
  useEffect(() => {
    const onH = () => setR(getRoute());
    window.addEventListener("hashchange", onH);
    return () => window.removeEventListener("hashchange", onH);
  }, []);
  return r;
}

const BG_SELECTORS = '.slide .bg, .about-bg, .method-hero-bg, .about-founder-bg, .contact-image, .founder-visual, .method-media, .pol-img';

function useImageReveal(route){
  useEffect(() => {
    const els = document.querySelectorAll(BG_SELECTORS);
    els.forEach((el, i) => {
      el.classList.remove('revealed');
      el.classList.add('will-reveal');
      const url = (el.style.backgroundImage || '').match(/url\("?(.+?)"?\)/)?.[1];
      if (!url) { el.classList.add('revealed'); return; }
      const img = new Image();
      const reveal = () => setTimeout(() => el.classList.add('revealed'), i * 150);
      img.onload = reveal;
      img.onerror = reveal;
      img.src = url;
    });
  }, [route]);
}

function useScrolled(){
  const [s, setS] = useState(false);
  useEffect(() => {
    const onS = () => setS(window.scrollY > 40);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  return s;
}

function useLightUnderBar(){
  const [light, setLight] = useState(false);
  useEffect(() => {
    const check = () => {
      // sample multiple x positions so we follow the bar across light/dark splits
      const xs = [40, window.innerWidth / 2, window.innerWidth - 40];
      let lightHits = 0, total = 0;
      for (const x of xs) {
        const els = document.elementsFromPoint(x, 30);
        for (const el of els) {
          const sec = el.closest && el.closest("[data-bar]");
          if (sec) { total++; if (sec.dataset.bar === "light") lightHits++; break; }
        }
      }
      setLight(total > 0 && lightHits > 0);
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    window.addEventListener("hashchange", () => setTimeout(check, 50));
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    };
  }, []);
  return light;
}

function Topbar({ route }){
  const light = useLightUnderBar();
  const scrolled = useScrolled();
  const [menuOpen, setMenuOpen] = useState(false);
  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      <header className={`topbar ${light ? "on-light" : ""} ${scrolled ? "scrolled" : ""} ${menuOpen ? "menu-open" : ""}`}>
        <a href="#/" className="brand" onClick={closeMenu}>
          <Logo className="logo-topbar" />
        </a>
        <p className="topbar-tagline">High-End Accessories Consultancy</p>
        <button className="menu-toggle" type="button" aria-expanded={menuOpen} onClick={() => setMenuOpen(!menuOpen)}>
          <span>{menuOpen ? "Close" : "Menu"}</span>
          <span className="menu-icon" aria-hidden="true"></span>
        </button>
      </header>

      <div className={`menu-backdrop ${menuOpen ? "open" : ""}`} aria-hidden="true" onClick={closeMenu}></div>

      <div className={`menu-panel ${menuOpen ? "open" : ""}`} aria-hidden={!menuOpen}>
        <div className="menu-panel-top">
          <a href="#/" className="menu-logo" onClick={closeMenu}>
            <Logo className="logo-menu" />
          </a>
          <p>High-End Accessories Consultancy</p>
          <button className="menu-close" type="button" onClick={closeMenu}>
            <span>Close</span>
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div className="menu-panel-body">
          <div className="menu-statement">
            <p>
              We help international brands build scale and perfect their leather goods collections, from the mind to the market.
            </p>
            <a href="#/expertise" className="site-button menu-learn" onClick={closeMenu}>Learn more</a>
          </div>
          <nav className="menu-links" aria-label="Menu principale">
            {ROUTES.map(([id, label]) => (
              <a key={id} href={`#/${id}`} className={route === id ? "active" : ""} onClick={closeMenu}>{label}</a>
            ))}
          </nav>
        </div>
      </div>
    </>
  );
}

function Page({ image, title, children, label, light, lightBar, className }){
  const bar = lightBar || light ? "light" : "dark";
  return (
    <section className={`slide ${light ? "light" : ""} ${className || ""}`} data-screen-label={label} data-bar={bar}>
      {!light && image && <div className="bg" style={{ backgroundImage: `url("${image}")` }}></div>}
      {!light && <div className="scrim right-panel"></div>}
      <div className="inner">
        <div className="title-block">
          <h1 className="big">{title}</h1>
        </div>
        {children}
      </div>
    </section>
  );
}

function Home(){
  return (
    <Page
      image={IMG.hero}
      title={<>Fratelli Mazzini</>}
      label="01 Home"
    >
      <div className="copy">
        <p>
          High-End Accessories Consultancy
        </p>
        <p><strong>Quarta generazione</strong> di un mestiere che continua a riformularsi.</p>
        <div className="page-actions">
          <a href="#/heritage" className="pill solid">Heritage</a>
          <a href="#/expertise" className="pill">Expertise →</a>
        </div>
      </div>
    </Page>
  );
}

function Storia(){
  useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;

    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    gsap.registerPlugin(ScrollTrigger);

    const section = document.querySelector(".archive");
    const gallery = section && section.querySelector(".archive-gallery");
    const track = section && section.querySelector(".polaroids");
    if (!section || !gallery || !track) return;

    const distance = () => Math.max(0, track.scrollWidth - gallery.clientWidth);
    const tween = gsap.to(track, {
      x: () => -distance(),
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: () => `+=${distance()}`,
        pin: true,
        scrub: 1,
        anticipatePin: 1,
        invalidateOnRefresh: true,
      },
    });

    ScrollTrigger.refresh();

    return () => {
      if (tween.scrollTrigger) tween.scrollTrigger.kill();
      tween.kill();
    };
  }, []);

  return (
    <section className="about-page" data-screen-label="02 Heritage" data-bar="dark">
      <div className="about-hero">
        <div className="about-bg" style={{ backgroundImage: `url("${IMG.fam1}")` }}></div>
        <div className="about-scrim"></div>
        <div className="about-hero-inner">
          <div className="title-block">
            <h1 className="big">Heritage</h1>
          </div>
          <div className="about-intro">
            <p>
              Dal 1952, una storia familiare intreccia conoscenza tecnica, pelle e accessori di alta gamma.
            </p>
          </div>
        </div>
      </div>

      <div className="archive" data-bar="light">
        <h2 className="archive-h">Archivio di famiglia</h2>
        <div className="archive-gallery">
          <div className="polaroids">
            {[
              { src: IMG.fam3, cap: "Enzo al banco, anni '60" },
              { src: IMG.fam2, cap: "La prima fabbrica, anni '70" },
              { src: IMG.fam1, cap: "I fratelli, anni '80" },
              { src: IMG.fam5, cap: "Borse pronte per la consegna" },
              { src: IMG.fam4, cap: "Lorenzo al volante con papà" },
            ].map((p, i) => (
              <figure key={i} className="pol">
                <div className="pol-img" style={{ backgroundImage: `url("${p.src}")` }}></div>
                <figcaption>{p.cap}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>

      <section className="heritage-editorial" data-bar="light">
        <div className="heritage-editorial-head">
          <span>Family business</span>
          <h2>From the workshop to an international leather goods culture</h2>
        </div>
        <div className="heritage-editorial-body">
          {HERITAGE_EDITORIAL.map((paragraph, i) => (
            <p key={i}>{paragraph}</p>
          ))}
        </div>
      </section>
    </section>
  );
}

function Cosa(){
  const [open, setOpen] = useState(0);
  return (
    <Page
      image={IMG.what}
      title={<>Expertise</>}
      label="04 Expertise"
    >
      <div className="acc">
        {SERVICES.map((s, i) => (
          <div key={s.name} className={`row ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="row-h">
              <span className="n">{String(i+1).padStart(2,'0')}.</span>
              <span>{s.name}</span>
              <span className="pm">+</span>
            </div>
            <div className="body">{s.body}</div>
          </div>
        ))}
      </div>
    </Page>
  );
}

function Filosofia(){
  return (
    <section className="method-page" data-screen-label="05 Metodo">
      <div className="method-hero" data-bar="dark">
        <div className="method-hero-bg" style={{ backgroundImage: `url("${IMG.philo}")` }}></div>
        <div className="method-hero-scrim"></div>
        <div className="method-hero-inner">
          <div className="title-block">
            <h1 className="big">Metodo</h1>
          </div>
          <div className="method-hero-copy">
            <p>From concept to shipment, a hands-on process built around product, suppliers, production, and quality.</p>
          </div>
        </div>
      </div>
      <div className="method-inner" data-bar="light">
        <div className="method-heading">
          <h2 className="method-section-title">Engineering Timeless Classics</h2>
          <p>
            Our specific talent lies in uniting creativity and production into a single continuous flow: not just design or strategy, but concrete execution up to delivery.
          </p>
        </div>
        <div className="method-list">
          {METHOD_STEPS.map(step => (
            <article className="method-row" key={step.n}>
              <div className="method-copy">
                <h2><span>{step.n}</span> {step.h}</h2>
                <p>{step.p}</p>
              </div>
              <div className="method-media" style={{ backgroundImage: `url("${step.img}")` }}></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Fondatori(){
  return (
    <section className="about-founders-page" data-screen-label="03 About">
      <div className="about-founder-hero" data-bar="dark">
        <div className="about-founder-bg" style={{ backgroundImage: `url("${IMG.founders}")` }}></div>
        <div className="about-founder-scrim"></div>
        <div className="about-founder-hero-inner">
          <div className="title-block">
            <h1 className="big">About</h1>
          </div>
          <div className="about-founder-intro">
            <p>
              Two complementary perspectives across design, product, operations, and industrial execution.
            </p>
          </div>
        </div>
      </div>

      <div className="founders-showcase" data-bar="light">
        <article className="founder-card">
          <div className="founder-visual" style={{ backgroundImage: `url("${IMG.fam4}")` }}></div>
          <div className="founder-content">
            <h2>Giacomo Mazzini</h2>
            <div className="rl">Direzione creativa e prodotto</div>
            <p>Supervisiona design, sviluppo collezioni, materiali, linguaggio estetico. Visione internazionale, capacità di tradurre estetica e posizionamento in oggetti concreti.</p>
            <ul>
              <li><span className="yr">2024—</span><span>Co-founder, F.lli Mazzini</span></li>
              <li><span className="yr">2019—24</span><span>Leather Goods Product Director, Loro Piana</span></li>
              <li><span className="yr">2011—19</span><span>Head of Accessories, The Row · NY</span></li>
              <li><span className="yr">2008—11</span><span>Leather Goods Product Dev., Chloé</span></li>
            </ul>
          </div>
        </article>
        <article className="founder-card founder-card-offset">
          <div className="founder-visual" style={{ backgroundImage: `url("${IMG.fam5}")` }}></div>
          <div className="founder-content">
            <h2>Lorenzo Mazzini</h2>
            <div className="rl">Operations e struttura esecutiva</div>
            <p>Coordina fornitori, produzione, pianificazione, industrializzazione e controllo costi. Garantisce che ogni progetto sia realizzabile, scalabile e coerente.</p>
            <ul>
              <li><span className="yr">2024—</span><span>Co-founder, F.lli Mazzini</span></li>
              <li><span className="yr">2018—24</span><span>Leather Goods Product Dir., Ferragamo</span></li>
              <li><span className="yr">2012—18</span><span>Consultancy · Acne, MK, A. Wang</span></li>
              <li><span className="yr">2008—12</span><span>Head of Accessories, Victoria Beckham</span></li>
            </ul>
          </div>
        </article>
      </div>
    </section>
  );
}

function Contatti(){
  return (
    <section className="contact-page" data-screen-label="06 Contatti" data-bar="light">
      <div className="contact-image" style={{ backgroundImage: `url("${IMG.contact}")` }}></div>
      <div className="contact-panel">
        <div className="contact-heading">
          <h1>Contatti</h1>
          <p>
            Se hai un progetto in mente, una collezione da impostare o una produzione da seguire, ci piacerebbe capire come possiamo essere utili.
          </p>
        </div>
        <div className="contact-details">
          <div className="contact-detail">
            <span className="k">Email</span>
            <span className="v"><a href="mailto:studio@flli-mazzini.com">studio@flli-mazzini.com</a></span>
          </div>
          <div className="contact-detail">
            <span className="k">Telefono</span>
            <span className="v">+39 02 0000 0000</span>
          </div>
          <div className="contact-detail">
            <span className="k">Studio</span>
            <span className="v">Firenze, Italia</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Partner(){
  return (
    <section className="partner-page" data-screen-label="06 Partner">
      <section className="slide partner" data-bar="dark">
        <div className="bg" style={{ backgroundImage: `url("${IMG.partner}")` }}></div>
        <div className="scrim"></div>
        <div className="inner">
          <div className="title-block">
            <h1 className="big">mazzini | bruni</h1>
          </div>
        </div>
      </section>
      <div className="partner-intro" data-bar="light">
        <div className="partner-heading">
          <h2>Strategic High-End Accessories Partnership</h2>
          <p>
            Mazzini and Bruni work together as a strategic partnership for the international high-end accessories ecosystem: connecting creative direction, supplier networks, industrial know-how, and hands-on execution across markets.
          </p>
        </div>
        <div className="page-actions">
          <a href="#/contatti" className="pill solid">Contatti</a>
          <a href="#/metodo" className="pill">Metodo</a>
        </div>
      </div>
    </section>
  );
}

const FONT_OPTIONS = [
  { id: "serif",      label: "Serif",       cls: "" },
  { id: "inter",      label: "Inter",       cls: "font-inter" },
  { id: "montserrat", label: "Montserrat",  cls: "font-montserrat" },
  { id: "dmsans",     label: "DM Sans",     cls: "font-dmsans" },
  { id: "roboto",     label: "Roboto (Exin)", cls: "font-roboto" },
];

function TweaksPanel(){
  const [open, setOpen] = useState(false);
  const [font, setFont] = useState("serif");

  const pick = (id) => {
    setFont(id);
    FONT_OPTIONS.forEach(o => { if (o.cls) document.body.classList.remove(o.cls); });
    const opt = FONT_OPTIONS.find(o => o.id === id);
    if (opt && opt.cls) document.body.classList.add(opt.cls);
  };

  return (
    <>
      <button className="tweaks-toggle" onClick={() => setOpen(!open)} aria-label="Tweaks">
        ⚙
      </button>
      <div className={`tweaks-panel ${open ? "open" : ""}`}>
        <span className="tweaks-label">Tipografia</span>
        <div className="tweaks-options wide">
          {FONT_OPTIONS.map(o => (
            <button key={o.id} className={`tweaks-opt tweaks-opt-${o.id} ${font === o.id ? "active" : ""}`} onClick={() => pick(o.id)}>{o.label}</button>
          ))}
        </div>
      </div>
    </>
  );
}

function buildPage(route){
  switch (route) {
    case "heritage":
    case "about":
    case "storia":    return <Storia />;
    case "expertise":
    case "cosa":      return <Cosa />;
    case "metodo":
    case "filosofia": return <Filosofia />;
    case "chi-siamo":
    case "fondatori": return <Fondatori />;
    case "partner":   return <Partner />;
    case "contatti":  return <Contatti />;
    default:          return <Home />;
  }
}

function App(){
  const route = useRoute();
  const [visibleRoute, setVisibleRoute] = useState(route);
  const [phase, setPhase] = useState('idle');

  useEffect(() => {
    if (route !== visibleRoute) {
      setPhase('exit');
      const t = setTimeout(() => {
        window.scrollTo(0, 0);
        setVisibleRoute(route);
        setPhase('enter');
      }, 380);
      return () => clearTimeout(t);
    }
  }, [route]);

  useImageReveal(visibleRoute);

  return (
    <>
      <Topbar route={route} />
      <TweaksPanel />
      <div className={`page-wrap${phase === 'exit' ? ' page-exit' : ''}${phase === 'enter' ? ' page-enter' : ''}`}>
        {buildPage(visibleRoute)}
        <footer className="foot" data-bar="light">
        <div className="foot-main">
          <a href="#/" className="foot-title"><Logo className="logo-footer" /></a>
          <div className="foot-contact">
            <a href="tel:+390200000000">+39 02 0000 0000</a>
            <a href="mailto:studio@flli-mazzini.com">studio@flli-mazzini.com</a>
          </div>
          <address className="foot-address">
            <span>Firenze, Italia</span>
            <span>Lun-Ven 9:00 - 18:00</span>
            <span>Su appuntamento</span>
          </address>
        </div>
        <div className="foot-bottom">
          <p className="foot-copy">© F.lli Mazzini All rights reserved</p>
          <a className="foot-credit" href="https://ledges.it" target="_blank" rel="noreferrer">design by LEDGES</a>
        </div>
      </footer>
      </div>
    </>
  );
}

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