/* global React */
const { useState, useEffect } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "orange",
  "headlineSize": "huge",
  "showSparkles": true,
  "heroLayout": "split",
  "darkServices": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  const accents = {
    orange: '#FF6309',
    coral: '#E8542B',
    amber: '#E8A02B',
    forest: '#2B7F4E',
  };
  root.style.setProperty('--orange', accents[t.accent] || '#FF6309');
  root.dataset.headline = t.headlineSize;
  root.dataset.sparkles = t.showSparkles ? 'on' : 'off';
  root.dataset.heroLayout = t.heroLayout;
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // Reveal-on-scroll
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const { Nav, Hero } = window.SiteCommon;
  const { Manifesto, Shifts, ValueBridge } = window.SiteMid;
  const { Approach, Services } = window.SiteServices;
  const { Founders, MarqueeStrip, Contact, Footer } = window.SiteFoot;

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Manifesto />
        <ValueBridge />
        <Approach />
        <Services />
        <Founders />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={['orange','coral','amber','forest']}
          />
          <TweakToggle
            label="Show sparkle marks"
            value={tweaks.showSparkles}
            onChange={v => setTweak('showSparkles', v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Headline"
            value={tweaks.headlineSize}
            onChange={v => setTweak('headlineSize', v)}
            options={['standard','huge']}
          />
          <TweakToggle
            label="Dark services section"
            value={tweaks.darkServices}
            onChange={v => setTweak('darkServices', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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