const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [tweaks, setTweaks] = useStateApp(window.__TWEAKS__ || {});
  const [modalOpen, setModalOpen] = useStateApp(false);

  useEffectApp(() => {
    // Apply live CSS variables from tweaks
    const r = document.documentElement;
    r.style.setProperty('--fs-base', (tweaks.baseFontSize || 15) + 'px');
    // accent via oklch with controllable hue
    const hue = tweaks.accentHue ?? 252;
    r.style.setProperty('--accent', `oklch(0.55 0.23 ${hue})`);
    r.style.setProperty('--accent-hover', `oklch(0.48 0.24 ${hue})`);
    r.style.setProperty('--accent-soft', `oklch(0.55 0.23 ${hue} / 0.10)`);
  }, [tweaks]);

  const goAgenda = () => {
    const el = document.getElementById('agenda');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      <Hero
        onOpenConfirm={() => setModalOpen(true)}
        onGoAgenda={goAgenda}
        showGraph={tweaks.showGraphBackground !== false}
        showCountdown={tweaks.showCountdown !== false}
      />
      <Agenda />
      <Venue />
      <Partners />
      <Footer />
      <ConfirmModal open={modalOpen} onClose={() => setModalOpen(false)} />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

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