/* DUNNGAMES — "Minimal" booking page. Clean scheduler + service-aware form.
Reuses Pill / ThemeToggle from window.MIN. Exports window.MINBooking. */
const { Pill: BPill, ThemeToggle: BTheme } = window.MIN;
const BA = 'assets';
const M_SERVICES = [
{ t: 'Design Review', slug: 'design-review', dur: '30 min', d: 'We review your core loop, onboarding, and progression systems, then deliver insights and action items to elevate your experience.' },
{ t: 'Studio Mentorship', slug: 'studio-mentorship', dur: '30 min', d: 'We integrate directly with your team to overhaul workflows, build product roadmaps, instill a winning culture, and accelerate growth.' },
{ t: 'Branded Project', slug: 'branded-project', dur: '30 min', d: 'Bring your brand into a world of millions of players. We scope a custom branded game or in-game activation and map the path from concept to launch.' },
];
const M_HOSTS = [
{ img: BA + '/team/grant-dunn.jpg', name: 'Grant Dunn', role: 'CEO & Lead Designer', pos: 'center 30%', scale: 1 },
{ img: BA + '/team/grant-dunn.jpg', name: 'Grant Dunn', role: 'CEO & Lead Designer', pos: 'center 30%', scale: 1 },
{ img: BA + '/team/connor-acosta.png?v=2', name: 'Connor Acosta', role: 'Executive Producer', pos: 'center 30%', scale: 1 },
];
function HostChip({ host }) {
return (
);
}
const M_EMAIL = { k: 'email', label: 'Email', req: true, type: 'email', ph: 'you@studio.com' };
const M_FIELDS = [
[
{ k: 'game', label: 'Game name', req: true, ph: 'e.g. Farming & Friends' },
{ k: 'genre', label: 'Genre', req: true, ph: 'e.g. Simulation, Tycoon, PvP' },
{ k: 'desc', label: 'Description', req: true, area: true, ph: 'Tell us about your game and what you want reviewed.' },
{ k: 'link', label: 'Game link (optional)', req: false, ph: 'roblox.com/games/\u2026' },
],
[
{ k: 'name', label: 'Your name / studio', req: true, ph: 'Who are we mentoring?' },
{ k: 'building', label: 'What are you building?', req: true, ph: 'Your game or studio in a sentence.' },
{ k: 'goal', label: 'Biggest challenge right now', req: true, area: true, ph: 'What would you most like help with?' },
],
[
{ k: 'brand', label: 'Brand / company', req: true, ph: 'e.g. Acme Beverages' },
{ k: 'idea', label: 'Info', req: true, area: true, ph: 'Tell us about the branded experience you want to build.' },
],
];
const M_SLOTS_BY_DAY = {
2: ['11:00am', '11:30am', '2:00pm', '2:30pm', '3:00pm', '3:30pm'],
3: ['11:00am', '11:30am', '2:00pm', '2:30pm', '3:00pm', '3:30pm'],
4: ['11:00am', '11:30am', '2:00pm', '2:30pm', '3:00pm', '3:30pm'],
5: ['11:00am', '11:30am'],
};
const M_TZ = ['Central Time (US & Canada)', 'Eastern Time (US & Canada)', 'Pacific Time (US & Canada)', 'UK / GMT'];
const M_WD = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
const M_MON = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const M_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function mGrid(y, m) {
const sd = new Date(y, m, 1).getDay(); const dn = new Date(y, m + 1, 0).getDate(); const c = [];
for (let i = 0; i < sd; i++) c.push(null);
for (let d = 1; d <= dn; d++) c.push(d);
while (c.length % 7) c.push(null);
return c;
}
function MWordmark() {
return (
);
}
function BookingPage({ theme, onToggle }) {
const today = new Date(); today.setHours(0, 0, 0, 0);
// Preselect the service from ?service= (set by the CTA that linked here).
const [svc, setSvc] = React.useState(() => {
try {
const s = new URLSearchParams(window.location.search).get('service');
const i = M_SERVICES.findIndex((x) => x.slug === s);
return i >= 0 ? i : 0;
} catch (e) { return 0; }
});
const [view, setView] = React.useState({ y: today.getFullYear(), m: today.getMonth() });
const [sel, setSel] = React.useState(null);
const [time, setTime] = React.useState(null);
const [tz, setTz] = React.useState('Central Time (US & Canada)');
const [tzOpen, setTzOpen] = React.useState(false);
const [showForm, setShowForm] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);
const [done, setDone] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const EMPTY_FORM = { email: '', game: '', genre: '', link: '', desc: '', name: '', building: '', goal: '', brand: '', audience: '', idea: '', budget: '' };
const [form, setForm] = React.useState(EMPTY_FORM);
const [availByDate, setAvailByDate] = React.useState({});
const [availLoading, setAvailLoading] = React.useState(true);
const [bookErr, setBookErr] = React.useState(null);
const pad = (n) => String(n).padStart(2, '0');
const dkey = (y, m, d) => `${y}-${pad(m + 1)}-${pad(d)}`;
const loadAvail = React.useCallback(() => {
const last = new Date(view.y, view.m + 1, 0).getDate();
const from = `${view.y}-${pad(view.m + 1)}-01`;
const to = `${view.y}-${pad(view.m + 1)}-${pad(last)}`;
setAvailLoading(true);
return fetch(`/api/availability?from=${from}&to=${to}`)
.then((r) => r.json())
.then((d) => { setAvailByDate(d.byDate || {}); setAvailLoading(false); return d; })
.catch(() => { setAvailLoading(false); });
}, [view.y, view.m]);
React.useEffect(() => { loadAvail(); }, [loadAvail]);
const cells = mGrid(view.y, view.m);
const service = M_SERVICES[svc];
const host = M_HOSTS[svc];
const fields = M_FIELDS[svc];
const isPast = (d) => new Date(view.y, view.m, d) < today;
const dayOk = (d) => { const dy = new Date(view.y, view.m, d).getDay(); return dy >= 2 && dy <= 5; };
const hasSlots = (d) => (availByDate[dkey(view.y, view.m, d)] || []).length > 0;
const avail = (d) => !!d && !isPast(d) && (availLoading ? dayOk(d) : hasSlots(d));
const isSel = (d) => sel && d && sel.getFullYear() === view.y && sel.getMonth() === view.m && sel.getDate() === d;
const atMin = view.y === today.getFullYear() && view.m === today.getMonth();
const prev = () => setView((v) => { const d = new Date(v.y, v.m - 1, 1); return { y: d.getFullYear(), m: d.getMonth() }; });
const next = () => setView((v) => { const d = new Date(v.y, v.m + 1, 1); return { y: d.getFullYear(), m: d.getMonth() }; });
const pick = (d) => { if (!avail(d)) return; setBookErr(null); setSel(new Date(view.y, view.m, d)); setTime(null); };
const longDate = sel ? `${M_DAYS[sel.getDay()]}, ${M_MON[sel.getMonth()]} ${sel.getDate()}` : null;
const selKey = sel ? dkey(sel.getFullYear(), sel.getMonth(), sel.getDate()) : null;
const slots = selKey ? (availByDate[selKey] || []) : [];
const emailBad = !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test((form.email || '').trim());
const missing = (f) => f.req && !(form[f.k] || '').trim();
const canSubmit = !emailBad && fields.every((f) => !missing(f));
const confirmSlot = () => { setBookErr(null); setShowForm(true); };
const submit = () => {
if (!canSubmit) { setSubmitted(true); return; }
setSubmitting(true); setBookErr(null);
fetch('/api/book', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ service: svc, date: selKey, time, form }) })
.then(async (r) => {
const j = await r.json().catch(() => ({}));
setSubmitting(false);
if (r.ok) { setDone(true); }
else { setShowForm(false); setTime(null); setBookErr(j.error || 'Could not book that slot.'); loadAvail(); }
})
.catch(() => { setSubmitting(false); setBookErr('Network error. Please try again.'); });
};
const reset = () => { setDone(false); setShowForm(false); setSubmitted(false); setSubmitting(false); setSel(null); setTime(null); setBookErr(null); setForm(EMPTY_FORM); loadAvail(); };
const label = { fontFamily: 'var(--m-font-display)', fontWeight: 700, fontSize: '11px', letterSpacing: '1.4px', textTransform: 'uppercase', color: 'var(--m-ink-faint)', marginBottom: '12px' };
const fieldStyle = (bad) => ({ width: '100%', padding: '12px 14px', borderRadius: '12px', border: '1px solid ' + (bad ? '#E5484D' : 'var(--m-line)'), background: 'var(--m-page-2)', color: 'var(--m-ink)', fontFamily: 'var(--m-font-body)', fontWeight: 500, fontSize: '14px', outline: 'none', resize: 'vertical', boxSizing: 'border-box' });
const renderField = (f) => {
const bad = submitted && (f.k === 'email' ? emailBad : missing(f));
return (