// Silk and Blow — site header (link set / cart / CTA are configurable per page)
const HOME_NAV_LINKS = [
  { label: 'Services', id: 'services' },
  { label: 'Locations', id: 'footer' },
  { label: 'Press Club', id: 'membership' },
  { label: 'Salon Suites', id: 'suites', href: window.SUITES_HREF },
];

function Header({ atTop, cartCount, onCart, onBook, onNav, links = HOME_NAV_LINKS, showCart = true, ctaLabel = 'Reserve your chair', ctaLabelMobile = 'Reserve your chair', ctaHideNarrow = true, homeHref = (window.HOME_HREF || '/index.html') }) {
  const [open, setOpen] = React.useState(false);
  const onHome = decodeURIComponent(window.location.pathname).endsWith(homeHref);
  const goHome = (e) => { if (onHome) { e.preventDefault(); onNav('top'); } };
  return (
    <header className={'hdr' + (atTop ? ' is-top' : '')}>
      <div className="wrap hdr-bar" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <a href={homeHref} onClick={goHome} aria-label="Silk and Blow home"
           style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', flexShrink: 0 }}>
          <img src="/assets/images/logo-main.png" alt="Silk and Blow" className="site-logo" style={{ objectFit: 'contain', filter: atTop ? 'drop-shadow(0 1px 10px rgba(0,0,0,0.25))' : 'none' }} />
        </a>

        <nav className="hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(18px, 2.6vw, 38px)' }}>
          {links.map((l) => (
            l.href
              ? <a key={l.id} className="navlink" href={l.href}>{l.label}</a>
              : <button key={l.id} className="navlink" onClick={() => onNav(l.id)}>{l.label}</button>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          {showCart && (
            <button className="hdr-cart" onClick={onCart} aria-label="Open cart">
              <Icon name="bag" size={19} />
              {cartCount > 0 && <span className="cdot">{cartCount}</span>}
            </button>
          )}
          <button className={'btn btn--sm hide-mobile' + (ctaHideNarrow ? ' hide-narrow' : '')} onClick={onBook}>{ctaLabel}</button>
          <button className="hdr-cart only-mobile" onClick={() => setOpen((v) => !v)} aria-label="Menu">
            <Icon name={open ? 'close' : 'menu'} size={20} />
          </button>
        </div>
      </div>

      {/* mobile sheet */}
      <div className="only-mobile" style={{
        overflow: 'hidden', maxHeight: open ? 420 : 0, transition: 'max-height var(--dur-slow) var(--ease-calm)',
        background: '#fff', borderTop: open ? '1px solid var(--border-hair)' : '1px solid transparent',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', padding: '8px var(--pad-x) 22px' }}>
          {links.map((l) => (
            l.href
              ? <a key={l.id} className="navlink" href={l.href} style={{ padding: '15px 0', textAlign: 'left', borderBottom: '1px solid var(--border-hair)' }}>{l.label}</a>
              : <button key={l.id} className="navlink" style={{ padding: '15px 0', textAlign: 'left', borderBottom: '1px solid var(--border-hair)' }}
                  onClick={() => { onNav(l.id); setOpen(false); }}>{l.label}</button>
          ))}
          <button className="btn btn--full" style={{ marginTop: 18 }} onClick={() => { onBook(); setOpen(false); }}>{ctaLabelMobile}</button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header, HOME_NAV_LINKS });