// Header.jsx — Minimal editorial header

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

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const navLinks = [
  { label: 'How it works', page: 'process' },
  { label: 'Who we are', page: 'about' },
  { label: 'Case studies', page: 'stories' }];

  const handleNav = (page) => {
    setMenuOpen(false);
    onNavigate(page);
  };


  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      background: scrolled || menuOpen ? 'rgba(250,250,247,0.92)' : 'transparent',
      backdropFilter: scrolled || menuOpen ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(26,26,26,0.08)' : '1px solid transparent',
      transition: 'all 300ms cubic-bezier(0.16,1,0.3,1)'
    }}>
      <div className="header-inner" style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 56px',
        height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16
      }}>
        <button onClick={() => handleNav('home')} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          background: 'none', border: 'none', cursor: 'pointer', padding: 0
        }}>
          <img src="assets/logo-leaf.png" alt="" style={{ width: 28, height: 28, objectFit: 'contain' }} />
          <span style={{
            fontFamily: "'Fraunces', serif",
            fontWeight: 500, color: '#1a1a1a',
            letterSpacing: '-0.02em', fontSize: "17px"
          }}>coLiberate ventures </span>
        </button>

        <nav className="header-nav" style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {navLinks.map((link) =>
          <button key={link.page}
          onClick={() => handleNav(link.page)}
          style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 12, fontWeight: 400,
            color: '#1a1a1a',
            background: 'none', border: 'none', cursor: 'pointer',
            padding: 0,
            textTransform: 'uppercase',
            letterSpacing: '0.18em',
            opacity: currentPage === link.page ? 1 : 0.55,
            transition: 'opacity 150ms'
          }}
          onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
          onMouseLeave={(e) => e.currentTarget.style.opacity = currentPage === link.page ? 1 : 0.55}>
            {link.label}</button>
          )}
        </nav>

        <a className="header-cta" href="https://call.coliberate.ventures/intro-call-with-diara" target="_blank" rel="noopener noreferrer"
        style={{
          fontFamily: "'Geist', sans-serif",
          fontSize: 11, fontWeight: 400, color: '#fafaf7',
          background: '#1a1a1a', border: 'none', cursor: 'pointer',
          padding: '12px 22px', borderRadius: 2,
          textDecoration: 'none', display: 'inline-block',
          textTransform: 'uppercase', letterSpacing: '0.18em',
          transition: 'background 200ms'
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = '#2f2f2c'}
        onMouseLeave={(e) => e.currentTarget.style.background = '#1a1a1a'}>
          Book a call</a>

        <button
          className="header-hamburger"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
          style={{
            display: 'none',
            flexDirection: 'column', justifyContent: 'center',
            background: 'none', border: 'none', cursor: 'pointer',
            padding: 8, width: 40, height: 40,
            gap: 5
          }}>
          <span aria-hidden="true" style={{ display: 'block', width: 22, height: 2, background: '#1a1a1a' }} />
          <span aria-hidden="true" style={{ display: 'block', width: 22, height: 2, background: '#1a1a1a' }} />
          <span aria-hidden="true" style={{ display: 'block', width: 22, height: 2, background: '#1a1a1a' }} />
        </button>
      </div>

      {menuOpen &&
        <div className="header-mobile-menu" style={{
          background: 'rgba(250,250,247,0.98)',
          backdropFilter: 'blur(16px)',
          borderTop: '1px solid rgba(26,26,26,0.08)',
          padding: '24px 24px 32px',
          display: 'flex', flexDirection: 'column', gap: 4
        }}>
          {navLinks.map((link) =>
          <button key={link.page}
            onClick={() => handleNav(link.page)}
            style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 16, fontWeight: 500,
              color: '#1a1a1a',
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '16px 4px',
              textTransform: 'uppercase',
              letterSpacing: '0.14em',
              textAlign: 'left',
              borderBottom: '1px solid rgba(26,26,26,0.08)'
            }}>
            {link.label}
          </button>
          )}
          <a href="https://call.coliberate.ventures/intro-call-with-diara"
            target="_blank" rel="noopener noreferrer"
            onClick={() => setMenuOpen(false)}
            style={{
              marginTop: 20,
              fontFamily: "'Geist', sans-serif",
              fontSize: 12, fontWeight: 400, color: '#fafaf7',
              background: '#1a1a1a',
              padding: '16px 22px', borderRadius: 2,
              textDecoration: 'none',
              textTransform: 'uppercase', letterSpacing: '0.18em',
              textAlign: 'center'
            }}>
            Book a call
          </a>
        </div>
      }
    </header>);

};

Object.assign(window, { Header });