function LightBulbIcon({ on }) {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 14c.2-1 .7-1.7 1.5-2.5C17.6 10.3 18 9.2 18 8A6 6 0 0 0 6 8c0 1.2.4 2.3 1.5 3.5.8.8 1.3 1.5 1.5 2.5"/>
      <path d="M9 18h6M10 22h4"/>
      {on && <line x1="12" y1="2" x2="12" y2="0"/>}
      {on && <line x1="4.2" y1="4.2" x2="2.8" y2="2.8"/>}
      {on && <line x1="19.8" y1="4.2" x2="21.2" y2="2.8"/>}
    </svg>
  );
}

function Header({ lang, setLang, darkMode, toggleLight }) {
  const [open, setOpen] = React.useState(true);
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  const [drawer, setDrawer] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    const onResize = () => setMobile(window.innerWidth <= 760);
    onResize();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

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

  const navItems = {
    fr: ["Explorer", "Prestations", "Équipe", "Avis"],
    en: ["Explore", "Services", "Team", "Reviews"],
    pt: ["Explorar", "Serviços", "Equipa", "Avaliações"],
  }[lang];
  const menuLabel = { fr: 'Menu', en: 'Menu', pt: 'Menu' }[lang];
  const navHrefs = ['top','services','team','reviews'];

  const headerStyle = {
    position: 'fixed', top: 0, left: 0, right: 0,
    zIndex: 50,
    padding: scrolled ? (mobile ? '10px 16px' : '14px 32px') : (mobile ? '14px 18px' : '20px 40px'),
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: scrolled ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.6)',
    backdropFilter: 'blur(14px) saturate(160%)',
    WebkitBackdropFilter: 'blur(14px) saturate(160%)',
    borderBottom: scrolled ? '1px solid rgba(0,0,0,0.06)' : '1px solid transparent',
    transition: 'all .3s cubic-bezier(.2,.7,.2,1)',
    gap: 12,
  };

  // ============ MOBILE LAYOUT ============
  if (mobile) {
    return (
      <>
        <header style={headerStyle}>
          {/* Menu pill button — same style as desktop */}
          <button
            onClick={() => setDrawer(true)}
            aria-label="open menu"
            style={{
              display:'inline-flex', alignItems:'center', gap: 7,
              padding: '6px 6px 6px 14px',
              background:'rgba(255,255,255,0.85)',
              border:'1px solid rgba(0,0,0,0.08)',
              borderRadius: 999,
              fontSize: 12, fontWeight: 500,
              color:'var(--ink)',
              boxShadow:'0 4px 16px rgba(0,0,0,0.04)',
              flexShrink: 0,
            }}>
            {menuLabel}
            <span style={{
              width: 20, height: 20, borderRadius: 999,
              background:'var(--pink-400)', color:'white',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              fontSize: 11,
            }}>+</span>
          </button>

          {/* Center logo */}
          <a href="#top" style={{
            display:'flex', alignItems:'center', gap: 8,
            flexShrink: 1, minWidth: 0,
          }}>
            <BrandLogo variant="medallion" style={{ width: 40, height: 40, flexShrink: 0 }} />
            <span style={{
              fontFamily:'Instrument Serif', fontStyle:'italic',
              letterSpacing: '-0.01em',
              fontSize: 17,
              color: 'var(--pink-500)',
              whiteSpace:'nowrap',
              overflow:'hidden', textOverflow:'ellipsis',
            }}>
              Belezaa <span style={{ color:'var(--pink-400)' }}>pinkk</span>
            </span>
          </a>

          {/* Lang short + bulb */}
          <div style={{ display:'flex', gap: 6, alignItems:'center', flexShrink: 0 }}>
            <div style={{
              display:'flex', gap: 2, alignItems:'center',
              background:'rgba(255,255,255,0.85)',
              border:'1px solid rgba(0,0,0,0.08)',
              borderRadius: 999, padding: 3,
            }}>
              {['fr','en','pt'].map(l => (
                <button key={l}
                  onClick={() => setLang(l)}
                  style={{
                    padding: '4px 7px',
                    borderRadius: 999,
                    background: lang === l ? 'var(--ink)' : 'transparent',
                    color: lang === l ? 'white' : 'var(--gray-400)',
                    fontSize: 10,
                    letterSpacing: '0.08em',
                    textTransform:'uppercase',
                    fontWeight: 700,
                  }}>{l}</button>
              ))}
            </div>
            <button onClick={toggleLight} aria-label="toggle light" style={{
              width: 34, height: 34, borderRadius: 999,
              background: darkMode ? 'rgba(255,220,100,0.15)' : 'rgba(255,255,255,0.85)',
              border: darkMode ? '1px solid rgba(255,220,100,0.4)' : '1px solid rgba(0,0,0,0.08)',
              display:'flex', alignItems:'center', justifyContent:'center',
              color: darkMode ? '#ffd060' : 'var(--ink)',
              boxShadow: darkMode ? '0 0 12px rgba(255,200,60,0.35)' : '0 4px 16px rgba(0,0,0,0.04)',
              transition:'all .3s',
            }}>
              <LightBulbIcon on={!darkMode} />
            </button>
          </div>
        </header>

        {/* Drawer */}
        {drawer && (
          <div style={{
            position:'fixed', inset: 0, zIndex: 100,
            background:'rgba(255, 245, 248, 0.98)',
            backdropFilter:'blur(20px)',
            display:'flex', flexDirection:'column',
            padding: '24px 20px',
            animation: 'drawerIn .3s cubic-bezier(.2,.7,.2,1)',
          }}>
            <style>{`@keyframes drawerIn { from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:translateY(0)} }`}</style>

            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 40 }}>
              <a href="#top" onClick={() => setDrawer(false)} style={{ display:'flex', alignItems:'center', gap: 10 }}>
                <BrandLogo variant="medallion" style={{ width: 52, height: 52 }} />
                <span style={{ fontFamily:'Instrument Serif', fontStyle:'italic', fontSize: 22, color:'var(--pink-500)' }}>
                  Belezaa <span style={{ color:'var(--pink-400)' }}>pinkk</span>
                </span>
              </a>
              <button onClick={() => setDrawer(false)} aria-label="close"
                style={{ width: 40, height: 40, borderRadius: 999, background:'var(--pink-400)', color:'white', fontSize: 16 }}>
                ✕
              </button>
            </div>

            <nav style={{ display:'flex', flexDirection:'column', gap: 4, marginTop: 12 }}>
              {navItems.map((item, i) => (
                <a key={item}
                   href={`#${navHrefs[i]}`}
                   onClick={() => setDrawer(false)}
                   style={{
                     fontFamily:'Bricolage Grotesque',
                     fontWeight: 700,
                     fontStyle:'italic',
                     fontSize: 'clamp(40px, 11vw, 64px)',
                     letterSpacing:'-0.03em',
                     color: 'var(--ink)',
                     padding:'8px 0',
                     borderBottom:'1px solid rgba(0,0,0,0.08)',
                   }}>
                  {item}
                </a>
              ))}
            </nav>

            <div style={{ marginTop:'auto', paddingTop: 24 }}>
              <a href="#contact" onClick={() => setDrawer(false)} className="pill-btn" style={{ width:'fit-content' }}>
                {{fr:'Réserver',en:'Book',pt:'Reservar'}[lang]} <span className="arrow">→</span>
              </a>
              <div className="mono-tiny" style={{ color:'var(--gray-400)', marginTop: 18 }}>
                R. do rio homem 10 · Portugal
              </div>
            </div>
          </div>
        )}
      </>
    );
  }

  // ============ DESKTOP LAYOUT ============
  return (
    <header style={headerStyle}>
      {/* Left: nav (collapsible) */}
      <div style={{ display:'flex', alignItems:'center', gap: 10, flex:1 }}>
        {open ? (
          <nav style={{
            display:'flex', alignItems:'center', gap: 18,
            background:'rgba(255,255,255,0.7)',
            border:'1px solid rgba(0,0,0,0.08)',
            borderRadius: 999,
            padding: '8px 8px 8px 16px',
            boxShadow:'0 4px 16px rgba(0,0,0,0.04)',
          }}>
            {navItems.map((item, i) => (
              <a key={item}
                 href={`#${navHrefs[i]}`}
                 style={{
                   fontSize: 13,
                   color: 'var(--ink)',
                   fontWeight: 500,
                   transition: 'color .2s',
                 }}
                 onMouseEnter={e => e.target.style.color = 'var(--pink-500)'}
                 onMouseLeave={e => e.target.style.color = 'var(--ink)'}
              >{item}</a>
            ))}
            <button
              onClick={() => setOpen(false)}
              aria-label="close menu"
              style={{
                width: 28, height: 28, borderRadius: 999,
                background:'var(--pink-400)',
                display:'inline-flex', alignItems:'center', justifyContent:'center',
                color:'white', fontSize: 12,
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--pink-500)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--pink-400)'}
            >✕</button>
          </nav>
        ) : (
          <button
            onClick={() => setOpen(true)}
            style={{
              display:'inline-flex', alignItems:'center', gap: 8,
              padding: '8px 14px 8px 18px',
              background:'rgba(255,255,255,0.7)',
              border:'1px solid rgba(0,0,0,0.08)',
              borderRadius: 999,
              fontSize: 13, fontWeight: 500,
              color:'var(--ink)',
              boxShadow:'0 4px 16px rgba(0,0,0,0.04)',
            }}>
            {menuLabel}
            <span style={{
              width: 22, height: 22, borderRadius: 999,
              background:'var(--pink-400)', color:'white',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              fontSize: 12,
            }}>+</span>
          </button>
        )}
      </div>

      {/* Center logo */}
      <a href="#top" style={{
        display:'flex', alignItems:'center', gap: 10,
        flexShrink: 0,
      }}>
        <BrandLogo variant="medallion" style={{ width: scrolled ? 44 : 52, height: scrolled ? 44 : 52, transition:'all .3s' }} />
        <span style={{
          fontFamily:'Instrument Serif',
          fontStyle: 'italic',
          letterSpacing: '-0.01em',
          fontSize: scrolled ? 18 : 22,
          color: 'var(--pink-500)',
          transition:'all .3s',
        }}>
          Belezaa <span style={{ color:'var(--pink-400)' }}>pinkk</span>
        </span>
      </a>

      {/* Right: lang switch + search */}
      <div style={{ display:'flex', alignItems:'center', gap: 12, flex:1, justifyContent:'flex-end' }}>
        <div style={{
          display:'flex', gap: 4, alignItems:'center',
          background:'rgba(255,255,255,0.7)',
          border:'1px solid rgba(0,0,0,0.08)',
          borderRadius: 999, padding: 4,
        }}>
          {['fr','en','pt'].map(l => (
            <button key={l}
              onClick={() => setLang(l)}
              style={{
                padding: '4px 10px',
                borderRadius: 999,
                background: lang === l ? 'var(--ink)' : 'transparent',
                color: lang === l ? 'white' : 'var(--gray-400)',
                fontSize: 11,
                letterSpacing: '0.1em',
                textTransform:'uppercase',
                fontWeight: 600,
              }}>{l}</button>
          ))}
        </div>
        <button aria-label="search" style={{
          width: 36, height: 36, borderRadius: 999,
          background:'rgba(255,255,255,0.7)',
          border:'1px solid rgba(0,0,0,0.08)',
          display:'flex', alignItems:'center', justifyContent:'center',
          color:'var(--ink)'
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
          </svg>
        </button>
        <button onClick={toggleLight} aria-label="toggle light" style={{
          width: 36, height: 36, borderRadius: 999,
          background: darkMode ? 'rgba(255,220,100,0.12)' : 'rgba(255,255,255,0.7)',
          border: darkMode ? '1px solid rgba(255,220,100,0.35)' : '1px solid rgba(0,0,0,0.08)',
          display:'flex', alignItems:'center', justifyContent:'center',
          color: darkMode ? '#ffd060' : 'var(--ink)',
          boxShadow: darkMode ? '0 0 14px rgba(255,200,60,0.4)' : 'none',
          transition:'all .3s',
        }}>
          <LightBulbIcon on={!darkMode} />
        </button>
      </div>
    </header>
  );
}

window.Header = Header;