// Callout - gold-bordered, gold-dim filled block with optional eyebrow.
// Children render in italic Cormorant by default.
const Callout = ({ eyebrow, children, italic = true, style = {}, tone = 'gold' }) => {
  const coral = tone === 'coral';
  const wrapStyle = coral
    ? { ...calloutStyles.wrap, background: 'var(--coral)', borderColor: 'var(--coral)' }
    : calloutStyles.wrap;
  const eyebrowStyle = coral
    ? { ...calloutStyles.eyebrow, color: 'var(--paper)', opacity: 0.85 }
    : calloutStyles.eyebrow;
  const baseBody = italic ? calloutStyles.italicBody : calloutStyles.body;
  const bodyStyle = coral ? { ...baseBody, color: 'var(--paper)' } : baseBody;
  return (
    <aside style={{ ...wrapStyle, ...style }}>
      {eyebrow ? <div style={eyebrowStyle}>{eyebrow}</div> : null}
      <div style={bodyStyle}>{children}</div>
    </aside>
  );
};

const calloutStyles = {
  wrap: {
    border: '1px solid var(--border-gold)',
    background: 'var(--gold-dim)',
    padding: '36px 40px', borderRadius: 4,
  },
  eyebrow: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-accent)', marginBottom: 14,
  },
  italicBody: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic',
    fontSize: 28, lineHeight: 1.3,
    color: 'var(--fg-accent-soft)', fontWeight: 500,
    textWrap: 'balance',
  },
  body: {
    fontSize: 18, lineHeight: 1.6, color: 'var(--fg-1)',
  },
};

Object.assign(window, { Callout });