// Direction 1 — Terminal / quant-premium
// Shared small atoms used across all sections.

const Pill = ({ children, tone = 'default' }) => {
  const bg = tone === 'accent' ? 'var(--accent-soft)' : 'transparent';
  const color = tone === 'accent' ? 'var(--accent)' : 'var(--ink-3)';
  const border = tone === 'accent' ? 'transparent' : 'var(--line)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', border: `1px solid ${border}`,
      borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 11,
      letterSpacing: '0.06em', textTransform: 'uppercase', color, background: bg,
    }}>
      {tone === 'accent' && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)' }} />}
      {children}
    </span>
  );
};

const SectionLabel = ({ idx, title }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
      {idx}
    </span>
    <span style={{ height: 1, flex: '0 0 28px', background: 'var(--ink-3)' }} />
    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-1)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
      {title}
    </span>
  </div>
);

const BtnPrimary = ({ children, onClick, style = {} }) => (
  <button onClick={onClick} style={{
    background: 'var(--ink-1)', color: 'var(--paper)', border: 'none',
    padding: '14px 22px', borderRadius: 8, fontSize: 14, fontWeight: 500,
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
    letterSpacing: '-0.01em', transition: 'transform .15s ease, background .15s ease',
    ...style,
  }}
  onMouseEnter={e => e.currentTarget.style.background = 'var(--accent)'}
  onMouseLeave={e => e.currentTarget.style.background = 'var(--ink-1)'}
  >{children}</button>
);

const BtnGhost = ({ children, onClick, style = {} }) => (
  <button onClick={onClick} style={{
    background: 'transparent', color: 'var(--ink-1)', border: '1px solid var(--line)',
    padding: '14px 22px', borderRadius: 8, fontSize: 14, fontWeight: 500,
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
    letterSpacing: '-0.01em',
    ...style,
  }}>{children}</button>
);

const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
  </svg>
);

// Dashed hairline for editorial feel
const Dashed = ({ vertical = false, style = {} }) => (
  <div style={{
    ...(vertical
      ? { width: 1, height: '100%', borderLeft: '1px dashed var(--line)' }
      : { height: 1, width: '100%', borderTop: '1px dashed var(--line)' }),
    ...style,
  }} />
);

// Pattern placeholder — striped SVG for imagery placeholder
const StripePlaceholder = ({ label, height = 320, style = {} }) => (
  <div style={{
    position: 'relative', height, borderRadius: 10,
    background: `repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, var(--paper-3) 10px, var(--paper-3) 20px)`,
    border: '1px solid var(--line)', overflow: 'hidden',
    display: 'flex', alignItems: 'center', justifyContent: 'center', ...style,
  }}>
    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', background: 'var(--paper)', padding: '6px 12px', borderRadius: 4, border: '1px solid var(--line)' }}>
      {label}
    </span>
  </div>
);

// Container
const Container = ({ children, style = {} }) => (
  <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px', ...style }}>{children}</div>
);

Object.assign(window, { Pill, SectionLabel, BtnPrimary, BtnGhost, Arrow, Dashed, StripePlaceholder, Container });