/* App root — nav, tweak state, composition */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="logo">
          <LogoMark size={22} spin/>
          <span>NurtureAxis</span>
        </a>
        <div className="nav-links">
          <a href="#services">Engagements</a>
          <a href="#process">Process</a>
          <a href="#work">Work</a>
          <a href="#founders">Founders</a>
        </div>
        <a href="#contact" className="nav-cta">Book a call →</a>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <div className="container">
      <div className="foot">
        <div>© 2026 NURTUREAXIS · ALL RIGHTS RESERVED</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="mailto:founders@nurtureaxis.com">EMAIL</a>
          <a href="#contact">BOOK A CALL</a>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweaks] = React.useState(() => ({ ...window.TWEAKS }));

  React.useEffect(() => {
    const cls = [
      `accent-${tweaks.accent}`,
      `motion-${tweaks.motion}`
    ];
    document.body.className = cls.join(" ");
  }, [tweaks]);

  const setTweak = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      try {
        window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
      } catch {}
      return next;
    });
  };

  return (
    <>
      <Nav />
      <Hero variant={tweaks.heroVariant} />
      <Process />
      <Founders />
      <Proof />
      <Services variant={tweaks.pricingVariant} />
      <FAQ />
      <Contact />
      <Footer />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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