// App root. Wires the sections together and hosts the Tweaks panel + edit-mode protocol.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "serviceLayout": "rule"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaksState] = React.useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  // Register listener FIRST, then announce availability.
  React.useEffect(() => {
    function onMessage(e) {
      const data = e.data || {};
      if (data.type === "__activate_edit_mode") setEditMode(true);
      if (data.type === "__deactivate_edit_mode") setEditMode(false);
    }
    window.addEventListener("message", onMessage);
    // announce availability after listener is live
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch(_) {}
    return () => window.removeEventListener("message", onMessage);
  }, []);

  const setTweaks = React.useCallback((edits) => {
    setTweaksState((prev) => ({ ...prev, ...edits }));
    try {
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
    } catch(_) {}
  }, []);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <News />
        <Service layout={tweaks.serviceLayout} />
        <YouTubeFeature />
        <CommunityFeature />
        <StudentCommunityFeature />
        <Contact />
        <ContactForm />
      </main>
      <Footer />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode} />
    </React.Fragment>
  );
}

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