// Primitives — Eyebrow, Button, Field, HairRule, WordmarkInline

function Eyebrow({ children, tone = 'slate', style = {} }) {
  const color = tone === 'mute' ? T.mute : tone === 'gold' ? T.goldDeep : T.slate;
  return <div style={{
    fontFamily: F.mono, fontSize: 12, fontWeight: 500,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    color, ...style,
  }}>{children}</div>;
}

function Button({ variant = 'primary', children, onClick, style = {} }) {
  const base = {
    fontFamily: F.body, fontSize: 16, fontWeight: 500,
    padding: '12px 22px', border: 'none', borderRadius: 2,
    cursor: 'pointer', transition: 'background 120ms cubic-bezier(.2,0,0,1), color 120ms',
    letterSpacing: 0, display: 'inline-flex', alignItems: 'center', gap: 8,
  };
  const variants = {
    primary: { background: T.ink, color: T.white },
    accent:  { background: T.gold, color: T.ink, fontWeight: 600 },
    ghost:   { background: 'transparent', color: T.ink, border: `1px solid ${T.ink}` },
    'ghost-on-ink': { background: 'transparent', color: T.white, border: `1px solid ${T.mute}` },
    link: { background: 'transparent', color: T.ink, padding: '12px 0', fontWeight: 500 },
  };
  const [hover, setHover] = React.useState(false);
  const hoverStyles = {
    primary: { background: T.charcoal },
    accent:  { background: T.goldDeep, color: T.white },
    ghost:   { background: 'rgba(10,22,40,0.04)' },
    'ghost-on-ink': { background: 'rgba(255,255,255,0.06)', borderColor: T.white },
    link:    { textDecoration: 'underline' },
  };
  return <button
    onClick={onClick}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{ ...base, ...variants[variant], ...(hover ? hoverStyles[variant] : {}), ...style }}
  >{children}</button>;
}

function Field({ label, placeholder, value, onChange, type = 'text', as = 'input', required }) {
  const [focus, setFocus] = React.useState(false);
  const El = as;
  return <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    <span style={{
      fontFamily: F.mono, fontSize: 12, fontWeight: 500,
      letterSpacing: '0.16em', textTransform: 'uppercase', color: T.slate,
    }}>{label}{required ? ' *' : ''}</span>
    <El
      type={type}
      value={value} onChange={onChange}
      placeholder={placeholder}
      onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
      rows={as === 'textarea' ? 4 : undefined}
      style={{
        fontFamily: F.body, fontSize: 15, color: T.ink,
        background: T.white,
        border: `1px solid ${focus ? T.ink : T.rule}`,
        borderRadius: 0, padding: '12px 14px', outline: 'none',
        boxShadow: focus ? `0 0 0 2px ${T.gold}` : 'none',
        transition: 'border-color 120ms, box-shadow 120ms',
        resize: as === 'textarea' ? 'vertical' : undefined,
      }}
    />
  </label>;
}

function HairRule({ dark = false, style = {} }) {
  return <div style={{
    height: 1, background: dark ? T.border_d : T.rule, width: '100%', ...style,
  }}/>;
}

function WordmarkInline({ size = 22, onDark = false }) {
  return <span style={{
    fontFamily: F.wordmark, fontSize: size,
    letterSpacing: '-0.04em', lineHeight: 1,
    display: 'inline-flex', whiteSpace: 'nowrap',
  }}>
    <span style={{ fontWeight: 600, color: onDark ? T.white : T.ink }}>Direct</span>
    <span style={{ fontWeight: 800, color: T.gold }}>CFO</span>
  </span>;
}

Object.assign(window, { Eyebrow, Button, Field, HairRule, WordmarkInline });