/* global React, ReactDOM, Nav, Ticker, Hero, PriceSection, ProductionSection, ProjectsMap, RigiSection, NewsSection, BlogSection, GlossarySection, Footer, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#1C7C8B", "#2A96A6", "#135A66"],
  "headingFont": "Source Serif 4"
}/*EDITMODE-END*/;

function App(){
  const [lang, setLang] = React.useState('es');
  // resolve language globals synchronously before children render
  window.applyLang(lang);

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = t.accent || TWEAK_DEFAULTS.accent;
    r.setProperty('--lime', a[0]);
    r.setProperty('--lime-2', a[1]);
    r.setProperty('--lime-dim', a[2]);
    r.setProperty('--font-display', `'${t.headingFont}', sans-serif`);
  }, [t.accent, t.headingFont]);

  return (
    <React.Fragment>
      <Nav lang={lang} onLang={setLang}/>
      <Ticker/>
      <main>
        <Hero/>
        <PriceSection/>
        <ProductionSection/>
        <ProjectsMap/>
        <RigiSection/>
        <NewsSection/>
        <BlogSection/>
        <GlossarySection/>
        <Footer/>
      </main>

      <TweaksPanel title={window.T('tw.title')}>
        <TweakSection label={window.T('tw.identity')} />
        <TweakColor label={window.T('tw.accent')} value={t.accent}
          options={[
            ["#1C7C8B","#2A96A6","#135A66"],
            ["#36769C","#4A8FB8","#27567A"],
            ["#5E7C86","#76949E","#46606A"],
            ["#9A6A3C","#B5824E","#6E4A28"]
          ]}
          onChange={(v)=>setTweak('accent', v)} />
        <TweakRadio label={window.T('tw.font')} value={t.headingFont}
          options={["Source Serif 4","Libre Franklin","Lora"]}
          onChange={(v)=>setTweak('headingFont', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);