// Wasabil — Agenda una reunión const { useState: useStateAgenda, useEffect: useEffectAgenda } = React; // ---- CONFIG ---- // Cuando tengas tu cuenta de Calendly lista, pega acá tu URL (ej: "https://calendly.com/wasabil/demo") // y el widget real reemplazará el mockup del paso 1 automáticamente. // Deja "" para seguir con el flujo mockup que diseñamos. const CALENDLY_URL = /*EDITMODE-BEGIN*/{ "calendlyUrl": "https://calendly.com/hola-wasabil/demo-wasabil-45-min", "showLiveWidget": true }/*EDITMODE-END*/; function CalendlyEmbed({ url, onBooked }) { useEffectAgenda(() => { if (!document.querySelector('script[src*="calendly.com/assets/external/widget.js"]')) { const s = document.createElement('script'); s.src = "https://assets.calendly.com/assets/external/widget.js"; s.async = true; document.body.appendChild(s); } const handler = (e) => { if (e.data && e.data.event === 'calendly.event_scheduled') { onBooked && onBooked(e.data.payload); } }; window.addEventListener('message', handler); return () => window.removeEventListener('message', handler); }, []); return ( <>
); } function AgendaPage() { const useLive = CALENDLY_URL.showLiveWidget && CALENDLY_URL.calendlyUrl; const [booked, setBooked] = useStateAgenda(false); const [invitee, setInvitee] = useStateAgenda(null); const handleBooked = (payload) => { setInvitee(payload?.invitee || null); setBooked(true); }; const [step, setStep] = useStateAgenda(0); // 0=pick, 1=form, 2=done const [selectedDate, setSelectedDate] = useStateAgenda(null); const [selectedTime, setSelectedTime] = useStateAgenda(null); const [form, setForm] = useStateAgenda({ name: "", email: "", company: "", docs: "", msg: "" }); // Calendar generation — current month const today = new Date(); const year = today.getFullYear(); const month = today.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const firstDay = new Date(year, month, 1).getDay(); // 0 = Sun const mondayFirst = firstDay === 0 ? 6 : firstDay - 1; const cells = []; for (let i = 0; i < mondayFirst; i++) cells.push(null); for (let d = 1; d <= daysInMonth; d++) { const dt = new Date(year, month, d); const isPast = dt < new Date(today.getFullYear(), today.getMonth(), today.getDate()); const isWeekend = dt.getDay() === 0 || dt.getDay() === 6; cells.push({ d, dt, available: !isPast && !isWeekend }); } const monthName = today.toLocaleDateString("es-CL", { month: "long", year: "numeric" }); const times = ["09:00", "10:00", "11:00", "12:00", "14:00", "15:00", "16:00", "17:00"]; const pick = (c) => { if (!c || !c.available) return; setSelectedDate(c); }; const confirm = () => { if (selectedDate && selectedTime) setStep(1); }; const submit = (e) => { e.preventDefault(); setStep(2); }; const fmt = (dt) => dt.toLocaleDateString("es-CL", { weekday: "long", day: "numeric", month: "long" }); return ( <>