// ScrollJob v2 — global polish components used across multiple sections
// - Tier badges (Sponsored, Featured)
// - Region pill (header)
// - Trust signals (verified employer, applied counter)

function V2TierBadge({ tier }) {
  if (!tier || tier === 'standard') return null;
  if (tier === 'sponsored') {
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '3px 9px', borderRadius: 6,
        background: V2.primary, color: '#fff',
        fontSize: 10.5, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
      }}>
        <Icon name="sparkle" size={10} /> Sponsored
      </span>
    );
  }
  // featured
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '3px 9px', borderRadius: 6,
      background: V2.primaryRing, color: V2.primaryInk,
      fontSize: 10.5, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
    }}>
      <Icon name="starFill" size={10} /> Featured
    </span>
  );
}

function V2RegionPill() {
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px', borderRadius: 999,
      background: V2.bgAlt, border: `1px solid ${V2.line}`,
      color: V2.text, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
      fontFamily: V2.font,
    }}>
      <Icon name="globe" size={14} color={V2.muted} />
      UK
      <Icon name="chevron-down" size={12} color={V2.muted} />
    </button>
  );
}

function V2VerifiedBadge() {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 8px', borderRadius: 999,
      background: V2.primarySoft, color: V2.primaryInk,
      border: `1px solid ${V2.primaryRing}`,
      fontSize: 11.5, fontWeight: 700,
    }}>
      <Icon name="shield" size={11} /> Verified employer
    </span>
  );
}

function V2AppliedCount({ count }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 12.5, color: V2.muted, fontWeight: 500,
    }}>
      <Icon name="user" size={13} color={V2.muted} />
      {count} people applied this week
    </span>
  );
}

Object.assign(window, { V2TierBadge, V2RegionPill, V2VerifiedBadge, V2AppliedCount });