// App — orchestrates sections, scroll-spy nav, reveal-on-scroll, and the Tweaks panel.
const { Nav, Hero, Services, Why, Process, UseCases, About, CTA, Footer } = window.Sections;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "caerulean",
  "typography": "sans",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENT_HUES = {
  caerulean: 220,    // brand
  cyan:      200,
  blue:      245,
  teal:      190,
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState('top');

  // Apply theme + accent to document.
  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.style.setProperty('--accent-h', ACCENT_HUES[t.accent] || 220);
    document.body.dataset.typography = t.typography;
  }, [t.theme, t.accent, t.typography]);

  // Scroll-spy active section.
  React.useEffect(() => {
    const ids = ['top', 'services', 'why', 'process', 'usecases', 'about', 'contact'];
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver(
      (entries) => {
        // Pick the entry closest to top that is intersecting.
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: '-40% 0px -50% 0px', threshold: 0 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Reveal-on-scroll.
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: '0px 0px -8% 0px' }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav active={active} />
      <main>
        <Hero />
        <Services />
        <Why />
        <Process />
        <UseCases />
        <About />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={['dark', 'light']}
          onChange={(v) => setTweak('theme', v)} />
        <TweakSelect label="Accent" value={t.accent}
          options={['caerulean', 'cyan', 'blue', 'teal']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Typography" />
        <TweakRadio label="Headlines" value={t.typography}
          options={['sans', 'serif']}
          onChange={(v) => setTweak('typography', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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