// BookCallModal.jsx — split canvas panel + Calendly embed.
const CALENDLY_URL =
  "https://calendly.com/kyle-zaigo/new-meeting?hide_gdpr_banner=1&background_color=ffffff&text_color=1a1a1a&primary_color=e94e3b";

function BookCallModal({ open, onClose }) {
  const [embedReady, setEmbedReady] = React.useState(false);
  const dialogRef = React.useRef(null);
  const closeRef = React.useRef(null);

  useFocusTrap(open, dialogRef, onClose);

  React.useEffect(() => {
    if (!open) return undefined;

    setEmbedReady(true);
    const unlock = window.zgLockScroll?.() || (() => {});

    return () => {
      unlock();
      setEmbedReady(false);
    };
  }, [open]);

  if (!open) return null;

  return (
    <div
      className="zg-book-modal-scrim"
      onClick={onClose}
      role="presentation"
    >
      <div
        ref={dialogRef}
        className="zg-book-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="zg-book-modal-title"
        tabIndex={-1}
        onClick={(event) => event.stopPropagation()}
      >
        <span className="zg-book-modal-grab" aria-hidden="true" />

        <button
          ref={closeRef}
          type="button"
          className="zg-book-modal-close"
          onClick={onClose}
          aria-label="Close scheduling modal"
        >
          ×
        </button>

        <div className="zg-book-modal-layout">
          <div className="zg-book-modal-embed">
            {embedReady && (
              <iframe
                src={CALENDLY_URL}
                title="Schedule time with Zaigo on Calendly"
                loading="lazy"
                allow="fullscreen"
              />
            )}
          </div>

          <aside className="zg-book-modal-brand">
            <span className="zg-meta-label">Let's talk</span>
            <h2 id="zg-book-modal-title" className="zg-h2">
              Book a call
            </h2>
            <p className="zg-body-lg zg-book-modal-lede">
              Spend <span className="zg-highlight">thirty minutes</span> with us.
            </p>
            <p className="zg-book-modal-note">
              Pick a time that works. No deck, no follow-up sequence.
            </p>
            <AnimalMenagerie className="zg-animal-menagerie--modal" compact />
          </aside>
        </div>
      </div>
    </div>
  );
}

window.BookCallModal = BookCallModal;