/* Maitha Tech — "Cloud Unit" page composition + Tweaks. */

const CLOUD_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#0046ff",
  "monoMedia": true
}/*EDITMODE-END*/;

function cloudHexToRgba(hex, a) {
  const h = hex.replace("#", "");
  return `rgba(${parseInt(h.substring(0,2),16)}, ${parseInt(h.substring(2,4),16)}, ${parseInt(h.substring(4,6),16)}, ${a})`;
}

function CloudApp() {
  const [t, setTweak] = useTweaks(CLOUD_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", cloudHexToRgba(t.accentColor, 0.5));
  }, [t.accentColor]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--mt-media-gray", t.monoMedia ? "grayscale(0.4) contrast(1.04)" : "none");
  }, [t.monoMedia]);

  return (
    <React.Fragment>
      <Nav active="units" />
      <CloudHero />
      <CloudStatement />
      <CloudStepper />
      <CloudPartners />
      <CloudCta />
      <Contact />
      <Footer />

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

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