// CTASection.jsx — closer on Ink surface

const ctaStyles = {
  section: { padding: '96px 0', background: 'var(--ink-1000)', color: 'var(--ink-0)', position: 'relative', overflow: 'hidden' },
  watermark: {
    position: 'absolute',
    left: '-160px',
    bottom: '-200px',
    opacity: 0.08,
    pointerEvents: 'none',
    zIndex: 0,
  },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap', position: 'relative', zIndex: 1 },
  left: { maxWidth: 720 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(246,242,231,0.55)', fontWeight: 500, marginBottom: 16 },
  h: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.9, letterSpacing: '-0.02em', textTransform: 'uppercase', margin: 0, textWrap: 'balance', color: 'var(--ink-0)' },
  emph: { color: 'var(--powder-500)' },
  sub: { fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.55, color: 'rgba(246,242,231,0.65)', maxWidth: '52ch', marginTop: 24 },
  right: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16 },
  btn: { fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 16, padding: '16px 24px', background: 'var(--powder-500)', color: 'var(--ink-0)', border: 'none', borderRadius: 'var(--r-md)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10 },
  slots: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(246,242,231,0.55)' },
};

function CTASection({ onBook }) {
  return (
    <section style={ctaStyles.section}>
      <div style={ctaStyles.watermark} aria-hidden="true">
        <Mark size={720}/>
      </div>
      <div style={ctaStyles.container}>
        <div style={ctaStyles.left}>
          <div style={ctaStyles.eyebrow}>The open</div>
          <h2 style={ctaStyles.h}>One job.<br/><span style={ctaStyles.emph}>More leads.</span></h2>
          <p style={ctaStyles.sub}>
            30-minute fit call. We'll look at your ad accounts, tell you what's salvageable,
            and tell you straight if we can't move your CPL.
          </p>
        </div>
        <div style={ctaStyles.right}>
          <button style={ctaStyles.btn} onClick={onBook}><Mark size={14} color="var(--ink-0)"/> Book a fit call</button>
          <div style={ctaStyles.slots}>2 slots open · Q3 2026</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CTASection });