/* ByteSiege landing — assembly. Knowledge-graph hero, ambient motion + brand accent fixed. */
const { useEffect: useEff } = React;

const SETTINGS = {
  motion: true,
  accent: ["#20C4E0", "#5BD6EC", "#15A6BF"], // brand cyan
};

function Page() {
  useLucide();

  // ambient motion → body.playing (respects reduced-motion)
  useEff(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    document.body.classList.toggle("playing", !!SETTINGS.motion && !reduce);
  }, []);

  // brand accent → cyan tokens
  useEff(() => {
    const [c400, c300, c600] = SETTINGS.accent;
    const r = document.documentElement.style;
    r.setProperty("--cyan-400", c400);
    r.setProperty("--cyan", c400);
    r.setProperty("--cyan-300", c300);
    r.setProperty("--cyan-600", c600);
  }, []);

  return (
    <div className="page">
      <SiteNav dark={true} />
      <HeroC />
      <div className="lp-body">
        <TwoProducts />
        <Showcase />
        <AgenticBand />
        <ValueStrip />
        <Enterprise />
        <HowItWorks />
        <CTA />
        <Footer />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);