/* FreeToolzHub — Home */
function Pillar({ icon, tone, label }) {
  const { Icon } = window.DesignSystem_3a7ab0;
  const [bg, fg] = window.FTH.TONE_MAP[tone];
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:8, padding:'9px 16px',
      background:'var(--bg-card)', border:'1px solid var(--border-color)',
      borderRadius:'var(--radius-full)', boxShadow:'var(--shadow-xs)',
      fontFamily:'var(--font-body)', fontSize:13, fontWeight:600,
      letterSpacing:'0.03em', textTransform:'uppercase', color:'var(--text-body)',
    }}>
      <span style={{ display:'inline-flex', width:22, height:22, alignItems:'center', justifyContent:'center', borderRadius:'var(--radius-full)', background:bg, color:fg }}>
        <Icon name={icon} size={14} strokeWidth={2.4} />
      </span>{label}
    </span>
  );
}

function AdSlot({ label, h=90 }) {
  return (
    <div style={{
      position:'relative', height:h, display:'grid', placeItems:'center', textAlign:'center',
      border:'1px dashed var(--border-strong)', borderRadius:'var(--radius-lg)', color:'var(--text-faint)',
      background:'repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(37,99,235,.04) 11px, rgba(37,99,235,.04) 22px)',
      fontFamily:'var(--font-mono)', fontSize:12,
    }}>
      <span style={{ position:'absolute', top:7, left:11, fontSize:9, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:700, opacity:.7 }}>Advertisement</span>
      {label}
    </div>
  );
}

function Stat({ value, label }) {
  const ref = React.useRef(null);
  const [disp, setDisp] = React.useState(value);
  React.useEffect(() => {
    const m = String(value).match(/^([\d.]+)(.*)$/);
    if (!m || !ref.current || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const target = parseFloat(m[1]), suffix = m[2], dec = (m[1].split('.')[1]||'').length;
    const io = new IntersectionObserver((es) => {
      es.forEach(en => {
        if (!en.isIntersecting) return;
        io.disconnect();
        const t0 = performance.now(), dur = 1100;
        const step = (t) => {
          const p = Math.min(1, (t - t0) / dur), e = 1 - Math.pow(1 - p, 3);
          setDisp((target * e).toFixed(dec) + suffix);
          if (p < 1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [value]);
  return (
    <div style={{ textAlign:'center' }} ref={ref}>
      <div className="fth-stat-val" style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:36, color:'var(--text-strong)', letterSpacing:'-0.02em' }}>{disp}</div>
      <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)', marginTop:4 }}>{label}</div>
    </div>
  );
}

function FaqItem({ q, a }) {
  const { Icon } = window.DesignSystem_3a7ab0;
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ border:'1px solid var(--border-color)', borderRadius:'var(--radius-xl)', background:'var(--bg-card)', overflow:'hidden' }}>
      <button onClick={() => setOpen(v=>!v)} style={{
        width:'100%', textAlign:'left', padding:'18px 20px', display:'flex', justifyContent:'space-between',
        alignItems:'center', gap:14, background:'none', border:'none', cursor:'pointer',
        fontFamily:'var(--font-heading)', fontWeight:600, fontSize:16, color:'var(--text-strong)',
      }}>
        {q}
        <Icon name="chevron-down" size={18} style={{ transform: open?'rotate(180deg)':'none', transition:'transform var(--dur-base)', color:'var(--text-muted)' }} />
      </button>
      {open && <div style={{ padding:'0 20px 20px', fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', lineHeight:1.6 }}>{a}</div>}
    </div>
  );
}

function Home({ go }) {
  const { ToolCard, Tabs, Badge, Button, Icon } = window.DesignSystem_3a7ab0;
  const { TOOLS, CATS, working, count } = window.FTH;
  const [cat, setCat] = React.useState('all');
  const [q, setQ] = React.useState('');
  const matches = q.trim() ? TOOLS.filter(t => (t.title+' '+t.desc+' '+t.cat).toLowerCase().includes(q.trim().toLowerCase())) : [];

  const popular = (cat==='all' ? working.filter(t=>t.pop) : working.filter(t => t.cat===cat));
  const tabs = [{ id:'all', label:'Popular' }, { id:'pdf', label:'PDF' }, { id:'image', label:'Image' }, { id:'text', label:'Text' }, { id:'dev', label:'Dev' }, { id:'calc', label:'Calc' }];

  const pillars = [
    { icon:'shield-check', tone:'green', label:'No Watermark' },
    { icon:'user-x', tone:'blue', label:'No Registration' },
    { icon:'zap', tone:'amber', label:'Fast' },
    { icon:'lock', tone:'teal', label:'Secure' },
    { icon:'infinity', tone:'sky', label:'Unlimited' },
  ];
  const steps = [
    ['upload-cloud','Drop your file','Drag & drop or browse. Files stay in your browser — nothing is uploaded.'],
    ['sliders-horizontal','Adjust & preview','Tune settings with a live preview. Watch it process in real time.'],
    ['download','Download free','Grab your clean result instantly. No watermark, no email, no limit.'],
  ];
  const faqs = [
    ['Is everything really free?','Yes — every working tool is 100% free with no hidden limits, trial, or premium upsell.'],
    ['Will my files have a watermark?','Never. Your exports come out clean, exactly as you made them.'],
    ['Do I need an account?','No registration required. Open a tool and start immediately.'],
    ['Are my files private?','PDF and image tools run entirely in your browser — your files never leave your device.'],
    ['Is there any catch?','None. No watermark, no sign-up, no limits — every tool is free and runs right in your browser.'],
  ];

  // Entrance is CSS transform-only (never hides content). Scroll-reveal just
  // adds an `.in` class that triggers a transform slide on inner cards — it
  // never hides anything, so no JS/observer failure can blank the page.
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!('IntersectionObserver' in window)) return;
    const els = Array.from(document.querySelectorAll('.fth-reveal'));
    const io = new IntersectionObserver((ents) => {
      ents.forEach(en => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // hero typing effect (respects reduced motion)
  const PHRASES = ['100% free, forever.', 'No watermark, ever.', 'Private by design.'];
  const [typed, setTyped] = React.useState(PHRASES[0]);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let pi = 0, ci = PHRASES[0].length, del = true, alive = true;
    const tick = () => {
      if (!alive) return;
      if (del) { ci--; if (ci <= 0) { del = false; pi = (pi + 1) % PHRASES.length; } }
      else { ci++; if (ci >= PHRASES[pi].length) { del = true; setTyped(PHRASES[pi]); setTimeout(tick, 2600); return; } }
      setTyped(PHRASES[pi].slice(0, Math.max(0, ci)) || '\u00a0');
      setTimeout(tick, del ? 32 : 60);
    };
    const t = setTimeout(tick, 2400);
    return () => { alive = false; clearTimeout(t); };
  }, []);

  return (
    <div>
      {/* HERO */}
      <section className="fth-hero-section" style={{ background:'var(--gradient-hero)', padding:'68px 24px 60px', textAlign:'center', position:'relative', overflow:'hidden' }}>
        <span className="fth-hero-orb" style={{ position:'absolute', top:-80, left:'12%', width:340, height:340, borderRadius:'50%', background:'radial-gradient(circle, var(--blue-300), transparent 68%)', opacity:0.5, filter:'blur(20px)', pointerEvents:'none' }}></span>
        <span className="fth-hero-orb b" style={{ position:'absolute', top:20, right:'8%', width:300, height:300, borderRadius:'50%', background:'radial-gradient(circle, var(--teal-400), transparent 68%)', opacity:0.45, filter:'blur(20px)', pointerEvents:'none' }}></span>
        <span className="fth-shape s1"></span>
        <span className="fth-shape s2"></span>
        <span className="fth-shape s3"></span>
        <span className="fth-shape s4"></span>
        <div className="fth-hero-anim fth-hero-grid" style={{ maxWidth:1140, margin:'0 auto', position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1.05fr 0.95fr', gap:44, alignItems:'center', textAlign:'left' }}>
          <div>
          <div style={{ display:'inline-flex', marginBottom:20 }}>
            <Badge tone="teal" variant="soft" icon="badge-check">100% Free • No Registration • No Watermark</Badge>
          </div>
          <h1 style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:46, lineHeight:1.14, letterSpacing:'-0.025em', color:'var(--text-strong)', margin:0 }}>
            Free Online Tools for <span className="fth-shimmer">PDF, Images, Video, Audio &amp; More</span>
          </h1>
          <p style={{ fontFamily:'var(--font-body)', fontSize:19, lineHeight:1.55, color:'var(--text-muted)', maxWidth:540, margin:'20px 0 30px' }}>
            Edit, convert, compress, and optimize your files securely. No registration. No watermarks.
          </p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginBottom:26 }}>
            <Button variant="primary" size="lg" iconLeft="grid-2x2" onClick={() => go('/tools')}>Explore All Tools</Button>
            <Button variant="secondary" size="lg" iconLeft="file-text" onClick={() => go('/tools/pdf')}>Popular PDF Tools</Button>
          </div>
          <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
            {pillars.map(p => <Pillar key={p.label} {...p} />)}
          </div>
          </div>

          {/* Dashboard preview */}
          <div className="fth-hero-preview" style={{ position:'relative' }}>
            <div style={{ background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-2xl)', boxShadow:'var(--shadow-xl)', overflow:'hidden' }}>
              <div style={{ display:'flex', alignItems:'center', gap:6, padding:'12px 16px', borderBottom:'1px solid var(--border-color)' }}>
                <span style={{ width:11, height:11, borderRadius:'50%', background:'#ef4444' }}></span>
                <span style={{ width:11, height:11, borderRadius:'50%', background:'#f59e0b' }}></span>
                <span style={{ width:11, height:11, borderRadius:'50%', background:'#22c55e' }}></span>
                <span style={{ marginLeft:10, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--text-faint)' }}>freetoolzhub.com</span>
              </div>
              <div style={{ padding:18 }}>
                <div style={{ display:'flex', alignItems:'center', gap:9, height:36, padding:'0 12px', marginBottom:16, borderRadius:'var(--radius-full)', background:'var(--bg-subtle)', color:'var(--text-faint)' }}>
                  <Icon name="search" size={15} /> <span style={{ fontSize:13 }}>Search tools…</span>
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10 }}>
                  {[['file-text','pdf'],['image','image'],['video','video'],['music','amber'],['code','dev'],['calculator','sky']].map((t,i) => {
                    const [bg,fg] = window.FTH.TONE_MAP[t[1]] || ['var(--blue-50)','var(--color-primary)'];
                    return (
                      <div key={i} style={{ padding:'16px 10px', borderRadius:'var(--radius-lg)', background:'var(--bg-page)', border:'1px solid var(--border-color)', textAlign:'center' }}>
                        <span style={{ display:'inline-grid', placeItems:'center', width:40, height:40, borderRadius:'var(--radius-md)', background:bg, color:fg, marginBottom:8 }}><Icon name={t[0]} size={20} /></span>
                        <span style={{ display:'block', height:7, borderRadius:4, background:'var(--bg-subtle)' }}></span>
                      </div>
                    );
                  })}
                </div>
                <div style={{ marginTop:16, padding:'14px 16px', borderRadius:'var(--radius-lg)', background:'var(--gradient-hero)', border:'1px solid var(--border-color)', display:'flex', alignItems:'center', gap:12 }}>
                  <span style={{ display:'grid', placeItems:'center', width:38, height:38, borderRadius:'var(--radius-md)', background:'var(--color-primary)', color:'#fff', flexShrink:0 }}><Icon name="check" size={20} /></span>
                  <div style={{ flex:1 }}>
                    <span style={{ display:'block', fontFamily:'var(--font-heading)', fontWeight:600, fontSize:13.5, color:'var(--text-strong)' }}>Done! Your file is ready.</span>
                    <span style={{ display:'block', height:6, width:'70%', borderRadius:4, background:'var(--bg-subtle)', marginTop:6 }}></span>
                  </div>
                  <Icon name="download" size={18} style={{ color:'var(--color-primary)' }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* INSTANT SEARCH */}
      <section style={{ maxWidth:820, margin:'0 auto', padding:'44px 24px 8px', textAlign:'center' }}>
        <div style={{ position:'relative' }}>
          <span style={{ position:'absolute', left:22, top:'50%', transform:'translateY(-50%)', color:'var(--text-muted)', pointerEvents:'none' }}><Icon name="search" size={22} /></span>
          <input value={q} onChange={e=>setQ(e.target.value)} onKeyDown={e=>{ if(e.key==='Enter' && matches[0]) go('/tool/'+matches[0].id); }} placeholder="Search 300+ free tools..." aria-label="Search tools" style={{ width:'100%', boxSizing:'border-box', padding:'18px 22px 18px 54px', fontSize:18, fontFamily:'var(--font-body)', color:'var(--text-strong)', background:'var(--bg-card)', border:'2px solid var(--border-color)', borderRadius:'var(--radius-2xl)', boxShadow:'var(--shadow-lg)', outline:'none' }} />
          {q && (
            <div style={{ position:'absolute', top:'calc(100% + 8px)', left:0, right:0, zIndex:20, background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-xl)', boxShadow:'var(--shadow-xl)', overflow:'hidden', textAlign:'left' }}>
              {matches.length ? matches.slice(0,6).map(t => {
                const [bg,fg] = window.FTH.TONE_MAP[t.tone] || ['var(--blue-50)','var(--color-primary)'];
                return (
                  <div key={t.id} onClick={()=>go('/tool/'+t.id)} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 18px', cursor:'pointer', borderBottom:'1px solid var(--border-color)' }} onMouseEnter={e=>e.currentTarget.style.background='var(--bg-page)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <span style={{ display:'grid', placeItems:'center', width:36, height:36, borderRadius:'var(--radius-md)', background:bg, color:fg, flexShrink:0 }}><Icon name={t.icon} size={18} /></span>
                    <div><div style={{ fontFamily:'var(--font-heading)', fontWeight:600, fontSize:15, color:'var(--text-strong)' }}>{t.title}</div><div style={{ fontSize:13, color:'var(--text-muted)' }}>{t.desc}</div></div>
                  </div>
                );
              }) : <div style={{ padding:'18px', color:'var(--text-muted)', fontSize:15 }}>No tools match “{q}”. Try another keyword.</div>}
            </div>
          )}
        </div>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', gap:10, marginTop:18 }}>
          <span style={{ fontSize:14, fontWeight:600, color:'var(--text-muted)' }}>Popular searches:</span>
          {[['Merge PDF','merge-pdf'],['Compress PDF','compress-pdf'],['JPG to PDF','jpg-to-pdf'],['QR Code Generator','qr-generator'],['Image Compressor','image-compressor']].map(p => (
            <button key={p[1]} onClick={()=>go('/tool/'+p[1])} style={{ padding:'7px 14px', fontSize:13.5, fontWeight:600, fontFamily:'var(--font-body)', color:'var(--color-primary)', background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-full)', cursor:'pointer' }}>{p[0]}</button>
          ))}
        </div>
      </section>

      <div style={{ maxWidth:1140, margin:'0 auto', padding:'28px 24px 0' }}><AdSlot label="728 × 90 — Leaderboard" /></div>

      {/* FEATURED — PDF EDITOR */}
      <section style={{ maxWidth:1140, margin:'0 auto', padding:'34px 24px 10px' }}>
        <div className="fth-feat fth-reveal" style={{ display:'grid', gridTemplateColumns:'1.15fr .85fr', gap:32, alignItems:'center', padding:'34px 36px', borderRadius:'var(--radius-2xl, 26px)', background:'var(--gradient-hero)', border:'1px solid var(--border-color)', boxShadow:'var(--shadow-md)' }}>
          <div>
            <span style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'6px 14px', borderRadius:'var(--radius-full)', background:'var(--bg-card)', border:'1px solid var(--border-color)', fontSize:12.5, fontWeight:800, letterSpacing:'.04em', color:'var(--color-primary)', marginBottom:14 }}>
              <Icon name="file-pen" size={14} /> FLAGSHIP TOOL
            </span>
            <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:32, lineHeight:1.12, color:'var(--text-strong)', margin:'0 0 12px', letterSpacing:'-0.02em' }}>Professional Online PDF Editor</h2>
            <p style={{ fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.6, color:'var(--text-muted)', margin:'0 0 20px', maxWidth:520 }}>Edit text and images, add your signature, white-out, annotate and reorder pages — everything runs in your browser, so your documents never leave your device.</p>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <Button variant="primary" size="lg" iconLeft="file-pen" onClick={() => go('/tool/pdf-editor')}>Open PDF Editor</Button>
              <a href="pdf-editor.html" style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'12px 22px', borderRadius:'var(--radius-full)', border:'1px solid var(--border-color)', background:'var(--bg-card)', color:'var(--text-body)', fontFamily:'var(--font-body)', fontWeight:600, fontSize:15 }}>Learn more</a>
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }} className="fth-2col">
            {[['type','Edit text'],['image','Replace images'],['pen','Add signature'],['square','White-out'],['layers','Page manager'],['sun','Annotate']].map(f => (
              <div key={f[1]} style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 14px', borderRadius:'var(--radius-lg)', background:'var(--bg-card)', border:'1px solid var(--border-color)' }}>
                <span style={{ display:'grid', placeItems:'center', width:30, height:30, flexShrink:0, borderRadius:'var(--radius-md)', background:'var(--gradient-brand)', color:'var(--text-on-brand)' }}><Icon name={f[0]} size={15} /></span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:13.5, fontWeight:600, color:'var(--text-body)' }}>{f[1]}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* POPULAR / WORKING TOOLS */}
      <section style={{ background:'var(--gradient-hero)', borderTop:'1px solid var(--border-color)', borderBottom:'1px solid var(--border-color)' }}>
        <div style={{ maxWidth:1140, margin:'0 auto', padding:'48px 24px' }}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:24, flexWrap:'wrap', gap:16 }}>
          <div>
            <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0, letterSpacing:'-0.02em' }}>Ready-to-use tools</h2>
            <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'6px 0 0' }}>Fully functional, right now — drop a file and go.</p>
          </div>
          <div style={{ minWidth:300 }}><Tabs value={cat} onChange={setCat} tabs={tabs} /></div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }} className="fth-tool-grid fth-reveal fth-stagger">
          {popular.map(t => (
            <ToolCard key={t.id} icon={t.icon} tone={t.tone} title={t.title} description={t.desc} badge={t.badge} onClick={() => go('/tool/'+t.id)} />
          ))}
        </div>
        </div>
      </section>

      {/* AI TOOLS */}
      <section style={{ background:'var(--bg-card)', borderTop:'1px solid var(--border-color)', borderBottom:'1px solid var(--border-color)' }}>
        <div style={{ maxWidth:1140, margin:'0 auto', padding:'56px 24px' }}>
          <div style={{ textAlign:'center', marginBottom:36 }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'6px 14px', borderRadius:'var(--radius-full)', background:'var(--gradient-hero)', border:'1px solid var(--border-color)', fontSize:13, fontWeight:700, color:'var(--color-primary)', marginBottom:14 }}><Icon name="sparkles" size={15} /> Powered by AI</span>
            <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>AI writing &amp; SEO tools</h2>
            <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'8px 0 0' }}>Generate titles, descriptions, outlines and more — instantly, free, and right in your browser.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }} className="fth-tool-grid fth-reveal fth-stagger">
            {TOOLS.filter(t => t.cat==='aitools').map(t => (
              <ToolCard key={t.id} icon={t.icon} tone={t.tone} title={t.title} description={t.desc} badge={t.badge} onClick={() => go('/tool/'+t.id)} />
            ))}
          </div>
          <div style={{ textAlign:'center', marginTop:28 }}>
            <Button variant="secondary" size="lg" iconLeft="sparkles" onClick={() => go('/tools/aitools')}>See all AI tools</Button>
          </div>
        </div>
      </section>

      {/* CATEGORY GRID */}
      <section style={{ background:'var(--gradient-hero)', borderTop:'1px solid var(--border-color)', borderBottom:'1px solid var(--border-color)' }}>
        <div style={{ maxWidth:1140, margin:'0 auto', padding:'56px 24px' }}>
          <div style={{ textAlign:'center', marginBottom:36 }}>
            <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>Browse by category</h2>
            <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'8px 0 0' }}>{count} tools across {CATS.length} categories — more shipping every week.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16 }} className="fth-tool-grid fth-reveal fth-stagger">
            {CATS.map(c => {
              const [bg,fg] = window.FTH.TONE_MAP[c.tone];
              const n = TOOLS.filter(t => t.cat===c.id).length;
              return (
                <div key={c.id} onClick={() => go('/tools/'+c.id)} className="fth-cat-card" style={{
                  display:'flex', alignItems:'center', gap:14, padding:18, cursor:'pointer',
                  background:'var(--bg-page)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-xl)',
                  transition:'transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow)',
                }}>
                  <span style={{ width:48, height:48, borderRadius:'var(--radius-lg)', background:bg, color:fg, display:'grid', placeItems:'center', flexShrink:0 }}><Icon name={c.icon} size={24} /></span>
                  <span style={{ minWidth:0 }}>
                    <span style={{ display:'block', fontFamily:'var(--font-heading)', fontWeight:600, fontSize:16, color:'var(--text-strong)' }}>{c.label}</span>
                    <span style={{ display:'block', fontSize:13, color:'var(--text-muted)' }}>{n} tools</span>
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* TOOL COLLECTIONS */}
      <section style={{ background:'var(--bg-card)', borderTop:'1px solid var(--border-color)', borderBottom:'1px solid var(--border-color)' }}>
        <div style={{ maxWidth:1140, margin:'0 auto', padding:'56px 24px' }}>
          <div style={{ textAlign:'center', marginBottom:36 }}>
            <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>Tool collections</h2>
            <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'8px 0 0' }}>Handpicked tools, grouped by what you're working on.</p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }} className="fth-3col">
            {[
              { cat:'pdf', icon:'file-text', tone:'pdf', title:'PDF Collection', items:[['Merge','merge-pdf'],['Split','split-pdf'],['Compress','compress-pdf'],['Rotate','rotate-pdf'],['Unlock','unlock-pdf']] },
              { cat:'image', icon:'image', tone:'image', title:'Image Collection', items:[['JPG to PNG','jpg-to-png'],['Resize','resize-image'],['Compress','image-compressor'],['Crop','crop-image'],['Background Remover','background-remover']] },
              { cat:'video', icon:'video', tone:'video', title:'Video Collection', items:[['Compress','video-compressor'],['Trim','trim-video'],['Convert','video-converter'],['Extract Audio','extract-audio']] },
            ].map(col => {
              const [bg,fg] = window.FTH.TONE_MAP[col.tone] || ['var(--blue-50)','var(--color-primary)'];
              return (
                <div key={col.cat} style={{ display:'flex', flexDirection:'column', padding:24, background:'var(--bg-page)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-2xl)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
                    <span style={{ width:46, height:46, borderRadius:'var(--radius-lg)', background:bg, color:fg, display:'grid', placeItems:'center', flexShrink:0 }}><Icon name={col.icon} size={23} /></span>
                    <h3 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:19, color:'var(--text-strong)', margin:0 }}>{col.title}</h3>
                  </div>
                  <ul style={{ listStyle:'none', margin:'0 0 20px', padding:0, display:'flex', flexDirection:'column', gap:2 }}>
                    {col.items.map(it => (
                      <li key={it[1]}><button onClick={()=>go('/tool/'+it[1])} style={{ display:'flex', alignItems:'center', gap:8, width:'100%', textAlign:'left', padding:'9px 8px', background:'none', border:'none', borderRadius:'var(--radius-md)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-body)' }} onMouseEnter={e=>e.currentTarget.style.background='var(--bg-card)'} onMouseLeave={e=>e.currentTarget.style.background='none'}><Icon name="arrow-right" size={15} />{it[0]}</button></li>
                    ))}
                  </ul>
                  <div style={{ marginTop:'auto' }}><Button variant="secondary" iconRight="arrow-right" onClick={()=>go('/tools/'+col.cat)}>View All {col.title.split(' ')[0]} Tools</Button></div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* WHY CHOOSE US */}
      <section style={{ maxWidth:1140, margin:'0 auto', padding:'60px 24px' }}>
        <div style={{ textAlign:'center', marginBottom:40 }}>
          <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>Why choose FreeToolzHub</h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'8px 0 0' }}>Built to be faster, cleaner and more generous than the paid alternatives.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }} className="fth-3col fth-reveal fth-stagger">
          {[
            ['user-x','No registration','Open any tool and start instantly — no account, no email, no password.'],
            ['shield-check','No watermarks','Your exports come out clean, exactly as you made them. Always.'],
            ['zap','Fast processing','Tools run locally, so results appear in seconds — no upload wait.'],
            ['lock','Secure & private','Files are processed in your browser and never leave your device.'],
            ['smartphone','Works anywhere','Fully responsive — use every tool on phone, tablet or desktop.'],
            ['infinity','Free forever','No trials, no caps, no premium lock. Every tool, always free.'],
          ].map((f,i) => (
            <div key={i} style={{ padding:'26px 24px', background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-2xl)', boxShadow:'var(--shadow-sm)' }}>
              <span style={{ width:48, height:48, borderRadius:'var(--radius-lg)', background:'var(--blue-50)', color:'var(--color-primary)', display:'grid', placeItems:'center', marginBottom:14 }}><Icon name={f[0]} size={24} /></span>
              <h3 style={{ fontFamily:'var(--font-heading)', fontWeight:600, fontSize:18, color:'var(--text-strong)', margin:'0 0 6px' }}>{f[1]}</h3>
              <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)', margin:0, lineHeight:1.6 }}>{f[2]}</p>
            </div>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ maxWidth:1140, margin:'0 auto', padding:'60px 24px' }}>
        <div style={{ textAlign:'center', marginBottom:40 }}>
          <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>From file to finished in seconds</h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', margin:'8px 0 0' }}>Everything runs locally. Your files are never uploaded to a server.</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }} className="fth-3col fth-reveal fth-stagger">
          {steps.map((s,i) => (
            <div key={i} style={{ position:'relative', padding:'30px 26px', background:'var(--bg-card)', border:'1px solid var(--border-color)', borderRadius:'var(--radius-2xl)', boxShadow:'var(--shadow-sm)' }}>
              <span style={{ position:'absolute', top:22, right:26, fontFamily:'var(--font-heading)', fontWeight:800, fontSize:42, color:'var(--bg-subtle)' }}>{i+1}</span>
              <span style={{ width:54, height:54, borderRadius:'var(--radius-lg)', background:'var(--blue-50)', color:'var(--color-primary)', display:'grid', placeItems:'center', marginBottom:16 }}><Icon name={s[0]} size={26} /></span>
              <h3 style={{ fontFamily:'var(--font-heading)', fontWeight:600, fontSize:20, color:'var(--text-strong)', margin:'0 0 8px' }}>{s[1]}</h3>
              <p style={{ fontFamily:'var(--font-body)', fontSize:14.5, color:'var(--text-muted)', margin:0, lineHeight:1.6 }}>{s[2]}</p>
            </div>
          ))}
        </div>
      </section>

      <div style={{ maxWidth:1140, margin:'0 auto', padding:'8px 24px' }}><AdSlot label="970 × 250 — In-content" h={160} /></div>

      {/* STATS */}
      <section style={{ background:'var(--bg-card)', borderTop:'1px solid var(--border-color)', borderBottom:'1px solid var(--border-color)' }}>
        <div style={{ maxWidth:980, margin:'0 auto', padding:'44px 24px', display:'flex', justifyContent:'space-around', gap:24, flexWrap:'wrap' }} className="fth-reveal">
          <Stat value="2.4M+" label="Files processed" />
          <Stat value={count+'+'} label="Free tools" />
          <Stat value="100%" label="Free, no limits" />
          <Stat value="0" label="Watermarks, ever" />
        </div>
      </section>

      {/* FAQ */}
      <div style={{ maxWidth:1140, margin:'0 auto', padding:'56px 24px 0' }}><AdSlot label="728 × 90 — Footer Leaderboard" /></div>
      <section style={{ maxWidth:840, margin:'0 auto', padding:'60px 24px' }}>
        <div style={{ textAlign:'center', marginBottom:32 }}>
          <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:700, fontSize:30, color:'var(--text-strong)', margin:0 }}>Frequently asked questions</h2>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {faqs.map((f,i) => <FaqItem key={i} q={f[0]} a={f[1]} />)}
        </div>
      </section>

      {/* CTA */}
      <section style={{ maxWidth:1140, margin:'0 auto', padding:'0 24px 70px' }}>
        <div style={{ position:'relative', textAlign:'center', padding:'56px 32px', borderRadius:'var(--radius-3xl)', overflow:'hidden', background:'var(--gradient-hero)', border:'1px solid var(--border-color)' }}>
          <h2 style={{ fontFamily:'var(--font-heading)', fontWeight:800, fontSize:38, color:'var(--text-strong)', margin:'0 0 12px', letterSpacing:'-0.02em' }}>Ready to get started?</h2>
          <p style={{ fontFamily:'var(--font-body)', fontSize:17, color:'var(--text-muted)', maxWidth:520, margin:'0 auto 26px' }}>Pick a tool and drop your file. No account, no watermark, no limits.</p>
          <Button variant="primary" size="lg" iconLeft="grid-2x2" onClick={() => go('/tools')}>Explore all tools</Button>
          <div style={{ marginTop:34, paddingTop:28, borderTop:'1px solid var(--border-color)' }}>
            <p style={{ fontFamily:'var(--font-body)', fontSize:14, fontWeight:600, color:'var(--text-muted)', margin:'0 0 14px', letterSpacing:'0.02em' }}>Follow us for new tools & tips</p>
            <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
              {[['twitter','Twitter'],['github','GitHub'],['linkedin','LinkedIn'],['youtube','YouTube'],['instagram','Instagram'],['facebook','Facebook']].map(([s,label]) => (
                <a key={s} href="#" aria-label={label} className="fth-social" style={{ width:46, height:46, borderRadius:'var(--radius-lg)', background:'var(--bg-card)', border:'1px solid var(--border-color)', display:'grid', placeItems:'center', color:'var(--text-body)', transition:'transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base)' }}>
                  <Icon name={s} size={20} />
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.FTHHome = Home;
window.FTHAdSlot = AdSlot;