/* burp.agency — Booker
   Global Calendly modal. Any button on any page can open it with:
     window.openBooker()                    — open empty
     window.openBooker({ email: 'a@b.c' })  — prefill email
     window.closeBooker()
   Render <BookerModal /> ONCE per page (at the top of <App />). */

const CALENDLY_URL = 'https://calendly.com/rohantanejayt/30min';

const buildCalendlyUrl = (email) => {
  const u = new URL(CALENDLY_URL);
  // Soft styling — Calendly honours these for color theming on Pro plans;
  // ignored otherwise.
  u.searchParams.set('hide_event_type_details', '0');
  u.searchParams.set('hide_gdpr_banner',         '1');
  u.searchParams.set('background_color', 'faf8f4');
  u.searchParams.set('text_color',       '111111');
  u.searchParams.set('primary_color',    'ff4d00');
  if (email) u.searchParams.set('email', email);
  return u.toString();
};

const BookerModal = () => {
  const [open, setOpen]   = React.useState(false);
  const [email, setEmail] = React.useState('');

  // Register global helpers + event listeners
  React.useEffect(() => {
    const onOpen = e => {
      const opts = (e && e.detail) || {};
      if (opts.email) setEmail(opts.email);
      setOpen(true);
    };
    const onClose = () => setOpen(false);
    document.addEventListener('burp:open-booker',  onOpen);
    document.addEventListener('burp:close-booker', onClose);

    window.openBooker  = (opts) => onOpen({ detail: opts || {} });
    window.closeBooker = () => onClose();

    return () => {
      document.removeEventListener('burp:open-booker',  onOpen);
      document.removeEventListener('burp:close-booker', onClose);
    };
  }, []);

  // Esc to close + lock body scroll while open
  React.useEffect(() => {
    if (!open) return;
    const onKey = e => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open) return null;

  return (
    <div
      role="dialog" aria-modal="true" aria-label="Book a free audit"
      onClick={e => { if (e.target === e.currentTarget) setOpen(false); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(17,17,17,0.85)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        animation: 'burp-fade-in .25s ease both',
      }}>
      <div style={{
        background: 'var(--color-cream)',
        width: '100%', maxWidth: 1000, height: 'min(90vh, 760px)',
        border: '1px solid var(--color-ink)',
        position: 'relative', display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          padding: '16px 20px',
          borderBottom: '1px solid var(--color-warm-gray)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: '#fff',
        }}>
          <div>
            <Label>BOOK YOUR AUDIT</Label>
            <div style={{
              marginTop: 4,
              fontFamily: 'Inter, sans-serif', fontSize: 13,
              color: 'var(--color-mid-gray)',
            }}>30 min · Zoom · with Rohan</div>
          </div>
          <button onClick={() => setOpen(false)}
            style={{
              background: 'transparent', border: '1px solid var(--color-ink)',
              width: 36, height: 36, borderRadius: 0, cursor: 'pointer',
              fontSize: 18, lineHeight: 1, color: 'var(--color-ink)',
              fontFamily: 'Inter, sans-serif',
            }} aria-label="Close">×</button>
        </div>

        <iframe
          src={buildCalendlyUrl(email)}
          title="Book a free audit"
          loading="eager"
          style={{
            flex: 1, width: '100%', border: 0,
            background: 'var(--color-cream)',
          }}
        ></iframe>

        <div style={{
          padding: '12px 20px',
          borderTop: '1px solid var(--color-warm-gray)',
          background: '#fff',
          fontFamily: 'Inter, sans-serif', fontSize: 12,
          color: 'var(--color-mid-gray)',
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', flexWrap: 'wrap', gap: 8,
        }}>
          <span>Powered by Calendly · <a href="mailto:rohan@burp.agency" style={{ color: 'var(--color-ink)' }}>or email rohan@burp.agency</a></span>
          <span>Esc to close</span>
        </div>
      </div>
    </div>
  );
};

/* Convenience helper to use as `onClick` */
const bookAudit = (email) => {
  if (typeof window === 'undefined') return;
  document.dispatchEvent(new CustomEvent('burp:open-booker', { detail: email ? { email } : {} }));
};

Object.assign(window, { CALENDLY_URL, buildCalendlyUrl, BookerModal, bookAudit });