const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1731D9",
  "paper": "#F2F0EA",
  "ink": "#111111"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks live by writing CSS vars
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--paper', t.paper);
    document.documentElement.style.setProperty('--ink', t.ink);
    // derived paper-2
    const c = t.paper;
    document.documentElement.style.setProperty('--paper-2',
      c === '#F2F0EA' ? '#ECE9E1' :
      c === '#0E0F12' ? '#15171B' :
      c === '#F7F7F5' ? '#EFEFEC' : c);
  }, [t]);

  const isDark = t.ink === '#F2F0EA' || t.paper === '#0E0F12';

  return (
    <>
      <Nav />
      <Hero />
      <About />
      <Services />
      <Works />
      <Process />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color">
          <TweakColor label="Accent" value={t.accent}
            options={['#1731D9', '#E0341F', '#0F766E', '#6D28D9', '#111111']}
            onChange={(v) => setTweak('accent', v)} />
        </TweakSection>
        <TweakSection label="Paper">
          <TweakColor label="Background" value={t.paper}
            options={['#F2F0EA', '#F7F7F5', '#FFFFFF', '#0E0F12']}
            onChange={(v) => setTweak('paper', v)} />
        </TweakSection>
        <TweakSection label="Ink">
          <TweakColor label="Text" value={t.ink}
            options={['#111111', '#1F2937', '#0E0F12', '#F2F0EA']}
            onChange={(v) => setTweak('ink', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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