// M06 — Tools directory: index + detail page
const ToolsIndex = ({ setPage, openTool }) => {
  const [tag, setTag] = React.useState('All');
  const [pricing, setPricing] = React.useState('All');
  const tags = ['All','Performance','SEO','AI','Marketing','Design','Payments'];
  const pricings = ['All','Free','Paid'];
  const filtered = TOOLS.filter(t =>
    (tag==='All' || t.tag===tag) &&
    (pricing==='All' || (pricing==='Free' ? t.price==='Free' : t.price!=='Free'))
  );

  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 60px', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div aria-hidden style={{position:'absolute', top:-200, right:-100, width:600, height:600, background:'radial-gradient(circle, rgba(212,255,58,0.06), transparent 60%)', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:32,flexWrap:'wrap',gap:24}}>
            <div className="eyebrow"><span className="dot"/>The Atoms Tools · {TOOLS.length} live</div>
            <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>NEW EVERY FRIDAY · W18 / 2026</div>
          </div>
          <h1 style={{fontSize:'clamp(48px,8vw,120px)', lineHeight:0.92, letterSpacing:'-0.045em', fontWeight:500, marginBottom:28, maxWidth:1100}}>
            Small, <span className="serif" style={{color:'var(--accent)'}}>sharp</span> tools for builders.
          </h1>
          <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', maxWidth:720}}>
            One new utility every Friday — most free, a few paid. Built to scratch our own itches; left in the open for everyone who builds for the web.
          </p>

          {/* This week banner */}
          <div style={{marginTop:48, padding:'24px 28px', borderRadius:'var(--radius)', border:'1px solid var(--accent)', background:'linear-gradient(135deg, rgba(212,255,58,0.08), transparent 70%)', display:'grid', gridTemplateColumns:'auto 1fr auto', gap:24, alignItems:'center'}}>
            <span style={{padding:'5px 10px',borderRadius:6,background:'var(--accent)',color:'#0a0a0a',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,letterSpacing:'0.04em'}}>● LIVE THIS WEEK</span>
            <div>
              <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:4}}>WEEK 18 · {TOOLS[0].tag.toUpperCase()}</div>
              <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.02em'}}>{TOOLS[0].name} — {TOOLS[0].desc}</div>
            </div>
            <button onClick={()=>openTool(TOOLS[0])} className="btn btn-primary" style={{padding:'10px 16px',fontSize:13}}>Open tool {Icon.arrow()}</button>
          </div>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{padding:'32px 0 20px', position:'sticky', top:68, zIndex:30, background:'rgba(10,10,10,0.85)', backdropFilter:'blur(18px)', borderBottom:'1px solid var(--line)'}}>
        <div className="container" style={{display:'flex',gap:24,alignItems:'center',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginRight:6}}>TAG</span>
            <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
              {tags.map(t => (
                <button key={t} onClick={()=>setTag(t)} style={{
                  padding:'5px 10px',borderRadius:6,fontSize:12,
                  background: tag===t ? 'rgba(255,255,255,0.06)' : 'transparent',
                  color: tag===t ? 'var(--ink)' : 'var(--ink-3)',
                  border:'1px solid', borderColor: tag===t ? 'var(--line-2)' : 'transparent'
                }}>{t}</button>
              ))}
            </div>
          </div>
          <div style={{width:1,height:24,background:'var(--line)'}}/>
          <div style={{display:'flex',alignItems:'center',gap:8}}>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginRight:6}}>PRICE</span>
            <div style={{display:'flex',gap:4}}>
              {pricings.map(p => (
                <button key={p} onClick={()=>setPricing(p)} style={{
                  padding:'5px 10px',borderRadius:6,fontSize:12,
                  background: pricing===p ? 'rgba(255,255,255,0.06)' : 'transparent',
                  color: pricing===p ? 'var(--ink)' : 'var(--ink-3)',
                  border:'1px solid', borderColor: pricing===p ? 'var(--line-2)' : 'transparent'
                }}>{p}</button>
              ))}
            </div>
          </div>
          <div style={{flex:1}}/>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{filtered.length} TOOLS</span>
        </div>
      </section>

      {/* Tools grid */}
      <section style={{padding:'48px 0 80px'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(320px,1fr))',gap:18}}>
            {filtered.concat(filtered).concat(filtered).slice(0,15).map((t,i) => (
              <button key={i} onClick={()=>openTool(t)} className="card clickable" style={{padding:'24px 26px',textAlign:'left',display:'flex',flexDirection:'column',gap:14,minHeight:220}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                  <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>T.{String(i+1).padStart(2,'0')} · {t.week}</span>
                  <div style={{display:'flex',gap:5}}>
                    {t.new && i < 3 && <Tag accent>New</Tag>}
                    <Tag>{t.tag}</Tag>
                  </div>
                </div>
                <h3 style={{fontSize:20,letterSpacing:'-0.02em',fontWeight:500,lineHeight:1.2,marginTop:8}}>{t.name}</h3>
                <p style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.5,flex:1}}>{t.desc}</p>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:16,borderTop:'1px solid var(--line)'}}>
                  <span style={{fontSize:13,fontWeight:500,color: t.price==='Free' ? 'var(--ink-2)' : 'var(--accent)'}}>{t.price}</span>
                  <div style={{display:'flex',alignItems:'center',gap:14,fontSize:11,color:'var(--ink-3)'}}>
                    <span className="mono" style={{letterSpacing:'0.04em'}}>{(2847 - i*340).toLocaleString()} users</span>
                    <span>{Icon.arrow()}</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Roadmap */}
      <section style={{padding:'60px 0', borderTop:'1px solid var(--line)', background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:32,flexWrap:'wrap',gap:16}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}><span className="dot"/>Coming soon</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)',letterSpacing:'-0.03em',fontWeight:500}}>What's shipping next.</h2>
            </div>
            <button className="btn btn-ghost" style={{padding:'8px 14px',fontSize:12}}>Suggest a tool ↗</button>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14}}>
            {[
              ['W19','Color Contrast Pro','Accessibility','Free'],
              ['W20','Sitemap Visualizer','SEO','Free'],
              ['W21','Eval Studio','AI','$19/mo'],
              ['W22','Edge Config Inspector','Performance','Free'],
            ].map(([w,n,t,pr]) => (
              <div key={w} style={{padding:'20px 22px',borderRadius:10,border:'1px dashed var(--line-2)',background:'rgba(255,255,255,0.02)'}}>
                <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>WEEK {w.slice(1)} · ROADMAP</div>
                <div style={{fontSize:16,fontWeight:500,marginBottom:6,letterSpacing:'-0.01em'}}>{n}</div>
                <div style={{display:'flex',gap:8,fontSize:12,color:'var(--ink-3)'}}>
                  <span>{t}</span><span>·</span><span>{pr}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

const ToolDetail = ({ tool, setPage }) => {
  const t = tool || TOOLS[0];
  return (
    <div className="page">
      {/* Hero */}
      <section style={{padding:'56px 0 40px', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div aria-hidden style={{position:'absolute', top:-200, right:-100, width:600, height:600, background:'radial-gradient(circle, rgba(212,255,58,0.08), transparent 60%)', filter:'blur(40px)'}}/>
        <div className="container" style={{position:'relative'}}>
          <button onClick={()=>setPage('tools')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:32,display:'inline-flex'}}>← ALL TOOLS</button>
          <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48,alignItems:'flex-start'}}>
            <div>
              <div style={{display:'flex',gap:8,marginBottom:24}}>
                <Tag>{t.tag}</Tag>
                <Tag>{t.week}</Tag>
                {t.new && <Tag accent>New</Tag>}
              </div>
              <h1 style={{fontSize:'clamp(44px,6.4vw,84px)',lineHeight:0.95,letterSpacing:'-0.04em',fontWeight:500,marginBottom:24}}>
                {t.name}
              </h1>
              <p style={{fontSize:'clamp(18px,1.8vw,24px)',lineHeight:1.45,color:'var(--ink-2)',marginBottom:32,letterSpacing:'-0.005em'}}>
                {t.desc}
              </p>
              <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
                <button className="btn btn-primary">Open tool {Icon.arrow()}</button>
                <button className="btn btn-ghost">Read the docs</button>
                <button className="btn btn-ghost">★ Star on GitHub</button>
              </div>
            </div>

            {/* Pricing card */}
            <div className="card" style={{padding:'28px 32px'}}>
              <div className="mono" style={{fontSize:10,color: t.price==='Free' ? 'var(--ok)' : 'var(--accent)',letterSpacing:'0.08em',marginBottom:16}}>
                ● {t.price==='Free' ? 'FREE FOREVER' : 'PREMIUM'}
              </div>
              <div style={{fontSize:42,fontWeight:500,letterSpacing:'-0.025em',marginBottom:6}}>
                {t.price === 'Free' ? '$0' : t.price.split('/')[0]}
                <span style={{fontSize:16,color:'var(--ink-3)',marginLeft:6}}>{t.price === 'Free' ? '' : '/ month'}</span>
              </div>
              <div style={{fontSize:13,color:'var(--ink-3)',marginBottom:22}}>{t.price==='Free' ? 'Use the whole tool, no account required.' : '7-day free trial. Cancel anytime.'}</div>
              <div style={{display:'flex',flexDirection:'column',gap:8,paddingTop:18,borderTop:'1px solid var(--line)'}}>
                {[
                  ['Unlimited runs',true],
                  ['Export results',true],
                  ['API access', t.price !== 'Free'],
                  ['Team workspaces', t.price !== 'Free'],
                  ['Priority support', t.price !== 'Free'],
                ].map(([l,on]) => (
                  <div key={l} style={{display:'flex',alignItems:'center',gap:10,fontSize:13,color: on ? 'var(--ink-2)' : 'var(--ink-4)'}}>
                    <span style={{color: on ? 'var(--accent)' : 'var(--ink-4)'}}>{on ? Icon.check() : '○'}</span>
                    <span style={{textDecoration: on ? 'none' : 'line-through'}}>{l}</span>
                  </div>
                ))}
              </div>
              {t.price !== 'Free' && (
                <button className="btn btn-primary" style={{width:'100%',justifyContent:'center',marginTop:18}}>Start free trial</button>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Live demo strip */}
      <section style={{padding:'40px 0',borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div style={{borderRadius:'var(--radius)',border:'1px solid var(--line)',background:'var(--bg-2)',overflow:'hidden'}}>
            <div style={{padding:'12px 16px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
              <span className="mono" style={{fontSize:11,color:'var(--ink-3)',marginLeft:10}}>atoms.tools / {t.id}</span>
              <div style={{flex:1}}/>
              <span className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em'}}>● LIVE</span>
            </div>
            <div style={{padding:'40px 48px',display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
              {/* Input */}
              <div>
                <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>INPUT</div>
                <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',fontFamily:'var(--mono)',fontSize:13,color:'var(--ink-2)',marginBottom:14}}>
                  https://example.com/landing
                </div>
                <div style={{padding:'14px 16px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',fontFamily:'var(--mono)',fontSize:13,color:'var(--ink-2)'}}>
                  https://example.com/landing?v=2
                </div>
                <button className="btn btn-primary" style={{marginTop:14,padding:'10px 14px',fontSize:13}}>Run diff {Icon.arrow()}</button>
              </div>

              {/* Output */}
              <div>
                <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:10}}>● RESULT</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                  {[['Performance','58','94','+36'],['SEO','82','100','+18'],['A11y','71','92','+21'],['Best','79','97','+18']].map(([m,a,b,d]) => (
                    <div key={m} style={{padding:'12px 14px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
                      <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:6}}>{m.toUpperCase()}</div>
                      <div style={{display:'flex',alignItems:'baseline',gap:6,fontFamily:'var(--mono)'}}>
                        <span style={{fontSize:11,color:'var(--ink-3)'}}>{a}</span>
                        <span style={{fontSize:11,color:'var(--ink-3)'}}>→</span>
                        <span style={{fontSize:18,color:'var(--accent)',fontWeight:600}}>{b}</span>
                      </div>
                      <div className="mono" style={{fontSize:10,color:'var(--ok)',marginTop:4}}>{d} pts</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section style={{padding:'80px 0'}}>
        <div className="container">
          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:48,marginBottom:32}}>
            <div className="eyebrow"><span className="dot"/>Features</div>
            <h2 style={{fontSize:'clamp(28px,3.6vw,44px)',letterSpacing:'-0.03em',fontWeight:500,maxWidth:720}}>
              Built around four things.
            </h2>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            {[
              ['01','Side-by-side runs','Compare two URLs or two commits. See exactly which metric moved, by how much, and what changed in the trace.'],
              ['02','Trace diff','Frame-by-frame waterfall diff. Click any bar to see the request, the response, and the size delta.'],
              ['03','CI integration','Drop a single GitHub Action into your repo. Every PR gets a Lighthouse score on every page that changed.'],
              ['04','History timeline','Every run is saved. Scrub through your perf history and pinpoint the commit that tanked your Largest Contentful Paint.'],
            ].map(([n,t2,d]) => (
              <div key={n} style={{padding:'32px 36px',background:'var(--bg-2)',display:'flex',flexDirection:'column',gap:14}}>
                <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.06em'}}>F.{n}</div>
                <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.02em',lineHeight:1.2}}>{t2}</div>
                <div style={{fontSize:14,color:'var(--ink-2)',lineHeight:1.55}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Changelog + Stats */}
      <section style={{padding:'40px 0 80px'}}>
        <div className="container" style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:24}}>
          <div className="card" style={{padding:'28px 32px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:18}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>CHANGELOG</div>
              <button className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em'}}>SUBSCRIBE TO RSS</button>
            </div>
            {[
              ['v1.2.0','Added CI integration via GitHub Action','May 9'],
              ['v1.1.0','Trace diff and waterfall visualization','Apr 22'],
              ['v1.0.1','Bug fixes for cold-start measurements','Apr 14'],
              ['v1.0.0','Initial release','Apr 5'],
            ].map(([v,m,d],i) => (
              <div key={v} style={{display:'grid',gridTemplateColumns:'90px 1fr 100px',gap:18,padding:'14px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none',alignItems:'center'}}>
                <span className="mono" style={{fontSize:12,color:'var(--accent)',letterSpacing:'0.04em'}}>{v}</span>
                <span style={{fontSize:13,color:'var(--ink-2)'}}>{m}</span>
                <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{d}</span>
              </div>
            ))}
          </div>
          <div className="card" style={{padding:'28px 32px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:18}}>USAGE</div>
            {[
              ['Active users','2,847'],
              ['Runs this month','38,124'],
              ['Avg score lift','+22'],
              ['GitHub stars','1.4k'],
            ].map(([l,v],i) => (
              <div key={l} style={{display:'flex',justifyContent:'space-between',padding:'12px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
                <span style={{fontSize:13,color:'var(--ink-3)'}}>{l}</span>
                <span style={{fontSize:14,fontWeight:500,color:'var(--ink)'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ToolsIndex, ToolDetail });