// Research cards

function Research(){
  const ref = React.useRef(null);
  React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]);
  return (
    <section id="research" ref={ref} className="reveal" data-screen-label="04 Research">
      <style>{`
        .rx-head{display:grid;grid-template-columns:180px 1fr;gap:48px;margin-bottom:44px}
        @media (max-width:820px){.rx-head{grid-template-columns:1fr;gap:16px}}
        .rx-title{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
        .rx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
        @media (max-width:780px){.rx-grid{grid-template-columns:1fr}}
        .rx-card{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px;transition:background .2s}
        .rx-card:hover{background:var(--bg-1)}
        .rx-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--fg-ghost)}
        .rx-t{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
        .rx-scope{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.04em}
        .rx-methods{display:flex;flex-wrap:wrap;gap:6px}
        .rx-method{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim);padding:3px 8px;border:1px solid var(--line);border-radius:3px;letter-spacing:.02em}
        .rx-tool{font-family:var(--font-mono);font-size:11px;color:var(--fg-mute);margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);display:flex;justify-content:space-between}
      `}</style>
      <div className="wrap">
        <div className="rx-head">
          <div className="eyebrow">/ 03 · Academic</div>
          <div>
            <h2 className="rx-title">Research papers,<br/>econometric depth.</h2>
          </div>
        </div>
        <div className="rx-grid">
          {RESEARCH.map((r,i)=>(
            <article className="rx-card" key={i}>
              <span className="rx-num">PAPER · 0{i+1}</span>
              <h3 className="rx-t">{r.title}</h3>
              <div className="rx-scope">{r.scope}</div>
              <div className="rx-methods">
                {r.methods.map(m => <span className="rx-method" key={m}>{m}</span>)}
              </div>
              <div className="rx-tool">
                {r.tool && <span>Tool · {r.tool}</span>}
                {r.source && <span>Data · {r.source}</span>}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Research });