// TradeXchange — design tokens, logo, shared atoms.
// Aesthetic: Bloomberg terminal at 4am. Strict mono labels. Allow=green / Refuse=red.
// Type: Geist Sans (body/display), Geist Mono (labels/numbers).

const T = {
  // surfaces
  ink: '#0A0B0E',
  inkSoft: '#13151B',
  inkBorder: 'rgba(244,244,240,0.10)',
  inkHair: 'rgba(244,244,240,0.06)',
  paper: '#F4F4F0',
  paperDeep: '#EAEAE2',
  hair: 'rgba(10,11,14,0.10)',
  hairBold: 'rgba(10,11,14,0.22)',

  // text
  text: '#0A0B0E',
  textInv: '#F4F4F0',
  mute: '#6E7282',
  muteInv: 'rgba(244,244,240,0.55)',

  // semantic
  allow: '#2DD881',
  allowSoft: 'rgba(45,216,129,0.12)',
  refuse: '#E6483B',
  refuseSoft: 'rgba(230,72,59,0.12)',
  caution: '#F5A623',
  cautionSoft: 'rgba(245,166,35,0.14)',
  blue: '#3B82F6',   // for routing / data accents
};

const GEIST = '"Geist", -apple-system, system-ui, sans-serif';
const GMONO = '"Geist Mono", ui-monospace, "JetBrains Mono", monospace';

// ── Logo ───────────────────────────────────────────────────────
// Stylized gate: bracket-bar-dot. Two halves, one allowed.
function GateMark({ size = 22, color, accent = T.allow }) {
  const c = color || T.text;
  return (
    <svg width={size * 1.5} height={size} viewBox="0 0 30 20" fill="none" style={{ display: 'block' }}>
      {/* left bracket */}
      <path d="M 4 2 L 1 2 L 1 18 L 4 18" stroke={c} strokeWidth="1.6" fill="none"/>
      {/* gate bar */}
      <line x1="10" y1="2" x2="10" y2="18" stroke={c} strokeWidth="1.6"/>
      {/* dot through the gate */}
      <circle cx="15" cy="10" r="2.6" fill={accent}/>
      {/* gate bar 2 */}
      <line x1="20" y1="2" x2="20" y2="18" stroke={c} strokeWidth="1.6"/>
      {/* right bracket */}
      <path d="M 26 2 L 29 2 L 29 18 L 26 18" stroke={c} strokeWidth="1.6" fill="none"/>
    </svg>
  );
}

function Wordmark({ size = 18, color, accent = T.allow }) {
  const c = color || T.text;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: c }}>
      <GateMark size={size + 4} color={c} accent={accent}/>
      <span style={{
        fontFamily: GMONO, fontWeight: 500, fontSize: size,
        letterSpacing: 0.5, lineHeight: 1,
      }}>TRADE<span style={{ color: accent }}>X</span>CHANGE</span>
    </div>
  );
}

// ── Mono label ─────────────────────────────────────────────────
function Mono({ children, color = T.mute, size = 11, weight = 400, style = {} }) {
  return (
    <span style={{
      fontFamily: GMONO, fontSize: size, fontWeight: weight, color,
      letterSpacing: 0.4, textTransform: 'uppercase', lineHeight: 1.2,
      ...style,
    }}>{children}</span>
  );
}

// ── Section label · "§ 03 · BROKERS" ───────────────────────────
function SectionLabel({ num, children, color, accent = T.allow }) {
  const c = color || T.text;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: GMONO, fontSize: 11, fontWeight: 500, letterSpacing: 1,
      textTransform: 'uppercase', color: c,
    }}>
      <span style={{ color: accent }}>§ {num}</span>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.3 }}/>
      <span>{children}</span>
    </div>
  );
}

// Bracket [TAG]
function Bracket({ children, color = T.allow, size = 11, style = {} }) {
  return (
    <span style={{
      fontFamily: GMONO, fontSize: size, fontWeight: 500,
      color, letterSpacing: 0.5, ...style,
    }}>[{children}]</span>
  );
}

// Status pulse dot
function Pulse({ color = T.allow, size = 7 }) {
  return (
    <span style={{
      display: 'inline-block', width: size, height: size, borderRadius: 99,
      background: color, boxShadow: `0 0 0 ${size/2}px ${color}40`,
    }}/>
  );
}

// Decision badge: ALLOW / REFUSE / CAUTION
function Decision({ kind, size = 'md' }) {
  const map = {
    allow:    { bg: T.allow,   fg: '#03110A', label: 'ALLOW',   ch: '✓' },
    refuse:   { bg: T.refuse,  fg: '#1A0707', label: 'REFUSE',  ch: '✕' },
    caution:  { bg: T.caution, fg: '#1A1107', label: 'CAUTION', ch: '!' },
    pending:  { bg: T.inkBorder, fg: T.muteInv, label: 'PENDING', ch: '·' },
  }[kind] || map.pending;
  const sz = size === 'lg' ? { h: 36, fs: 13, pad: '0 14px' } : { h: 24, fs: 11, pad: '0 10px' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: sz.h, padding: sz.pad,
      background: map.bg, color: map.fg,
      fontFamily: GMONO, fontWeight: 600, fontSize: sz.fs, letterSpacing: 0.8,
    }}>
      <span>{map.ch}</span>{map.label}
    </span>
  );
}

// Button with terminal-feel; sharp corners
function TXButton({ children, variant = 'allow', size = 'md', onClick, href, style = {} }) {
  const sz = size === 'lg'
    ? { h: 52, padding: '0 24px', fs: 14 }
    : { h: 40, padding: '0 16px', fs: 13 };
  const variants = {
    allow:  { bg: T.allow,  fg: '#03110A', hov: '#27c075' },
    primary:{ bg: T.text,   fg: T.paper,    hov: T.inkSoft },
    ghost:  { bg: 'transparent', fg: 'currentColor', border: '1px solid currentColor', hov: 'rgba(244,244,240,0.08)' },
    paper:  { bg: T.paper,  fg: T.ink,      hov: T.paperDeep },
  };
  const v = variants[variant];
  const inner = (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      height: sz.h, padding: sz.padding,
      background: v.bg, color: v.fg,
      fontFamily: GEIST, fontSize: sz.fs, fontWeight: 600,
      letterSpacing: -0.1, cursor: 'pointer', border: v.border || 'none',
      transition: 'background .15s ease',
      ...style,
    }}
      onMouseEnter={e => e.currentTarget.style.background = v.hov}
      onMouseLeave={e => e.currentTarget.style.background = v.bg}
    >
      {children}
      <span style={{ fontFamily: GMONO, fontSize: 13 }}>→</span>
    </span>
  );
  if (href) return <a href={href} onClick={onClick} style={{ textDecoration: 'none', display: 'inline-block' }}>{inner}</a>;
  return <button onClick={onClick} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>{inner}</button>;
}

// Corner cropmarks for blueprint-feel framing
function CornerMark({ size = 10, color, where = 'tl' }) {
  const c = color || T.hairBold;
  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={c} strokeWidth="1" fill="none"/>
    </svg>
  );
}

// Section frame, two-column head, optional dark
function Section({ id, num, eyebrow, title, intro, dark = false, accent = T.allow, children, pad = 120 }) {
  const bg = dark ? T.ink : T.paper;
  const fg = dark ? T.textInv : T.text;
  const muted = dark ? T.muteInv : T.mute;
  return (
    <section id={id} style={{ padding: `${pad}px 0`, background: bg, color: fg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, marginBottom: 64 }}>
          <div>
            <SectionLabel num={num} accent={accent} color={fg}>{eyebrow}</SectionLabel>
            <h2 style={{
              fontFamily: GEIST, fontWeight: 600, fontSize: 'clamp(36px, 4.5vw, 52px)',
              letterSpacing: -1.6, lineHeight: 1.04,
              margin: '20px 0 0', color: fg, maxWidth: 480,
            }}>{title}</h2>
          </div>
          {intro && (
            <div style={{
              fontSize: 18, lineHeight: 1.5, color: muted,
              letterSpacing: -0.2, maxWidth: 560, paddingTop: 28,
              fontFamily: GEIST,
            }}>{intro}</div>
          )}
        </div>
        {children}
      </div>
    </section>
  );
}

Object.assign(window, {
  T, GEIST, GMONO,
  GateMark, Wordmark, Mono, SectionLabel, Bracket, Pulse, Decision,
  TXButton, CornerMark, Section,
});