// Minimal shared primitives for blog + quiz pages (Logomark, Avatar, Icon).
// Smaller than the full app components.jsx — only what blog/reader needs.

const Icon = ({ name, size = 22, color = 'currentColor', stroke = 1.5, style }) => {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    heart: <path {...p} d="M12 20s-7-4-7-10a4 4 0 017-2 4 4 0 017 2c0 6-7 10-7 10z"/>,
    arrow: <path {...p} d="M5 12h14M13 6l6 6-6 6"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'inline-block', flexShrink: 0, ...style }}>
      {paths[name] || null}
    </svg>
  );
};

const Avatar = ({ name = '', size = 36, tone = 'sage', imageUrl = '', style }) => {
  if (imageUrl) {
    return (
      <img
        src={imageUrl}
        alt={name}
        style={{
          width: size, height: size, borderRadius: '50%',
          objectFit: 'cover', flexShrink: 0,
          border: '0.5px solid var(--hairline)',
          ...style,
        }}
      />
    );
  }
  const initials = name.split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
  const tones = {
    sage: ['var(--sage-soft)', 'var(--sage-ink)'],
    clay: ['var(--clay-soft)', 'oklch(0.42 0.10 40)'],
    plum: ['var(--plum-soft)', 'oklch(0.38 0.08 320)'],
    amber:['var(--amber-soft)', 'oklch(0.45 0.08 70)'],
    ink:  ['var(--ink)', 'var(--bg)'],
  };
  const [bg, fg] = tones[tone] || tones.sage;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.34, fontWeight: 600, letterSpacing: 0.4,
      flexShrink: 0,
      ...style,
    }}>{initials}</div>
  );
};

const Logomark = ({ size = 32, color = 'var(--sage)', container = null }) => {
  const inner = container ? size * 0.62 : size;
  const strokeColor = container === 'sage' ? '#F4F1EA'
                    : container === 'ink'  ? '#6E8B7B'
                    : container === 'cream' ? '#6E8B7B'
                    : color;
  const mark = (
    <svg width={inner} height={inner} viewBox="0 0 100 100" fill="none" aria-label="corda">
      <g transform="translate(50 50)">
        <g transform="rotate(0)"><path d="M 0 0 C -16 -10, -16 -34, 0 -36 C 16 -34, 16 -10, 0 0 Z"
          stroke={strokeColor} strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" fill="none"/></g>
        <g transform="rotate(120)"><path d="M 0 0 C -16 -10, -16 -34, 0 -36 C 16 -34, 16 -10, 0 0 Z"
          stroke={strokeColor} strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" fill="none"/></g>
        <g transform="rotate(240)"><path d="M 0 0 C -16 -10, -16 -34, 0 -36 C 16 -34, 16 -10, 0 0 Z"
          stroke={strokeColor} strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" fill="none"/></g>
      </g>
    </svg>
  );
  if (!container) return mark;
  const bg = container === 'ink'   ? 'var(--ink)'
           : container === 'cream' ? 'var(--bg)'
           : 'var(--sage)';
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.28,
      background: bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: container === 'cream' ? '1px solid var(--hairline)' : 'none',
    }}>{mark}</div>
  );
};

Object.assign(window, { Icon, Avatar, Logomark });