/* global React */
const { useEffect: useCalEffect, useState: useCalState } = React;

const CAL_NS = "free-consulting-call";
const CAL_LINK = "rayyan-umer/free-consulting-call";

/* Bootstrap the Cal.com inline embed exactly once. Mirrors the snippet Rayyan
   provided, adapted to fire from React after the container mounts. */
function initCal(onReady) {
  /* eslint-disable */
  (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; let 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" });
  window.Cal.ns[CAL_NS]("inline", {
    elementOrSelector: "#cal-inline-target",
    config: { layout: "month_view", useSlotsViewOnSmallScreen: "true" },
    calLink: CAL_LINK,
  });
  window.Cal.ns[CAL_NS]("ui", {
    cssVarsPerTheme: { light: { "cal-brand": "#ffd700" }, dark: { "cal-brand": "#ffd700" } },
    hideEventTypeDetails: false,
    layout: "month_view",
  });
  if (onReady) {
    window.Cal.ns[CAL_NS]("on", { action: "linkReady", callback: onReady });
  }
  /* eslint-enable */
}

function LpBook() {
  const [ready, setReady] = useCalState(false);
  useCalEffect(() => {
    if (window.__calBooted) { setReady(true); return; }
    window.__calBooted = true;
    try { initCal(() => setReady(true)); } catch (e) { /* offline preview */ }
    // safety: reveal container even if linkReady never fires
    const t = setTimeout(() => setReady(true), 4000);
    return () => clearTimeout(t);
  }, []);

  const points = ["We diagnose before we build", "We own the outcome, not the task", "We make money when you make money"];

  return (
    <section id="book" className="lp-book">
      <div className="smo-glow smo-glow--hero lp-book__glow" />
      <div className="lp-book__inner">
        <div className="lp-book__head reveal">
          <p className="smo-eyebrow">Book a call</p>
          <h2 className="smo-h2">
            Let's find the bottleneck <span className="smo-accent">worth fixing first</span>.
          </h2>
          <p className="smo-body lp-book__lead">
            Pick a time below. We'll audit where you are and come back with the first system
            we'd own. No pitch deck, no pressure.
          </p>
          <div className="lp-book__points">
            {points.map((p) => (
              <span className="lp-book__point" key={p}>
                <span className="lp-book__check">✓</span> {p}
              </span>
            ))}
          </div>
        </div>

        <div className="smo-glass smo-glass--hero lp-cal-wrap reveal">
          {!ready && <div className="lp-cal__loading">Loading the calendar…</div>}
          <div id="cal-inline-target" className="lp-cal" style={{ display: ready ? "block" : "none" }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LpBook });