// Shared UI primitives used inside phones

// Big pill button — the Resume Aura signature
function PillButton({ children, variant = 'primary', onClick, style = {}, icon }) {
  const variants = {
    primary: { background: '#1a0d2e', color: '#fae14b', border: 'none' },
    lemon:   { background: '#fae14b', color: '#1a0d2e', border: 'none' },
    aura:    { background: 'linear-gradient(90deg, #ff4db8, #8a5cf6, #4dd6ff)', color: '#fff', border: 'none' },
    ghost:   { background: 'transparent', color: '#1a0d2e', border: '1.5px solid #1a0d2e' },
    cream:   { background: '#fffdf7', color: '#1a0d2e', border: '1px solid rgba(26,13,46,0.1)' },
  };
  return (
    <button onClick={onClick} style={{
      ...variants[variant],
      height: 56, borderRadius: 100, padding: '0 28px',
      fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 17,
      letterSpacing: '-0.01em', cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      boxShadow: variant === 'primary' ? '0 8px 24px rgba(26,13,46,0.25)' :
                 variant === 'aura' ? '0 8px 30px rgba(138,92,246,0.35)' :
                 '0 2px 6px rgba(0,0,0,0.05)',
      transition: 'transform 0.15s',
      ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
    onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
    >
      {icon}<span>{children}</span>
    </button>
  );
}

// Chip/tag
function Chip({ children, color = '#1a0d2e', bg = '#fffdf7', style = {} }) {
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 4,
    padding: '4px 10px', borderRadius: 100, background: bg, color,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11,
    fontWeight: 600, letterSpacing: '0.02em',
    ...style,
  }}>{children}</span>;
}

// Sparkle icon
function Sparkle({ size = 14, color = 'currentColor' }) {
  return <svg width={size} height={size} viewBox="0 0 14 14"><path d="M7 0 l1.5 4.5 l4.5 1.5 l-4.5 1.5 l-1.5 4.5 l-1.5-4.5 l-4.5-1.5 l4.5-1.5 z" fill={color}/></svg>;
}

// Issue dot
function IssueDot({ type, size = 8 }) {
  return <div style={{
    width: size, height: size, borderRadius: '50%',
    background: ISSUE_META[type]?.color || '#999',
    flexShrink: 0,
  }}/>;
}

// Back chevron
function Chevron({ dir = 'left', size = 16, color = '#1a0d2e' }) {
  const d = { left: 'M11 3 L5 9 L11 15', right: 'M5 3 L11 9 L5 15', down: 'M3 5 L9 11 L15 5' }[dir];
  return <svg width={size} height={size} viewBox="0 0 18 18"><path d={d} stroke={color} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

// Phone header (custom, used inside screens instead of default nav bar)
function PhoneHeader({ platform, title, onBack, right, dark = false, sub }) {
  const isIOS = platform === 'ios';
  return (
    <div style={{
      padding: isIOS ? '56px 16px 12px' : '44px 12px 8px',
      display: 'flex', alignItems: 'center', gap: 8, minHeight: isIOS ? 90 : 80,
    }}>
      {onBack && (
        <button onClick={onBack} style={{
          width: 40, height: 40, borderRadius: '50%',
          border: 'none', background: dark ? 'rgba(255,255,255,0.1)' : 'rgba(26,13,46,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          color: dark ? '#fff' : '#1a0d2e',
        }}><Chevron color={dark ? '#fff' : '#1a0d2e'}/></button>
      )}
      <div style={{ flex: 1, textAlign: 'center', marginRight: onBack ? 40 : 0, marginLeft: onBack ? 0 : 0 }}>
        {sub && <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.15em', color: dark ? 'rgba(255,255,255,0.6)' : '#6b5e88' }}>{sub}</div>}
        <div style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 17, color: dark ? '#fff' : '#1a0d2e' }}>{title}</div>
      </div>
      {right}
    </div>
  );
}

Object.assign(window, { PillButton, Chip, Sparkle, IssueDot, Chevron, PhoneHeader });