const ctaV2Styles = {
  wrap: { padding: '140px 0', background: 'var(--pink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' },
  inner: { textAlign: 'center', maxWidth: 900, margin: '0 auto' },
  bigQ: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(72px, 10vw, 168px)', lineHeight: 0.88, letterSpacing: '-0.05em', color: 'var(--paper)' },
  accent: { color: 'var(--yellow)' },
  titleLogo: { height: '1.5em', width: 'auto', display: 'inline-block', verticalAlign: '-0.18em', marginRight: '0.04em' },
  sub: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2.2vw, 24px)', lineHeight: 1.45, color: 'rgba(255,255,255,.92)', maxWidth: 560, margin: '32px auto 0' },
  ctaRow: { display: 'flex', gap: 14, marginTop: 40, flexWrap: 'wrap', justifyContent: 'center' },
};

function CTAV2() {
  return (
    <section id="contact" style={ctaV2Styles.wrap}>
      <div className="container">
        <div style={ctaV2Styles.inner}>
          <h2 style={ctaV2Styles.bigQ}>
            What's<br/>
            <span style={ctaV2Styles.accent}>your</span><br/>
            <img src="assets/dream-logo-white.png" alt="Dream" style={ctaV2Styles.titleLogo} /><span style={{ fontSize: '1.4em', verticalAlign: '0.15em', lineHeight: 0.5 }}>?</span>
          </h2>
          <p style={ctaV2Styles.sub}>
            Email us and we'll try to help you make it happen.
          </p>
          <div style={ctaV2Styles.ctaRow}>
            <a href="mailto:jonny@simonsquibb.com" className="btn btn-yellow">Email us →</a>
          </div>
        </div>
      </div>
    </section>
  );
}