/* ResearchList.jsx — editorial table of research entries.
 *
 * Add, remove, or edit entries by changing the RESEARCH array below.
 * Each entry: { id, title, summary, tag, date }
 *   tag examples: PAPER, DRAFT, NOTE, MEMO
 */

const RESEARCH = [
  {
    id: "01",
    title: "Settlement assurance under congestion",
    summary: "Empirical study of block-space contention and its effect on transaction-ordering markets. Includes fee model and MEV sensitivity analysis.",
    tag: "PAPER",
    date: "2026 · 04",
  },
  {
    id: "02",
    title: "Re-staking primitives for yield infrastructure",
    summary: "Inventory of slashing surfaces and operator concentration risks across the dominant re-staking protocols. With recommendations.",
    tag: "DRAFT",
    date: "2026 · 03",
  },
  {
    id: "03",
    title: "On-chain credit: collateral velocity",
    summary: "Capital efficiency improvements when settlement latency drops below one block. Quantitative model and benchmarks.",
    tag: "NOTE",
    date: "2026 · 02",
  },
  {
    id: "04",
    title: "Zonda research agenda 2026",
    summary: "Statement of work for the year. Four streams, twelve milestones, four planned publications.",
    tag: "MEMO",
    date: "2026 · 01",
  },
];

function ResearchList({ onOpen = () => {} }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="research" style={{ padding: "112px 96px", background: "var(--paper)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline",
                    marginBottom: 56, borderBottom: "1px solid var(--ink-faint)",
                    paddingBottom: 20 }}>
        <h2 style={{ margin: 0, fontFamily: "var(--title)", fontWeight: 500, fontSize: 36,
                     letterSpacing: "0.22em", paddingLeft: "0.22em",
                     textTransform: "uppercase", color: "var(--ink)" }}>
          Research
        </h2>
        <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.32em",
                       color: "var(--ink-dim)", textTransform: "uppercase" }}>
          {RESEARCH.length} · ENTRIES
        </span>
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex",
                   flexDirection: "column" }}>
        {RESEARCH.map((r, i) => (
          <li key={r.id}
              onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
              onClick={() => onOpen(r)}
              style={{ display: "grid", gridTemplateColumns: "60px 90px 1fr 120px",
                       gap: 32, padding: "28px 0",
                       borderBottom: "1px solid var(--ink-faint)",
                       cursor: "pointer",
                       color: hover === i ? "var(--terra-deep)" : "var(--ink)",
                       transition: "color .15s" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.18em",
                           color: "var(--ink-dim)" }}>{r.id}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.28em",
                           color: "var(--terra-deep)", textTransform: "uppercase",
                           alignSelf: "start", marginTop: 6 }}>{r.tag}</span>
            <div>
              <h3 style={{ margin: 0, fontFamily: "var(--title)", fontWeight: 500,
                           fontSize: 22, letterSpacing: "0.01em", lineHeight: 1.3,
                           color: "inherit" }}>{r.title}</h3>
              <p style={{ margin: "8px 0 0", fontFamily: "var(--display)", fontSize: 14,
                          lineHeight: 1.5, color: "var(--ink-dim)", maxWidth: 640,
                          textWrap: "pretty" }}>{r.summary}</p>
            </div>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em",
                           color: "var(--ink-dim)", textAlign: "right", marginTop: 6 }}>
              {r.date}
            </span>
          </li>
        ))}
      </ul>
    </section>
  );
}

Object.assign(window, { ResearchList, RESEARCH });