// shell.jsx — Browser chrome, nav, footer, wordmark, router context.

const { useState, useEffect, useMemo, createContext, useContext } = React;

const ROUTES = [
{ path: '/', label: 'Home', title: 'Betermaker — Werner Bruyns', nav: false },
{ path: '/voor-jou-persoonlijk', label: 'Voor jou persoonlijk', title: 'Voor jou persoonlijk · Betermaker' },
{ path: '/in-de-sport', label: 'In de sport', title: 'In de sport · Betermaker' },
{ path: '/voor-bedrijven', label: 'Voor bedrijven', title: 'Voor bedrijven · Betermaker' },
{ path: '/wat-is-coaching', label: 'Wat is coaching?', title: 'Wat is coaching? · Betermaker' },
{ path: '/over', label: 'Over', title: 'Over Werner · Betermaker' },
{ path: '/contact', label: 'Contact', title: 'Contact · Betermaker' }];


const RouterCtx = createContext({ path: '/', go: () => {} });
const useRouter = () => useContext(RouterCtx);

function parseHash() {
  const h = window.location.hash.replace(/^#/, '');
  const [path, search] = h.split('?');
  const params = new URLSearchParams(search || '');
  return { path: path || '/', params };
}

function RouterProvider({ children }) {
  const [state, setState] = useState(parseHash());
  useEffect(() => {
    const onHash = () => {
      setState(parseHash());
      // Scroll the viewport to top on route change
      const vp = document.querySelector('.viewport');
      if (vp) vp.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (path, params) => {
    let h = '#' + path;
    if (params) {
      const sp = new URLSearchParams(params).toString();
      if (sp) h += '?' + sp;
    }
    window.location.hash = h;
  };

  const value = { path: state.path, params: state.params, go };
  return <RouterCtx.Provider value={value}>{children}</RouterCtx.Provider>;
}

// ────────────────────────────────────────────────────────────────────────────
// Wordmark — the Beter|maker lockup with thin red rule between
// ────────────────────────────────────────────────────────────────────────────
function Wordmark({ size = 'sm', onClick }) {
  const cls = 'wordmark' + (size === 'lg' ? ' lg' : size === 'xl' ? ' xl' : '');
  return (
    <a className={cls} onClick={onClick}>
      <span>Beter</span>
      <span className="pipe" aria-hidden="true"></span>
      <span>maker</span>
    </a>);

}

// ────────────────────────────────────────────────────────────────────────────
// Browser chrome — light, Safari-leaning, with functional back/forward
// ────────────────────────────────────────────────────────────────────────────
function BrowserChrome({ children }) {
  const { path } = useRouter();
  const url = useMemo(() => {
    const clean = path === '/' ? '' : path;
    return { host: 'betermaker.be', path: clean };
  }, [path]);

  const back = () => window.history.back();
  const fwd = () => window.history.forward();
  const reload = () => window.dispatchEvent(new HashChangeEvent('hashchange'));

  // Update document title for nice tab
  useEffect(() => {
    const r = ROUTES.find((r) => r.path === path);
    document.title = r ? r.title : 'Betermaker';
  }, [path]);

  return (
    <div className="app-shell">
      <div className="window">
        <div className="chrome">
          <div className="chrome-top">
            <div className="dots">
              <span className="dot r"></span>
              <span className="dot y"></span>
              <span className="dot g"></span>
            </div>
            <div className="chrome-nav">
              <button onClick={back} title="Back">←</button>
              <button onClick={fwd} title="Forward">→</button>
              <button onClick={reload} title="Reload">↻</button>
            </div>
            <div className="url-bar">
              <span className="lock"></span>
              <span>
                <span className="host">{url.host}</span>
                <span className="path">{url.path}</span>
              </span>
            </div>
            <div className="chrome-right">
              <span>NL</span>
            </div>
          </div>
        </div>
        <div className="viewport">
          {children}
        </div>
      </div>
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Site Nav
// ────────────────────────────────────────────────────────────────────────────
function SiteNav() {
  const { path, go } = useRouter();
  const [open, setOpen] = React.useState(false);
  const items = ROUTES.filter((r) => r.nav !== false && r.path !== '/contact');

  // close drawer when route changes
  React.useEffect(() => { setOpen(false); }, [path]);

  // lock body scroll while drawer open
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    if (open) document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  const nav = (p) => { setOpen(false); go(p); };

  return (
    <React.Fragment>
      <nav className={'site-nav' + (open ? ' is-open' : '')}>
        <div className="site-nav-inner">
          <Wordmark onClick={() => nav('/')} />
          <ul>
            {items.map((r) =>
            <li key={r.path}>
                <a className={path === r.path ? 'active' : ''} onClick={() => nav(r.path)}>
                  {r.label}
                </a>
              </li>
            )}
            <li>
              <a className="nav-cta" onClick={() => nav('/contact')}>
                Contact <span className="arrow">→</span>
              </a>
            </li>
          </ul>
          <button
            type="button"
            className={'nav-burger' + (open ? ' is-open' : '')}
            aria-label={open ? 'Menu sluiten' : 'Menu openen'}
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}>
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      <div className={'nav-drawer' + (open ? ' is-open' : '')} aria-hidden={!open}>
        <ul>
          {items.map((r, i) =>
          <li key={r.path} style={{ '--i': i }}>
              <a className={path === r.path ? 'active' : ''} onClick={() => nav(r.path)}>
                <span className="drawer-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="drawer-label">{r.label}</span>
                <span className="drawer-arrow">→</span>
              </a>
            </li>
          )}
          <li className="drawer-cta-row" style={{ '--i': items.length }}>
            <a className="drawer-cta" onClick={() => nav('/contact')}>
              Contact <span className="arrow">→</span>
            </a>
          </li>
        </ul>
        <div className="drawer-foot">
          <p>Heikanthof 18 · 2590 Berlaar</p>
          <a href="tel:+32478991582">0478 99 15 82</a>
          <a href="mailto:werner.bruyns@telenet.be">werner.bruyns@telenet.be</a>
        </div>
      </div>
    </React.Fragment>);

}

// ────────────────────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────────────────────
function SiteFooter({ noTop }) {
  const { go } = useRouter();
  return (
    <footer className={'site-footer' + (noTop ? ' no-top' : '')}>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <Wordmark size="lg" onClick={() => go('/')} />
            <p className="footer-legal">Melior Bedrijfsadvies · BV</p>
          </div>
          <div className="footer-col">
            <h4>Werk</h4>
            <a onClick={() => go('/voor-jou-persoonlijk')}>Voor jou persoonlijk</a>
            <a onClick={() => go('/in-de-sport')}>In de sport</a>
            <a onClick={() => go('/voor-bedrijven')}>Voor bedrijven</a>
            <a onClick={() => go('/wat-is-coaching')}>Wat is coaching?</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <p>Heikanthof 18<br />2590 Berlaar</p>
            <a href="tel:+32478991582">0478 99 15 82</a>
            <a href="mailto:werner.bruyns@telenet.be">werner.bruyns@telenet.be</a>
            <p className="footer-legal">BTW BE0686.794.939</p>
          </div>
          <div className="footer-col">
            <h4>Sociaal</h4>
            <a href="https://linkedin.com/" target="_blank" rel="noreferrer">LinkedIn ↗</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Melior Bedrijfsadvies — alle rechten voorbehouden.</span>
          <span>Berlaar · Antwerpen · BE</span>
        </div>
      </div>
    </footer>);

}

// ────────────────────────────────────────────────────────────────────────────
// Page Rail — architectural left-side metadata column
// ────────────────────────────────────────────────────────────────────────────
function PageRail({ index, slug }) {
  return (
    <div className="page-rail">
      <span>{slug}</span>
      <span className="rail-mark"></span>
      <span>{String(index).padStart(2, '0')} / 07</span>
    </div>);

}

// ────────────────────────────────────────────────────────────────────────────
// Reusable bits
// ────────────────────────────────────────────────────────────────────────────
function Label({ children, red, noMark }) {
  return (
    <span className={'label' + (red ? ' red' : '') + (noMark ? ' no-mark' : '')} style={{ fontFamily: "Geist" }}>
      {children}
    </span>);

}

function CTA({ to, params, children, variant, label }) {
  const { go } = useRouter();
  const cls = 'btn' + (variant === 'red' ? ' red' : '') + (variant === 'ghost' ? ' ghost' : '');
  return (
    <button className={cls} onClick={() => go(to, params)}>
      {children}
      <span className="arrow" aria-hidden="true">→</span>
    </button>);

}

Object.assign(window, {
  ROUTES, RouterCtx, RouterProvider, useRouter,
  Wordmark, BrowserChrome, SiteNav, SiteFooter, PageRail, Label, CTA
});