// Gravatar-based avatar with ring + status dot
const GRAVATAR_HASH = '1425546b57baaea6b750694fc1947159';
const gravatarUrl = (size) =>
  `https://www.gravatar.com/avatar/${GRAVATAR_HASH}?s=${size * 2}&d=mp`;

function Avatar({ size = 96, showStatus = true }) {
  return (
    <div
      className="avatar"
      style={{
        width: size,
        height: size,
        position: 'relative',
        flexShrink: 0,
        borderRadius: '50%',
        background: 'var(--surface-2)',
        border: '1px solid var(--border)',
        boxShadow: '0 0 0 4px var(--accent-soft)',
        overflow: 'visible',
      }}
      aria-label="Brian Leach"
    >
      <img
        src={gravatarUrl(size)}
        alt="Brian Leach"
        width={size}
        height={size}
        style={{
          width: '100%', height: '100%',
          borderRadius: '50%',
          display: 'block', objectFit: 'cover',
        }}
      />
      {showStatus && (
        <span
          style={{
            position: 'absolute',
            right: 2, bottom: 2,
            width: Math.max(10, size * 0.12),
            height: Math.max(10, size * 0.12),
            background: 'var(--accent)',
            borderRadius: '50%',
            border: '2px solid var(--bg)',
            boxShadow: '0 0 0 0 var(--accent-dim)',
            animation: 'pulse 1.8s ease-out infinite',
          }}
        />
      )}
    </div>
  );
}

// Small square brand mark for nav
function BrandGravatar({ size = 28 }) {
  return (
    <img
      src={gravatarUrl(size)}
      alt="Brian Leach"
      width={size}
      height={size}
      style={{
        width: size, height: size,
        borderRadius: 7,
        display: 'block',
        border: '1px solid var(--border)',
        transform: 'translateY(4px)',
      }}
    />
  );
}

window.Avatar = Avatar;
window.BrandGravatar = BrandGravatar;