/* global React */
const { useState: useStateH } = React;

function Header({ onBook, current = 'home' }) {
  const [open, setOpen] = useStateH(false);
  const links = [
    { id: 'services', label: 'Services', href: 'services.html' },
    { id: 'experience', label: 'The suite', href: 'experience.html' },
    { id: 'about', label: 'About', href: 'about.html' },
    { id: 'faq', label: 'FAQ', href: 'faq.html' },
    { id: 'contact', label: 'Contact', href: 'contact.html' },
  ];
  const Btn = window.GFH_Button;
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: 'rgba(245, 239, 230, 0.92)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      borderBottom: '1px solid rgba(138,154,123,0.45)',
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto', padding: '14px 24px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="index.html" aria-label="Grace Filled Hair" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/logo-full.png" alt="Grace Filled Hair"
               style={{ height: 160, width: 'auto', display: 'block', margin: '-28px 0' }}/>
        </a>
        <nav className="gfh-nav-desktop" style={{
          display: 'flex', alignItems: 'center', gap: 28,
          fontFamily: "'Mulish', sans-serif", fontSize: 14,
        }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{
              color: current === l.id ? '#B5654A' : '#2E2A26',
              textDecoration: 'none', transition: 'color 150ms',
            }}
            onMouseEnter={(e)=>e.currentTarget.style.color='#B5654A'}
            onMouseLeave={(e)=>e.currentTarget.style.color = current===l.id?'#B5654A':'#2E2A26'}
            >{l.label}</a>
          ))}
          <Btn as="a" href="book.html" size="sm" onClick={onBook}>Book now</Btn>
        </nav>
        <button className="gfh-nav-toggle" onClick={()=>setOpen(o=>!o)} aria-label="Menu" style={{
          display: 'none', background: 'transparent', border: 0, color: '#2E2A26', cursor: 'pointer',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
            {open
              ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>
              : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>
            }
          </svg>
        </button>
      </div>
      {open && (
        <div className="gfh-nav-mobile" style={{
          borderTop: '1px solid rgba(138,154,123,0.45)',
          padding: '12px 24px 20px', display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {links.map(l => (
            <a key={l.id} href={l.href}
               style={{ color: '#2E2A26', textDecoration: 'none', fontFamily: "'Mulish',sans-serif", fontSize: 16, padding: '6px 0' }}>
              {l.label}
            </a>
          ))}
          <div style={{ marginTop: 8 }}>
            <Btn as="a" href="book.html">Book now</Btn>
          </div>
        </div>
      )}
    </header>
  );
}

window.GFH_Header = Header;