const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "glow": true,
  "mesh": true
}/*EDITMODE-END*/;

function Tweaks({ open, onClose, state, setState }) {
  if (!open) return null;
  const swatches = [
    { id:"navy", c:"#1B3A6B" },
    { id:"gold", c:"#C9A84C" },
    { id:"green", c:"#4d9379" },
    { id:"graphite", c:"#6c7a8e" },
    { id:"offwhite", c:"#ecead8" },
  ];
  const update = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    window.parent.postMessage({type:"__edit_mode_set_keys", edits:{[k]:v}}, "*");
  };
  return (
    <div className="tw-panel">
      <button className="tw-close" onClick={onClose} aria-label="Fechar">×</button>
      <h6>Tweaks</h6>
      <div className="tw-row">
        <span className="lbl">Cor de acento</span>
      </div>
      <div className="tw-swatches">
        {swatches.map(s => (
          <span key={s.id}
            className={"tw-swatch"+(state.accent===s.id?" active":"")}
            style={{background:s.c}}
            title={s.id}
            onClick={()=>update("accent", s.id)}/>
        ))}
      </div>
      <div className="tw-row">
        <span className="lbl">Glow no CTA final</span>
        <span className={"tw-toggle"+(state.glow?" on":"")} onClick={()=>update("glow", !state.glow)}><i></i></span>
      </div>
      <div className="tw-row">
        <span className="lbl">Mesh no Hero</span>
        <span className={"tw-toggle"+(state.mesh?" on":"")} onClick={()=>update("mesh", !state.mesh)}><i></i></span>
      </div>
    </div>
  );
}

function App() {
  const [state, setState] = React.useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({type:"__edit_mode_available"}, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-accent", state.accent);
  }, [state.accent]);

  const closeTweaks = () => {
    setTweaksOpen(false);
    window.parent.postMessage({type:"__edit_mode_dismissed"}, "*");
  };

  return (
    <>
      <Nav />
      <Hero mesh={state.mesh} />
      <Marquee />
      <Tese />
      <Argumentos />
      <Servicos />
      <Processo />
      <Apresentacao />
      <Equipe />
      <FAQ />
      <CTAFinal glow={state.glow} />
      <Footer />
      <Tweaks open={tweaksOpen} onClose={closeTweaks} state={state} setState={setState} />
    </>
  );
}

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

requestAnimationFrame(() => {
  const sp = document.getElementById("boot-splash");
  if (!sp) return;
  setTimeout(() => {
    sp.classList.add("done");
    setTimeout(() => sp.remove(), 700);
  }, 260);
});