// shared.jsx — small helpers used by every variant.
// Exposed on window so other babel scripts can use them.

// Labeled image placeholder — diagonal-stripe fill + mono caption.
// `tone` swaps the palette so it sits naturally in each variant.
function ImgSlot({ label = 'image', tone = 'cream', radius = 0, style = {}, children, ...rest }) {
  const palettes = {
    cream:  { bg: '#e8e1d3', fg: '#7a6f5c', stripe: 'rgba(0,0,0,0.04)' },
    dark:   { bg: '#1a1a1a', fg: '#6a6a6a', stripe: 'rgba(255,255,255,0.035)' },
    sage:   { bg: '#d9dccd', fg: '#6e7560', stripe: 'rgba(0,0,0,0.035)' },
    paper:  { bg: '#efece4', fg: '#857a66', stripe: 'rgba(0,0,0,0.03)' },
    clay:   { bg: '#d8b6a0', fg: '#6e4d3b', stripe: 'rgba(0,0,0,0.04)' },
  };
  const p = palettes[tone] || palettes.cream;
  return (
    <div
      style={{
        position: 'relative',
        background: `repeating-linear-gradient(135deg, ${p.bg} 0 14px, ${p.stripe} 14px 15px), ${p.bg}`,
        color: p.fg,
        borderRadius: radius,
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
        padding: 12,
        overflow: 'hidden',
        ...style,
      }}
      {...rest}
    >
      <span style={{
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: 10,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        opacity: 0.85,
        background: 'rgba(255,255,255,0.55)',
        backdropFilter: 'blur(4px)',
        padding: '3px 7px',
        borderRadius: 2,
      }}>{label}</span>
      {children}
    </div>
  );
}

// Tiny "tab" badge — used in headers as a category tag.
function Pill({ children, color = 'currentColor', bg = 'transparent', border = true, style = {} }) {
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
      fontSize: 11,
      letterSpacing: '0.12em',
      textTransform: 'uppercase',
      padding: '5px 10px',
      borderRadius: 999,
      color,
      background: bg,
      border: border ? `1px solid ${color}` : 'none',
      ...style,
    }}>{children}</span>
  );
}

Object.assign(window, { ImgSlot, Pill });