// Quote.jsx — editorial pull-quote
function Quote({ children, attribution }) {
  return (
    <figure style={quoteStyles.wrap}>
      <blockquote style={quoteStyles.text}>{children}</blockquote>
      {attribution && (
        <figcaption style={quoteStyles.attr}>
          <span style={quoteStyles.dash}>—</span>{attribution}
        </figcaption>
      )}
    </figure>
  );
}

const quoteStyles = {
  wrap: { margin: 0, maxWidth: 760, padding: '0 8px' },
  text: {
    fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontWeight: 400,
    fontSize: 'clamp(24px, 2.8vw, 36px)', lineHeight: 1.35,
    color: 'var(--ink)', margin: 0, textWrap: 'balance',
  },
  attr: {
    fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12,
    letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)',
    marginTop: 28, display: 'flex', alignItems: 'center', gap: 12,
  },
  dash: { color: 'var(--accent)' },
};

window.Quote = Quote;