function loadFont(family) {
  if (!family) return;
  if (["Helvetica Neue","Georgia","Times New Roman"].includes(family)) return;
  const id = "gf-" + family.replace(/\s+/g,'-');
  if (document.getElementById(id)) return;
  const link = document.createElement('link');
  link.id = id; link.rel = 'stylesheet';
  const fam = family.replace(/\s+/g,'+');
  link.href = `https://fonts.googleapis.com/css2?family=${fam}:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap`;
  document.head.appendChild(link);
}

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__);

  useEffect(() => {
    document.body.setAttribute('data-palette', tweaks.palette);
    document.body.setAttribute('data-mode', tweaks.mode);
    document.body.setAttribute('data-density', tweaks.density);
    loadFont(tweaks.headingFont);
    loadFont(tweaks.bodyFont);
    document.documentElement.style.setProperty('--heading-font', `"${tweaks.headingFont}", "Times New Roman", serif`);
    document.documentElement.style.setProperty('--body-font', `"${tweaks.bodyFont}", system-ui, sans-serif`);
  }, [tweaks]);

  return (
    <>
      <Nav />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <Intro />
        <Services />
        <Community />
        <Events />
        <Products />
        <Resources />
        <About />
        <Founder />
        <Newsletter />
      </main>
      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

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