/* App shell + Tweaks wiring */

const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "layout": "editorial"
}/*EDITMODE-END*/;

function App() {
  const [values, setValue] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + layout to document root
  useEffect(() => {
    document.documentElement.dataset.theme = values.theme === 'ink' ? 'ink' : 'light';
    document.documentElement.dataset.layout = values.layout || 'editorial';
  }, [values.theme, values.layout]);

  return (
    <>
      <TopNav />
      <Hero />
      <QuestionSection />
      <ContrastSection />
      <OfferSection />
      <ProofSection />
      <WhoSection />
      <FinalCTA />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Background"
            value={values.theme}
            onChange={(v) => setValue('theme', v)}
            options={[
              { value: 'light', label: 'White' },
              { value: 'ink', label: 'Ink' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Layout direction">
          <TweakRadio
            label="Composition"
            value={values.layout}
            onChange={(v) => setValue('layout', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'modular', label: 'Modular' },
              { value: 'asymmetric', label: 'Asymmetric' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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