/* global React, ReactDOM, window */
const { useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor } = window;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "ambient": true,
  "accent": "#17D9E6",
  "heroLayout": "object",
  "background": "ivory"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  // Apply tweaks to CSS variables
  React.useEffect(() => {
    document.documentElement.style.setProperty('--cyan', tweaks.accent);
    document.documentElement.style.setProperty('--cyan-soft', tweaks.accent + '2e');
    if (tweaks.background === 'paper') {
      document.documentElement.style.setProperty('--ivory', '#F2EBDC');
    } else {
      document.documentElement.style.setProperty('--ivory', '#F7F1E6');
    }
  }, [tweaks.accent, tweaks.background]);

  return (
    <div className="page">
      <window.TopBar tweaks={tweaks} />
      <window.Hero tweaks={tweaks} />
      <window.StackStrip />
      <window.Problem />
      <window.TeardownStage />
      <window.ProofSection />
      <window.ExampleSystems />
      <window.Offer />
      <window.Operator />
      <window.LeadForm />
      <window.Foot />

      <window.Demo />

      <TweaksPanel>
        <TweakSection label="Hero">
          <TweakToggle
            label="Ambient hero video"
            value={tweaks.ambient}
            onChange={(v) => setTweak('ambient', v)}
            hint="Toggles the supplied loop as a subtle multiply layer behind the mark."
          />
        </TweakSection>
        <TweakSection label="Background tone">
          <TweakRadio
            label="Ivory shade"
            options={[
              { value: 'ivory', label: 'Warm ivory' },
              { value: 'paper', label: 'Paper cream' },
            ]}
            value={tweaks.background}
            onChange={(v) => setTweak('background', v)}
          />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor
            label="Routing color"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#17D9E6', '#5B8DEF', '#F4B84A', '#9AF8FF']}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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