/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor,
   Nav, Hero, Sobre, Servicos, Depoimentos, Faq, Contato, Footer, FloatWA, useReveal */
const { useEffect } = React;

const R = (typeof window !== 'undefined' && window.__resources) || {};
const HERO_PHOTO = R.heroPhoto || "assets/sayonara-hero.jpg";
const ABOUT_PHOTO = R.aboutPhoto || "assets/sayonara.jpg";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direcao": "sereno",
  "displayFont": "Quiche Sans",
  "accent": "#5E6448"
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Quiche Sans": "'Quiche Sans', serif",
  "Jost": "'Jost', sans-serif",
  "Marcellus": "'Marcellus', serif",
  "Josefin Sans": "'Josefin Sans', sans-serif",
  "Cormorant": "'Cormorant Garamond', serif",
};

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

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-dir', t.direcao);
    r.style.setProperty('--font-display', FONT_MAP[t.displayFont] || FONT_MAP.Jost);
    r.style.setProperty('--accent', t.accent);
  }, [t.direcao, t.displayFont, t.accent]);

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero photo={HERO_PHOTO} />
        <Sobre photo={ABOUT_PHOTO} />
        <Servicos />
        <Depoimentos />
        <Faq />
        <Contato />
      </main>
      <Footer />
      <FloatWA />

      <TweaksPanel>
        <TweakSection label="Direção visual" />
        <TweakRadio
          label="Estilo"
          value={t.direcao}
          options={[
            { value: "sereno", label: "Sereno" },
            { value: "terroso", label: "Terroso" },
            { value: "editorial", label: "Editorial" },
          ]}
          onChange={(v) => setTweak('direcao', v)}
        />
        <TweakSection label="Tipografia" />
        <TweakSelect
          label="Fonte de display"
          value={t.displayFont}
          options={["Quiche Sans", "Jost", "Marcellus", "Josefin Sans", "Cormorant"]}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSection label="Cor" />
        <TweakColor
          label="Acento"
          value={t.accent}
          options={["#5E6448", "#583E28", "#767C5E", "#6E4F33"]}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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