// Scheduler.jsx — Calendly-style calendar + time slots + booking + payment (i18n) function getMonthDays(year, month) { const first = new Date(year, month, 1); const last = new Date(year, month + 1, 0); const startDow = first.getDay(); const days = []; for (let i = 0; i < startDow; i++) days.push(null); for (let d = 1; d <= last.getDate(); d++) days.push(d); while (days.length % 7 !== 0) days.push(null); return days; } const Scheduler = ({ paymentModel = "deposit", t }) => { const today = new Date(2026, 3, 24); const [step, setStep] = React.useState(1); const [serviceId, setServiceId] = React.useState("diag"); const [viewMonth, setViewMonth] = React.useState(today.getMonth()); const [viewYear, setViewYear] = React.useState(today.getFullYear()); const [selectedDate, setSelectedDate] = React.useState(null); const [selectedSlot, setSelectedSlot] = React.useState(null); const [details, setDetails] = React.useState({ name: "", email: "", phone: "", address: "", notes: "" }); const [card, setCard] = React.useState({ number: "", exp: "", cvc: "", zip: "" }); const [processing, setProcessing] = React.useState(false); const [payError, setPayError] = React.useState(null); React.useEffect(() => { const params = new URLSearchParams(window.location.search); const paid = params.get("paid"); const cancelled = params.get("cancelled"); if (!paid && !cancelled) return; try { const stored = sessionStorage.getItem("fmc-booking"); if (stored) { const b = JSON.parse(stored); if (b.serviceId) setServiceId(b.serviceId); if (b.selectedDate) { const d = new Date(b.selectedDate); setSelectedDate(d); setViewMonth(d.getMonth()); setViewYear(d.getFullYear()); } if (b.selectedSlot) setSelectedSlot(b.selectedSlot); if (b.details) setDetails(b.details); } } catch (e) { /* ignore */ } if (paid) { sessionStorage.removeItem("fmc-booking"); setStep(5); } else { setStep(4); setPayError("Payment was cancelled. You can try again below."); } window.history.replaceState({}, "", window.location.pathname); setTimeout(() => { const el = document.getElementById("schedule"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }, 60); }, []); const SERVICES = t.sch_services; const service = SERVICES.find(s => s.id === serviceId); const days = getMonthDays(viewYear, viewMonth); const isPast = (d) => { if (!d) return true; const date = new Date(viewYear, viewMonth, d); return date < new Date(today.getFullYear(), today.getMonth(), today.getDate()); }; const isToday = (d) => d === today.getDate() && viewMonth === today.getMonth() && viewYear === today.getFullYear(); const isSelected = (d) => selectedDate && d === selectedDate.getDate() && viewMonth === selectedDate.getMonth() && viewYear === selectedDate.getFullYear(); const hasSlots = (d) => { if (!d || isPast(d)) return false; const dow = new Date(viewYear, viewMonth, d).getDay(); return dow !== 0; }; const slotsFor = (date) => { if (!date) return []; const dow = date.getDay(); if (dow === 0) return []; const base = ["8:00 AM","9:30 AM","11:00 AM","12:30 PM","2:00 PM","3:30 PM","5:00 PM"]; const seed = date.getDate(); return base.filter((_, i) => (seed + i) % 4 !== 0); }; const goPrevMonth = () => { if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1); }; const goNextMonth = () => { if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1); }; const formattedDate = selectedDate ? `${t.dow_full[selectedDate.getDay()]}, ${t.months_short[selectedDate.getMonth()]} ${selectedDate.getDate()}` : ""; const canProceedFromDetails = details.name && details.email && details.address; const submitPayment = async () => { setProcessing(true); setPayError(null); try { sessionStorage.setItem("fmc-booking", JSON.stringify({ serviceId, selectedDate: selectedDate ? selectedDate.toISOString() : null, selectedSlot, details, })); const slotLabel = selectedDate && selectedSlot ? `${formattedDate} · ${selectedSlot}` : ""; const res = await fetch("/api/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ serviceId, customerEmail: details.email, customerName: details.name, address: details.address, slotLabel, notes: details.notes, }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || `Checkout failed (${res.status})`); } const { url } = await res.json(); if (!url) throw new Error("No checkout URL returned"); window.location.href = url; } catch (e) { setProcessing(false); setPayError(e.message || "Something went wrong. Please try again."); } }; const reset = () => { setStep(1); setSelectedDate(null); setSelectedSlot(null); setDetails({ name: "", email: "", phone: "", address: "", notes: "" }); setCard({ number: "", exp: "", cvc: "", zip: "" }); }; const stepLabels = t.sch_steps; const payAmount = paymentModel === "full" ? service.price * 3 : paymentModel === "card" ? 0 : service.price; const payTitle = paymentModel === "deposit" ? t.sch_step4_deposit : paymentModel === "full" ? `${t.sch_step4_full} · $${service.price * 3}` : t.sch_step4_card; const payBlurb = paymentModel === "deposit" ? t.sch_step4_deposit_b : paymentModel === "full" ? t.sch_step4_full_b : t.sch_step4_card_b; const payCta = paymentModel === "card" ? t.sch_pay_card_save : `${t.nav_book.split(" ")[0]} $${payAmount} & ✓`; return (
{t.sch_eyebrow}

{t.sch_title_1}
{t.sch_title_2} {t.sch_title_word}{t.sch_title_3}

{t.sch_blurb}

{[ { icon: "🛡", title: t.sch_h_licensed, body: t.sch_h_licensed_b }, { icon: "💰", title: t.sch_h_refund, body: t.sch_h_refund_b }, { icon: "📍", title: t.sch_h_crew, body: t.sch_h_crew_b }, ].map((h, i) => (
{h.icon}
{h.title}
{h.body}
))}
{["RC","ML","JS"].map((init, i) => (
{init}
))}
{t.sch_crew_today}
{t.sch_crew_meta}
{stepLabels.map((label, i) => { const stepNum = i + 1; const active = step === stepNum; const done = step > stepNum; return (
{done ? "✓" : stepNum}
{label}
{i < stepLabels.length - 1 &&
} ); })}
{step === 1 && (

{t.sch_step1_title}

{t.sch_step1_blurb}

{SERVICES.map(s => ( ))}
)} {step === 2 && (

{t.sch_step2_title}

{t.sch_step2_tz}

{service.name} · {service.duration}

{t.months[viewMonth]} {viewYear}
{t.dow.map(d => (
{d}
))}
{days.map((d, i) => (
{ if (d && !isPast(d) && hasSlots(d)) { setSelectedDate(new Date(viewYear, viewMonth, d)); setSelectedSlot(null); } }} className={`cal-day ${!d || isPast(d) || !hasSlots(d) ? "disabled" : ""} ${isToday(d) ? "today" : ""} ${isSelected(d) ? "selected" : ""}`} style={{ position: "relative" }} > {d || ""} {d && !isPast(d) && hasSlots(d) && !isSelected(d) && ( )}
))}
{t.sch_step2_legend_avail} {t.sch_step2_legend_closed}
{selectedDate ? formattedDate : t.sch_step2_pickdate}
{!selectedDate && (
{t.sch_step2_pickdate_hint}
)} {selectedDate && (
{slotsFor(selectedDate).map(s => (
setSelectedSlot(s)}>{s}
))}
)}
)} {step === 3 && (

{t.sch_step3_title}

{t.sch_step3_blurb}

setDetails({...details, name: e.target.value})}/>
setDetails({...details, email: e.target.value})}/>
setDetails({...details, phone: e.target.value})}/>
setDetails({...details, address: e.target.value})}/>