// App root + router

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "overlay",
  "formStyle": "comfortable",
  "accent": "default"
}/*EDITMODE-END*/;

const getPageFromHash = () => {
  const h = (window.location.hash || '#/').replace(/^#\/?/, '').split('/')[0] || 'home';
  const p = SC_PAGES.find(x => x.key === h);
  return p ? p.key : 'home';
};

const App = () => {
  const [page, setPage] = React.useState(getPageFromHash());
  const [tweaksOn, setTweaksOn] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(() => {
    try {
      const stored = JSON.parse(localStorage.getItem('sc_tweaks') || '{}');
      // bust cache when defaults change
      if (stored._v !== 2) return { ...TWEAK_DEFAULTS, _v: 2 };
      return { ...TWEAK_DEFAULTS, ...stored };
    }
    catch { return TWEAK_DEFAULTS; }
  });

  const navTo = React.useCallback((key) => {
    const target = SC_PAGES.find(p => p.key === key) || SC_PAGES[0];
    window.location.hash = target.path;
    setPage(target.key);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  const setTweak = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      try { localStorage.setItem('sc_tweaks', JSON.stringify(next)); } catch {}
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  React.useEffect(() => {
    const onHash = () => setPage(getPageFromHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Tweaks host protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  React.useEffect(() => {
    // Apply accent tweak via attribute
    document.body.dataset.accent = tweaks.accent;
  }, [tweaks.accent]);

  React.useEffect(() => {
    if (window.lucide) setTimeout(() => lucide.createIcons(), 50);
  }, [page]);

  let content = null;
  if (page === 'home') content = <HomePage onNav={navTo} heroVariant={tweaks.heroVariant} />;
  else if (page === 'vision') content = <VisionPage onNav={navTo} />;
  else if (page === 'spaces') content = <SpacesPage onNav={navTo} />;
  else if (page === 'dedications') content = <DedicationsPage onNav={navTo} formStyle={tweaks.formStyle} />;
  else if (page === 'contact') content = <ContactPage onNav={navTo} />;

  return (
    <>
      <Nav currentPage={page} onNav={navTo} />
      <main data-screen-label={page}>{content}</main>
      <Footer onNav={navTo} />
      {tweaksOn && <TweaksPanel tweaks={tweaks} setTweak={setTweak} active={page} />}
    </>
  );
};

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