function Nav({ route, onNav }) {
  const items = [
    { k: 'work',       label: 'work' },
    { k: 'experience', label: 'experience' },
    { k: 'writing',    label: 'writing' },
    { k: 'principles', label: 'principles' },
    { k: 'trajectory', label: 'trajectory' },
    { k: 'about',      label: 'about' },
  ];
  const active =
    route === 'home' ? null :
    route.startsWith('work') ? 'work' :
    route.startsWith('/') ? route.slice(1) :
    route;
  return (
    <nav className="pf-nav">
      <a href="#/" className="pf-brand" onClick={(e) => { e.preventDefault(); onNav('home'); }}>
        <img src="assets/ci-monogram-ink.svg" alt="ci." />
      </a>
      <div className="pf-links">
        {items.map(it => (
          <a key={it.k}
             href={'#/' + it.k}
             className={'pf-link' + (active === it.k ? ' is-active' : '')}
             onClick={(e) => { e.preventDefault(); onNav(it.k); }}>
            {it.label}
          </a>
        ))}
      </div>
    </nav>
  );
}

const SOCIALS = [
  { k: 'github',   label: 'github',   href: 'https://github.com/christopher-igweze' },
  { k: 'linkedin', label: 'linkedin', href: 'https://linkedin.com/in/christopher-igweze' },
  { k: 'x',        label: 'x',        href: 'https://x.com/iigweze_' },
  { k: 'substack', label: 'substack', href: 'https://substack.com/@christopherigweze' },
  { k: 'threads',  label: 'threads',  href: 'https://threads.com/@christopher.igweze' },
];

function Footer() {
  return (
    <footer className="pf-footer">
      <div className="pf-footer-l socials" style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--stone)' }}>
        <img src="assets/ci-monogram-ink.svg" alt="ci." />
        <span>christopher igweze</span>
        <span className="sep">·</span>
        <span>lagos</span>
        <span className="sep">·</span>
        <a href="/christopher-igweze-cv.pdf" target="_blank" rel="noopener">cv (pdf) →</a>
      </div>
      <div className="pf-footer-r socials">
        {SOCIALS.slice(0, 4).map((s, i) => (
          <React.Fragment key={s.k}>
            {i > 0 && <span className="sep">·</span>}
            <a href={s.href} target="_blank" rel="noopener">{s.label}</a>
          </React.Fragment>
        ))}
      </div>
    </footer>
  );
}

function StagingBanner() {
  const { useState, useEffect } = React;
  // Synchronous initial check so there's no flash of "missing banner" on staging.
  const [isStaging] = useState(() => {
    if (typeof window === 'undefined') return false;
    const h = window.location.hostname;
    return h !== 'christopherigweze.com' && h !== 'www.christopherigweze.com';
  });
  // Toggle a body class so CSS can reserve space (padding-top) without layout shift.
  useEffect(() => {
    if (isStaging) document.body.classList.add('has-staging-banner');
    return () => document.body.classList.remove('has-staging-banner');
  }, [isStaging]);
  if (!isStaging) return null;
  return (
    <div className="pf-staging-banner" role="status" aria-label="staging environment">
      staging · not indexed · not for sharing
    </div>
  );
}

Object.assign(window, { Nav, Footer, SOCIALS, StagingBanner });