function App() {
  const [audience, setAudience] = React.useState('particulier');
  const [lang, setLangState] = React.useState(() => {
    if (window.Bearly && window.Bearly.getLang) return window.Bearly.getLang();
    try { return localStorage.getItem('bearly-lang') || 'nl'; } catch (e) { return 'nl'; }
  });

  // Setting lang: persist via Bearly (dispatches event for other listeners)
  const setLang = React.useCallback((l) => {
    setLangState(l);
    if (window.Bearly && window.Bearly.setLang) window.Bearly.setLang(l);
    else try { localStorage.setItem('bearly-lang', l); } catch (e) {}
  }, []);

  // React to external lang changes
  React.useEffect(() => {
    const handler = (e) => {
      const l = (e && e.detail) || (window.Bearly && window.Bearly.getLang && window.Bearly.getLang());
      if (l && l !== lang) setLangState(l);
    };
    window.addEventListener('bearly-lang', handler);
    return () => window.removeEventListener('bearly-lang', handler);
  }, [lang]);

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const c = window.CONTENT[lang] || window.CONTENT.nl;

  return (
    <div>
      <Nav audience={audience} setAudience={setAudience} lang={lang} setLang={setLang} c={c} />
      <Hero audience={audience} c={c} />
      <TrustBar c={c} />
      <Services audience={audience} c={c} />
      <Process audience={audience} c={c} />
      <Pricing audience={audience} c={c} />
      <Testimonials audience={audience} c={c} />
      <Coverage c={c} lang={lang} />
      <FAQ audience={audience} c={c} />
      <ConsultationForm audience={audience} c={c} />
      <Contact audience={audience} c={c} />
      <Footer c={c} />
    </div>
  );
}

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