// BodegaMark.jsx — monogram badge to identify each bodega
// (Placeholder logos: real bodega logos would replace these.)

const BodegaMark = ({ name, monogram, size = 56, dark = true, accent = false }) => {
  const palette = accent
    ? { bg: 'var(--comesa-red)', fg: '#fff', border: 'transparent' }
    : dark
    ? { bg: '#1D1D1B', fg: '#FFFFFF', border: '#3A3A38' }
    : { bg: '#FFFFFF', fg: '#1D1D1B', border: '#B7B6B6' };

  // Vary monogram letterforms slightly per bodega for an editorial library feel
  const seed = name.charCodeAt(0) + name.charCodeAt(name.length - 1);
  const variant = seed % 3;
  const fontStyle = variant === 0
    ? { fontFamily: 'Sora', fontWeight: 700, letterSpacing: '0.02em' }
    : variant === 1
    ? { fontFamily: 'Sora', fontWeight: 300, letterSpacing: '0.18em' }
    : { fontFamily: '"Estrela", "Sora"', fontWeight: 400, letterSpacing: '-0.02em', fontStyle: 'italic' };

  const fontSize = variant === 2 ? size * 0.62 : size * 0.42;

  return (
    <div
      style={{
        width: size,
        height: size,
        background: palette.bg,
        color: palette.fg,
        border: `1px solid ${palette.border}`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize,
        flex: '0 0 auto',
        position: 'relative',
        ...fontStyle,
      }}
      aria-label={name}
      title={name}
    >
      {/* Corner notches for an "engraved cellar plate" look */}
      <span style={{ position: 'absolute', top: 4, left: 4, width: 6, height: 1, background: palette.fg, opacity: 0.5 }} />
      <span style={{ position: 'absolute', top: 4, left: 4, width: 1, height: 6, background: palette.fg, opacity: 0.5 }} />
      <span style={{ position: 'absolute', bottom: 4, right: 4, width: 6, height: 1, background: palette.fg, opacity: 0.5 }} />
      <span style={{ position: 'absolute', bottom: 4, right: 4, width: 1, height: 6, background: palette.fg, opacity: 0.5 }} />
      <span style={{ lineHeight: 1, transform: variant === 2 ? 'translateY(2px)' : 'none' }}>
        {monogram}
      </span>
    </div>
  );
};

window.BodegaMark = BodegaMark;