function App(){
  const [active, setActive] = React.useState('hero');

  const sections = [
    { id:'hero',      num:'I'    },
    { id:'messaggio', num:'II'   },
    { id:'storia',    num:'III'  },
    { id:'programma', num:'IV'   },
    { id:'galleria',  num:'V'    },
    { id:'regali',    num:'VI'   },
    { id:'location',  num:'VII'  },
    { id:'rsvp',      num:'VIII' },
    { id:'faq',       num:'IX'   },
    { id:'footer',    num:'X'    },
  ];

  // Ricalcola tutti i trigger GSAP dopo che immagini e layout sono stabili
  React.useEffect(() => {
    const refresh = () => {
      if (window.ScrollTrigger) window.ScrollTrigger.refresh();
    };
    // Primo refresh dopo il paint iniziale
    const t1 = setTimeout(refresh, 300);
    // Secondo refresh dopo il caricamento completo (immagini incluse)
    window.addEventListener('load', refresh, { once: true });
    return () => { clearTimeout(t1); window.removeEventListener('load', refresh); };
  }, []);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.3) {
          setActive(e.target.id);
        }
      });
    }, {threshold:[0.3, 0.6]});
    sections.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);

  const onJump = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({top: el.offsetTop, behavior:'smooth'});
  };

  return (
    <>
      <PetalRain/>
      <ProgressBar/>
      <StickyNav sections={sections} active={active} onJump={onJump}/>
      <div id="hero"><Hero/></div>
      <div id="messaggio"><Messaggio/></div>
      <div id="storia"><Storia/></div>
      <div id="programma"><Programma/></div>
      <div id="galleria"><Galleria/></div>
      <div id="regali"><Regali/></div>
      <div id="location"><Location/><Countdown/></div>
      <div id="rsvp"><Rsvp/></div>
      <div id="faq"><Faq/></div>
      <div id="footer"><Footer/></div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider>
    <App/>
  </LangProvider>
);