/* App shell — routing, tweaks, modals. Mounts the site. */
const appDS = window.WKYHBHutchinsonBellDesignSystem_7985db || {};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "gradient",
  "accent": true
}/*EDITMODE-END*/;

function parsePath() {
  const key = window.location.pathname.replace(/^\/+/, '').split('/')[0] || 'home';
  const params = {};
  const q = window.location.search.replace(/^\?/, '');
  if (q) q.split('&').forEach((p) => { const [k, v] = p.split('='); if (k) params[k] = decodeURIComponent(v || ''); });
  return { key, params };
}

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [{ key, params }, setRoute] = React.useState(parsePath());
  const [rsvp, setRsvp] = React.useState({ open: false, event: null });

  React.useEffect(() => {
    // popstate = browser back/forward; wknavigate = in-app navigation (U.goTo)
    const onNav = () => { setRoute(parsePath()); window.U.scrollTop(); };
    window.addEventListener('popstate', onNav);
    window.addEventListener('wknavigate', onNav);
    return () => { window.removeEventListener('popstate', onNav); window.removeEventListener('wknavigate', onNav); };
  }, []);

  const Pages = window.Pages || {};
  const route = Pages[key] ? key : 'home';
  const Page = Pages[route];
  const openRSVP = (event) => setRsvp({ open: true, event });

  let pageEl;
  if (route === 'home') pageEl = <Page t={t} onRSVP={openRSVP} />;
  else if (route === 'events') pageEl = <Page onRSVP={openRSVP} />;
  else if (route === 'contact') pageEl = <Page prefillTo={params.to} />;
  else pageEl = <Page />;

  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;

  return (
    <React.Fragment>
      <window.Nav route={route} />
      <main>{pageEl}</main>
      <window.Footer />
      <window.RSVPModal event={rsvp.event} open={rsvp.open} onClose={() => setRsvp({ open: false, event: null })} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Treatment" value={t.hero} options={['gradient', 'faceted', 'photo']} onChange={(v) => setTweak('hero', v)} />
        <TweakSection label="Layout" />
        <TweakToggle label="Card accent strip" value={t.accent} onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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