/* App — root composition */

const Nav = () => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#top" className="logo">
        <img src="img/kcg-logo.png" alt="" />
        <span className="wordmark">Kim Coaching Group</span>
      </a>
      <div className="nav-links">
        <a href="#approach">Approach</a>
        <a href="#offerings">Offerings</a>
        <a href="#about">About</a>
        <a href="https://tidycal.com/kcg/starter-package" target="_blank" rel="noopener" className="nav-cta">
          Book the Starter Pack →
        </a>
      </div>
    </div>
  </nav>
);

const App = () => (
  <div id="top">
    <Nav />
    <Hero />
    <QuietStruggle />
    <BoldMoves />
    <Offerings />
    <Testimonials />
    <About />
    <FinalCTA />
    <Footer />
  </div>
);

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

/* After render, honor a #hash in the URL (e.g. arriving from another page
   with #about). React renders async, so the browser's native jump fires
   before the target exists; we re-run it once the element is present. */
(function scrollToHashAfterRender() {
  const hash = window.location.hash;
  if (!hash || hash === "#top") return;

  let lastY = -1, stable = 0, tries = 0;
  const jump = () => {
    const el = document.querySelector(hash);
    if (!el) {
      if (tries++ < 60) requestAnimationFrame(jump);
      return;
    }
    const y = Math.max(0, el.getBoundingClientRect().top + window.pageYOffset - 64);
    window.scrollTo(0, y);
    const se = document.scrollingElement || document.documentElement;
    if (se) se.scrollTop = y;
    // Keep going until the measured position stops moving (images/fonts settling).
    if (Math.abs(y - lastY) < 2) stable++; else stable = 0;
    lastY = y;
    if (stable < 3 && tries++ < 120) requestAnimationFrame(jump);
  };
  requestAnimationFrame(jump);
  window.addEventListener("load", () => { stable = 0; tries = 0; requestAnimationFrame(jump); });
})();