// app.jsx — root + tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fonts": "instrument",
  "hero": "title-card",
  "accent": "gold"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.fonts = t.fonts;
    document.body.dataset.accent = t.accent;
  }, [t.fonts, t.accent]);

  // intersection-reveal
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [t.hero, t.fonts]);

  return (
    <>
      <Nav />
      <Hero layout={t.hero} />
      <Services />
      <Portfolio />
      <Testimonials />
      <Booking />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Typography" />
        <TweakSelect
          label="Font pairing"
          value={t.fonts}
          options={[
            { value: 'instrument', label: 'Instrument Serif + Inter Tight' },
            { value: 'italiana',   label: 'Italiana + DM Sans' },
            { value: 'cormorant',  label: 'Cormorant + Manrope' },
          ]}
          onChange={(v) => setTweak('fonts', v)}
        />
      </TweaksPanel>
    </>
  );
}

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