// 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 (particle shape — used inside the orb halo, not as a button accent)
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>;
}

// SF Symbols approximations — matches the iconography used in the iOS app
// (Image(systemName: ...)) so the web prototype reads as the same surface.
// All paths drawn on a 24x24 grid; `color` flows through via currentColor.
const SF_SYMBOLS = {
  'star.fill': (
    <path d="M12 2.2 l2.95 6.35 l6.9 0.82 l-5.12 4.77 l1.4 6.86 l-6.13 -3.52 l-6.13 3.52 l1.4 -6.86 l-5.12 -4.77 l6.9 -0.82 z" fill="currentColor"/>
  ),
  'pencil.line': (
    <>
      <path d="M14.5 4.7 l4.8 4.8 l-9.1 9.1 l-4.8 0 l0 -4.8 z" fill="currentColor"/>
      <path d="M15.8 3.4 l1.8 -1.8 a1.7 1.7 0 0 1 2.4 0 l2.4 2.4 a1.7 1.7 0 0 1 0 2.4 l-1.8 1.8 z" fill="currentColor"/>
      <path d="M3 22 h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none"/>
    </>
  ),
  'clock': (
    <>
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <path d="M12 7 v5 l3.4 2" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
  'person.crop.circle': (
    <>
      <circle cx="12" cy="12" r="9.2" stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <circle cx="12" cy="10" r="3" fill="currentColor"/>
      <path d="M5.6 19 c1.4 -3 4 -4 6.4 -4 s5 1 6.4 4" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
    </>
  ),
  'bolt.fill': (
    <path d="M13.6 2 L5 13.4 h5.2 L8.8 22 L17.8 10.2 h-5.6 z" fill="currentColor"/>
  ),
  'number': (
    <path d="M9.2 3 L7.4 21 M16.6 3 L14.8 21 M4 8.6 H20 M3.5 15.4 H19.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
  ),
  'arrow.left.arrow.right': (
    <>
      <path d="M21 8 H5 l3.5 -3.5 M5 8 l3.5 3.5" stroke="currentColor" strokeWidth="1.9" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M3 16 H19 l-3.5 -3.5 M19 16 l-3.5 3.5" stroke="currentColor" strokeWidth="1.9" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
  'textformat.abc': (
    <text x="12" y="17" textAnchor="middle" fill="currentColor"
      style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 13, letterSpacing: '-0.02em' }}>Aa</text>
  ),
  'questionmark': (
    <>
      <path d="M8 8.8 a4 4 0 1 1 5.8 3.6 c-1.2 0.6 -1.8 1.3 -1.8 2.6 V16" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="12" cy="19.2" r="1.3" fill="currentColor"/>
    </>
  ),
  'plus': (
    <path d="M12 4 V20 M4 12 H20" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
  ),
  'ruler': (
    <>
      <path d="M3.4 15.6 L15.6 3.4 l5 5 L8.4 20.6 z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M13.2 5.8 l2 2 M10.8 8.2 l1.2 1.2 M8.4 10.6 l2 2 M6 13 l1.2 1.2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </>
  ),
  'arrow.up.doc': (
    <>
      <path d="M6 8 V20 a2 2 0 0 0 2 2 h8 a2 2 0 0 0 2 -2 V8" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M12 2 V12 M8 6 L12 2 L16 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
  'arrow.down.to.line': (
    <path d="M12 3 V14 M7 10 L12 15 L17 10 M5 20 H19" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'square.and.arrow.up': (
    <>
      <path d="M6 12 V19 a2 2 0 0 0 2 2 h8 a2 2 0 0 0 2 -2 V12" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M12 3 V15 M8 7 L12 3 L16 7" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </>
  ),
  'bubble.left.fill': (
    <path d="M5 4 h14 a2 2 0 0 1 2 2 v9 a2 2 0 0 1 -2 2 h-7 l-5 4 v-4 h-2 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 z" fill="currentColor"/>
  ),
  'ellipsis': (
    <>
      <circle cx="5.5" cy="12" r="1.7" fill="currentColor"/>
      <circle cx="12" cy="12" r="1.7" fill="currentColor"/>
      <circle cx="18.5" cy="12" r="1.7" fill="currentColor"/>
    </>
  ),
  'xmark': (
    <path d="M5 5 L19 19 M19 5 L5 19" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
  ),
  'checkmark': (
    <path d="M4.5 12.5 L10 18 L20 6" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'arrow.right': (
    <path d="M4 12 H20 M14 6 L20 12 L14 18" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'arrow.up.right': (
    <path d="M6 18 L18 6 M8 6 H18 V16" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'gearshape': (
    <>
      <path d="M12 2 l1 3 h-2 z M12 22 l1 -3 h-2 z M2 12 l3 1 v-2 z M22 12 l-3 1 v-2 z M4.9 4.9 l2.4 1.4 l-1.4 1.4 z M19.1 19.1 l-2.4 -1.4 l1.4 -1.4 z M19.1 4.9 l-1.4 2.4 l-1.4 -1.4 z M4.9 19.1 l1.4 -2.4 l1.4 1.4 z" fill="currentColor"/>
      <circle cx="12" cy="12" r="5.4" stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <circle cx="12" cy="12" r="1.8" fill="currentColor"/>
    </>
  ),
  'chevron.right': (
    <path d="M9 5 L16 12 L9 19" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'chevron.left': (
    <path d="M15 5 L8 12 L15 19" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'chevron.down': (
    <path d="M5 9 L12 16 L19 9" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  ),
  'arrow.clockwise': (
    <>
      <path d="M20 6 V12 H14" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M20 12 A8 8 0 1 0 17.5 17.9" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
    </>
  ),
  'arrow.counterclockwise': (
    <>
      <path d="M4 6 V12 H10" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M4 12 A8 8 0 1 1 6.5 17.9" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
    </>
  ),
  'exclamationmark.circle.fill': (
    <>
      <circle cx="12" cy="12" r="10" fill="currentColor"/>
      <path d="M12 6.5 V13" stroke="#fef9f0" strokeWidth="2.2" strokeLinecap="round"/>
      <circle cx="12" cy="16.6" r="1.3" fill="#fef9f0"/>
    </>
  ),
  'exclamationmark.triangle.fill': (
    <>
      <path d="M12 3 L22 20.5 H2 Z" fill="currentColor"/>
      <path d="M12 9 V14.5" stroke="#fef9f0" strokeWidth="2.2" strokeLinecap="round"/>
      <circle cx="12" cy="17.8" r="1.2" fill="#fef9f0"/>
    </>
  ),
  'questionmark.circle': (
    <>
      <circle cx="12" cy="12" r="9.2" stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <path d="M9 10 a3 3 0 1 1 4.3 2.7 c-0.9 0.5 -1.3 1 -1.3 2 V15" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="12" cy="17.4" r="1" fill="currentColor"/>
    </>
  ),
  'crown.fill': (
    <path d="M3 8 L7 13 L12 5 L17 13 L21 8 L19 19 H5 Z" fill="currentColor"/>
  ),
  'doc.badge.plus': (
    <>
      <path d="M6 3 h8 l4 4 v14 a1 1 0 0 1 -1 1 H6 a1 1 0 0 1 -1 -1 V4 a1 1 0 0 1 1 -1 z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M13 3 V8 H18" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <circle cx="18" cy="18" r="4.2" fill="currentColor"/>
      <path d="M18 16 V20 M16 18 H20" stroke="#fef9f0" strokeWidth="1.8" strokeLinecap="round"/>
    </>
  ),
  'gift.fill': (
    <>
      <path d="M4 10 H20 V21 H4 Z" fill="currentColor"/>
      <path d="M3 7 H21 V11 H3 Z" fill="currentColor"/>
      <path d="M11 7 V21 M13 7 V21" stroke="#fef9f0" strokeWidth="1.4"/>
      <path d="M12 7 c -2 -4 -6 -2 -4 0" stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <path d="M12 7 c 2 -4 6 -2 4 0" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    </>
  ),
  'trash': (
    <>
      <path d="M5 7 H19 L17.7 20.2 a1 1 0 0 1 -1 0.8 H7.3 a1 1 0 0 1 -1 -0.8 Z" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
      <path d="M9 10 V18 M12 10 V18 M15 10 V18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M3 7 H21 M9 4 H15 V7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </>
  ),
  'infinity': (
    <path d="M6 12 c 0 -3 2.5 -4.5 5 -2 l 2 2 c 2.5 2.5 5 1 5 -2 s -2.5 -4.5 -5 -2 l -2 2 c -2.5 2.5 -5 1 -5 -2" stroke="currentColor" strokeWidth="1.9" fill="none" strokeLinecap="round"/>
  ),
};

function SFIcon({ name, size = 18, color = 'currentColor', style = {} }) {
  const body = SF_SYMBOLS[name];
  if (!body) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ color, display: 'inline-block', verticalAlign: 'middle', ...style }}>
      {body}
    </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: 'grid',
      gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center', gap: 8, minHeight: isIOS ? 90 : 80,
    }}>
      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
        {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>
      <div style={{ textAlign: 'center' }}>
        {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>
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        {right}
      </div>
    </div>
  );
}

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