/* FreeToolzHub — All Tools browse with category filter + search */
function ToolsBrowse({ go, initialCat }) {
  const { ToolCard, Icon, Badge, Input } = window.DesignSystem_3a7ab0;
  const { TOOLS, CATS } = window.FTH;
  const [cat, setCat] = React.useState(initialCat || 'all');
  const [q, setQ] = React.useState('');

  React.useEffect(() => { setCat(initialCat || 'all'); }, [initialCat]);

  let list = TOOLS.filter(t => cat==='all' || t.cat===cat);
  if (q) list = list.filter(t => (t.title+' '+t.desc+' '+t.cat).toLowerCase().includes(q.toLowerCase()));

  const chips = [{ id:'all', label:'All Tools', icon:'grid-2x2' }, ...CATS];

  return (
    <div style={{ background:'var(--bg-page)', minHeight:'80vh' }}>
      <div style={{ maxWidth:1140, margin:'0 auto', padding:'28px 24px 70px' }}>
        {/* breadcrumb */}
        <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--text-muted)', marginBottom:20 }}>
          <a onClick={() => go('/')} style={{ cursor:'pointer', color:'var(--text-link)', fontWeight:600 }}>Home</a>
          <Icon name="chevron-right" size={14} /><span>All Tools</span>
        </div>

        <div style={{ marginBottom:26 }} className="fth-page-enter">
          <h1 style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:42, color:'var(--text-strong)', margin:'0 0 12px', letterSpacing:'-0.02em' }}>
            All <span style={{ color:'var(--color-primary)' }}>tools</span>
          </h1>
          <p style={{ fontFamily:'var(--font-body)', fontSize:17, color:'var(--text-muted)', margin:'0 0 22px', maxWidth:560 }}>
            Browse every tool. Functional tools are ready now; the rest are on the way.
          </p>
          <div style={{ maxWidth:460 }}>
            <Input icon="search" placeholder="Search tools by name…" value={q} onChange={(e)=>setQ(e.target.value)} />
          </div>
        </div>

        {/* category chips */}
        <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:30 }} className="fth-page-enter d1">
          {chips.map(c => {
            const on = c.id===cat;
            const n = c.id==='all' ? TOOLS.length : TOOLS.filter(t=>t.cat===c.id).length;
            return (
              <button key={c.id} onClick={()=>setCat(c.id)} style={{
                display:'inline-flex', alignItems:'center', gap:8, padding:'10px 16px',
                borderRadius:'var(--radius-full)', cursor:'pointer',
                fontFamily:'var(--font-body)', fontWeight:600, fontSize:14,
                border:'1px solid '+(on?'transparent':'var(--border-color)'),
                background: on?'var(--gradient-brand)':'var(--bg-card)',
                color: on?'#fff':'var(--text-body)',
                boxShadow: on?'var(--shadow-brand-soft)':'var(--shadow-xs)',
              }}>
                <Icon name={c.icon} size={15} /> {c.label}
                <span style={{ fontSize:12, padding:'1px 7px', borderRadius:'var(--radius-full)', background: on?'rgba(255,255,255,.25)':'var(--bg-subtle)', color: on?'#fff':'var(--text-muted)' }}>{n}</span>
              </button>
            );
          })}
        </div>

        {/* grid */}
        {list.length ? (
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }} className="fth-tool-grid fth-anim-in">
            {list.map(t => (
              <div key={t.id} style={{ position:'relative' }}>
                <ToolCard icon={t.icon} tone={t.tone} title={t.title} description={t.desc}
                  badge={t.badge}
                  onClick={() => go('/tool/'+t.id)} />
              </div>
            ))}
          </div>
        ) : (
          <div style={{ padding:60, textAlign:'center', color:'var(--text-muted)' }}>No tools match “{q}”. Try another keyword.</div>
        )}
      </div>
    </div>
  );
}
window.FTHToolsBrowse = ToolsBrowse;