// build.jsx — SPA entrypoint.
//
// The CloudFront distribution is configured to return /index.html for any
// 403/404 (the standard "rewrite-all-to-shell" SPA pattern). On arrival,
// this router reads window.location.pathname to pick the page component,
// intercepts clicks on internal <a> elements to do client-side navigation
// via history.pushState, and keeps document.title / meta description /
// canonical link in sync with the active route.

const SITE_ORIGIN = 'https://1686holdings.com';

const PAGE_MAP = {
  '/':           { Component: VariationC,     active: 'Home',       title: '1686 Holdings — Builder of operating companies, leveraged by AI', desc: 'Builder of operating companies, leveraged by AI. 1686 works alongside its portfolio to help them see and realize value over decades.' },
  '/about':      { Component: PageAbout,      active: 'About',      title: 'About — 1686 Holdings',      desc: 'We hold the long arc. Operating model, sectors, and the discipline behind 1686 Holdings.' },
  '/leadership': { Component: PageLeadership, active: 'Leadership', title: 'Leadership — 1686 Holdings', desc: 'Meet the principals of 1686 Holdings: operators and engineers from AWS, FICO, MuleSoft, Salesforce, Delta, and elsewhere.' },
  '/contact':    { Component: PageContact,    active: 'Contact',    title: 'Contact — 1686 Holdings',    desc: 'Reach 1686 Holdings directly. Founders, operators, partners, and press.' },
};

function resolvePage(pathname) {
  let p = (pathname || '/').toLowerCase();
  if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
  return PAGE_MAP[p] || PAGE_MAP['/'];
}

function setMetaContent(name, content) {
  let el = document.querySelector(`meta[name="${name}"]`)
        || document.querySelector(`meta[property="${name}"]`);
  if (el) el.setAttribute('content', content);
}

function setCanonical(href) {
  let el = document.querySelector('link[rel="canonical"]');
  if (el) el.setAttribute('href', href);
}

function ProductionApp() {
  applyPalette('plum');
  const [path, setPath] = React.useState(window.location.pathname);

  // Sync popstate (browser back/forward) into local state.
  React.useEffect(() => {
    const onPop = () => setPath(window.location.pathname);
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  // Intercept clicks on internal links — left-click only, no modifier keys,
  // no target="_blank". External and fragment links pass through unchanged.
  React.useEffect(() => {
    const onClick = (e) => {
      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
      const a = e.target.closest && e.target.closest('a');
      if (!a) return;
      const href = a.getAttribute('href');
      if (!href || !href.startsWith('/')) return;
      if (a.target && a.target !== '_self') return;
      e.preventDefault();
      if (href !== window.location.pathname) {
        window.history.pushState(null, '', href);
        setPath(href);
        window.scrollTo(0, 0);
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  const entry = resolvePage(path);

  // Keep document metadata in sync with the active route. Social crawlers
  // (LinkedIn, Twitter, Facebook) won't see these updates because they
  // don't execute JS — they get the static OG tags from index.html. That's
  // an accepted trade-off for a small marketing site.
  React.useEffect(() => {
    document.title = entry.title;
    setMetaContent('description', entry.desc);
    setCanonical(SITE_ORIGIN + (path === '/' ? '/' : path.replace(/\/$/, '')));
  }, [entry, path]);

  return <entry.Component />;
}

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