// App — mount every section in order, wire Tweaks edit-mode protocol.
const App = () => {
const defaults = window.__TWEAK_DEFAULTS__ || { hero: "invitation", mode: "light", howLayout: "editorial" };
const [state, setState] = React.useState(defaults);
const [tweaksActive, setTweaksActive] = React.useState(false);
// Apply mode to so CSS selectors pick it up.
React.useEffect(() => {
document.body.setAttribute("data-mode", state.mode === "navy" ? "navy" : "light");
}, [state.mode]);
// Edit-mode protocol: register listener THEN announce availability.
React.useEffect(() => {
const onMsg = (e) => {
const d = e.data || {};
if (d.type === "__activate_edit_mode") setTweaksActive(true);
else if (d.type === "__deactivate_edit_mode") setTweaksActive(false);
};
window.addEventListener("message", onMsg);
try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (e) {}
return () => window.removeEventListener("message", onMsg);
}, []);
// In "navy" mode, swap the hero variant so the navy hero is showing.
const heroVariant = state.mode === "navy" ? "navy" : state.hero;
return (
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();