// Kafana — production landing page (no design canvas).
// Three-tier responsive layout:
//   < 768px       → mobile  (single-column, stacked, narrow side padding)
//   768 – 1023px  → tablet  (mid-density grids, mid side padding)
//   ≥ 1024px      → desktop (full multi-column, capped at 1200px content)

(function () {
  const { useState, useEffect } = React;

  function computeLayout() {
    const w = window.innerWidth;
    if (w >= 1024) return 'desktop';
    if (w >= 768) return 'tablet';
    return 'mobile';
  }

  function useLayout() {
    const [layout, setLayout] = useState(computeLayout);
    useEffect(() => {
      const handler = () => {
        const next = computeLayout();
        setLayout((prev) => (prev === next ? prev : next));
      };
      window.addEventListener('resize', handler);
      return () => window.removeEventListener('resize', handler);
    }, []);
    return layout;
  }

  function LandingPage() {
    const layout = useLayout();
    return (
      <div style={{ background: 'var(--cream)', minHeight: '100vh' }}>
        <Nav width={layout} />
        <Hero width={layout} />
        <Trio width={layout} />
        <ThirtySecondLog width={layout} />
        <PassportShowcase width={layout} />
        <LibrarySection width={layout} />
        <LibraryFeature width={layout} />
        <CountryStrip width={layout} />
        <FreeForever width={layout} />
        <EmailCapture width={layout} />
        <Footer width={layout} />
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(
    React.createElement(LandingPage)
  );
})();