/* Maitha Tech — página Synapse: composição + Tweaks. */

const SYN_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#0046ff",
  "flipSpeed": 780,
  "orbitLogos": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--syn-orbit-display", t.orbitLogos ? "block" : "none");
    document.documentElement.style.setProperty("--syn-list-display", t.orbitLogos ? "none" : "flex");
  }, [t.orbitLogos]);

  return (
    <React.Fragment>
      <Nav />
      <SynapseHero />
      <SynapseCapacidade />
      <SynapseNumeros />
      <SynapseCases />
      <SynapseGovernanca />
      <SynapseStack />
      <SynapseSprint />
      <SynapseCTA />
      <Footer />

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

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