// BookingCTA — parent-specific "book a spot" band, embedded in the Contact section.
// Clearly labelled for parents & caregivers so other audiences use the form instead.
// Links straight to the live Splose public booking form (opens in a new tab).

const SPLOSE_BOOKING_URL = "https://kid-link-occupational-therapy.splose.com/public-form/cc4c4ca1-73b9-4a04-9275-b95759d0ed4b";
// Separate Splose form for clinician supervision bookings.
const SPLOSE_SUPERVISION_URL = "https://kid-link-occupational-therapy.splose.com/public-form/ae613727-8bac-4713-b439-3b6bcf03eb6e";

function BookingCTA({
  title = "Ready to book? Find a spot for your child",
  body = "If you're a parent or caregiver ready to get started, complete our online booking form and our Family Liaison Team will be in touch to find a spot that suits your family.",
}) {
  return (
    <div style={{
      background: "linear-gradient(135deg, var(--kl-plum) 0%, var(--kl-plum-dark) 100%)",
      borderRadius: "var(--kl-radius-card-lg)",
      boxShadow: "var(--kl-card-shadow)",
      padding: "clamp(28px, 4vw, 48px)",
      color: "#fff",
      display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between",
      gap: 32,
    }}>
      <div style={{ maxWidth: 620 }}>
        <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 12, marginBottom: 16 }}>
          <span style={{
            color: "var(--kl-sun-light)", fontWeight: 800,
            fontSize: "0.74rem", letterSpacing: "0.16em", textTransform: "uppercase",
          }}>For parents &amp; caregivers</span>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 9,
            padding: "5px 12px", borderRadius: 999,
            background: "rgba(255, 255, 255, 0.14)", border: "1px solid rgba(255, 255, 255, 0.28)",
            fontSize: "var(--kl-text-small)", fontWeight: 700,
          }}>
            <span className="kl-avail-dot" aria-hidden="true" />
            Spots available now
          </span>
        </div>
        <h3 style={{ color: "#fff", fontSize: "var(--kl-text-h3)", lineHeight: 1.12, marginBottom: 14 }}>{title}</h3>
        <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.55, color: "rgba(255,255,255,0.9)", maxWidth: "52ch" }}>{body}</p>
      </div>

      <a
        href={SPLOSE_BOOKING_URL}
        target="_blank"
        rel="noopener noreferrer"
        className="kl-btn kl-btn--book"
        onClick={() => window.klTrack && window.klTrack("book_now_click", { source: "contact_band" })}
      >
        Book now
        <ChevronRight />
      </a>
    </div>
  );
}

window.BookingCTA = BookingCTA;