// App root — routing, tweaks bridge, footer
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const tw = window.__TWEAKS__ || {};
  const [accent, setAccent] = useStateA(tw.accent || '#f27a2a');
  const [font, setFont] = useStateA(tw.font || 'geist');
  const [theme, setTheme] = useStateA(tw.theme || 'light');
  const [editMode, setEditMode] = useStateA(false);

  useEffectA(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-font', font);
    document.documentElement.style.setProperty('--accent', accent);
    // derive a mildly darker accent-ink for text-on-accent readability
    document.documentElement.style.setProperty('--accent-ink', `color-mix(in oklab, ${accent} 55%, black)`);
  }, [accent, font, theme]);

  // Tweaks host bridge
  useEffectA(() => {
    const onMsg = (e) => {
      if (!e?.data?.type) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    // announce after listener is live
    window.parent?.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (key, val) => {
    try {
      window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
    } catch (e) {}
  };

  return (
    <RouterProvider>
      <Route />
      <TweaksPanel
        visible={editMode}
        accent={accent} setAccent={v => { setAccent(v); persist('accent', v); }}
        font={font} setFont={v => { setFont(v); persist('font', v); }}
        theme={theme} setTheme={v => { setTheme(v); persist('theme', v); }}
      />
    </RouterProvider>
  );
}

function Route() {
  const { path } = useRouter();
  if (path === '/pricing') return <PricingPage />;
  if (path === '/about') return <AboutPage />;
  if (path === '/contact') return <ContactPage />;
  if (path === '/features') return <FeaturesPage />;
  if (path === '/solutions') return <SolutionsPage />;
  if (path === '/changelog') return <ChangelogPage />;
  if (path === '/security') return <SecurityPage />;
  if (path === '/customers') return <CustomersPage />;
  if (path === '/blog') return <BlogPage />;
  if (path === '/careers') return <CareersPage />;
  if (path === '/status') return <StatusPage />;
  if (path === '/privacy') return <PrivacyPage />;
  if (path === '/terms') return <TermsPage />;
  return <HomePage />;
}

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