// EpochCore — design tokens, logo, shared atoms.
// Aesthetic: specimen-sheet / technical document.
// Type: IBM Plex Sans (body), IBM Plex Mono (labels), IBM Plex Serif italic (display accents).

const TOKEN = {
  ink: '#0E1116',
  inkSoft: '#1E2230',
  paper: '#FAFAF7',
  paperDeep: '#F2F1EB',
  hair: 'rgba(14,17,22,0.10)',
  hairBold: 'rgba(14,17,22,0.22)',
  mute: '#6E7282',
  blue: '#1B4BFF',
  blueSoft: 'rgba(27,75,255,0.08)',
  orange: '#FF6A1A',
  orangeSoft: 'rgba(255,106,26,0.10)',
  green: '#1F8A5B',
};

// EpochCore mark: concentric squares rotated 45°.
function Logo({ size = 22, color = TOKEN.ink, accent = TOKEN.orange }) {
  return (
    <svg width={size} height={size} viewBox="0 0 30 30" fill="none" style={{ display: 'block' }}>
      <rect x="6" y="6" width="18" height="18" rx="2"
        transform="rotate(45 15 15)" stroke={color} strokeWidth="1.6"/>
      <rect x="10.5" y="10.5" width="9" height="9" rx="1"
        transform="rotate(45 15 15)" fill={accent}/>
    </svg>
  );
}

function Wordmark({ size = 18, color = TOKEN.ink }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color }}>
      <Logo size={size + 4} color={color}/>
      <span style={{
        fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
        fontWeight: 600, fontSize: size, letterSpacing: -0.3, lineHeight: 1,
      }}>EpochCore</span>
    </div>
  );
}

// Monospace utility label — used everywhere for technical annotations
function Mono({ children, color = TOKEN.mute, size = 11, weight = 500, style = {} }) {
  return (
    <span style={{
      fontFamily: '"IBM Plex Mono", ui-monospace, monospace',
      fontSize: size, fontWeight: weight, color,
      letterSpacing: 0.4, textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

// Section heading marker — "§01 · CAPABILITIES"
function SectionLabel({ num, children, color = TOKEN.ink, accent = TOKEN.orange }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: '"IBM Plex Mono", ui-monospace, monospace',
      fontSize: 12, fontWeight: 500, letterSpacing: 1, textTransform: 'uppercase',
      color,
    }}>
      <span style={{ color: accent, fontWeight: 600 }}>§{num}</span>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.3 }}/>
      <span>{children}</span>
    </div>
  );
}

// Corner cropmark — adds a "blueprint" feel to corners of blocks
function CornerMark({ size = 10, color = TOKEN.hairBold, where = 'tl' }) {
  const map = {
    tl: { top: -size/2, left: -size/2, transform: 'rotate(0deg)' },
    tr: { top: -size/2, right: -size/2, transform: 'rotate(90deg)' },
    bl: { bottom: -size/2, left: -size/2, transform: 'rotate(-90deg)' },
    br: { bottom: -size/2, right: -size/2, transform: 'rotate(180deg)' },
  };
  return (
    <svg width={size} height={size} viewBox="0 0 10 10"
      style={{ position: 'absolute', ...map[where], pointerEvents: 'none' }}>
      <path d={`M 0 5 L 0 0 L 5 0`} stroke={color} strokeWidth="1" fill="none"/>
    </svg>
  );
}

// Crosshair (for emphasis points in layouts)
function Crosshair({ size = 14, color = TOKEN.hairBold, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" style={{ pointerEvents: 'none', ...style }}>
      <path d="M 7 0 L 7 14 M 0 7 L 14 7" stroke={color} strokeWidth="0.8"/>
      <circle cx="7" cy="7" r="1.2" fill={color}/>
    </svg>
  );
}

// Dashed measurement axis (decorative)
function MeasureLine({ length = 100, vertical = false, label, color = TOKEN.hairBold }) {
  const w = vertical ? 1 : length;
  const h = vertical ? length : 1;
  return (
    <div style={{
      position: 'relative', width: w, height: h,
      display: 'inline-flex', alignItems: 'center',
    }}>
      <div style={{ width: '100%', height: '100%',
        backgroundImage: `linear-gradient(${vertical ? 'to bottom' : 'to right'}, ${color} 50%, transparent 50%)`,
        backgroundSize: vertical ? '1px 4px' : '4px 1px',
      }}/>
      {label && (
        <Mono color={color} size={9} style={{
          position: 'absolute', left: vertical ? 8 : 'auto',
          top: vertical ? '50%' : -16,
          transform: vertical ? 'translateY(-50%)' : 'none',
          background: TOKEN.paper, padding: '0 6px',
        }}>{label}</Mono>
      )}
    </div>
  );
}

// Bracket marker — [TAG] style emphasis used for inline callouts
function Bracket({ children, color = TOKEN.orange }) {
  return (
    <Mono color={color} size={11} weight={600} style={{ letterSpacing: 0.6 }}>
      [{children}]
    </Mono>
  );
}

// Bare button (no global .btn class collision)
function ECButton({ children, variant = 'primary', size = 'md', icon, onClick, style = {} }) {
  const ecBase = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: '"IBM Plex Sans", system-ui, sans-serif',
    fontWeight: 500, letterSpacing: -0.1, cursor: 'pointer', userSelect: 'none',
    border: 'none', transition: 'all .18s ease', whiteSpace: 'nowrap',
  };
  const ecSize = size === 'lg'
    ? { height: 52, padding: '0 22px', fontSize: 15, borderRadius: 0 }
    : { height: 42, padding: '0 16px', fontSize: 14, borderRadius: 0 };
  const ecVariant = ({
    primary: { background: TOKEN.ink, color: TOKEN.paper },
    orange: { background: TOKEN.orange, color: '#fff' },
    ghost: { background: 'transparent', color: TOKEN.ink, border: `1px solid ${TOKEN.hair}` },
    paper: { background: TOKEN.paper, color: TOKEN.ink, border: `1px solid ${TOKEN.hair}` },
  })[variant];
  return (
    <button onClick={onClick} style={{ ...ecBase, ...ecSize, ...ecVariant, ...style }}>
      {children}
      {icon !== false && <span style={{ fontFamily: '"IBM Plex Mono"', fontSize: 14, opacity: 0.7 }}>↗</span>}
    </button>
  );
}

Object.assign(window, { TOKEN, Logo, Wordmark, Mono, SectionLabel, CornerMark, Crosshair, MeasureLine, Bracket, ECButton });