/* ============================================================ CUSTOM PAGES — Brief · Order Confirmed · Invoice Fully integrated into Belle & Bloom routing system ============================================================ */ /* ── Shared helpers ─────────────────────────────────────── */ function CustomPageHero({ eyebrow, title, sub }) { return (

{eyebrow}

{title}

{sub &&

{sub}

}
); } function StepBar({ current, total }) { return (
{Array.from({ length: total }, (_, i) => { const n = i + 1, done = n < current, active = n === current; return (
{done ? : n}
{n < total &&
} ); })}
); } function BriefField({ label, required, children }) { return (
{children}
); } const briefInputSx = { background: 'var(--cream)', border: '1.5px solid var(--line)', borderRadius: 'var(--r-sm)', padding: '13px 16px', color: 'var(--ink)', width: '100%', fontFamily: 'var(--sans)', fontSize: 14, transition: 'border .25s, box-shadow .25s', }; const iFocus = e => { e.target.style.borderColor = 'var(--gold)'; e.target.style.boxShadow = '0 0 0 4px rgba(138,24,192,.10)'; e.target.style.outline = 'none'; }; const iBlur = e => { e.target.style.borderColor = 'var(--line)'; e.target.style.boxShadow = ''; }; const cardSx = { background: 'var(--ivory)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', padding: 'clamp(24px,4vw,44px)', marginBottom: 20 }; /* ───────────────────────────────────────────────────────── 1. BRIEF PAGE ───────────────────────────────────────────────────────── */ function BriefPage() { const { nav, toast } = useStore(); const [step, setStep] = React.useState(1); // Step 1 const [eventType, setEventType] = React.useState(''); const [eventDate, setEventDate] = React.useState(''); const [guestCount, setGuestCount] = React.useState(''); const [briefText, setBriefText] = React.useState(''); const [budget, setBudget] = React.useState(''); // Step 2 — links const [links, setLinks] = React.useState(['']); // Step 2 — files const [files, setFiles] = React.useState([]); const [fileTab, setFileTab] = React.useState('image'); const [dragging, setDragging] = React.useState(false); // Step 2 — voice recorder const [recState, setRecState] = React.useState('idle'); const [recTime, setRecTime] = React.useState(0); const [audioURL, setAudioURL] = React.useState(''); const mrRef = React.useRef(null); const riRef = React.useRef(null); const chunksRef = React.useRef([]); // Step 3 const [consult, setConsult] = React.useState(false); // Booking widget state const [bookStep, setBookStep] = React.useState(1); // 1=bundle+date, 2=time, 3=summary const [bookBundle, setBookBundle] = React.useState(''); const [bookDate, setBookDate] = React.useState(''); const [bookTime, setBookTime] = React.useState(''); const [bookMonth, setBookMonth] = React.useState(() => { const d = new Date(); return { y: d.getFullYear(), m: d.getMonth() }; }); const [showLogin, setShowLogin] = React.useState(false); const [loginEmail, setLoginEmail] = React.useState(''); const [loginPass, setLoginPass] = React.useState(''); const [bookConfirmed, setBookConfirmed] = React.useState(false); const BUNDLES = [ 'No preference — any available designer', 'Party Favour Bundle', 'Full Party Bundle (Favours + Props)', 'Balloon Garland & Décor', 'Invitation Suite', 'Custom / Bespoke Commission', ]; const SLOTS = ['9:00 AM','9:30 AM','10:00 AM','10:30 AM','11:00 AM','11:30 AM','2:00 PM','2:30 PM','3:00 PM','3:30 PM','4:00 PM','4:30 PM','5:00 PM','5:30 PM']; const UNAVAILABLE = ['9:30 AM','11:00 AM','3:00 PM']; function getDaysInMonth(y, m) { return new Date(y, m + 1, 0).getDate(); } function getFirstDay(y, m) { return new Date(y, m, 1).getDay(); } function isPast(y, m, d) { const t = new Date(); t.setHours(0,0,0,0); return new Date(y, m, d) < t; } function fmtDate(str) { if (!str) return ''; const [y,m,d] = str.split('-'); return new Date(y,m-1,d).toLocaleDateString('en-GB',{weekday:'long',day:'numeric',month:'long',year:'numeric'}); } function prevMonth() { setBookMonth(p => p.m === 0 ? {y:p.y-1,m:11} : {y:p.y,m:p.m-1}); } function nextMonth() { setBookMonth(p => p.m === 11 ? {y:p.y+1,m:0} : {y:p.y,m:p.m+1}); } const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December']; const bookWidgetSx = { background: 'var(--cream)', border: '1.5px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden', marginBottom: 24, animation: 'bkExpand .4s cubic-bezier(.2,.8,.2,1)' }; const bkTabSx = active => ({ flex: 1, padding: '10px 4px', fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 500, border: 'none', cursor: 'pointer', background: active ? 'var(--ink)' : 'transparent', color: active ? 'var(--cream)' : 'var(--ink-faint)', transition: 'all .3s', borderRadius: 0 }); const [clientName, setClientName] = React.useState(''); const [clientEmail, setClientEmail] = React.useState(''); const [clientWA, setClientWA] = React.useState(''); const FILE_LIMITS = { image: 20, video: 80, audio: 25 }; const FILE_ACCEPT = { image: 'image/*', video: 'video/*', audio: 'audio/*' }; const FILE_ICONS = { image: '🖼', video: '🎬', audio: '🎵' }; const today = new Date().toISOString().split('T')[0]; function goStep(n) { setStep(n); window.scrollTo({ top: 0, behavior: 'smooth' }); } function addFiles(list) { setFiles(prev => [...prev, ...Array.from(list).map(f => { const type = f.type.startsWith('image') ? 'image' : f.type.startsWith('video') ? 'video' : f.type.startsWith('audio') ? 'audio' : 'other'; const sizeMB = f.size / 1024 / 1024; return { f, type, sizeMB: sizeMB.toFixed(1), error: sizeMB > (FILE_LIMITS[type] || 20) ? `Exceeds ${FILE_LIMITS[type] || 20} MB limit` : null, id: Math.random() }; })]); } async function startRec() { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); chunksRef.current = []; const mr = new MediaRecorder(stream); mr.ondataavailable = e => chunksRef.current.push(e.data); mr.onstop = () => { setAudioURL(URL.createObjectURL(new Blob(chunksRef.current, { type: 'audio/webm' }))); stream.getTracks().forEach(t => t.stop()); }; mr.start(); mrRef.current = mr; setRecTime(0); setRecState('recording'); riRef.current = setInterval(() => setRecTime(t => { if (t >= 119) { stopRec(); return t; } return t + 1; }), 1000); } catch { toast('Microphone access needed for voice notes', 'info'); } } function stopRec() { mrRef.current?.state !== 'inactive' && mrRef.current.stop(); clearInterval(riRef.current); setRecState('done'); } function deleteRec() { setAudioURL(''); setRecTime(0); setRecState('idle'); } function fmtTime(s) { return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`; } function submitBrief() { if (!clientName || !clientEmail) { toast('Please fill in your name and email', 'error'); return; } const ref = 'BB-' + Date.now().toString(36).toUpperCase().slice(-6); localStorage.setItem('bb_brief_ref', ref); localStorage.setItem('bb_brief_name', clientName); nav('order-confirmed', { ref }); } return ( <> Tell us about your vision} sub="Share as much as you like. Every detail helps us create something truly yours." />
{/* STEP 1 */} {step === 1 && (

Step 1 of 3

The brief

Describe your event, theme, colours, and any must-have elements.

setEventDate(e.target.value)} onFocus={iFocus} onBlur={iBlur} />