function Booking() {
  React.useEffect(() => {
    function initSchedulingButton() {
      const target = document.getElementById('booking-schedule');
      if (target && window.calendar && window.calendar.schedulingButton) {
        target.innerHTML = '';
        calendar.schedulingButton.load({
          url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ1reaYeikSmVMJn2-PxYgQ0PiwKIqdmx6K8NZHazWXDjkiNuK9MG6PTyF6utsUZU7rFxn8tJtSF?gv=true',
          color: '#1f3a2e',
          label: 'Schedule your free consultation',
          target: target,
        });
      } else if (target) {
        setTimeout(initSchedulingButton, 100);
      }
    }
    initSchedulingButton();
  }, []);

  return (
    <section id="book" style={{
      padding: "120px 0",
      background: "var(--paper)",
      position: "relative",
    }}>
      <div className="wrap">
        <div style={{
          maxWidth: 900, margin: "0 auto",
          padding: "40px 30px",
        }}>
          <div id="booking-schedule"></div>
        </div>
      </div>
    </section>
  );
}

window.Booking = Booking;