Bookings on your page, with Google Calendar

Build me a page for first calls with booking.
At the top a short sentence about who I am and what happens in the call.
Below it the free times of the next two weeks, grouped by day.
Before booking, the page asks: What is it about? and How did you hear about me?
Booking type: erstgespraech. Calm, lots of white, good on a phone.

Technical requirements for bookings (the page is hosted on sharepa):

- sharepa adds a script to the published page that provides window.sharepaTermine. Do not include a script of your own for it, and do not use an external booking service or an iframe.
- The script may load after your code. Before the first call, check whether window.sharepaTermine exists, otherwise wait for the event "sharepaTermine" on document.
- sharepaTermine.typen() returns { types: [{ id, name, description, duration, locations }], timezone }. locations contains "meet", "telefon" (phone), "vorort" (on site) or "link".
- sharepaTermine.zeiten(type, from, to) returns { slots: [...] } with free start times in UTC. from and to are dates in the format YYYY-MM-DD, at most 31 days apart.
- Always show times with Intl.DateTimeFormat in the visitor's time zone, never convert them yourself.
- sharepaTermine.buchen({ type, start, name, email, location, phone, answers }) books. start is exactly one value from slots. location must be in the type's locations. phone only with location "telefon". answers is a flat object with the page's own questions (field names in lower case, not starting with an underscore).
- When booking, a short security check by sharepa appears. Do not build anything for it.
- Errors have a field code: "termine.belegt" (time taken, reload the times), "termine.turnstile" (check failed, try again), "formular.heikel" (answers look like passwords or payment data). For all others, show a general error message.
- If window.sharepaTermine is still missing after 5 seconds, or typen() fails with "termine.aus", show “Bookings are not set up for this page yet.” instead of loading forever.
- No questions about passwords, credit card or other payment data, and no health data.
- After booking, show "Booked" and say that the confirmation comes by email.

<section id="booking">
  <div id="times">Loading free times …</div>
  <form id="details" hidden>
    <p id="chosen"></p>
    <input name="name" required placeholder="Your name">
    <input name="email" type="email" required placeholder="Your email">
    <textarea name="topic" placeholder="What is it about?"></textarea>
    <button type="submit">Book now</button>
  </form>
  <p id="message" role="status"></p>
</section>

<script>
const TYPE = "erstgespraech";
const format = new Intl.DateTimeFormat(undefined, { weekday: "short", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit" });
const day = (d) => d.toISOString().slice(0, 10);
let chosen = null;

function ready(fn) {
  if (window.sharepaTermine) fn();
  else document.addEventListener("sharepaTermine", fn, { once: true });
}

async function loadTimes() {
  const box = document.getElementById("times");
  const today = new Date();
  try {
    const { slots } = await sharepaTermine.zeiten(TYPE, day(today), day(new Date(today.getTime() + 13 * 86400000)));
    box.textContent = slots.length ? "" : "No times are free right now.";
    for (const s of slots) {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = format.format(new Date(s));
      button.onclick = () => {
        chosen = s;
        document.getElementById("chosen").textContent = button.textContent;
        document.getElementById("details").hidden = false;
      };
      box.append(button);
    }
  } catch (e) {
    box.textContent = "Bookings are not available right now.";
  }
}

document.getElementById("details").addEventListener("submit", async (ev) => {
  ev.preventDefault();
  const f = new FormData(ev.target);
  const message = document.getElementById("message");
  try {
    await sharepaTermine.buchen({
      type: TYPE, start: chosen, location: "meet",
      name: f.get("name"), email: f.get("email"),
      answers: { topic: f.get("topic") },
    });
    ev.target.hidden = true;
    message.textContent = "Booked. The confirmation is on its way to your inbox.";
  } catch (e) {
    if (e.code === "termine.belegt") { message.textContent = "That time was just taken. Please pick another one."; loadTimes(); }
    else if (e.code === "termine.turnstile") message.textContent = "The security check did not work. Please try again.";
    else if (e.code === "formular.heikel") message.textContent = "Please do not enter passwords or payment data.";
    else message.textContent = "That did not work. Please try again.";
  }
});

ready(loadTimes);
</script>

import { useEffect, useState } from "react";

const TYPE = "erstgespraech";
const format = new Intl.DateTimeFormat(undefined, { weekday: "short", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit" });
const day = (d) => d.toISOString().slice(0, 10);

function useBookings() {
  const [api, setApi] = useState(() => window.sharepaTermine ?? null);
  useEffect(() => {
    if (api) return;
    const there = () => setApi(window.sharepaTermine);
    document.addEventListener("sharepaTermine", there, { once: true });
    return () => document.removeEventListener("sharepaTermine", there);
  }, [api]);
  return api;
}

export default function Booking() {
  const bookings = useBookings();
  const [times, setTimes] = useState(null);
  const [chosen, setChosen] = useState(null);
  const [message, setMessage] = useState("");
  const [done, setDone] = useState(false);

  async function load() {
    const today = new Date();
    try {
      const { slots } = await bookings.zeiten(TYPE, day(today), day(new Date(today.getTime() + 13 * 86400000)));
      setTimes(slots);
    } catch {
      setMessage("Bookings are not available right now.");
    }
  }
  useEffect(() => { if (bookings) load(); }, [bookings]);

  async function book(ev) {
    ev.preventDefault();
    const f = new FormData(ev.currentTarget);
    try {
      await bookings.buchen({ type: TYPE, start: chosen, location: "meet", name: f.get("name"), email: f.get("email"), answers: { topic: f.get("topic") } });
      setDone(true);
    } catch (e) {
      if (e.code === "termine.belegt") { setMessage("That time was just taken. Please pick another one."); setChosen(null); load(); }
      else if (e.code === "termine.turnstile") setMessage("The security check did not work. Please try again.");
      else if (e.code === "formular.heikel") setMessage("Please do not enter passwords or payment data.");
      else setMessage("That did not work. Please try again.");
    }
  }

  if (done) return <p>Booked. The confirmation is on its way to your inbox.</p>;
  return (
    <section>
      {times === null ? <p>Loading free times …</p> : times.length === 0 ? <p>No times are free right now.</p> :
        times.map((s) => <button key={s} type="button" aria-pressed={s === chosen} onClick={() => setChosen(s)}>{format.format(new Date(s))}</button>)}
      {chosen && (
        <form onSubmit={book}>
          <input name="name" required placeholder="Your name" />
          <input name="email" type="email" required placeholder="Your email" />
          <textarea name="topic" placeholder="What is it about?" />
          <button type="submit">Book now</button>
        </form>
      )}
      {message && <p role="status">{message}</p>}
    </section>
  );
}