/* global React, LangCtx, Nav, Hero, Stats, Services, Clients, About, Contact, Footer,
          TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B5DC3C",
  "heroLayout": "split",
  "dark": false
}/*EDITMODE-END*/;

function accentShades(hex) {
  return {
    '--mb-accent': hex,
    '--mb-accent-soft': `color-mix(in srgb, ${hex} 20%, white)`,
    '--mb-accent-deep': `color-mix(in srgb, ${hex} 65%, black)`,
  };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState('bs');

  React.useEffect(() => {
    document.body.classList.toggle('theme-dark', !!t.dark);
    document.documentElement.lang = lang;
  }, [t.dark, lang]);

  return (
    <LangCtx.Provider value={{ lang, setLang }}>
      <div style={accentShades(t.accent)} data-screen-label="Media Board Website">
        <Nav/>
        <Hero layout={t.heroLayout}/>
        <Stats/>
        <Services/>
        <Clients/>
        <About/>
        <Contact/>
        <Footer/>

        <TweaksPanel title="Tweaks">
          <TweakSection label="Brand"/>
          <TweakColor
            label="Accent"
            value={t.accent}
            options={['#B5DC3C','#2DD4BF','#F59E0B','#3B82F6','#EC4899']}
            onChange={(v) => setTweak('accent', v)}
          />
          <TweakSection label="Layout"/>
          <TweakRadio
            label="Hero"
            value={t.heroLayout}
            options={['split','center']}
            onChange={(v) => setTweak('heroLayout', v)}
          />
          <TweakSection label="Theme"/>
          <TweakToggle
            label="Dark mode"
            value={t.dark}
            onChange={(v) => setTweak('dark', v)}
          />
        </TweaksPanel>
      </div>
    </LangCtx.Provider>
  );
}

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