/* global React, Calendly */
const { useEffect, useRef } = React;

function BookingSection({ onBook }) {
  return (
    <section className="rn-section rn-section--book" id="book">
      <div className="rn-book__halftone" aria-hidden="true" />
      <div className="rn-book__inner">
        <div className="rn-eyebrow">Booking</div>
        <h2 className="rn-h2 rn-book__h">
          Let's build something<br/>that actually works.
        </h2>
        <p className="rn-book__sub">
          30 minutes. No pitch deck. We'll tell you whether we can help on the call.
        </p>
        <div className="rn-book__ctas">
          <button className="rn-btn rn-btn--primary rn-btn--lg" onClick={onBook}>
            Schedule a Call <span className="rn-btn__arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

const CALENDLY_URL =
  'https://calendly.com/garyqphan/30min' +
  '?primary_color=e6d3b3' +
  '&background_color=131c30' +
  '&text_color=ffffff' +
  '&hide_gdpr_banner=1';

function BookingModal({ open, onClose }) {
  const widgetRef = useRef(null);

  useEffect(() => {
    if (!open || !widgetRef.current) return;
    if (typeof window.Calendly === 'undefined') {
      console.warn('Calendly widget script not loaded');
      return;
    }
    widgetRef.current.innerHTML = '';
    window.Calendly.initInlineWidget({
      url: CALENDLY_URL,
      parentElement: widgetRef.current,
    });
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="rn-modal is-open" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="rn-modal__panel" onClick={e => e.stopPropagation()}>
        <button className="rn-modal__close" onClick={onClose} aria-label="Close">×</button>
        <div className="rn-modal__head">
          <span className="rn-eyebrow"><span style={{color:'var(--rn-beige)'}}>△</span> Booking</span>
          <h3 className="rn-modal__h">Pick a time that works.</h3>
          <p className="rn-modal__sub">30 minutes · Google Meet · We'll tell you whether we can help on the call.</p>
        </div>
        <div ref={widgetRef} className="calendly-inline-widget" />
        <div className="rn-modal__foot">
          <strong>△</strong>
          <span>Powered by Calendly · Auto-creates a Google Meet on confirmation</span>
        </div>
      </div>
    </div>
  );
}

window.BookingSection = BookingSection;
window.BookingModal = BookingModal;