// bookcall.jsx — embedded Calendly scheduling widget.
// Replace CALENDLY_URL with the real Prexi scheduling link.

/* eslint-disable react/prop-types */

const CALENDLY_URL = "https://calendly.com/sachin-prexi/30min";

function BookCallApp() {
  const [theme, setTheme] = useTheme();
  const ref = React.useRef(null);
  const [status, setStatus] = React.useState("loading");

  React.useEffect(() => {
    let tries = 0;
    const id = setInterval(() => {
      tries++;
      if (window.Calendly && ref.current) {
        clearInterval(id);
        ref.current.innerHTML = "";
        try {
          window.Calendly.initInlineWidget({ url: CALENDLY_URL, parentElement: ref.current });
          setStatus("ok");
        } catch (e) {
          setStatus("fail");
        }
      } else if (tries > 24) {
        clearInterval(id);
        setStatus("fail");
      }
    }, 250);
    return () => clearInterval(id);
  }, []);

  return (
    <>
      <Header theme={theme} setTheme={setTheme} active="bookcall" />
      <main>
        {/* intro */}
        <section className="page-intro">
          <div className="page-intro-glow" aria-hidden="true" />
          <div className="container">
            <div className="page-intro-inner">
              <span className="eyebrow">Book a call</span>
              <h1 className="page-title">
                Bring a campaign. <span className="serif-italic">We'll show you how Prexi would run it.</span>
              </h1>
              <p className="page-lead">
                Thirty minutes with a founder, no deck, no sales rep. Pick a time that works and tell us what you're trying to scale.
              </p>
            </div>
          </div>
        </section>

        {/* calendly */}
        <section className="bookcall">
          <div className="container">
            <div className="calendly-wrap">
              <div
                ref={ref}
                className="calendly-inline-widget"
                data-url={CALENDLY_URL}
                style={{ minWidth: 320, height: 720 }}
              ></div>
              {status !== "ok" && (
                <div className="calendly-fallback">
                  <div className="cf-h">
                    {status === "loading" ? "Loading the scheduler…" : "Scheduler couldn't load"}
                  </div>
                  <p style={{ maxWidth: 420, margin: 0, lineHeight: 1.55 }}>
                    {status === "loading"
                      ? "One moment while we pull up available times."
                      : "Connect the live Calendly link, or email us and we'll find a time."}
                  </p>
                  {status === "fail" && (
                    <a className="btn btn-primary" href="mailto:hello@prexi.ai">Email hello@prexi.ai</a>
                  )}
                </div>
              )}
            </div>

            <div className="bookcall-aside">
              <span className="ba-item"><span className="ba-dot" /> 30 minutes, video call</span>
              <span className="ba-item"><span className="ba-dot" /> Bring a campaign you're scaling</span>
              <span className="ba-item"><span className="ba-dot" /> A founder, not a sales rep</span>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

Object.assign(window, { BookCallApp });