// TruVis Landing v2 — App
const { useEffect: useEApp } = React;
const { TopBar, Hero, QuickAccess, Featured, Services, StatsBand } = window.TV_V2_A;
const { Jurisdictions, Insights, Process, FAQ, ContactForm, Footer } = window.TV_V2_B;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ctaCopy": "consultation",
  "density": "spacious",
  "emphasis": "emerald"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEApp(() => {
    document.body.classList.toggle('density-modern', tweaks.density === 'modern');
    document.body.classList.toggle('density-spacious', tweaks.density === 'spacious');
    document.body.classList.toggle('emphasis-emerald', tweaks.emphasis === 'emerald');
    document.body.classList.toggle('emphasis-cyan', tweaks.emphasis === 'cyan');
  }, [tweaks.density, tweaks.emphasis]);

  useEApp(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <TopBar />
      <Hero ctaCopy={tweaks.ctaCopy} />
      <QuickAccess />
      <Featured />
      <Services />
      <StatsBand />
      <Jurisdictions />
      <Insights />
      <Process />
      <FAQ />
      <ContactForm />
      <Footer />
      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection title="Hero">
            <window.TweakRadio
              label="CTA copy"
              value={tweaks.ctaCopy}
              onChange={v => setTweak('ctaCopy', v)}
              options={[
                { value: 'consultation', label: 'Consultation' },
                { value: 'briefing', label: 'Briefing' },
                { value: 'engage', label: 'Engage' }
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Density">
            <window.TweakRadio
              label="Section spacing"
              value={tweaks.density}
              onChange={v => setTweak('density', v)}
              options={[
                { value: 'spacious', label: 'Spacious' },
                { value: 'modern', label: 'Modern' }
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Accent">
            <window.TweakRadio
              label="Emphasis colour"
              value={tweaks.emphasis}
              onChange={v => setTweak('emphasis', v)}
              options={[
                { value: 'cyan', label: 'Cyan' },
                { value: 'emerald', label: 'Emerald' }
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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