// ---- Mabel landing — live page composition ----
const { useRef } = React;

function LandingPage() {
  const formRef = useRef(null);
  const scrollToForm = () => {
    const el = document.getElementById('join');
    if (el) window.scrollTo({ top: el.offsetTop - 8, behavior: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
    // focus first field after the scroll settles
    setTimeout(() => { const n = document.getElementById('f-name'); if (n) n.focus({ preventScroll: true }); }, 520);
  };
  return (
    <div className="lp anim">
      <TopBar />
      <Hero onJoin={scrollToForm} />
      <HowItWorks />
      <WhyDifferent />
      <SignupSection formRef={formRef} />
      <Footer />
    </div>
  );
}

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