);
}
// Available time slots per weekday (0 = Sun, 1 = Mon, ..., 6 = Sat)
// Empty array = day off
const WEEKLY_SCHEDULE = {
0: [], // Sun · closed
1: ['09:30', '11:00', '14:30', '16:00', '17:30'], // Mon
2: ['09:30', '11:00', '14:30', '16:00'], // Tue
3: ['11:00', '14:30', '16:00', '17:30'], // Wed
4: ['09:30', '14:30', '16:00'], // Thu
5: ['09:30', '11:00', '14:30'], // Fri
6: [], // Sat · closed
};
// Specific dates you want fully blocked (vacations, etc.) — ISO format
const BLOCKED_DATES = [
// '2026-05-30',
// '2026-06-15',
];
/* ═══════════════════════════════════════════════════════════
▲▲▲ EDIT THESE ▲▲▲
═══════════════════════════════════════════════════════════ */
function isoDate(d) {
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}
function availabilityFor(date, bookings) {
if (BLOCKED_DATES.includes(isoDate(date))) return [];
const slots = WEEKLY_SCHEDULE[date.getDay()] || [];
// remove slots already booked locally
const bookedToday = bookings.filter(b => b.date === isoDate(date)).map(b => b.slot);
return slots.filter(s => !bookedToday.includes(s));
}
function Booking() {
const today = new Date();
const [viewMonth, setViewMonth] = useStateBK(new Date(today.getFullYear(), today.getMonth(), 1));
const [step, setStep] = useStateBK('pick'); // cal | pick | contact | sent
const [bookMode, setBookMode] = useStateBK('whatsapp'); // cal | whatsapp — separate from wizard step
const [selectedDate, setSelectedDate] = useStateBK(null);
const [selectedSlot, setSelectedSlot] = useStateBK(null);
const [contact, setContact] = useStateBK({ name:'', email:'', phone:'', note:'' });
const [confirmation, setConfirmation] = useStateBK(null);
const [bookings, setBookings] = useStateBK([]);
const [submitting, setSubmitting] = useStateBK(false);
// Load previous bookings from localStorage (acts as your "calendar")
useEffectBK(() => {
try {
const saved = JSON.parse(localStorage.getItem('wb_bookings') || '[]');
setBookings(saved);
} catch {}
}, []);
const grid = useMemoBK(() => {
const year = viewMonth.getFullYear();
const month = viewMonth.getMonth();
const first = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0).getDate();
const startOffset = (first.getDay() + 6) % 7; // Monday-first
const days = [];
for (let i = 0; i < startOffset; i++) days.push(null);
for (let d = 1; d <= lastDay; d++) days.push(new Date(year, month, d));
while (days.length % 7 !== 0) days.push(null);
return days;
}, [viewMonth]);
const monthLabel = viewMonth.toLocaleString('en-US', { month: 'long', year: 'numeric' });
const dayHeaders = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const slots = selectedDate ? availabilityFor(selectedDate, bookings) : [];
const slotsThisMonth = grid
.filter(d => d && d >= today)
.reduce((sum, d) => sum + availabilityFor(d, bookings).length, 0);
const isPast = (d) => d < new Date(today.getFullYear(), today.getMonth(), today.getDate());
const proceedToContact = () => {
if (selectedDate && selectedSlot) setStep('contact');
};
const submitBooking = () => {
if (!contact.name || !/@/.test(contact.email) || contact.phone.length < 6) return;
setSubmitting(true);
const dateStr = selectedDate.toLocaleString('en-US', {weekday:'long', month:'long', day:'numeric', year:'numeric'});
const ref = 'WB-' + Math.floor(Math.random() * 9000 + 1000);
const summary = `🗓 New booking · ${ref}
Date: ${dateStr}
Time: ${selectedSlot} IST · 15-min walkthrough
Name: ${contact.name}
Email: ${contact.email}
Phone: ${contact.phone}
${contact.note ? 'Note: ' + contact.note : ''}
Routed from: rohit-sharma portfolio`;
const whatsappUrl = `https://wa.me/${ROHIT_WHATSAPP}?text=${encodeURIComponent(summary)}`;
const emailUrl = `mailto:${ROHIT_EMAIL}?subject=${encodeURIComponent(`Booking ${ref} · ${dateStr} ${selectedSlot}`)}&body=${encodeURIComponent(summary)}`;
// 1️⃣ Open WhatsApp FIRST — synchronously, while still inside the user gesture.
// Browsers block popups opened after `await`, so this MUST come before any async.
// Skip auto-open inside an iframe (e.g. dev preview) since WhatsApp blocks
// iframe embedding (ERR_BLOCKED_BY_RESPONSE) — visitor still has manual button.
const inIframe = (() => {
try { return window.self !== window.top; } catch { return true; }
})();
let opened = null;
if (!inIframe) {
try { opened = window.open(whatsappUrl, '_blank', 'noopener,noreferrer'); } catch {}
}
// 2️⃣ Save locally (sync)
const newBooking = {
ref, name:contact.name, email:contact.email, phone:contact.phone,
note:contact.note,
date: isoDate(selectedDate), slot: selectedSlot,
ts: Date.now(),
};
const updated = [...bookings, newBooking];
try { localStorage.setItem('wb_bookings', JSON.stringify(updated)); } catch {}
setBookings(updated);
// 3️⃣ Fire-and-forget Web3Forms — runs in background, doesn't block UI
if (WEB3FORMS_KEY) {
fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
access_key: WEB3FORMS_KEY,
subject: `New booking · ${ref} · ${dateStr} ${selectedSlot}`,
from_name: contact.name,
email: contact.email,
phone: contact.phone,
message: summary,
}),
}).catch(() => {});
}
setSubmitting(false);
setConfirmation({ ref, dateStr, slot:selectedSlot, summary, whatsappUrl, emailUrl, popupBlocked: !opened, inIframe });
setStep('sent');
};
const reset = () => {
setBookMode('whatsapp');
setStep('pick');
setSelectedDate(null);
setSelectedSlot(null);
setContact({name:'', email:'', phone:'', note:''});
setConfirmation(null);
};
const showCal = bookMode === 'cal' && step !== 'sent';
const showWhatsapp = bookMode === 'whatsapp' && step !== 'sent';
return (
§05 · Booking · By invitation
Two slots a week. Pick yours.
Live calendar · Asia/Kolkata
15-min studio walkthrough — direct with Rohit.
No discovery questionnaires, no sales floor. We review your site, identify
the three highest-leverage rebuilds, and either book the next call or
refer you out.
{confirmation.inIframe ? (
<>
✓ Booking received
Tap the green WhatsApp button below to send the confirmation to Rohit. Email backup also available.
) : confirmation.popupBlocked ? (
<>
⚠ Popup blocked by browser
Press the green WhatsApp button below to send the confirmation manually.
) : (
<>
✓ WhatsApp opened in a new tab
Press Send in WhatsApp to confirm with Rohit. Email backup below.
)}