// Quote.jsx — large pull-quote with attribution

const qStyles = {
  section: { padding: '96px 0' },
  container: { maxWidth: 920, margin: '0 auto', padding: '0 var(--container-pad)', textAlign: 'left' },
  mark: { display: 'block', marginBottom: 8 },
  q: { fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 'clamp(24px, 3vw, 36px)', lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--ink-1000)', textWrap: 'balance', margin: '0 0 36px' },
  attr: { display: 'flex', alignItems: 'center', gap: 14, paddingTop: 18, borderTop: '1px solid var(--border)' },
  avatar: { width: 40, height: 40, borderRadius: 4, background: 'var(--ink-1000)', color: 'var(--ink-0)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 16 },
  name: { fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500 },
  meta: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
};

function Quote() {
  return (
    <section style={qStyles.section}>
      <div style={qStyles.container}>
        <span style={qStyles.mark}><Mark size={56}/></span>
        <p style={qStyles.q}>
          We'd burnt ₹14 lakh in 9 months with two other agencies. Dry Powder cut our CPL
          by 70% in the first six weeks. They show me the math every Monday. Nobody else did that.
        </p>
        <div style={qStyles.attr}>
          <div style={qStyles.avatar}>R</div>
          <div>
            <div style={qStyles.name}>Dr. Rohit Arora</div>
            <div style={qStyles.meta}>Founder, Arora Dental · Pune</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Quote });