// Booking / Appointment reservation section const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; const DAYS_SHORT = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb']; const TIME_SLOTS = ['09:00','10:00','11:00','12:00','14:00','15:00','16:00','17:00']; const Booking = () => { const today = new Date(); const [view, setView] = React.useState(new Date(today.getFullYear(), today.getMonth(), 1)); const [step, setStep] = React.useState(1); const [selDate, setSelDate] = React.useState(null); const [selTime, setSelTime] = React.useState(null); const [mode, setMode] = React.useState('Presencial'); const [area, setArea] = React.useState(SERVICES[0].id); const [form, setForm] = React.useState({ name: '', phone: '', email: '', notes: '' }); const [confirmed, setConfirmed] = React.useState(false); const [busy, setBusy] = React.useState([]); const [loadingSlots, setLoadingSlots] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(''); const isoDate = (d) => d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}` : ''; // Cargar horarios ya ocupados (Google Calendar) al elegir fecha React.useEffect(() => { if (!selDate) { setBusy([]); return; } let cancel = false; setLoadingSlots(true); setSelTime(null); fetch(`/api/availability?date=${isoDate(selDate)}`) .then(r => (r.ok ? r.json() : { busy: [] })) .then(d => { if (!cancel) setBusy(Array.isArray(d.busy) ? d.busy : []); }) .catch(() => { if (!cancel) setBusy([]); }) .finally(() => { if (!cancel) setLoadingSlots(false); }); return () => { cancel = true; }; }, [selDate]); const monthName = MONTHS[view.getMonth()] + ' ' + view.getFullYear(); // Build calendar grid const firstDay = new Date(view.getFullYear(), view.getMonth(), 1); const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate(); const startCol = firstDay.getDay(); const cells = []; for (let i = 0; i < startCol; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) cells.push(d); const isPast = (d) => { const dt = new Date(view.getFullYear(), view.getMonth(), d); return dt < new Date(today.getFullYear(), today.getMonth(), today.getDate()); }; const isWeekend = (d) => { const dt = new Date(view.getFullYear(), view.getMonth(), d); return dt.getDay() === 0 || dt.getDay() === 6; }; const isSelected = (d) => selDate && selDate.getFullYear() === view.getFullYear() && selDate.getMonth() === view.getMonth() && selDate.getDate() === d; const isToday = (d) => today.getFullYear() === view.getFullYear() && today.getMonth() === view.getMonth() && today.getDate() === d; const prevMonth = () => { const next = new Date(view.getFullYear(), view.getMonth() - 1, 1); if (next < new Date(today.getFullYear(), today.getMonth(), 1)) return; setView(next); }; const nextMonth = () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)); const formatDate = (d) => { if (!d) return ''; return `${DAYS_SHORT[d.getDay()]} ${d.getDate()} de ${MONTHS[d.getMonth()]}`; }; const submit = async (e) => { e.preventDefault(); setError(''); setSubmitting(true); try { const res = await fetch('/api/book', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ date: isoDate(selDate), time: selTime, mode, area: SERVICES.find(s => s.id === area)?.title || area, name: form.name, phone: form.phone, email: form.email, notes: form.notes, }), }); const data = await res.json().catch(() => ({})); if (!res.ok || !data.ok) throw new Error(data.error || 'No se pudo confirmar la reserva. Probá otro horario.'); setConfirmed(true); } catch (err) { setError(err.message || 'Error de conexión. Probá de nuevo o escribime por WhatsApp.'); } finally { setSubmitting(false); } }; const reset = () => { setConfirmed(false); setStep(1); setSelDate(null); setSelTime(null); setBusy([]); setError(''); setForm({ name: '', phone: '', email: '', notes: '' }); }; return (
Reserva de citas

Reservá tu consulta

Elegí día y horario. Te confirmo por WhatsApp o email dentro de las próximas horas.

{/* Stepper */}
{[ { n: 1, t: 'Fecha y hora' }, { n: 2, t: 'Tipo y área' }, { n: 3, t: 'Tus datos' }, ].map(s => (
= s.n ? 'var(--burgundy)' : 'transparent', color: step >= s.n ? 'var(--gold-bright)' : 'var(--gold-deep)', border: step >= s.n ? 'none' : '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 500, }}> {step > s.n ? : s.n}
Paso {s.n}
{s.t}
))}
{/* Step content */}
{step === 1 && (
{/* Calendar */}
{monthName}
{DAYS_SHORT.map(d => (
{d}
))}
{cells.map((d, i) => { if (d === null) return
; const past = isPast(d); const weekend = isWeekend(d); const disabled = past || weekend; const sel = isSelected(d); const td = isToday(d); return ( ); })}
Hoy Fines de semana no disponibles
{/* Times */}
Horario disponible
{selDate ? formatDate(selDate) : 'Elegí una fecha primero'}
{selDate ? (
{TIME_SLOTS.map(t => { const taken = busy.includes(t); return ( ); })}
{loadingSlots ? 'Cargando horarios disponibles…' : 'Los horarios tachados ya están reservados.'}
) : (
Seleccioná un día del calendario
)}
)} {step === 2 && (
Modalidad de la consulta
{['Presencial', 'Videollamada', 'Telefónica'].map(m => ( ))}
Área de consulta
{SERVICES.map(s => { const I = Icon[s.icon]; return ( ); })}
)} {step === 3 && (
{/* Summary card */}
Fecha
{formatDate(selDate)}
Hora
{selTime} hs
Modalidad
{mode}
Área
{SERVICES.find(s => s.id === area)?.title}
Nombre completo
setForm({...form, name: e.target.value})} />
Teléfono / WhatsApp
setForm({...form, phone: e.target.value})} />
Email
setForm({...form, email: e.target.value})} />
Comentarios (opcional)