// Tools section
const Tools = () => {
  return (
    <Section
      id="tools"
      label="04 / Tools"
      kicker="A new tool every Friday"
      title="Small, sharp tools for builders."
      subtitle="We ship one new utility a week — most free, a few paid. Built to scratch our own itches; left in the open for everyone."
    >
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:24}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <span style={{padding:'6px 12px',background:'rgba(212,255,58,0.1)',border:'1px solid rgba(212,255,58,0.3)',borderRadius:6}}>
            <span className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.06em'}}>● LIVE THIS WEEK</span>
          </span>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>W18 · LIGHTHOUSE DIFF</span>
        </div>
        <button className="btn btn-ghost" style={{padding:'8px 14px',fontSize:13}}>Browse all 42 tools {Icon.arrow()}</button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:24}}>
        {/* Hero tool */}
        <FeaturedTool/>

        {/* Tool grid */}
        <div style={{display:'grid',gridTemplateRows:'auto auto',gap:24}}>
          {TOOLS.slice(1,3).map(t => <ToolCard key={t.id} t={t}/>)}
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:24,marginTop:24}}>
        {TOOLS.slice(3).map(t => <ToolCard key={t.id} t={t} small/>)}
      </div>
    </Section>
  );
};

const FeaturedTool = () => {
  const t = TOOLS[0];
  return (
    <div className="card" style={{padding:0, overflow:'hidden', display:'grid', gridTemplateRows:'1fr auto'}}>
      <div style={{position:'relative',padding:'32px 36px',background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent 60%)',minHeight:280}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:20}}>
          <div style={{display:'flex',gap:8}}>
            <Tag accent>New · {t.week}</Tag>
            <Tag>{t.tag}</Tag>
            <Tag>{t.price}</Tag>
          </div>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>T.42</span>
        </div>
        <h3 style={{fontSize:34,letterSpacing:'-0.025em',fontWeight:500,marginBottom:14,lineHeight:1.05}}>{t.name}</h3>
        <p style={{color:'var(--ink-2)',fontSize:16,lineHeight:1.5,maxWidth:480,marginBottom:24}}>{t.desc}</p>

        {/* mock UI */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginTop:24}}>
          {[['Before','58'],['After','94']].map(([k,v],i)=>(
            <div key={k} style={{padding:'14px 16px', borderRadius:8, border:'1px solid var(--line)', background:'rgba(0,0,0,0.3)'}}>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:6}}>{k.toUpperCase()}</div>
              <div style={{display:'flex',alignItems:'baseline',gap:8}}>
                <div style={{fontSize:32,fontWeight:500,letterSpacing:'-0.02em',color: i===0 ? 'var(--ink)' : 'var(--accent)'}}>{v}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)'}}>/ 100</div>
              </div>
              <div style={{height:4,background:'var(--bg-3)',borderRadius:2,overflow:'hidden',marginTop:10}}>
                <div style={{width:`${v}%`,height:'100%',background: i===0 ? 'var(--ink-3)' : 'var(--accent)',transition:'width .4s ease'}}/>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{padding:'18px 36px',borderTop:'1px solid var(--line)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>USED BY 2,847 BUILDERS</span>
        <button className="btn btn-primary" style={{padding:'10px 16px',fontSize:13}}>Open tool {Icon.arrow()}</button>
      </div>
    </div>
  );
};

const ToolCard = ({ t, small }) => (
  <div className="card clickable" style={{padding: small ? 20 : 24, display:'flex',flexDirection:'column',gap:14, minHeight: small ? 180 : 200}}>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
        <Tag>{t.tag}</Tag>
        {t.price === 'Free' ? <Tag>Free</Tag> : <span style={{padding:'4px 9px',borderRadius:6,fontFamily:'var(--mono)',fontSize:10,letterSpacing:'0.04em',color:'#0a0a0a',background:'var(--accent)'}}>{t.price.toUpperCase()}</span>}
      </div>
      <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{t.week}</span>
    </div>
    <h4 style={{fontSize: small ? 18 : 20, letterSpacing:'-0.015em', fontWeight:500, lineHeight:1.15}}>{t.name}</h4>
    <p style={{color:'var(--ink-3)',fontSize:13,lineHeight:1.5,flex:1}}>{t.desc}</p>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:14,borderTop:'1px solid var(--line)'}}>
      <span className="mono" style={{fontSize:11,color:'var(--ink-2)'}}>Open →</span>
      <span style={{color:'var(--ink-3)'}}>{Icon.arrow()}</span>
    </div>
  </div>
);

window.Tools = Tools;