/* ActiveFit360 marketing — sticky pill site header */
const NS_h = window.Activefit360DesignSystem_d87766;

function Wordmark({ onDark = false, size = 19 }) {
  return (
    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: size, letterSpacing: '-0.02em', color: onDark ? '#fff' : 'var(--ink-900)' }}>
      ActiveFit<span style={{ color: onDark ? 'var(--brand-green)' : 'var(--green-600)' }}>360</span>
    </span>
  );
}
window.Wordmark = Wordmark;

function SiteHeader({ current = 'home', onNavigate = () => {}, onBook = () => {} }) {
  const { Button } = NS_h;
  const [open, setOpen] = React.useState(false);
  const links = [
    ['home', 'Home'], ['services', 'Services'], ['reviews', 'Reviews'], ['contact', 'Contact'], ['about', 'About'],
  ];
  const routes = window.AF_ROUTES;
  const go = (id) => { onNavigate(id); setOpen(false); };
  const navClick = (id) => (e) => { e.preventDefault(); go(id); };

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, padding: '14px var(--gutter) 0', background: 'transparent' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 16,
        background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-pill)',
        padding: '9px 9px 9px 18px', boxShadow: 'var(--shadow-sm)' }}>

        {/* brand */}
        <a href={routes.home} onClick={navClick('home')} style={{ display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none', padding: 0 }}>
          <img src="assets/logo-green.png" alt="ActiveFit360" style={{ height: 36, width: 'auto', display: 'block' }} />
          <Wordmark />
        </a>

        {/* desktop nav */}
        <nav className="af-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {links.map(([id, label]) => (
            <a key={id} href={routes[id]} onClick={navClick(id)} style={{
              fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 700, cursor: 'pointer', textDecoration: 'none',
              padding: '8px 14px', borderRadius: 'var(--radius-pill)', border: 'none', display: 'inline-block',
              background: current === id ? 'var(--color-primary-soft)' : 'transparent',
              color: current === id ? 'var(--green-800)' : 'var(--text-body)',
              transition: 'var(--transition-base)' }}>{label}</a>
          ))}
        </nav>

        {/* actions */}
        <div className="af-nav-actions" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Button variant="secondary" size="sm" iconRight={<window.Icon name="phone" size={14} />} as="a" href="tel:+13314727451">Call</Button>
          <Button variant="primary" size="sm" iconRight={<window.Icon name="arrow-up-right" size={15} />} onClick={onBook}>Book Appointment</Button>
        </div>

        {/* mobile toggle */}
        <button className="af-nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
          display: 'none', width: 42, height: 42, borderRadius: '50%', border: '1px solid var(--border-strong)',
          background: '#fff', cursor: 'pointer', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-900)' }}>
          <window.Icon name={open ? 'x' : 'menu'} size={20} />
        </button>
      </div>

      {/* mobile menu */}
      {open && (
        <div className="af-nav-mobile" style={{ maxWidth: 'var(--container-wide)', margin: '10px auto 0', background: '#fff',
          border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', padding: 12 }}>
          {links.map(([id, label]) => (
            <a key={id} href={routes[id]} onClick={navClick(id)} style={{ display: 'block', width: '100%', textAlign: 'left', textDecoration: 'none',
              padding: '13px 16px', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 700,
              background: current === id ? 'var(--color-primary-soft)' : 'transparent',
              color: current === id ? 'var(--green-800)' : 'var(--text-body)' }}>{label}</a>
          ))}
          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
            <NS_h.Button variant="secondary" block as="a" href="tel:+13314727451">Call</NS_h.Button>
            <NS_h.Button variant="primary" block onClick={() => { onBook(); setOpen(false); }}>Book</NS_h.Button>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { SiteHeader });