/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakToggle, useTweaks,
          Nav, Hero, FeaturesGrid, HomePricing, Footer, MotionConfig */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "stacked",
  "density": "comfy",
  "weight": "extra",
  "glow": "signature"
}/*EDITMODE-END*/;

/* Apply tweaks via html[data-*] so global CSS can react */
const useApplyTweaks = (t) => {
  React.useEffect(() => {
    const html = document.documentElement;
    html.setAttribute('data-density', t.density);
    html.setAttribute('data-weight', t.weight);
    html.setAttribute('data-glow', t.glow);
  }, [t.density, t.weight, t.glow]);
};

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useApplyTweaks(t);
  const MC = MotionConfig || React.Fragment;
  const mcProps = MotionConfig ? { reducedMotion: 'user' } : {};

  return (
    <MC {...mcProps}>
    <div id="top">
      <Nav active="home" />
      <Hero layout={t.heroLayout} />
      <FeaturesGrid />
      <HomePricing />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />

        <TweakRadio  label="Layout" value={t.heroLayout}
          options={['stacked', 'split', 'wordmark']}
          onChange={(v) => setTweak('heroLayout', v)} />

        <TweakSection label="Type" />
        <TweakRadio label="Display weight" value={t.weight}
          options={[
            { value: 'bold',  label: 'Bold' },
            { value: 'extra', label: 'X-Bold' },
            { value: 'black', label: 'Black' },
          ]}
          onChange={(v) => setTweak('weight', v)} />

        <TweakSection label="Spacing" />
        <TweakRadio label="Density" value={t.density}
          options={['compact', 'comfy', 'spacious']}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Glow" />
        <TweakRadio label="Signature glow" value={t.glow}
          options={['off', 'dim', 'signature']}
          onChange={(v) => setTweak('glow', v)} />
      </TweaksPanel>
    </div>
    </MC>
  );
};

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