const conceptStyles = {
  visual: {
    position: 'relative', border: '1px solid var(--border)',
    aspectRatio: '4 / 3',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    overflow: 'hidden', background: 'var(--bg-2)',
  },
  glow: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.08) 0%, transparent 70%)',
  },
  inner: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    color: 'rgba(201,169,110,0.12)', fontWeight: 300,
    letterSpacing: '-.05em', lineHeight: 1, textAlign: 'center',
    position: 'relative', zIndex: 1,
  },
  tag: {
    position: 'absolute', bottom: '1.5rem', left: '1.5rem',
    fontSize: '0.65rem', letterSpacing: '.18em', textTransform: 'uppercase',
    color: 'var(--gold)', border: '1px solid var(--border)',
    padding: '.4rem 1rem',
  },
};

function ConceptVisual({ text, tag, size = '5rem' }) {
  return (
    <div style={conceptStyles.visual}>
      <div style={conceptStyles.glow}></div>
      <div style={{ ...conceptStyles.inner, fontSize: size }} dangerouslySetInnerHTML={{ __html: text }} />
      {tag && <div style={conceptStyles.tag}>{tag}</div>}
    </div>
  );
}

window.ConceptVisual = ConceptVisual;