// Maple Pavers — responsive site shell.
// Renders MPD.App (desktop layout from src-desktop/) when viewport >= 1024px,
// otherwise renders the mobile-column section stack from MP.sections.
(function () {
  const MP = window.MP;

  const MOBILE_VARIANTS = {
    hero: "rail",
    quote: "phone",
    process: "grid",
    services: "carousel",
    gallery: "slider",
    why: "dark",
    social: "marquee",
    testimonials: "marquee",
    cta: "dark",
    footer: "full",
  };

  function useIsDesktop() {
    const query = '(min-width: 1024px)';
    const [isDesktop, setIsDesktop] = React.useState(
      () => typeof window !== 'undefined' && window.matchMedia(query).matches
    );
    React.useEffect(() => {
      const mq = window.matchMedia(query);
      const handler = (e) => setIsDesktop(e.matches);
      if (mq.addEventListener) mq.addEventListener('change', handler);
      else mq.addListener(handler);
      return () => {
        if (mq.removeEventListener) mq.removeEventListener('change', handler);
        else mq.removeListener(handler);
      };
    }, []);
    return isDesktop;
  }

  function MobileSite() {
    const renderSection = (key) => {
      const def = MP.sections[key];
      if (!def) return null;
      const opt = def.options.find((o) => o.id === MOBILE_VARIANTS[key]) || def.options[0];
      const R = opt.Render;
      return <div key={key} data-section={def.label}><R /></div>;
    };
    return (
      <div className="mp-site mp-site--mobile">
        <div className="mp-site-inner">
          <MP.Header onDark />
          {MP.order.map(renderSection)}
          <MP.BottomBar />
        </div>
      </div>
    );
  }

  function Site() {
    const isDesktop = useIsDesktop();
    React.useEffect(() => {
      document.body.dataset.mpViewport = isDesktop ? 'desktop' : 'mobile';
    }, [isDesktop]);
    return (
      <React.Fragment>
        {isDesktop ? <window.MPD.App /> : <MobileSite />}
        {MP.QuoteModal && <MP.QuoteModal />}
      </React.Fragment>
    );
  }

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