/* Maitha Tech — "Vagas" (listagem) page composition + Tweaks. */

const VAGAS_LIST_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#0046ff"
}/*EDITMODE-END*/;

function VagasListApp() {
  const [t, setTweak] = useTweaks(VAGAS_LIST_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accentColor);
    root.style.setProperty("--mt-signal", t.accentColor);
    root.style.setProperty("--focus-ring", vagasHexToRgba(t.accentColor, 0.5));
  }, [t.accentColor]);

  return (
    <React.Fragment>
      <img className="mt-vagas-orn" src="assets/glass/glass-orn.png" alt="" aria-hidden="true" />
      <Nav active="carreiras" />
      <VagasListPage />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accentColor}
          options={["#0046ff", "#ff4400", "#ffffff"]}
          onChange={(v) => setTweak("accentColor", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<VagasListApp />);