// Site.jsx — shared building blocks: PageHead, SiteTweaks, small notices, tweak defaults
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "image",
  "comparisonLayout": "table",
  "pricingEmphasis": "Founding",
  "typeScale": 16
}/*EDITMODE-END*/;

/* Interior page banner (warm or navy) */
function PageHead({ eyebrow, title, lead, variant = 'warm', center = true, children }) {
  return (
    <section className={'ph-pagehead is-' + variant + (center ? ' is-center' : '')}>
      <div className="ph-container">
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        <h1>{title}</h1>
        {lead && <p className="lead">{lead}</p>}
        {children}
      </div>
    </section>
  );
}

/* Emergency notice strip */
function EmergencyNote() {
  return (
    <div className="ph-emergency" role="note">
      <Icon name="activity" size={20} color="#B23A3A" />
      <span><strong>In an emergency,</strong> call 911 or go to the nearest emergency room.
        Direct Primary Care is for primary care, not emergencies.</span>
    </div>
  );
}

/* Slim reassurance band */
function Reassurance({ text = 'No copays. No hidden fees. Just simple, caring healthcare.' }) {
  return (
    <div className="ph-reassure"><Icon name="heart" size={20} color="#506330" /> {text}</div>
  );
}

/* Tweaks are fixed in production. The interactive design panel (tweaks-panel.jsx)
   is not loaded on the live site, so this just returns the defaults unchanged. */
function useTweaks(defaults) { return [defaults, () => {}]; }

/* Page wrapper: applies type scale, renders Nav + content + Footer */
function Page({ active, controls = [], children }) {
  const [t] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.style.fontSize = (t.typeScale || 16) + 'px';
  }, [t.typeScale]);
  return (
    <>
      <Nav active={active} />
      <main>{typeof children === 'function' ? children(t) : children}</main>
      <Footer />
    </>
  );
}
// Mount a page wrapped in an ErrorBoundary so a render crash shows a friendly
// message + email link instead of a blank screen.
function renderApp(node) {
  ReactDOM.createRoot(document.getElementById('root')).render(<ErrorBoundary>{node}</ErrorBoundary>);
}
Object.assign(window, { TWEAK_DEFAULTS, PageHead, EmergencyNote, Reassurance, Page, renderApp });