/* Matter Protocol — landing shared atoms beyond the hero
 * (extends heroes/shared.jsx — assumes matterTokens/MatterNav/MatterMark/PrimitiveBlock already on window)
 */

function SectionLabel({ num, children }) {
  const t = window.matterTokens;
  return (
    <div style={{
      fontFamily: "'Geist Mono', monospace",
      fontSize: 11.5,
      textTransform: 'uppercase',
      letterSpacing: '0.12em',
      color: t.muted,
      display: 'inline-flex', alignItems: 'center', gap: 10,
      marginBottom: 18,
    }}>
      <span style={{
        padding: '3px 7px',
        background: t.ink, color: t.bg, borderRadius: 4,
        letterSpacing: '0.06em', fontWeight: 500,
      }}>{num}</span>
      <span>{children}</span>
    </div>
  );
}

function SectionHead({ num, eyebrow, title, sub, align = 'left' }) {
  const t = window.matterTokens;
  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align,
      maxWidth: align === 'center' ? 760 : 'none',
      margin: align === 'center' ? '0 auto' : 0,
    }}>
      <SectionLabel num={num}>{eyebrow}</SectionLabel>
      <h2 style={{
        margin: 0,
        fontSize: 44,
        lineHeight: 1.04,
        letterSpacing: '-0.025em',
        fontWeight: 500,
        color: t.ink,
        textTransform: 'lowercase',
        maxWidth: 760,
      }}>{title}</h2>
      {sub && (
        <p style={{
          margin: '14px 0 0',
          fontSize: 17,
          lineHeight: 1.5,
          color: t.muted,
          maxWidth: 580,
        }}>{sub}</p>
      )}
    </div>
  );
}

const PRIMITIVES = {
  entry: [
    { name: 'emaCross',         desc: 'Fast/slow exponential moving-average crossover.' },
    { name: 'rsiOversold',      desc: 'Enter when RSI dips below a band and reverts.' },
    { name: 'fundingFlip',      desc: 'Funding rate flips sign on a perp venue.' },
    { name: 'volBreakout',      desc: 'Range break confirmed by σ-multiple volume.' },
    { name: 'liquiditySweep',   desc: 'Sweep of a stop cluster, then mean-revert.' },
    { name: 'basisDivergence',  desc: 'Perp basis decouples from spot beyond θ.' },
  ],
  risk: [
    { name: 'volTarget',        desc: 'Size positions to a target realized σ.' },
    { name: 'drawdownCap',      desc: 'Hard pause if equity curve breaches threshold.' },
    { name: 'positionLimit',    desc: 'Per-leg and aggregate notional caps.' },
    { name: 'correlationLock',  desc: 'Reject trades that raise portfolio ρ above θ.' },
    { name: 'kellyFraction',    desc: 'Fractional-Kelly sizing from edge estimate.' },
  ],
  rebalance: [
    { name: 'timeRebal',        desc: 'Re-weight on a fixed cadence (1h…7d).' },
    { name: 'thresholdRebal',   desc: 'Re-weight when drift exceeds a band.' },
    { name: 'inverseVolWeight', desc: 'Allocate inversely proportional to σ.' },
    { name: 'riskParity',       desc: 'Equalize risk contribution across legs.' },
  ],
  exit: [
    { name: 'trailStop',        desc: 'Trailing stop activated past breakeven.' },
    { name: 'takeProfitLadder', desc: 'Scale-out across N tiers above entry.' },
    { name: 'timeInTrade',      desc: 'Flat after a maximum hold duration.' },
  ],
};

const CATEGORY_META = {
  entry:     { color: '#A8CC1E', label: 'entry'     },
  risk:      { color: '#E07A3A', label: 'risk'      },
  rebalance: { color: '#3F8FE0', label: 'rebalance' },
  exit:      { color: '#14130F', label: 'exit'      },
};

Object.assign(window, { SectionLabel, SectionHead, PRIMITIVES, CATEGORY_META });