// booking.jsx — shown when no `?d=` parameter is set: someone landed without
// a scheduled call. We block the briefing and offer to book one inline.

const CAL_LINK = 'jens-bohse-u4rioh/30min';
const CAL_NS = '30min';

const loadCalEmbed = () => {
  if (window.__bwCalLoaded) return;
  window.__bwCalLoaded = true;

  // Cal.com inline embed loader — verbatim port from their docs.
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal, ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement('script')).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === 'string') {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ['initNamespace', namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, 'https://app.cal.com/embed/embed.js', 'init');

  window.Cal('init', CAL_NS, { origin: 'https://app.cal.com' });
};

const BookingScreen = () => {
  const elRef = React.useRef(null);

  React.useEffect(() => {
    loadCalEmbed();
    if (!window.Cal || !window.Cal.ns?.[CAL_NS]) return;
    window.Cal.ns[CAL_NS]('inline', {
      elementOrSelector: elRef.current,
      config: { layout: 'month_view' },
      calLink: CAL_LINK,
    });
    window.Cal.ns[CAL_NS]('ui', { hideEventTypeDetails: true, layout: 'month_view' });
  }, []);

  return (
    <main className="screen-enter booking-shell">
      <div className="booking-text">
        <span className="booking-eyebrow">bakedwith · Initial Call</span>
        <h1 className="booking-h1">Wir haben noch keinen Call.</h1>
        <p className="booking-lead">
          Buch dir hier einen Slot. Danach kriegst du den Briefing-Link. 5 Minuten vorab, damit wir nicht bei Null starten.
        </p>
        <ul className="booking-bullets">
          <li><strong>30 Minuten</strong> · per Video, ohne Slides</li>
          <li><strong>Konkrete Vorschläge</strong> zu deinen Use Cases</li>
          <li><strong>Konkretes Angebot</strong> innerhalb von 48h danach</li>
        </ul>
      </div>
      <div ref={elRef} className="booking-cal"/>
    </main>
  );
};

window.BookingScreen = BookingScreen;