/* ─── Header / Navigation — Sufficient Certainty ─── */

const Header = ({ currentPage, onNavigate }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = useMediaQuery(680);

  /* Lock body scroll when mobile menu is open */
  React.useEffect(() => {
    if (menuOpen && isMobile) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen, isMobile]);

  const h = {
    wrapper: {
      borderBottom: '1px solid var(--border-light)',
      background: 'var(--bg-primary)',
      padding: '0 var(--space-6)',
      paddingTop: 'var(--safe-top)',
      paddingLeft: 'calc(var(--space-6) + var(--safe-left))',
      paddingRight: 'calc(var(--space-6) + var(--safe-right))',
      position: 'sticky',
      top: 0,
      zIndex: 100,
    },
    inner: {
      maxWidth: '1100px',
      margin: '0 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: '64px',
    },
    logo: {
      display: 'flex',
      flexDirection: 'column',
      gap: '0px',
      cursor: 'pointer',
      textDecoration: 'none',
    },
    logoName: {
      fontFamily: 'var(--font-serif)',
      fontSize: isMobile ? '16px' : '20px',
      fontWeight: 500,
      color: 'var(--fg-primary)',
      lineHeight: 1.15,
      letterSpacing: '-0.01em',
    },
    logoSub: {
      fontFamily: 'var(--font-sans)',
      fontSize: isMobile ? '8px' : '9px',
      fontWeight: 600,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      color: 'var(--fg-tertiary)',
    },
    nav: {
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-5)',
    },
    navLink: (active) => ({
      fontFamily: 'var(--font-sans)',
      fontSize: '14px',
      fontWeight: active ? 600 : 400,
      color: active ? 'var(--fg-primary)' : 'var(--fg-secondary)',
      textDecoration: 'none',
      cursor: 'pointer',
      padding: '10px 4px',
      minHeight: '44px',
      display: 'inline-flex',
      alignItems: 'center',
      borderBottom: active ? '2px solid var(--fg-primary)' : '2px solid transparent',
      transition: 'color var(--duration-fast) var(--easing)',
      background: 'none',
      border: 'none',
      borderBottom: active ? '2px solid var(--fg-primary)' : '2px solid transparent',
    }),
    cta: {
      fontFamily: 'var(--font-sans)',
      fontSize: isMobile ? '13px' : '13px',
      fontWeight: 500,
      padding: isMobile ? '10px 16px' : '7px 18px',
      minHeight: '44px',
      background: 'var(--accent)',
      color: '#fff',
      border: 'none',
      borderRadius: 'var(--btn-radius)',
      cursor: 'pointer',
      transition: 'background var(--duration-fast) var(--easing)',
      whiteSpace: 'nowrap',
      display: 'inline-flex',
      alignItems: 'center',
    },
    hamburger: {
      background: 'none',
      border: 'none',
      cursor: 'pointer',
      padding: '8px',
      display: 'flex',
      flexDirection: 'column',
      gap: '4px',
      justifyContent: 'center',
    },
    bar: {
      width: '20px',
      height: '2px',
      background: 'var(--fg-primary)',
      borderRadius: '1px',
      transition: 'transform 200ms ease',
    },
    mobileMenu: {
      position: 'fixed',
      top: 'calc(64px + var(--safe-top, 0px))',
      left: 0,
      right: 0,
      bottom: 0,
      background: 'var(--bg-primary)',
      zIndex: 99,
      display: 'flex',
      flexDirection: 'column',
      padding: 'var(--space-7) calc(var(--space-6) + var(--safe-left, 0px))',
      paddingRight: 'calc(var(--space-6) + var(--safe-right, 0px))',
      paddingBottom: 'calc(var(--space-7) + var(--safe-bottom, 0px))',
      gap: 'var(--space-5)',
      borderTop: '1px solid var(--border-light)',
      overflowY: 'auto',
      WebkitOverflowScrolling: 'touch',
    },
    mobileLink: (active) => ({
      fontFamily: 'var(--font-serif)',
      fontSize: '24px',
      fontWeight: active ? 500 : 400,
      color: active ? 'var(--fg-primary)' : 'var(--fg-secondary)',
      textDecoration: 'none',
      cursor: 'pointer',
      background: 'none',
      border: 'none',
      textAlign: 'left',
      padding: 'var(--space-2) 0',
      borderBottom: '1px solid var(--border-light)',
    }),
  };

  const navClick = (page) => (e) => {
    e.preventDefault();
    onNavigate(page);
    setMenuOpen(false);
  };

  return React.createElement(React.Fragment, null,
    React.createElement('header', { style: h.wrapper },
      React.createElement('div', { style: h.inner },
        React.createElement('a', {
          style: h.logo,
          onClick: navClick('home'),
          href: '#',
        },
          React.createElement('span', { style: h.logoName }, 'Sufficient Certainty'),
          React.createElement('span', { style: h.logoSub }, 'Deciding'),
        ),
        isMobile
          ? React.createElement('div', { style: { display: 'flex', gap: 'var(--space-3)', alignItems: 'center' } },
              React.createElement('button', { style: h.cta, onClick: () => { window.location.href = 'https://walk.sufficientcertainty.com'; setMenuOpen(false); } }, 'Start a Walk'),
              React.createElement('button', {
                style: h.hamburger,
                onClick: () => setMenuOpen(!menuOpen),
                'aria-label': 'Toggle menu',
              },
                React.createElement('span', { style: { ...h.bar, transform: menuOpen ? 'rotate(45deg) translate(3px, 3px)' : 'none' } }),
                React.createElement('span', { style: { ...h.bar, opacity: menuOpen ? 0 : 1 } }),
                React.createElement('span', { style: { ...h.bar, transform: menuOpen ? 'rotate(-45deg) translate(3px, -3px)' : 'none' } }),
              ),
            )
          : React.createElement('nav', { style: h.nav },
              React.createElement('a', { style: h.navLink(currentPage === 'about'), onClick: navClick('about'), href: '#' }, 'About'),
              React.createElement('a', { style: h.navLink(currentPage === 'method'), onClick: navClick('method'), href: '#' }, 'Method'),
              React.createElement('button', { style: h.cta, onClick: () => window.location.href = 'https://walk.sufficientcertainty.com' }, 'Start a Walk'),
            ),
      ),
    ),
    menuOpen && isMobile && React.createElement('div', { style: h.mobileMenu },
      React.createElement('button', { style: h.mobileLink(currentPage === 'home'), onClick: navClick('home') }, 'Home'),
      React.createElement('button', { style: h.mobileLink(currentPage === 'about'), onClick: navClick('about') }, 'About'),
      React.createElement('button', { style: h.mobileLink(currentPage === 'method'), onClick: navClick('method') }, 'Method'),
      React.createElement('button', { style: h.mobileLink(currentPage === 'writing'), onClick: navClick('writing') }, 'Writing'),
    ),
  );
};

window.Header = Header;