{/* Left: calendar */}

Colombia Time (COT, UTC-5)

{MONTH_NAMES[viewMonth]} {viewYear}

{DAY_NAMES.map((d) => (

{d}

))}

{cells.map((day, i) => { if (day === null) return

; const dateStr = toDateStr(viewYear, viewMonth, day); const isPast = dateStr < today; const isToday = dateStr === today; const isAvailable = !loadingMonth && (monthFetchFailed || availableDates.has(dateStr)); const isSelected = dateStr === selectedDate; const isDisabled = isPast || (!loadingMonth && !monthFetchFailed && !isAvailable); return ( onDateSelect(dateStr)} /> ); })}

{/* Right: slots */}

{!selectedDate && (

Select a date to see available times.

)} {selectedDate && (<>

Available times

{loadingSlots && (

{Array.from({ length: 9 }).map((_, i) => (

))}

)} {!loadingSlots && slotsError && (

Could not load times. Please try again.

)} {!loadingSlots && !slotsError && slots.length === 0 && (

No availability.

{nextAvail && ( )}

)} {!loadingSlots && slots.length > 0 && (

{slotGroups.map((g) => (

{slotGroups.length > 1 && (

{g.label}

)}

{g.slots.map((slot, idx) => ( ))}

))}

)} )}

); } // ── Slot summary + countdown ──────────────────────────────────────────── function SlotSummary({ slot }) { const d = new Date(slot.startTime); const h24 = (d.getUTCHours() - 5 + 24) % 24; const min = d.getUTCMinutes(); const period = h24 >= 12 ? 'PM' : 'AM'; const h = h24 % 12 || 12; const timeLabel = `${h}:${padZ(min)} ${period} COT`; const utcDate = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate())); const dateLabel = `${DAY_SHORT[utcDate.getUTCDay()]}, ${MONTH_SHORT[utcDate.getUTCMonth()]} ${utcDate.getUTCDate()}`; return (

{dateLabel} · {timeLabel}

); } function SlotTimer({ startedAt }) { const [remaining, setRemaining] = React.useState(10 * 60); React.useEffect(() => { const id = setInterval(() => { setRemaining(Math.max(0, 10 * 60 - Math.floor((Date.now() - startedAt) / 1000))); }, 1000); return () => clearInterval(id); }, [startedAt]); if (remaining === 0) return

Slot may no longer be available; submit to confirm.

; const m = Math.floor(remaining / 60); const s = remaining % 60; return

Slot held for {m}:{padZ(s)}

; } // ── Field ─────────────────────────────────────────────────────────────── function Field({ label, error, optional, children }) { return (

{label} {optional && (optional)} {children} {error &&

{error}

}

); } // ── Booking form ──────────────────────────────────────────────────────── function BookingForm({ slot, onConfirmed, onSlotConflict, onError, onBack }) { const [firstName, setFirstName] = React.useState(''); const [lastName, setLastName] = React.useState(''); const [email, setEmail] = React.useState(''); const [company, setCompany] = React.useState(''); const [notes, setNotes] = React.useState(''); const [showNotes, setShowNotes] = React.useState(false); const [errs, setErrs] = React.useState({}); const [submitting, setSubmitting] = React.useState(false); const [timerStart] = React.useState(() => Date.now()); const validate = () => { const e = {}; if (!firstName.trim()) e.firstName = 'Required'; else if (firstName.length > 60) e.firstName = 'Too long'; if (!lastName.trim()) e.lastName = 'Required'; else if (lastName.length > 60) e.lastName = 'Too long'; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) e.email = 'Invalid email'; if (company.length > 100) e.company = 'Too long'; if (notes.length > 500) e.notes = 'Too long'; return e; }; const submit = async (ev) => { ev.preventDefault(); const e = validate(); setErrs(e); if (Object.keys(e).length) return; setSubmitting(true); try { const d = new Date(slot.startTime); const h24 = (d.getUTCHours() - 5 + 24) % 24; const cotMin = d.getUTCMinutes(); const res = await fetch(`${BASE_URL}/ms-bookings-book`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ date: `${d.getUTCFullYear()}-${padZ(d.getUTCMonth() + 1)}-${padZ(d.getUTCDate())}`, time: `${padZ(h24)}:${padZ(cotMin)}`, firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim(), company: company.trim() || undefined, notes: notes.trim() || undefined, }), }); if (res.status === 409) { onSlotConflict(); return; } if (!res.ok) { const body = await res.json().catch(() => ({})); onError(body.error || 'SERVER_ERROR'); return; } const result = await res.json(); onConfirmed({ bookingId: result.bookingId, startTime: result.startTime, calendarUrl: result.calendarUrl }, email); } catch (err) { onError('NETWORK_ERROR'); } finally { setSubmitting(false); } }; return (

{/* slot summary + timer side by side */}

{/* 2-column grid for ALL fields to use horizontal space */}

setFirstName(e.target.value)} disabled={submitting} /> setLastName(e.target.value)} disabled={submitting} /> setEmail(e.target.value)} disabled={submitting} /> setCompany(e.target.value)} disabled={submitting} />

{!showNotes ? ( ) : (

setNotes(e.target.value)} disabled={submitting} style={{ resize: 'none' }} />
          </Field>
        )}

<div style={{ display: 'flex', gap: 10, paddingTop: 2 }}>
          <button type="button" onClick={onBack} disabled={submitting} className="bk-secondary bk-btn-tap">Back</button>
          <button type="submit" disabled={submitting} className="bk-submit">
            {submitting ? (<><I.Spinner style={{ height: 14, width: 14 }} /> Confirming...</>) : 'Confirm Meeting'}
          </button>
        </div>
      </form>
    );
  }

// ── Phase screens ───────────────────────────────────────────────────────
  function BackHeader({ label, onClick }) {
    return (
      <button type="button" onClick={onClick} className="bk-back">
        <span className="bk-back-icon"><I.ArrowL style={{ height: 12, width: 12 }} /></span>
        <span>{label}</span>
      </button>
    );
  }

function IdleView({ onStart }) {
    return (
      <div className="bk-fade-enter" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', minHeight: 240, padding: '20px 0' }}>
        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" aria-hidden="true">
          <rect x="6" y="10" width="36" height="32" rx="4" stroke="var(--accent)" strokeWidth="1.5" />
          <line x1="6" y1="20" x2="42" y2="20" stroke="var(--accent)" strokeWidth="1.5" />
          <line x1="16" y1="6" x2="16" y2="14" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" />
          <line x1="32" y1="6" x2="32" y2="14" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" />
          <rect x="14" y="26" width="4" height="4" rx="0.5" fill="var(--accent)" opacity="0.5" />
          <rect x="22" y="26" width="4" height="4" rx="0.5" fill="var(--accent)" opacity="0.5" />
          <rect x="30" y="26" width="4" height="4" rx="0.5" fill="var(--accent)" opacity="0.5" />
          <rect x="14" y="34" width="4" height="4" rx="0.5" fill="var(--accent)" opacity="0.3" />
          <rect x="22" y="34" width="4" height="4" rx="0.5" fill="var(--accent)" opacity="0.3" />
        </svg>
        <p style={{ color: 'var(--fg)', fontFamily: 'var(--font-display, inherit)', fontWeight: 600, fontSize: 'clamp(1.1rem, 1.6vw, 1.3rem)', margin: '14px 0 0' }}>Book a discovery call</p>
        <p style={{ color: 'var(--fg-muted)', fontSize: 14, lineHeight: 1.6, margin: '8px 0 0', textAlign: 'center', maxWidth: 320 }}>
          30 minutes with a founder. No commitment, no sales pitch — just an honest conversation about what you're building.
        </p>
        <button type="button" onClick={onStart} className="bk-submit"
          style={{ marginTop: 24, flex: 'none', minWidth: 240 }}>
          Pick a time →
        </button>
      </div>
    );
  }

function AnimatedCheckmark() {
    return (
      <svg width="56" height="56" viewBox="0 0 64 64" fill="none" aria-hidden="true">
        <circle cx="32" cy="32" r="30" stroke="color-mix(in srgb, var(--accent) 25%, transparent)" strokeWidth="1.5" fill="color-mix(in srgb, var(--accent) 10%, transparent)" />
        <path d="M20 33L28 41L44 25" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
          strokeDasharray="32" strokeDashoffset="32" style={{ animation: 'bk-check 450ms cubic-bezier(0.16,1,0.3,1) 200ms forwards' }} />
      </svg>
    );
  }

function SlotConflictScreen({ onBack }) {
    return (
      <div className="bk-fade-enter" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '24px 0', gap: 14 }}>
        <div style={{ height: 56, width: 56, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--eyebrow-bg)', border: '1px solid var(--eyebrow-bd)' }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 9v4M12 17h.01" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
            <circle cx="12" cy="12" r="10" stroke="var(--accent)" strokeWidth="1.5" />
          </svg>
        </div>
        <div>
          <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg)', margin: 0, fontFamily: 'var(--font-display, inherit)' }}>Slot just taken</p>
          <p style={{ fontSize: 13, color: 'var(--fg-muted)', maxWidth: 280, margin: '6px 0 0' }}>That time was booked by someone else. Choose another time.</p>
        </div>
        <button type="button" onClick={onBack} className="bk-submit" style={{ width: '100%', flex: 'none', maxWidth: 320 }}>Pick another time</button>
      </div>
    );
  }

function ErrorScreen({ code, onRetry }) {
    const isNet = code === 'NETWORK_ERROR';
    return (
      <div className="bk-fade-enter" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '24px 0', gap: 14 }}>
        <div style={{ height: 56, width: 56, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(192,86,63,0.08)', border: '1px solid rgba(192,86,63,0.20)' }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M18 6L6 18M6 6l12 12" stroke="#c0563f" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </div>
        <div>
          <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg)', margin: 0, fontFamily: 'var(--font-display, inherit)' }}>
            {isNet ? 'Connection problem' : 'Something went wrong'}
          </p>
          <p style={{ fontSize: 13, color: 'var(--fg-muted)', maxWidth: 280, margin: '6px 0 0' }}>
            {isNet ? 'Check your connection and try again.' : 'An error occurred. You can retry or email us.'}
          </p>
        </div>
        <button type="button" onClick={onRetry} className="bk-submit" style={{ width: '100%', flex: 'none', maxWidth: 320 }}>Try again</button>
        <a href="mailto:hello@prometio.group" style={{ fontSize: 13, color: 'var(--fg-faint)', textDecoration: 'none' }}>or write to hello@prometio.group</a>
      </div>
    );
  }

// ── State machine + main widget ─────────────────────────────────────────
  function reducer(state, action) {
    switch (action.type) {
      case 'START': return { name: 'selecting', selectedDate: null, selectedSlot: null };
      case 'BACK_TO_IDLE': return { name: 'idle' };
      case 'SELECT_DATE':
        if (state.name === 'selecting') return { ...state, selectedDate: action.date, selectedSlot: null };
        return state;
      case 'SELECT_SLOT': return { name: 'filling_form', slot: action.slot };
      case 'BACK_TO_CALENDAR': return { name: 'selecting', selectedDate: null, selectedSlot: null };
      case 'CONFIRMED': return { name: 'confirmed', confirmation: action.confirmation, email: action.email };
      case 'SLOT_CONFLICT': return { name: 'slot_conflict' };
      case 'ERROR': return { name: 'error', code: action.code };
      case 'RETRY': return { name: 'selecting', selectedDate: null, selectedSlot: null };
      default: return state;
    }
  }

function BookingWidget({ initialPhase, onClose }) {
    const [state, dispatch] = React.useReducer(reducer, initialPhase === 'selecting'
      ? { name: 'selecting', selectedDate: null, selectedSlot: null }
      : { name: 'idle' });

// If the parent launched us straight into selecting, "back" returns to the parent.
    // Otherwise back goes to the internal idle view.
    const backFromCalendar = onClose && initialPhase === 'selecting'
      ? onClose
      : () => dispatch({ type: 'BACK_TO_IDLE' });

return (
      <div className="bk-card">
        <style dangerouslySetInnerHTML={{ __html: CSS }} />
        <div className="bk-root">
          {state.name === 'idle' && <IdleView onStart={() => dispatch({ type: 'START' })} />}

{state.name === 'selecting' && (
            <div className="bk-fade-enter">
              <BackHeader label="Back" onClick={backFromCalendar} />
              <p style={{ fontSize: 'clamp(1.05rem, 1.5vw, 1.2rem)', fontWeight: 600, color: 'var(--fg)', margin: '0 0 18px', fontFamily: 'var(--font-display, inherit)' }}>Book a discovery call</p>
              <BookingCalendar
                selectedDate={state.selectedDate}
                selectedSlot={state.selectedSlot}
                onDateSelect={(date) => dispatch({ type: 'SELECT_DATE', date })}
                onSlotSelect={(slot) => dispatch({ type: 'SELECT_SLOT', slot })}
              />
            </div>
          )}

{state.name === 'filling_form' && (
            <div className="bk-fade-enter">
              <BackHeader label="Change time" onClick={() => dispatch({ type: 'BACK_TO_CALENDAR' })} />
              <BookingForm
                slot={state.slot}
                onConfirmed={(confirmation, email) => dispatch({ type: 'CONFIRMED', confirmation, email })}
                onSlotConflict={() => dispatch({ type: 'SLOT_CONFLICT' })}
                onError={(code) => dispatch({ type: 'ERROR', code })}
                onBack={() => dispatch({ type: 'BACK_TO_CALENDAR' })}
              />
            </div>
          )}

{state.name === 'confirmed' && (
            <ConfirmationScreen
              confirmation={state.confirmation}
              email={state.email}
              onDone={onClose || (() => dispatch({ type: 'BACK_TO_IDLE' }))}
            />
          )}

{state.name === 'slot_conflict' && (
            <SlotConflictScreen onBack={() => dispatch({ type: 'BACK_TO_CALENDAR' })} />
          )}

{state.name === 'error' && (
            <ErrorScreen code={state.code} onRetry={() => dispatch({ type: 'RETRY' })} />
          )}
        </div>
      </div>
    );
  }

window.BookingWidget = BookingWidget;
})();