// landing-page.jsx — full page composition, responsive-aware, no DesignCanvas wrapper.
// Version funcional v0.1 (April 2026)

function LandingPage({ compact = false }) {
  return (
    <div style={{ background: C.bone, color: C.body, minHeight: '100%' }}>
      <Header compact={compact} />
      <Hero compact={compact} />
      <Diagnostico compact={compact} />
      <QueEs compact={compact} />
      <Objetivos compact={compact} />
      <Programa compact={compact} />
      <Fundadores compact={compact} />
      <ElVigia compact={compact} />
      <FoundingCTA compact={compact} />
      <Footer compact={compact} />
    </div>
  );
}

// Viewport-aware Root: renders one LandingPage with compact=true on narrow screens.
function Root() {
  const [compact, setCompact] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth < 820 : false
  );
  React.useEffect(() => {
    function onResize() {
      setCompact(window.innerWidth < 820);
    }
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return <LandingPage compact={compact} />;
}

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