function App() {
  const [modal, setModal] = useState(null);
  // ouverture des modales légales via hash (#legal-mentions / #legal-confidentialite / #legal-securite)
  useEffect(() => {
    const openFromHash = () => {
      const m = (window.location.hash || '').match(/^#legal-(mentions|confidentialite|securite)$/);
      if (m) setModal(m[1]);
    };
    openFromHash();
    window.addEventListener('hashchange', openFromHash);
    return () => window.removeEventListener('hashchange', openFromHash);
  }, []);
  // ambient cursor halo
  useEffect(() => {
    const halo = document.createElement('div');
    halo.style.cssText = `
      position: fixed; pointer-events: none; z-index: 1;
      width: 360px; height: 360px; border-radius: 50%;
      background: radial-gradient(circle, rgba(124,58,237,0.16), transparent 60%);
      mix-blend-mode: screen; transform: translate(-50%, -50%);
      transition: opacity .4s; opacity: 0;
    `;
    document.body.appendChild(halo);
    const onMove = (e) => {
      halo.style.left = e.clientX + 'px';
      halo.style.top = e.clientY + 'px';
      halo.style.opacity = '1';
    };
    const onLeave = () => { halo.style.opacity = '0'; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseleave', onLeave);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseleave', onLeave);
      halo.remove();
    };
  }, []);

  return (
    <>
      <Nav />
      <SectionRail />
      <main>
        <Hero />
        <Problem />
        <Showcase />
        <CustomOffer />
        <Pricing />
        <Automations />
        <Capabilities />
        <Sovereignty />
        <Process />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer onOpenModal={setModal} />
      <Modal open={!!modal} kind={modal} onClose={() => setModal(null)} />
    </>
  );
}

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