// Signal — interactive prototype root. Combines pages + router.

function SignalApp({ theme = 'dark', density = 'regular' }) {
  const [route, navigate] = useRoute();
  const t = SG_THEMES[theme] || SG_THEMES.dark;

  let page;
  switch (route.path) {
    case '/services': page = <PageServices t={t} route={route} navigate={navigate} />; break;
    case '/insights': page = <PageInsights t={t} route={route} navigate={navigate} />; break;
    case '/about':    page = <PageAbout    t={t} route={route} navigate={navigate} />; break;
    case '/contact':  page = <PageContact  t={t} route={route} navigate={navigate} />; break;
    default:          page = <PageHome     t={t} route={route} navigate={navigate} />;
  }

  return (
    <div style={{
      background: t.bg, color: t.ink, minHeight: '100vh',
      fontFamily: '"Geist", "Inter", -apple-system, sans-serif',
      transition: 'background .25s, color .25s',
    }}>
      <Nav t={t} route={route} navigate={navigate} />
      <div key={route.path} style={{ animation: 'sgPageIn .35s cubic-bezier(.2,.7,.3,1)' }}>
        {page}
      </div>
      <Footer t={t} navigate={navigate} />
      <style>{`
        @keyframes sgPageIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
        html, body { margin: 0; padding: 0; background: ${t.bg}; }
        ::selection { background: ${t.accent}; color: ${t.bg}; }
        a { color: inherit; }
      `}</style>
    </div>
  );
}

Object.assign(window, { SignalApp });