/* Header — sticky, scroll-aware, EN/DE toggle, mobile menu */

function JumaHeader({ lang, setLang, onNav, currentPage = 'home', fluidHref, fluidExternal = false, navLinks }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [hidden, setHidden]   = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  const lastY = React.useRef(0);

  React.useEffect(() => {
    function onScroll() {
      const y = window.scrollY;
      setScrolled(y > 60);
      if (y > lastY.current && y > 200) setHidden(true);
      else setHidden(false);
      lastY.current = y;
    }
    function onResize() { setIsMobile(window.innerWidth <= 1100); }
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    onResize();
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); };
  }, []);

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

  const links = navLinks ? navLinks(lang) : (lang === 'de'
    ? [['01','Home','home'],['02','Über Uns','about'],['03','Katalog','katalog'],['04','Projekte','projects'],['05','Leistungen','services'],['06','Kontakt','contact']]
    : [['01','Home','home'],['02','About','about'],['03','Catalogue','katalog'],['04','Projects','projects'],['05','Services','services'],['06','Contact','contact']]);

  return (
    <>
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      transform: hidden && !mobileOpen ? 'translateY(-100%)' : 'translateY(0)',
      transition: 'transform 0.5s cubic-bezier(.2,.6,.2,1), background 0.4s ease',
      background: (scrolled || mobileOpen) ? 'rgba(13,11,8,0.85)' : 'transparent',
      backdropFilter: (scrolled || mobileOpen) ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: (scrolled || mobileOpen) ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(200,169,110,0.1)' : '1px solid transparent',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: scrolled ? '14px 56px' : '22px 56px', transition: 'padding 0.4s ease' }}>
        <a href="#home" onClick={e => { e.preventDefault(); onNav('home'); }} style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img src="assets/logo-footer.avif" alt="JUMA Leuchten" style={{ height: scrolled ? 22 : 28, filter: 'invert(1)', opacity: 0.92, transition: 'height 0.4s ease' }} />
        </a>

        <nav style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {links.map(([num, label, page]) => (
            <a key={page} href={'#' + page}
               onClick={e => { e.preventDefault(); onNav(page); }}
               style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, textDecoration: 'none', cursor: 'pointer' }}
               onMouseEnter={e => { e.currentTarget.querySelector('.nav-text').style.color = '#c8a96e'; }}
               onMouseLeave={e => { e.currentTarget.querySelector('.nav-text').style.color = currentPage === page ? '#f0ebe0' : '#9e9080'; }}>
              <span style={{ fontFamily: "'Manrope',sans-serif", fontSize: 8, letterSpacing: '0.15em', color: currentPage === page ? '#c8a96e' : '#5c5148' }}>{num}</span>
              <span className="nav-text" style={{ fontFamily: "'Manrope',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: currentPage === page ? '#f0ebe0' : '#9e9080', transition: 'color 0.3s ease' }}>{label}</span>
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', border: '1px solid rgba(200,169,110,0.2)' }}>
            {['de','en'].map(l => (
              <button key={l} onClick={() => setLang(l)} style={{
                background: lang === l ? 'rgba(200,169,110,0.15)' : 'transparent',
                color: lang === l ? '#c8a96e' : '#9e9080',
                border: 'none', padding: '7px 12px', cursor: 'pointer',
                fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase',
                fontFamily: "'Manrope',sans-serif", fontSize: 9,
              }}>{l}</button>
            ))}
          </div>
          {!isMobile && (
            <a
              href={fluidHref || '#fluid'}
              target={fluidExternal ? '_blank' : undefined}
              rel={fluidExternal ? 'noopener noreferrer' : undefined}
              onClick={e => { if (!fluidExternal) { e.preventDefault(); onNav('fluid'); } }}
              style={{ fontFamily: "'Manrope',sans-serif", fontSize: 9, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#c8a96e', textDecoration: 'none', border: '1px solid rgba(200,169,110,0.4)', padding: '7px 14px', display: 'flex', gap: 8, alignItems: 'center' }}>
              Fluid Motion <span style={{ background: '#c8a96e', color: '#0d0b08', fontSize: 7, fontWeight: 700, padding: '2px 5px', letterSpacing: '0.1em' }}>NEW</span>
            </a>
          )}
          {isMobile && (
            <button onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu" style={{ background: 'transparent', border: '1px solid rgba(200,169,110,0.3)', cursor: 'pointer', padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 4, width: 38, height: 34, justifyContent: 'center' }}>
              <span style={{ display: 'block', width: 16, height: 1, background: '#f0ebe0', transition: 'transform 0.3s ease', transform: mobileOpen ? 'translateY(2.5px) rotate(45deg)' : 'none' }} />
              <span style={{ display: 'block', width: 16, height: 1, background: '#f0ebe0', transition: 'transform 0.3s ease', transform: mobileOpen ? 'translateY(-2.5px) rotate(-45deg)' : 'none' }} />
            </button>
          )}
        </div>
      </div>
    </header>

    {/* Mobile drawer */}
    {isMobile && mobileOpen && (
      <div style={{ position: 'fixed', inset: 0, zIndex: 99, background: 'rgba(13,11,8,0.97)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', padding: '72px 22px 32px', overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
        <nav style={{ display: 'flex', flexDirection: 'column' }}>
          {links.map(([num, label, page]) => (
            <a key={page} href={'#' + page}
               onClick={e => { e.preventDefault(); setMobileOpen(false); onNav(page); }}
               style={{ display: 'flex', alignItems: 'baseline', gap: 14, padding: '14px 0', borderBottom: '1px solid rgba(200,169,110,0.12)', textDecoration: 'none' }}>
              <span style={{ fontFamily: "'Manrope',sans-serif", fontSize: 9, letterSpacing: '0.2em', color: '#c8a96e', flexShrink: 0 }}>{num}</span>
              <span style={{ fontFamily: "'Poiret One',sans-serif", fontSize: 22, fontWeight: 300, color: currentPage === page ? '#c8a96e' : '#f0ebe0', textTransform: 'uppercase', letterSpacing: '0.02em', lineHeight: 1.1, overflowWrap: 'break-word', minWidth: 0 }}>{label}</span>
            </a>
          ))}
        </nav>
        <a
          href={fluidHref || '#fluid'}
          target={fluidExternal ? '_blank' : undefined}
          rel={fluidExternal ? 'noopener noreferrer' : undefined}
          onClick={e => { if (!fluidExternal) { e.preventDefault(); onNav('fluid'); } setMobileOpen(false); }}
          style={{ display: 'inline-flex', marginTop: 24, gap: 10, fontFamily: "'Manrope',sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#c8a96e', textDecoration: 'none', border: '1px solid rgba(200,169,110,0.4)', padding: '10px 16px' }}>
          Fluid Motion <span style={{ background: '#c8a96e', color: '#0d0b08', fontSize: 8, fontWeight: 700, padding: '2px 6px', letterSpacing: '0.1em' }}>NEW</span>
        </a>
      </div>
    )}
    </>
  );
}

Object.assign(window, { JumaHeader });