const mastheadStyles = {
  wrap: { background: 'var(--paper)', borderBottom: '1px solid var(--line)', position: 'sticky', top: 0, zIndex: 50 },
  main: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 0', gap: 16 },
  brand: { display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: 'var(--ink)' },
  logo: { height: 30, width: 'auto', display: 'block' },
  nav: { display: 'flex', alignItems: 'center', gap: 28 },
  link: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 13.5, fontWeight: 500, color: 'var(--ink)', textDecoration: 'none' },

  // mobile hamburger button
  burger: { display: 'none', flexDirection: 'column', justifyContent: 'center', gap: 5, width: 44, height: 44, background: 'none', border: 'none', cursor: 'pointer', padding: 0 },
  burgerBar: { width: 24, height: 2, background: 'var(--ink)', borderRadius: 2, transition: 'transform .25s ease, opacity .2s ease' },

  // mobile drawer
  drawer: { position: 'fixed', top: 0, right: 0, bottom: 0, width: '78%', maxWidth: 320, background: 'var(--ink)', zIndex: 70, transform: 'translateX(100%)', transition: 'transform .3s cubic-bezier(.4,0,.2,1)', display: 'flex', flexDirection: 'column', padding: '28px 26px', boxShadow: '-20px 0 60px rgba(0,0,0,.35)' },
  drawerOpen: { transform: 'translateX(0)' },
  drawerTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 36 },
  drawerLogo: { height: 28, width: 'auto', display: 'block' },
  close: { background: 'none', border: 'none', color: 'var(--paper)', fontSize: 30, lineHeight: 1, cursor: 'pointer', padding: 0, fontFamily: 'Plus Jakarta Sans, sans-serif' },
  drawerLink: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--paper)', textDecoration: 'none', padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,.12)' },
  drawerCta: { marginTop: 28, textAlign: 'center' },
  scrim: { position: 'fixed', inset: 0, background: 'rgba(11,18,32,.5)', zIndex: 60, opacity: 0, pointerEvents: 'none', transition: 'opacity .3s ease' },
  scrimOpen: { opacity: 1, pointerEvents: 'auto' },
};

const NAV_LINKS = [
  { href: '#manifesto', label: 'Mission' },
  { href: '#companies', label: 'The Group' },
  { href: '#helpbnk', label: 'HelpBnk' },
  { href: '#dream-media', label: 'DreamMedia' },
  { href: '#dreambrew', label: 'DreamBrew' },
  { href: '#ventures', label: 'DreamVentures' },
  { href: '#simon', label: 'Simon' },
  { href: '#stories', label: 'Stories' },
  { href: '#team', label: 'Team' },
];

function Masthead() {
  const [open, setOpen] = React.useState(false);

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

  return (
    <header style={mastheadStyles.wrap}>
      <div className="container">
        <div style={mastheadStyles.main}>
          <a href="#top" style={mastheadStyles.brand} aria-label="Dream">
            <img src="assets/dream-logo.png" alt="Dream" style={mastheadStyles.logo} />
          </a>
          <nav style={mastheadStyles.nav} className="ms-nav">
            {NAV_LINKS.map((l) => (
              <a key={l.href} style={mastheadStyles.link} href={l.href}>{l.label}</a>
            ))}
          </nav>
          <button
            aria-label="Open menu"
            className="ms-burger"
            style={mastheadStyles.burger}
            onClick={() => setOpen(true)}
          >
            <span style={mastheadStyles.burgerBar}></span>
            <span style={mastheadStyles.burgerBar}></span>
            <span style={mastheadStyles.burgerBar}></span>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        style={{ ...mastheadStyles.scrim, ...(open ? mastheadStyles.scrimOpen : {}) }}
        onClick={() => setOpen(false)}
      ></div>
      <div style={{ ...mastheadStyles.drawer, ...(open ? mastheadStyles.drawerOpen : {}) }}>
        <div style={mastheadStyles.drawerTop}>
          <img src="assets/dream-logo-white.png" alt="Dream" style={mastheadStyles.drawerLogo} />
          <button aria-label="Close menu" style={mastheadStyles.close} onClick={() => setOpen(false)}>×</button>
        </div>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} style={mastheadStyles.drawerLink} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
      </div>

      <style>{`
        @media (max-width: 860px) {
          .ms-nav { display: none !important; }
          .ms-burger { display: flex !important; }
        }
      `}</style>
    </header>
  );
}