/* Header — transparent, and anchored to the top of the document rather than the
   viewport: it scrolls away with the page instead of following it. On home it
   sits over the hero photograph with the light mark; inner pages have no photo,
   so it sits in flow on parchment with the espresso mark. */
function Header({ route, onNav, darkGround }) {
  const [open, setOpen] = React.useState(false);
  /* Most pages open on a photographic header, so the bar overlays it. Contact
     has no hero photo, so there the bar sits in flow with the espresso mark. */
  const onPhoto = route !== 'contact';
  /* Anything dark behind the bar (hero photo or an oxblood ground) takes the light mark. */
  const onDark = onPhoto || darkGround;
  const ink = onDark ? 'var(--ivory)' : 'var(--espresso)';

  const nav = [
    ['home', 'Home'],
    ['about', 'About'],
    ['services', 'Services'],
    ['approach', 'Approach & Process'],
    ['portfolio', 'Portfolio'],
    ['contact', 'Contact'],
  ];

  const go = (key) => { setOpen(false); onNav(key); };

  return (
    <React.Fragment>
      <header style={{
        ...(onPhoto ? { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30 } : null),
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: '24px', padding: '26px var(--gutter)',
        background: 'transparent',
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}
           style={{ border: 'none', display: 'flex', alignItems: 'center', gap: '18px', lineHeight: 0 }}>
          <img src={onDark ? './assets/logo-signet-parchment.png' : './assets/logo-signet-espresso.png'}
               alt="Spring Street Design and Build"
               style={{ height: '104px', width: 'auto', display: 'block', filter: onDark ? 'none' : 'brightness(.62) saturate(1.15)' }} />
          <img src={onDark ? './assets/logo-wordmark-parchment.png' : './assets/logo-wordmark-espresso.png'}
               alt="" aria-hidden
               style={{ height: '30px', width: 'auto', display: 'block', filter: onDark ? 'none' : 'brightness(.62) saturate(1.15)' }} />
        </a>

        <button onClick={() => setOpen(true)} aria-label="Open menu" style={{
          background: 'transparent',
          border: `1px solid ${onDark ? 'var(--cream-70)' : 'var(--espresso)'}`,
          borderRadius: 0, padding: '13px 26px', cursor: 'pointer',
          fontFamily: 'var(--font-sans)', fontSize: '11.5px', fontWeight: 500,
          letterSpacing: '.24em', textTransform: 'uppercase', color: ink,
          transition: 'background var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet)',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = onDark ? 'var(--ivory)' : 'var(--espresso)'; e.currentTarget.style.color = onDark ? 'var(--espresso)' : 'var(--ivory)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = ink; }}>
          Menu
        </button>
      </header>

      {open && (
        <React.Fragment>
          {/* Scrim — dims the page and closes on click */}
          <div onClick={() => setOpen(false)} style={{
            position: 'fixed', inset: 0, zIndex: 45,
            background: 'rgba(28,12,14,.46)',
          }} />

          {/* Side panel */}
          <aside style={{
            position: 'fixed', top: 0, right: 0, bottom: 0, zIndex: 50,
            width: 'min(320px, 80vw)', background: 'var(--oxblood)',
            borderLeft: '1px solid var(--cream-22)',
            overflowY: 'auto', WebkitOverflowScrolling: 'touch',
            display: 'flex', flexDirection: 'column',
            padding: 'var(--space-6) var(--space-6) var(--space-5)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '20px' }}>
              <img src="./assets/logo-signet-parchment.png" alt=""
                   style={{ height: '96px', width: 'auto', display: 'block' }} />
              <button onClick={() => setOpen(false)} aria-label="Close menu" style={{
                background: 'transparent', border: '1px solid var(--cream-70)', borderRadius: 0,
                padding: '11px 20px', cursor: 'pointer',
                fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
                letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--ivory)',
                transition: 'background var(--dur-base) var(--ease-quiet), color var(--dur-base) var(--ease-quiet)',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--ivory)'; e.currentTarget.style.color = 'var(--oxblood)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ivory)'; }}>
                Close
              </button>
            </div>

            <nav style={{ display: 'flex', flexDirection: 'column', marginTop: 'var(--space-6)' }}>
              {nav.map(([key, label]) => (
                <a key={key} href="#" onClick={(e) => { e.preventDefault(); go(key); }}
                   style={{
                     border: 'none', borderBottom: '1px solid var(--cream-22)',
                     padding: '14px 0',
                     fontFamily: 'var(--font-display)', fontWeight: 400,
                     fontSize: '1.25rem', lineHeight: 1.25,
                     color: route === key ? 'var(--ivory)' : 'var(--cream-70)',
                     transition: 'color var(--dur-base) var(--ease-quiet)',
                   }}
                   onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ivory)'; }}
                   onMouseLeave={(e) => { e.currentTarget.style.color = route === key ? 'var(--ivory)' : 'var(--cream-70)'; }}>
                  {label}
                </a>
              ))}
            </nav>

            <div style={{
              marginTop: 'auto', paddingTop: 'var(--space-6)',
              display: 'flex', flexDirection: 'column', gap: '12px',
              fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
              letterSpacing: '.18em', textTransform: 'uppercase',
            }}>
              <a href="mailto:info@springstreetbuild.com" style={{ border: 'none', color: 'var(--cream-70)' }}>info@springstreetbuild.com</a>
              <a href="tel:5017335253" style={{ border: 'none', color: 'var(--cream-70)' }}>501.733.5253</a>
            </div>
          </aside>
        </React.Fragment>
      )}
    </React.Fragment>
  );
}
window.Header = Header;