// ui_kits/site/WorkList.jsx — projects index, with view-on-hover preview.
const WORK = [
  { id: 'signal',   title: 'signal',     desc: 'a tiny webgl sketchpad. drag to draw with light.',  meta: '2024 · webgl · three',   accent: 'oklch(67% 0.245 35)' },
  { id: 'tidepool', title: 'tidepool',   desc: 'physics playground. springs all the way down.',     meta: '2025 · matter.js · canvas', accent: 'oklch(82% 0.220 195)' },
  { id: 'broadcast',title: 'broadcast',  desc: 'a slow social network. one post per day.',          meta: '2023 · remix · sqlite',  accent: 'oklch(72% 0.230 12)' },
  { id: 'paper',    title: 'paper',      desc: 'markdown editor that feels like writing on paper.', meta: '2024 · tauri · rust',    accent: 'oklch(68% 0.310 320)' },
  { id: 'lattice',  title: 'lattice',    desc: 'css demo: anchor-positioned grid with :has().',     meta: '2025 · css',             accent: 'oklch(88% 0.270 135)' },
];

const WorkList = () => {
  return (
    <section className="koa-work wrap">
      <header className="work-h">
        <span className="t-eyebrow">→ selected work</span>
        <h2 className="work-title">a few side projects.<br/><em>probably overengineered.</em></h2>
      </header>
      <ol className="work-list">
        {WORK.map((p, i) => (
          <li key={p.id} className="work-item" data-hot style={{ '--row-accent': p.accent }}>
            <span className="work-idx">{String(i + 1).padStart(2, '0')}</span>
            <span className="work-title-row">{p.title}<span className="work-end">.</span></span>
            <span className="work-desc">{p.desc}</span>
            <span className="work-meta">{p.meta}</span>
            <span className="work-arrow">→</span>
            <span className="work-bleed" aria-hidden="true" />
          </li>
        ))}
      </ol>
      <style>{`
        .koa-work { padding: clamp(64px, 12vh, 140px) 0 var(--s-8); }
        .work-h { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-7); }
        .work-title {
          font-family: var(--font-display); font-weight: 700; font-weight: 400;
          font-size: clamp(36px, 5vw, 64px); line-height: 1; margin: 0; letter-spacing: -0.03em;
        }
        .work-title em { color: var(--fg-muted); }
        .work-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
        .work-item {
          display: grid;
          grid-template-columns: 60px 1.2fr 2fr 1fr 40px;
          align-items: baseline;
          gap: var(--s-4);
          padding: var(--s-5) var(--s-3);
          border-bottom: 1px solid var(--border);
          position: relative;
          transition: padding-left 280ms var(--ease-out), color 220ms var(--ease-out);
          overflow: hidden;
        }
        .work-item:hover { padding-left: var(--s-5); }
        .work-bleed {
          position: absolute; inset: 0; pointer-events: none; opacity: 0;
          background: linear-gradient(90deg, var(--row-accent), transparent 60%);
          mix-blend-mode: multiply;
          transition: opacity 280ms var(--ease-out);
          z-index: -1;
        }
        :root[data-mode="abyss"] .work-bleed,
        :root[data-mode="plasma"] .work-bleed { mix-blend-mode: screen; }
        .work-item:hover .work-bleed { opacity: 0.22; }
        .work-idx {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
          color: var(--fg-faint);
        }
        .work-title-row {
          font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.5vw, 48px);
          line-height: 1; letter-spacing: -0.03em;
        }
        .work-title-row .work-end { color: var(--row-accent); }
        .work-desc { color: var(--fg-muted); font-size: 14px; max-width: 36ch; }
        .work-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
        .work-arrow {
          font-family: var(--font-sans); font-size: 22px; text-align: right;
          transition: transform 280ms var(--ease-warrior), color 220ms var(--ease-out);
          color: var(--fg-faint);
        }
        .work-item:hover .work-arrow { transform: translateX(8px); color: var(--row-accent); }
        @media (max-width: 720px) {
          .work-item { grid-template-columns: 40px 1fr 30px; }
          .work-desc, .work-meta { display: none; }
        }
      `}</style>
    </section>
  );
};

window.WorkList = WorkList;