/* Matter Protocol — hero shared atoms (Nav, Mark, tokens) */

const matterTokens = {
  bg: '#F4F1EA',
  surface: '#FBF9F4',
  paper: '#FFFFFF',
  ink: '#14130F',
  ink2: '#2E2C27',
  muted: '#6A6760',
  soft: '#98948B',
  line: 'rgba(20, 19, 15, 0.09)',
  line2: 'rgba(20, 19, 15, 0.16)',
  line3: 'rgba(20, 19, 15, 0.28)',
  lime: '#C8EE2C',
  limeDeep: '#A8CC1E',
  limeWash: 'rgba(200, 238, 44, 0.18)',
  limeTint: 'rgba(200, 238, 44, 0.08)',
  pipEntry: '#A8CC1E',
  pipRisk: '#E07A3A',
  pipRebal: '#3F8FE0',
  pipExit: '#14130F',
};

function MatterMark({ size = 20, gap = 2.2, accent = matterTokens.limeDeep, ink = matterTokens.ink }) {
  const cell = (size - gap) / 2;
  return (
    <div style={{
      width: size, height: size, display: 'grid',
      gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap,
      flex: 'none',
    }}>
      <span style={{ background: ink, borderRadius: 1.5 }} />
      <span style={{ background: ink, borderRadius: 1.5 }} />
      <span style={{ background: accent, borderRadius: 1.5 }} />
      <span style={{ background: ink, borderRadius: 1.5 }} />
    </div>
  );
}

function MatterNav({ tone = 'light' }) {
  const linkStyle = {
    color: matterTokens.ink2,
    fontSize: 13.5,
    textDecoration: 'none',
    fontWeight: 400,
    letterSpacing: '-0.005em',
    cursor: 'pointer',
  };
  const scrollTo = (sel) => (e) => {
    e.preventDefault();
    const el = document.querySelector(sel);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const openAccess = (e) => { e.preventDefault(); window.matterUI?.openAccess?.(); };
  const openNotice = (k) => (e) => { e.preventDefault(); window.matterUI?.openNotice?.(k); };
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 40px',
      borderBottom: `1px solid ${matterTokens.line}`,
    }}>
      <a href="#top" onClick={scrollTo('body')} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <MatterMark size={18} />
        <span style={{
          fontSize: 15, color: matterTokens.ink, letterSpacing: '-0.01em', fontWeight: 500,
        }}>
          matterprotocol<span style={{ color: matterTokens.soft }}>.xyz</span>
        </span>
      </a>
      <nav style={{ display: 'flex', gap: 28 }}>
        <a style={linkStyle} href="#primitives-section"  onClick={scrollTo('#primitives-section')}>primitives</a>
        <a style={linkStyle} href="#composer-section"    onClick={scrollTo('#composer-section')}>composer</a>
        <a style={linkStyle} href="#how-it-works-section" onClick={scrollTo('#how-it-works-section')}>how it works</a>
        <a style={linkStyle} href="docs.html">docs</a>
        <a style={linkStyle} href="#" onClick={openNotice('changelog')}>changelog</a>
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <span style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 10.5,
          textTransform: 'uppercase',
          letterSpacing: '0.08em',
          color: matterTokens.muted,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: matterTokens.limeDeep,
            boxShadow: `0 0 0 3px ${matterTokens.limeWash}`,
          }} />
          private alpha
        </span>
        <a href="#" onClick={openAccess} style={{
          background: matterTokens.ink,
          color: matterTokens.bg,
          fontSize: 13,
          fontWeight: 500,
          padding: '9px 16px',
          borderRadius: 999,
          textDecoration: 'none',
          letterSpacing: '-0.005em',
          cursor: 'pointer',
        }}>request access →</a>
      </div>
    </div>
  );
}

/* Reusable primitive block — labelled card with pip + name + params */
function PrimitiveBlock({ category = 'entry', name, params, width, scale = 1, dashed = false, faded = false }) {
  const pipColor = {
    entry: matterTokens.pipEntry,
    risk: matterTokens.pipRisk,
    rebalance: matterTokens.pipRebal,
    exit: matterTokens.pipExit,
  }[category];
  return (
    <div style={{
      background: dashed ? 'transparent' : matterTokens.paper,
      border: dashed ? `1px dashed ${matterTokens.line2}` : `1px solid ${matterTokens.line}`,
      borderRadius: 10 * scale,
      padding: `${14 * scale}px ${16 * scale}px`,
      width: width || 'auto',
      display: 'flex',
      flexDirection: 'column',
      gap: 8 * scale,
      opacity: faded ? 0.45 : 1,
      boxShadow: dashed ? 'none' : `0 1px 0 ${matterTokens.line}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 * scale }}>
          <span style={{
            width: 9 * scale, height: 9 * scale, borderRadius: 2,
            background: pipColor, flex: 'none',
          }} />
          <span style={{
            fontFamily: "'Geist Mono', monospace",
            fontSize: 13.5 * scale,
            color: matterTokens.ink,
            letterSpacing: '-0.005em',
          }}>{name}</span>
        </div>
        <span style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 10 * scale,
          color: matterTokens.muted,
          textTransform: 'uppercase',
          letterSpacing: '0.08em',
        }}>{category}</span>
      </div>
      {params && (
        <div style={{
          fontFamily: "'Geist Mono', monospace",
          fontSize: 11.5 * scale,
          color: matterTokens.muted,
          letterSpacing: '-0.005em',
        }}>{params}</div>
      )}
    </div>
  );
}

Object.assign(window, { matterTokens, MatterMark, MatterNav, PrimitiveBlock });