/* FreeToolzHub — footer */
function FTHFooter({ go }) {
  const { Icon, Input, Button } = window.DesignSystem_3a7ab0;
  const { TOOLS } = window.FTH;
  const pdf = TOOLS.filter(t => t.cat==='pdf').slice(0,4);
  const img = TOOLS.filter(t => t.cat==='image').slice(0,4);
  const cols = [
    { h:'PDF Tools', items: pdf.map(t => [t.title, '/tool/'+t.id]) },
    { h:'Image Tools', items: img.map(t => [t.title, '/tool/'+t.id]) },
    { h:'Company', items: [['About','about.html',1],['Blog','blog.html',1],['Contact','contact.html',1],['Privacy','privacy.html',1],['Terms','terms.html',1]] },
  ];
  const socials = ['twitter','github','linkedin','youtube'];
  return (
    <footer style={{ background:'var(--slate-900)', color:'var(--slate-300)', padding:'56px 24px 28px' }}>
      <div style={{ maxWidth:1140, margin:'0 auto', display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1fr 1.3fr', gap:36 }} className="fth-foot-grid">
        <div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:10 }}>
            <span style={{ width:36, height:36, borderRadius:'var(--radius-md)', overflow:'hidden', display:'grid', placeItems:'center', 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:20, color:'#fff' }}>Free<span style={{ color:'var(--sky-400)' }}>Toolz</span>Hub</span>
          </div>
          <p style={{ fontSize:14, lineHeight:1.6, color:'var(--slate-400)', maxWidth:300, marginTop:14 }}>
            Every tool, completely free. No watermarks, no registration, no limits — your files never leave your browser.
          </p>
          <div style={{ display:'flex', gap:8, marginTop:18 }}>
            {socials.map(s => (
              <a key={s} href="#" aria-label={s} style={{ width:38, height:38, borderRadius:'var(--radius-md)', background:'var(--slate-800)', display:'grid', placeItems:'center', color:'var(--slate-300)' }}>
                <Icon name={s} size={17} />
              </a>
            ))}
          </div>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div style={{ fontFamily:'var(--font-heading)', fontWeight:600, fontSize:14, color:'#fff', marginBottom:14 }}>{c.h}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {c.items.map(([label, route, ext]) => (
                <a key={label} onClick={() => ext ? (location.href=route) : (route!=='#' && go(route))} style={{ fontSize:14, color:'var(--slate-400)', cursor:'pointer' }}>{label}</a>
              ))}
            </div>
          </div>
        ))}
        <div>
          <div style={{ fontFamily:'var(--font-heading)', fontWeight:600, fontSize:14, color:'#fff', marginBottom:14 }}>Stay in the loop</div>
          <p style={{ fontSize:13, color:'var(--slate-400)', margin:'0 0 12px' }}>One clever tool tip a week. No spam.</p>
          <form onSubmit={(e)=>{e.preventDefault(); e.currentTarget.reset && e.currentTarget.reset(); const n=e.currentTarget.querySelector('.note'); }} style={{ display:'flex', flexDirection:'column', gap:8 }}>
            <input type="email" required placeholder="you@example.com" style={{ height:42, padding:'0 14px', borderRadius:'var(--radius-lg)', border:'1px solid var(--slate-700)', background:'var(--slate-800)', color:'#fff', fontFamily:'var(--font-body)', fontSize:14, outline:'none' }} />
            <button type="submit" style={{ height:42, borderRadius:'var(--radius-lg)', border:'none', background:'var(--gradient-brand)', color:'#fff', fontFamily:'var(--font-body)', fontWeight:600, fontSize:14, cursor:'pointer' }}>Subscribe</button>
          </form>
        </div>
      </div>
      <div style={{ maxWidth:1140, margin:'40px auto 0', paddingTop:22, borderTop:'1px solid var(--slate-700)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:14, flexWrap:'wrap', fontSize:13, color:'var(--slate-500)' }}>
        <span>© 2026 FreeToolzHub. All tools free, forever.</span>
        <span style={{ fontFamily:'var(--font-mono)' }}>No Watermark · No Registration · Secure · Unlimited</span>
      </div>
    </footer>
  );
}
window.FTHFooter = FTHFooter;