// Skills & stack — visual grouped grid

function Stack(){
  const ref = React.useRef(null);
  React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]);
  return (
    <section id="stack" ref={ref} className="reveal" data-screen-label="05 Stack">
      <style>{`
        .sk-head{display:grid;grid-template-columns:180px 1fr;gap:48px;margin-bottom:40px}
        @media (max-width:820px){.sk-head{grid-template-columns:1fr;gap:16px}}
        .sk-title{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
        .sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        @media (max-width:980px){.sk-grid{grid-template-columns:repeat(2,1fr)}}
        @media (max-width:540px){.sk-grid{grid-template-columns:1fr}}
        .sk-card{border:1px solid var(--line);border-radius:8px;padding:20px 20px 18px;background:var(--bg-1);transition:border-color .2s,transform .2s;position:relative}
        .sk-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
        .sk-card::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(to right,var(--accent),transparent);opacity:.35}
        .sk-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
        .sk-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--fg-mute);text-transform:uppercase}
        .sk-n{font-family:var(--font-mono);font-size:10px;color:var(--accent)}
        .sk-items{display:flex;flex-wrap:wrap;gap:6px}
        .sk-item{font-size:13px;padding:5px 10px;border:1px solid var(--line);border-radius:5px;color:var(--fg);background:rgba(255,255,255,.02);transition:all .2s}
        .sk-item:hover{border-color:var(--accent);color:var(--accent)}
      `}</style>
      <div className="wrap">
        <div className="sk-head">
          <div className="eyebrow">/ 04 · Stack</div>
          <div>
            <h2 className="sk-title">Tools of the trade.</h2>
          </div>
        </div>
        <div className="sk-grid">
          {STACK.map(s => (
            <div className="sk-card" key={s.group}>
              <div className="sk-head-row">
                <span className="sk-h">{s.group}</span>
                <span className="sk-n">/{String(s.items.length).padStart(2,'0')}</span>
              </div>
              <div className="sk-items">
                {s.items.map(it => <span className="sk-item" key={it}>{it}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stack });