/* Maitha Tech — home page composition + Tweaks. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "immersive",
  "accentWord": "humana",
  "accentColor": "#0046ff",
  "monoMedia": true
}/*EDITMODE-END*/;

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

function App() {
  const [t, setTweak] = useTweaks(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", hexToRgba(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 />
      <Hero variant={t.heroVariant} accentWord={t.accentWord} />
      <TrustBar />
      <Units />
      <ReadyToday />
      <Conteudos />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Layout do hero" value={t.heroVariant}
          options={[{ value: "immersive", label: "Imersivo (fundo + texto)" }, { value: "framed", label: "Emoldurado" }, { value: "split", label: "Dividido" }, { value: "type", label: "Tipográfico" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSelect label="Palavra de destaque" value={t.accentWord}
          options={[{ value: "humana", label: "humana" }, { value: "cocriar", label: "cocriar" }, { value: "impacto", label: "impacto" }, { value: "artificial", label: "artificial" }]}
          onChange={(v) => setTweak("accentWord", v)} />

        <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(<App />);