// CallxCall — landing page entry.
// The design handoff wrapped this in a DesignCanvas + TweaksPanel with two
// 1440px artboards (human + AI). That's design tooling — production ships
// one fluid page; the in-hero ModeToggle already lets users switch to AI mode.

const { Nav, Hero, CreatorsStrip, HowItWorks, WhyPeoplePay,
        EarnByTalking, AIFallback, FooterCTA, ConnectingOverlay } = window.Landing;

function LandingApp() {
  const [mode, setMode] = React.useState('human');
  const [connecting, setConnecting] = React.useState(null);
  const [waitlistRole, setWaitlistRole] = React.useState('user');
  const formRef = React.useRef(null);

  const onJoin = (role) => {
    setWaitlistRole(role);
    if (formRef.current) {
      const top = formRef.current.getBoundingClientRect().top + window.scrollY - 40;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <div className="landing-root">
      <Nav variant="human" onJoin={onJoin} />
      <Hero variant="human" mode={mode} setMode={setMode} onJoin={onJoin} />
      <CreatorsStrip onConnect={(c) => setConnecting(c)} />
      <HowItWorks />
      <WhyPeoplePay />
      <AIFallback onJoin={onJoin} />
      <EarnByTalking onJoin={onJoin} />
      <FooterCTA initialRole={waitlistRole} formRef={formRef} />

      {connecting && (
        <ConnectingOverlay creator={connecting} onCancel={() => setConnecting(null)} />
      )}
    </div>
  );
}

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