// Phase 3 — Nav component (shared across all pages)

const WORDMARK_SVG = (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="36.1 21.75 135.4 32.551" style={{ height: 28, width: 'auto', display: 'block' }}>
    <path d="M36.9 34.85C50 34.9 61 34.2 74.2 33.1C83.8 32.3 90.2 30.9 96.9 29.6C105.8 27.9 111.2 26 119.5 25.05C129.6 23.7 139.7 22.4 153.5 22.05C160.4 21.85 166.7 22.05 171.1 22.55C166.8 22.75 160.6 22.65 153.5 22.55C140 23 129.4 24.7 119.5 26.6C111.2 28.2 104.9 30 96.9 31.1C87 32.7 80.5 33.7 74.2 34.1C60.9 34.95 49.3 35.4 36.9 35.55C36.5 35.45 36.5 35 36.9 34.85Z" fill="currentColor"/>
    <path d="M36.313 54V39.48H39.532V54ZM49.781 54V39.48H53.902L60.484 49.75H60.726L60.524 39.48H63.604V54H59.875L52.908 43.246H52.685L52.864 54ZM73.853 54V39.48H77.013V54ZM75.356 48.566V45.97H83.826V48.566ZM75.356 42.186V39.48H84.658V42.186ZM93.899 54V39.48H97.059V54ZM94.54 54V51.331H103.197V54ZM112.097 54V39.48H115.276V54ZM114.286 54V51.422H123.291V54ZM114.286 47.829V45.49H122.187V47.829ZM114.286 42.039V39.48H123.236V42.039ZM139.102 54.301Q137.423 54.301 136.09 53.833Q134.757 53.366 133.824 52.418Q132.891 51.47 132.41 50.099Q131.93 48.727 131.93 46.901Q131.93 45.035 132.421 43.607Q132.913 42.179 133.846 41.183Q134.779 40.188 136.053 39.684Q137.327 39.179 138.889 39.179Q140.121 39.179 141.146 39.489Q142.171 39.799 142.928 40.404Q143.685 41.009 144.105 41.858Q144.525 42.707 144.543 43.781L141.606 44.584Q141.614 43.62 141.205 43.007Q140.796 42.395 140.162 42.08Q139.527 41.764 138.779 41.764Q138.152 41.764 137.514 42.023Q136.876 42.281 136.359 42.862Q135.842 43.444 135.54 44.382Q135.237 45.321 135.237 46.703Q135.237 48.489 135.743 49.591Q136.249 50.693 137.157 51.208Q138.064 51.723 139.186 51.723Q140.382 51.723 141.058 51.228Q141.735 50.733 142.032 49.95Q142.329 49.167 142.358 48.298L145.119 48.738Q145.097 49.908 144.767 50.931Q144.437 51.954 143.729 52.709Q143.022 53.465 141.878 53.883Q140.734 54.301 139.102 54.301ZM157.428 54V39.48H160.607V54ZM153.16 42.131V39.48H164.919V42.131Z" fill="currentColor"/>
  </svg>
);

const Nav = ({ current = '' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = [
    ['For CEOs',  '/ceos',    'ceos'],
    ['For PE',    '/pe',      'pe'],
    ['For CFOs',  '/cfos',    'cfos'],
    ['Sample',    '/sample',  'sample'],
    ['Writing',   '/writing', 'writing'],
  ];

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'oklch(0.985 0.003 95 / 0.82)' : 'var(--paper)',
      backdropFilter: scrolled ? 'saturate(180%) blur(18px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .25s ease',
    }}>
      <Container style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px', gap: 24 }}>
        <a href="/" style={{ textDecoration: 'none', color: 'var(--ink-1)', display: 'flex', alignItems: 'center' }} aria-label="Inflect — home">
          {WORDMARK_SVG}
        </a>
        <nav style={{ display: 'flex', gap: 26, alignItems: 'center' }}>
          {links.map(([l, h, id]) => (
            <a key={l} href={h} style={{
              fontSize: 13.5, textDecoration: 'none',
              color: current === id ? 'var(--ink-1)' : 'var(--ink-2)',
              fontWeight: current === id ? 500 : 450,
              whiteSpace: 'nowrap',
              position: 'relative',
            }}>
              {l}
              {current === id && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -22, height: 2, background: 'var(--accent)' }}/>}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <a href="/login" style={{
            fontSize: 13.5, textDecoration: 'none', color: 'var(--ink-2)',
            fontWeight: 450, whiteSpace: 'nowrap',
          }}>Log in</a>
          <a href="/sample" style={{
            background: 'var(--ink-1)', color: 'var(--paper)', textDecoration: 'none',
            padding: '8px 14px', borderRadius: 6, fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap',
          }}>See a sample</a>
        </div>
      </Container>
    </div>
  );
};

Object.assign(window, { Nav, WORDMARK_SVG });
