const CALENDLY_URL = 'https://calendly.com/florence-modelos/30min';

const BookDemo = () => {
  const calendlyRef = React.useRef(null);

  React.useEffect(() => {
    const init = () => {
      if (!window.Calendly || !calendlyRef.current || calendlyRef.current.dataset.initialized) return;
      calendlyRef.current.dataset.initialized = 'true';
      window.Calendly.initInlineWidget({
        url: CALENDLY_URL,
        parentElement: calendlyRef.current,
      });
    };

    if (window.Calendly) {
      init();
    } else {
      const interval = setInterval(() => {
        if (window.Calendly) {
          clearInterval(interval);
          init();
        }
      }, 100);
      return () => clearInterval(interval);
    }
  }, []);

  return (
    <section className="book-demo" id="book-demo" data-screen-label="Book Demo">
      <div className="book-demo-bg" aria-hidden="true">
        <div className="book-demo-grid" />
        <div className="book-demo-glow book-demo-glow--left" />
        <div className="book-demo-glow book-demo-glow--right" />
        <div className="book-demo-beam" />
        <div className="book-demo-frame-lines">
          <span className="book-demo-vline book-demo-vline--left" />
          <span className="book-demo-vline book-demo-vline--center" />
          <span className="book-demo-vline book-demo-vline--right" />
          <span className="book-demo-hline" />
        </div>
      </div>

      <div className="book-demo-inner">
        <div className="book-demo-copy book-demo-animate book-demo-animate--1">
          <span className="label">/ Schedule a call</span>
          <h1>Book a Demo</h1>
          <p className="book-demo-lede">
            Interested in learning more about Model OS?
          </p>
          <p className="book-demo-lede book-demo-lede--dim">
            Pick a time below — we&apos;ll walk you through the platform and answer your questions.
          </p>
          <div className="book-demo-perks">
            <div className="book-demo-perk">
              <span className="book-demo-perk-dot" />
              30-minute discovery call
            </div>
            <div className="book-demo-perk">
              <span className="book-demo-perk-dot" />
              Live platform walkthrough
            </div>
            <div className="book-demo-perk">
              <span className="book-demo-perk-dot" />
              Tailored to your use case
            </div>
          </div>
        </div>

        <div className="book-demo-widget book-demo-animate book-demo-animate--2">
          <div className="book-demo-widget-frame">
            <div ref={calendlyRef} className="book-demo-calendly" />
          </div>
        </div>
      </div>
    </section>
  );
};

window.BookDemo = BookDemo;