// assets/app.jsx — multi-page router. Reads window.__PAGE_CONFIG__ and renders the matching page.

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryGreen": "#486048",
  "actionGreen": "#4f871f",
  "headlineFont": "Oswald",
  "showUtility": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    const root = document.documentElement;
    root.style.setProperty('--green-primary', t.primaryGreen);
    root.style.setProperty('--green-action', t.actionGreen);
    const fontStack =
      t.headlineFont === 'Barlow Condensed' ? `'Barlow Condensed','Oswald',sans-serif` :
      t.headlineFont === 'Anton' ? `'Anton','Oswald',sans-serif` :
      `'Oswald','Barlow Condensed',sans-serif`;
    root.style.setProperty('--font-display', fontStack);
  }, [t.primaryGreen, t.actionGreen, t.headlineFont]);

  const cfg = window.__PAGE_CONFIG__ || { type: 'home' };
  const PageBody = PAGE_TYPES[cfg.type] || HomePageBody;

  return (
    <>
      {t.showUtility && <UtilityBar />}
      <Nav active={cfg.navActive || cfg.type} />
      <main data-screen-label={cfg.label || cfg.type}>
        <PageBody {...(cfg.props || {})} />
      </main>
      <Footer />
      <MobileBar />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color" />
        <TweakColor
          label="Primary green"
          value={t.primaryGreen}
          options={['#486048','#3d5840','#2F4030','#5B6F5E','#3a5a3a']}
          onChange={(v) => setTweak('primaryGreen', v)}
        />
        <TweakColor
          label="Action CTA"
          value={t.actionGreen}
          options={['#4f871f','#61A229','#7ab83d','#C9A227','#486048']}
          onChange={(v) => setTweak('actionGreen', v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Headline font"
          value={t.headlineFont}
          options={['Oswald','Barlow Condensed','Anton']}
          onChange={(v) => setTweak('headlineFont', v)}
        />
        <TweakSection label="Layout" />
        <TweakToggle
          label="Top utility bar"
          value={t.showUtility}
          onChange={(v) => setTweak('showUtility', v)}
        />
      </TweaksPanel>
    </>
  );
}

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

// ---------------------------------------------------------------------------
// DEMO SUBPATH LINK REWRITER
// When this build is hosted under /diazhauling-v<n>/ (the 510tech.dev demo),
// rewrite every absolute internal link (`/services/`, `/about-us/...`, etc.)
// to be prefixed with the demo base path so click navigation lands at the
// matching sub-path instead of 404'ing at the apex domain.
//
// When hosted at the root of a real domain (diazhauling.com), the regex
// below does not match and this is a no-op.
// ---------------------------------------------------------------------------
(function setupDemoSubpathRewriter() {
  const m = window.location.pathname.match(/^(\/diazhauling-v\d+)\//);
  if (!m) return; // production root deploy — no-op
  const BASE = m[1];

  function rewriteAllLinks() {
    document.querySelectorAll('a[href]').forEach((a) => {
      const href = a.getAttribute('href');
      if (!href) return;
      if (!href.startsWith('/')) return;          // relative / hash / external — skip
      if (href.startsWith('//')) return;          // protocol-relative — skip
      if (href.startsWith(BASE + '/') || href === BASE) return; // already prefixed
      if (href.startsWith('tel:') || href.startsWith('mailto:') || href.startsWith('sms:')) return;
      a.setAttribute('href', BASE + href);
    });
  }

  // Run once after React mounts, then keep up with re-renders
  rewriteAllLinks();
  const observer = new MutationObserver(() => rewriteAllLinks());
  observer.observe(document.body, { childList: true, subtree: true });
})();