/* Matter Protocol — Section 04 "Primitive library" */

function PrimitiveLibrary() {
  const t = window.matterTokens;
  const all = [];
  Object.entries(window.PRIMITIVES).forEach(([cat, list]) => {
    list.forEach(p => all.push({ ...p, cat }));
  });

  const pip = { entry: t.pipEntry, risk: t.pipRisk, rebalance: t.pipRebal, exit: t.pipExit };

  const [filter, setFilter] = React.useState('all');
  const shown = filter === 'all' ? all : all.filter(p => p.cat === filter);

  const filters = [
    { key: 'all',       label: 'all',       count: all.length, pip: null },
    { key: 'entry',     label: 'entry',     count: window.PRIMITIVES.entry.length,     pip: t.pipEntry },
    { key: 'risk',      label: 'risk',      count: window.PRIMITIVES.risk.length,      pip: t.pipRisk  },
    { key: 'rebalance', label: 'rebalance', count: window.PRIMITIVES.rebalance.length, pip: t.pipRebal },
    { key: 'exit',      label: 'exit',      count: window.PRIMITIVES.exit.length,      pip: t.pipExit  },
  ];

  return (
    <section id="primitives-section" style={{ padding: '120px 80px', background: t.bg, borderTop: `1px solid ${t.line}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 40, marginBottom: 36,
        }}>
          <SectionHead
            num="04"
            eyebrow="primitive library"
            title="every primitive is a one-line import."
            sub="the first cut. opinionated, typed, tested. new primitives ship as packages — semver, audit log, the works."
          />

          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: 480, justifyContent: 'flex-end' }}>
            {filters.map(f => {
              const active = filter === f.key;
              return (
                <button key={f.key} onClick={() => setFilter(f.key)} style={{
                  background: active ? t.ink : t.paper,
                  color: active ? t.bg : t.ink2,
                  border: `1px solid ${active ? t.ink : t.line2}`,
                  padding: '7px 12px',
                  borderRadius: 999,
                  fontSize: 13,
                  fontWeight: 500,
                  fontFamily: "'Geist', sans-serif",
                  letterSpacing: '-0.005em',
                  cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 7,
                }}>
                  {f.pip && <span style={{ width: 7, height: 7, borderRadius: 1.5, background: f.pip }} />}
                  {f.label}
                  <span style={{
                    fontFamily: "'Geist Mono', monospace",
                    fontSize: 10.5,
                    color: active ? 'rgba(244,241,234,0.6)' : t.muted,
                  }}>{f.count}</span>
                </button>
              );
            })}
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 12,
        }}>
          {shown.map((p) => (
            <div key={p.name} style={{
              background: t.paper,
              border: `1px solid ${t.line}`,
              borderRadius: 12,
              padding: 18,
              display: 'flex',
              flexDirection: 'column',
              gap: 8,
              minHeight: 160,
              position: 'relative',
              transition: 'all 0.15s ease',
              cursor: 'pointer',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.line3; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.line; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{
                  width: 10, height: 10, borderRadius: 2, background: pip[p.cat],
                }} />
                <span style={{
                  fontFamily: "'Geist Mono', monospace",
                  fontSize: 10,
                  textTransform: 'uppercase',
                  letterSpacing: '0.1em',
                  color: t.muted,
                }}>{p.cat}</span>
              </div>
              <div style={{
                fontFamily: "'Geist Mono', monospace",
                fontSize: 16,
                color: t.ink,
                letterSpacing: '-0.005em',
                marginTop: 4,
              }}>{p.name}</div>
              <p style={{
                margin: 0,
                fontSize: 13,
                lineHeight: 1.45,
                color: t.muted,
              }}>{p.desc}</p>
              <div style={{
                marginTop: 'auto',
                paddingTop: 10,
                borderTop: `1px dashed ${t.line}`,
                fontFamily: "'Geist Mono', monospace",
                fontSize: 10.5,
                color: t.soft,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span>v0.3.{Math.floor(Math.random() * 7) + 1}</span>
                <span>↗ source</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 24,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 14,
          color: t.muted,
          fontFamily: "'Geist Mono', monospace",
          fontSize: 13,
        }}>
          <span style={{ flex: 1, height: 1, background: t.line, maxWidth: 140 }} />
          <span>publish your own primitive →</span>
          <span style={{ flex: 1, height: 1, background: t.line, maxWidth: 140 }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PrimitiveLibrary });