// App.jsx — composes everything

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "terminal",
  "accent": "#3a8c5e",
  "theme": "light"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.setAttribute('data-direction', tweaks.direction);
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.direction, tweaks.theme, tweaks.accent]);

  return (
    <>
      <div data-screen-label="Stratalytics Home">
        <Nav accent={tweaks.accent} />
        <Hero accent={tweaks.accent} />
        <Logos />
        <Approach accent={tweaks.accent} />
        <Services accent={tweaks.accent} />
        <Results accent={tweaks.accent} />
        <Compare accent={tweaks.accent} />
        <Team />
        <Insights accent={tweaks.accent} />
        <CTA accent={tweaks.accent} />
        <Footer accent={tweaks.accent} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Direction">
          <TweakRadio
            label="Visual style"
            value={tweaks.direction}
            options={[
              { value: 'terminal', label: 'Terminal' },
              { value: 'editorial', label: 'Editorial' },
              { value: 'bold', label: 'Bold' },
            ]}
            onChange={v => setTweak('direction', v)}
          />
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            options={['#3a8c5e', '#1d3a6b', '#a8482b', '#3d3d3d', '#6b5d8e']}
            onChange={v => setTweak('accent', v)}
          />
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            options={[
              { value: 'light', label: 'Light' },
              { value: 'dark', label: 'Dark' },
            ]}
            onChange={v => setTweak('theme', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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