// CTA section — final bottom-of-page closing call-to-book.
//
// HISTORY: This used to fetch /booking-widget.html and inject it inline.
// That created TWO copies of the booking widget in the DOM (this inline
// one + the one inside BookingModal.jsx), both using the same element IDs
// (#bm-fname, #bm-action-btn, etc.). document.getElementById() returns the
// FIRST match in DOM order — the inline widget — so when a user filled
// out the modal and clicked Continue, the script read empty values from
// THIS inline widget's inputs, validation failed silently, and the modal
// appeared "broken" with no feedback.
//
// Fix: stop rendering the widget inline. The modal is now the only place
// the booking form exists. This section just becomes a closing pitch with
// a button that opens the modal.

const ctaWrapStyle = {
  padding: 'var(--section-y) 32px var(--section-y-lg)',
};
const ctaInner = {
  maxWidth: 760,
  margin: '0 auto',
  textAlign: 'center',
  background: 'var(--blue-soft, #EAF3FC)',
  border: '1px solid rgba(8,120,216,0.18)',
  borderRadius: 24,
  padding: '64px 32px',
};
const ctaEyebrow = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: 8,
  fontSize: 11,
  letterSpacing: '0.14em',
  textTransform: 'uppercase',
  color: 'var(--blue)',
  fontWeight: 600,
  marginBottom: 18,
};
const ctaDot = {
  width: 6,
  height: 6,
  borderRadius: '50%',
  background: 'var(--coral, #E4664D)',
};
const ctaH2 = {
  fontFamily: "'Outfit', system-ui, sans-serif",
  fontSize: 40,
  fontWeight: 600,
  lineHeight: 1.1,
  letterSpacing: '-0.02em',
  margin: '0 0 18px',
  color: 'var(--ink)',
};
const ctaH2Accent = { color: 'var(--blue)' };
const ctaSub = {
  fontSize: 17,
  lineHeight: 1.55,
  color: 'var(--ink-muted)',
  maxWidth: 540,
  margin: '0 auto 32px',
};
const ctaBtn = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: 10,
  background: 'var(--ink)',
  color: '#fff',
  padding: '16px 32px',
  borderRadius: 12,
  fontSize: 15,
  fontWeight: 500,
  textDecoration: 'none',
  transition: 'background .15s, transform .15s',
};

function CTA() {
  return (
    <section id="cta" style={ctaWrapStyle} className="reveal bm-section">
      <div style={ctaInner}>
        <div style={ctaEyebrow}>
          <span style={ctaDot}></span>
          Ready when you are
        </div>
        <h2 style={ctaH2}>
          Get your <span style={ctaH2Accent}>time back.</span>
        </h2>
        <p style={ctaSub}>
          Book a 30-minute call. We'll talk through what could come off your plate and what your days start to look like when there's someone you trust to hand it to.
        </p>
        <a
          href="#cta"
          data-booking-modal-trigger
          data-booking-source="page_bottom_cta"
          style={ctaBtn}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--blue)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.transform = 'translateY(0)'; }}
        >
          Book a call
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M3 8h10m0 0l-4-4m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { CTA });