// L'Aqua Fure — Header (fixed) + mobile menu
function Header({ onNav }) {
  const { Menu, Close, Phone, Star } = window.Icons;
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const el = document.querySelector('.lf-scroll') || window;
    const onScroll = () => {
      const y = el === window ? window.scrollY : el.scrollTop;
      setScrolled(y > 40);
    };
    el.addEventListener('scroll', onScroll);
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['Accueil', 'accueil'],
    ['Le salon', 'salon'],
    ['Prestations', 'prestations'],
    ['Avis', 'avis'],
    ['Contact', 'contact'],
  ];

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

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(18,19,17,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-deep)' : '1px solid transparent',
      transition: 'background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard)',
    }}>
      <div style={{
        maxWidth: 'var(--container-xl)', margin: '0 auto',
        padding: '16px var(--gutter-page)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <a onClick={() => go('accueil')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textDecoration: 'none' }}>
          <img src="assets/logo-mark-deep.svg" alt="" style={{ width: 38, height: 38 }} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23, color: 'var(--bone-50)', letterSpacing: '0.01em' }}>L'Aqua&nbsp;fure</span>
            <span style={{ fontSize: 9, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--brand-bright)', marginTop: 4 }}>Coiffeur · Le Grau-du-Roi</span>
          </span>
        </a>

        {/* Desktop nav */}
        <nav className="lf-desk-nav" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map(([label, id]) => (
            <a key={id} onClick={() => go(id)} style={{
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--text-on-deep)',
              cursor: 'pointer', letterSpacing: '0.01em', opacity: 0.85, transition: 'opacity var(--dur-fast)',
            }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
            onMouseLeave={(e) => e.currentTarget.style.opacity = 0.85}>{label}</a>
          ))}
          <a href="tel:0466773511" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none',
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600,
            color: 'var(--char-950)', background: 'var(--brand-bright)',
            padding: '11px 20px', borderRadius: 'var(--radius-pill)',
            transition: 'transform var(--dur-fast), background var(--dur-base)',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--teal-300)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'var(--brand-bright)'}>
            <Phone size={16} stroke={2} /> Prendre RDV
          </a>
        </nav>

        {/* Mobile toggle */}
        <button className="lf-burger" onClick={() => setOpen(true)} aria-label="Menu" style={{
          display: 'none', alignItems: 'center', justifyContent: 'center', width: 44, height: 44,
          background: 'rgba(247,245,239,0.08)', border: '1px solid var(--border-deep)',
          borderRadius: 'var(--radius-pill)', color: 'var(--bone-50)', cursor: 'pointer',
        }}>
          <Menu size={22} />
        </button>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'var(--char-950)', display: 'flex', flexDirection: 'column', padding: '20px var(--gutter-page)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23, color: 'var(--bone-50)' }}>L'Aqua&nbsp;fure</span>
            <button onClick={() => setOpen(false)} aria-label="Fermer" style={{ width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', border: '1px solid var(--border-deep)', borderRadius: 'var(--radius-pill)', color: 'var(--bone-50)', cursor: 'pointer' }}>
              <Close size={22} />
            </button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 40 }}>
            {links.map(([label, id]) => (
              <a key={id} onClick={() => go(id)} style={{
                fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 500, color: 'var(--bone-50)',
                padding: '12px 0', borderBottom: '1px solid var(--border-deep)', cursor: 'pointer',
              }}>{label}</a>
            ))}
          </nav>
          <a href="tel:0466773511" style={{
            marginTop: 'auto', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, textDecoration: 'none',
            fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--char-950)',
            background: 'var(--brand-bright)', padding: '17px', borderRadius: 'var(--radius-pill)',
          }}>
            <Phone size={18} stroke={2} /> 04 66 77 35 11
          </a>
        </div>
      )}
    </header>
  );
}
window.Header = Header;