// ====== Shared inner-page layout wrapper ======
// Usage: wrap any page content in <PageLayout activeSection="about">...</PageLayout>
// then call ReactDOM.createRoot(...).render(<YourPage/>)

function PageLayout({ activeSection, children }) {
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const [quoteSvc,  setQuoteSvc]  = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const openQuote = (svc) => {
    setQuoteSvc(typeof svc === "string" ? svc : null);
    setQuoteOpen(true);
  };

  // Expose globally so child components can trigger the quote modal
  window.__openQuote = openQuote;

  return (
    <React.Fragment>
      <Header
        onQuote={() => openQuote()}
        onMenu={() => setMobileOpen(true)}
        activeSection={activeSection}
      />
      <main id="main" className="inner-page">
        {children}
      </main>
      <Footer onQuote={() => openQuote()} />

      <QuoteModal
        open={quoteOpen}
        onClose={() => setQuoteOpen(false)}
        defaultService={quoteSvc}
      />
      <MobileMenu
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        onQuote={() => openQuote()}
      />
    </React.Fragment>
  );
}

Object.assign(window, { PageLayout });