s.num ? " rvc-step--done" : "")}
role="listitem"
aria-current={currentStep === s.num ? "step" : undefined}
>
{currentStep > s.num ? : s.num}
{s.label}
s.num ? " rvc-step__line--done" : "")} aria-hidden="true" />
)}
))}
);
}
/* ── Step 1 — Dates ─────────────────────────────────────────── */
function StepDates({ checkin, checkout, onCheckinChange, onCheckoutChange, onNext, error }) {
const today = todayStr();
const minCheckout = checkin ? addDays(checkin, MIN_NIGHTS) : today;
const maxCheckout = checkin ? addDays(checkin, MAX_NIGHTS) : '';
const nights = useMemo(() => diffNights(checkin, checkout), [checkin, checkout]);
return (
Select Your Dates
Minimum stay: {MIN_NIGHTS} nights · Maximum: {MAX_NIGHTS} nights
{nights > 0 && (
{nights}
{nights === 1 ? 'night' : 'nights'} selected
)}
{error &&
{error}
}
);
}
/* ── Step 2 — Guests ────────────────────────────────────────── */
function StepGuests({ accommodation, guests, onAccommChange, onGuestsChange, onBack, onNext }) {
const acc = ACCOMMODATIONS.find(a => a.id === accommodation);
return (
Booking Summary
{rows.map(r => (
{r.label}
{r.value}
))}
Estimated Total
{'£' + totalGBP.toLocaleString()}
Includes Shared Garden, Dining Lounge, high-speed WiFi, air conditioning, hot water, and all in-room amenities. Final price confirmed on enquiry.
);
}
/* ── Main Component ─────────────────────────────────────────── */
function ReservationCard() {
const [step, setStep] = useState(1);
const [checkin, setCheckin] = useState('');
const [checkout, setCheckout] = useState('');
const [accommodation, setAccomm] = useState('whole-villa');
const [guests, setGuests] = useState('2');
const [dateError, setDateError] = useState('');
const cardRef = useRef(null);
const [visible, setVisible] = useState(false);
/* Scroll reveal */
useEffect(() => {
const el = cardRef.current;
if (!el) return;
const obs = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.disconnect(); } },
{ threshold: 0.12 }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
/* Listen for room selection from accommodations section */
useEffect(() => {
const handleRoomSelected = (e) => {
if (e.detail && e.detail.roomId) {
setAccomm(e.detail.roomId);
}
};
window.addEventListener('villaRoomSelected', handleRoomSelected);
return () => window.removeEventListener('villaRoomSelected', handleRoomSelected);
}, []);
const handleCheckinChange = useCallback((val) => {
setCheckin(val);
setDateError('');
if (checkout && val) {
const n = diffNights(val, checkout);
if (n < MIN_NIGHTS || n > MAX_NIGHTS) setCheckout('');
}
}, [checkout]);
const handleCheckoutChange = useCallback((val) => {
setCheckout(val);
setDateError('');
}, []);
const handleDatesNext = useCallback(() => {
if (!checkin || !checkout) {
setDateError('Please select both check-in and check-out dates.');
return;
}
const n = diffNights(checkin, checkout);
if (n < MIN_NIGHTS) { setDateError('Minimum stay is ' + MIN_NIGHTS + ' nights.'); return; }
if (n > MAX_NIGHTS) { setDateError('Maximum stay is ' + MAX_NIGHTS + ' nights.'); return; }
setDateError('');
setStep(2);
}, [checkin, checkout]);
const handleWhatsApp = useCallback(() => {
const acc = ACCOMMODATIONS.find(a => a.id === accommodation) || ACCOMMODATIONS[0];
const nights = diffNights(checkin, checkout);
const total = acc.rateGBP * nights;
const guestLabel = guests === '4+' ? '4+ Guests / Private Buyout' : (guests + ' Guest' + (guests === '1' ? '' : 's'));
const msg = [
'\uD83C\uDFE1 *Villa 44 Badulla \u2014 Booking Enquiry*',
'',
'\uD83D\uDCC5 *Check-In:* ' + fmtDate(checkin),
'\uD83D\uDCC5 *Check-Out:* ' + fmtDate(checkout),
'\uD83C\uDF19 *Duration:* ' + nights + (nights === 1 ? ' night' : ' nights'),
'\uD83D\uDECF\uFE0F *Accommodation:* ' + acc.label,
'\uD83D\uDC65 *Guests:* ' + guestLabel,
'\uD83D\uDCB7 *Rate per night:* \u00A3' + acc.rateGBP,
'\uD83D\uDCB0 *Estimated Total:* \u00A3' + total.toLocaleString(),
'',
'I would like to confirm availability and receive a bespoke proposal. Thank you!',
].join('\n');
const url = 'https://wa.me/' + WHATSAPP_NUMBER + '?text=' + encodeURIComponent(msg);
window.open(url, '_blank', 'noopener,noreferrer');
}, [checkin, checkout, accommodation, guests]);
const cardClass = 'rvc-card' + (visible ? ' rvc-card--visible' : '');
return (
◊
{step === 1 && (
)}
{step === 2 && (
setStep(1)}
onNext={() => setStep(3)}
/>
)}
{step === 3 && (
setStep(2)}
onWhatsApp={handleWhatsApp}
/>
)}
Secure · Instant WhatsApp Confirmation · Zero Booking Fees
);
}
/* ── Mount ──────────────────────────────────────────────────── */
const rootEl = document.getElementById('reservation-root');
if (rootEl) {
ReactDOM.createRoot(rootEl).render(React.createElement(ReservationCard));
}