/* KayaCore marketing site — routed shell. Nav + Footer wrap the active view. */
function Site() {
  const verticals = window.KC_VERTICALS;
  const { route } = useRouter();
  const [selected, setSelected] = React.useState(verticals[0].id);

  // Gentle scroll-reveal: hide [.kc-up] then reveal as each scrolls into view.
  React.useEffect(() => {
    document.body.classList.add('kc-motion');
    if (kcReducedMotion()) {
      document.querySelectorAll('.kc-up').forEach(el => el.classList.add('kc-in'));
      return;
    }
    let io;
    const raf = requestAnimationFrame(() => {
      const els = document.querySelectorAll('.kc-up:not(.kc-in)');
      if (typeof IntersectionObserver === 'undefined') {
        els.forEach(el => el.classList.add('kc-in'));
        return;
      }
      io = new IntersectionObserver((entries) => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('kc-in'); io.unobserve(e.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
      els.forEach(el => io.observe(el));
    });
    // safety: never leave content hidden if something goes wrong
    const safety = setTimeout(() => document.querySelectorAll('.kc-up:not(.kc-in)').forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight) el.classList.add('kc-in');
    }), 1600);
    return () => { cancelAnimationFrame(raf); clearTimeout(safety); if (io) io.disconnect(); };
  }, [route]);

  let view;
  if (route.name === 'vertical') {
    const v = verticals.find(x => x.id === route.param);
    view = v ? <VerticalPage vertical={v} verticals={verticals} /> : <HomePage verticals={verticals} selected={selected} onPick={setSelected} />;
  } else if (route.name === 'pricing') {
    view = <PricingPage />;
  } else if (route.name === 'contact') {
    view = <ContactPage verticals={verticals} />;
  } else {
    view = <HomePage verticals={verticals} selected={selected} onPick={setSelected} />;
  }

  return (
    <React.Fragment>
      <Nav verticals={verticals} onPickVertical={setSelected} />
      <main>{view}</main>
      <Footer verticals={verticals} />
    </React.Fragment>
  );
}

function App() {
  return (
    <KcRouterProvider>
      <Site />
    </KcRouterProvider>
  );
}

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