/* FreeToolzHub — sticky glass header with mega menu, search, theme toggle */
function Wordmark({ size = 20 }) {
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:10 }}>
      <span style={{
        display:'inline-flex', alignItems:'center', justifyContent:'center',
        width:size*1.7, height:size*1.7, borderRadius:'var(--radius-md)',
        overflow:'hidden', flexShrink:0,
      }}>
        <img src="assets/logo-mark.png" alt="FreeToolzHub" style={{ width:'100%', height:'100%', objectFit:'cover' }} />
      </span>
      <span style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:size, letterSpacing:'-0.02em' }}>
        <span style={{ color:'var(--text-strong)' }}>Free</span>
        <span style={{ color:'var(--color-primary)' }}>Toolz</span>
        <span style={{ color:'var(--text-strong)' }}>Hub</span>
      </span>
    </span>
  );
}

function Header({ go, dark, setDark, onSearch }) {
  const { Button, IconButton, Icon } = window.DesignSystem_3a7ab0;
  const { CATS, TOOLS } = window.FTH;
  const [mega, setMega] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  let closeT;

  const navLink = (label, onClick) => (
    <a onClick={onClick} style={{
      padding:'8px 12px', fontFamily:'var(--font-body)', fontSize:'var(--text-sm)',
      fontWeight:600, color:'var(--text-body)', cursor:'pointer', borderRadius:'var(--radius-md)',
    }}>{label}</a>
  );

  return (
    <header style={{
      position:'sticky', top:0, zIndex:50, display:'flex', alignItems:'center', gap:20,
      padding:'12px 24px', background:'var(--glass-bg)',
      backdropFilter:'var(--blur-md)', WebkitBackdropFilter:'var(--blur-md)',
      borderBottom:'1px solid var(--border-color)',
    }}>
      <a onClick={() => go('/')} style={{ cursor:'pointer' }}><Wordmark size={19} /></a>

      <nav className="fth-desktop-nav" style={{ display:'flex', gap:2, marginLeft:6, alignItems:'center' }}>
        {navLink('Home', () => go('/'))}
        <div
          onMouseEnter={() => { clearTimeout(closeT); setMega(true); }}
          onMouseLeave={() => { closeT = setTimeout(() => setMega(false), 160); }}
          style={{ position:'relative' }}
        >
          <button onClick={() => setMega(v => !v)} style={{
            display:'inline-flex', alignItems:'center', gap:5, padding:'8px 12px', border:'none',
            background:'transparent', cursor:'pointer', fontFamily:'var(--font-body)',
            fontSize:'var(--text-sm)', fontWeight:600, color:'var(--text-body)', borderRadius:'var(--radius-md)',
          }}>
            Categories <Icon name="chevron-down" size={14} style={{ transform: mega?'rotate(180deg)':'none', transition:'transform var(--dur-base)' }} />
          </button>
          {mega && (
            <div style={{
              position:'absolute', top:'calc(100% + 8px)', left:0, width:680, padding:18,
              background:'var(--bg-card)', border:'1px solid var(--border-color)',
              borderRadius:'var(--radius-2xl)', boxShadow:'var(--shadow-xl)',
              display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:6,
            }}>
              {CATS.map(c => {
                const [bg,fg] = window.FTH.TONE_MAP[c.tone];
                const n = TOOLS.filter(t => t.cat===c.id).length;
                return (
                  <a key={c.id} onClick={() => { setMega(false); go('/tools/'+c.id); }} style={{
                    display:'flex', alignItems:'center', gap:11, padding:'10px 12px',
                    borderRadius:'var(--radius-lg)', cursor:'pointer',
                  }} onMouseEnter={e=>e.currentTarget.style.background='var(--bg-subtle)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <span style={{ width:34, height:34, borderRadius:'var(--radius-md)', background:bg, color:fg, display:'grid', placeItems:'center', flexShrink:0 }}>
                      <Icon name={c.icon} size={18} />
                    </span>
                    <span style={{ minWidth:0 }}>
                      <span style={{ display:'block', fontFamily:'var(--font-heading)', fontWeight:600, fontSize:14, color:'var(--text-strong)' }}>{c.label}</span>
                      <span style={{ display:'block', fontSize:12, color:'var(--text-muted)' }}>{n} tools</span>
                    </span>
                  </a>
                );
              })}
            </div>
          )}
        </div>
        {navLink('All Tools', () => go('/tools'))}
        {navLink('Blog', () => { location.href = 'blog.html'; })}
        {navLink('About', () => { location.href = 'about.html'; })}
      </nav>

      <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:8 }}>
        <button onClick={onSearch} aria-label="Search tools" style={{
          display:'inline-flex', alignItems:'center', gap:9, height:40, padding:'0 14px',
          borderRadius:'var(--radius-full)', background:'var(--bg-card)', border:'1px solid var(--border-color)',
          color:'var(--text-muted)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13,
        }} className="fth-search-btn">
          <Icon name="search" size={16} /> <span className="fth-desktop-nav">Search tools</span>
          <kbd style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:700, border:'1px solid var(--border-color)', borderRadius:6, padding:'1px 6px' }} className="fth-desktop-nav">/</kbd>
        </button>
        <IconButton icon={dark ? 'sun' : 'moon'} label="Toggle theme" variant="ghost" onClick={() => setDark(!dark)} />
        <span className="fth-desktop-nav"><Button variant="primary" size="sm" iconLeft="grid-2x2" onClick={() => go('/tools')}>All Tools</Button></span>
        <span className="fth-mobile-nav"><IconButton icon="menu" label="Menu" variant="ghost" onClick={() => setMobile(true)} /></span>
      </div>

      {mobile && (
        <div onClick={() => setMobile(false)} style={{ position:'fixed', inset:0, zIndex:60, background:'rgba(8,15,30,.5)', backdropFilter:'blur(4px)' }}>
          <div onClick={e=>e.stopPropagation()} style={{
            position:'absolute', top:0, right:0, height:'100%', width:'min(320px,86vw)',
            background:'var(--bg-page)', borderLeft:'1px solid var(--border-color)', padding:20,
            display:'flex', flexDirection:'column', gap:6,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
              <Wordmark size={18} />
              <IconButton icon="x" label="Close" variant="ghost" onClick={() => setMobile(false)} />
            </div>
            {[['Home','/'],['All Tools','/tools']].map(([l,r]) => (
              <a key={r} onClick={() => { setMobile(false); go(r); }} style={{ padding:'12px', borderRadius:'var(--radius-md)', fontWeight:600, color:'var(--text-body)', cursor:'pointer' }}>{l}</a>
            ))}
            {CATS.map(c => (
              <a key={c.id} onClick={() => { setMobile(false); go('/tools/'+c.id); }} style={{ padding:'10px 12px', borderRadius:'var(--radius-md)', color:'var(--text-muted)', cursor:'pointer', fontSize:14 }}>{c.label} Tools</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

window.Wordmark = Wordmark;
window.FTHHeader = Header;