/* ============================================================ CUSTOM ORDERS — open-ended bespoke intake flow Steps: Landing → Details → Brief + Links → Schedule → Draft Exports: CustomOrderPage ============================================================ */ function CustomOrderPage() { const [phase, setPhase] = useState('land'); // land | form | schedule | done const [formData, setFormData] = useState({ eventType: '', eventDate: '', guests: '', budget: '', brief: '', urls: [''], inspiration: [], // catalogue product refs {id, name, img} scheduleMode: null, // 'async' | 'call' }); const setF = (k, v) => setFormData(f => ({ ...f, [k]: v })); if (phase === 'land') return setPhase('form')} />; if (phase === 'form') return setPhase('schedule')} onBack={() => setPhase('land')} />; if (phase === 'schedule') return setPhase('done')} onBack={() => setPhase('form')} />; if (phase === 'done') return ; return null; } /* ── Landing ─────────────────────────────────────────────── */ function CoLanding({ onStart }) { const { nav } = useStore(); return (
{/* Hero */}

Bespoke · Open-ended · No fixed menu

Your vision,
built for you.

Submit a brief describing exactly what you have in mind. Our team quotes personally, you approve, then we create.

{[['1,800+','Orders made'],['100%','Handcrafted'],['48h','Quote turnaround']].map(([n, l]) => (
{n}
{l}
))}
{/* How it works */}

The process

From brief to doorstep

{[ ['Submit brief', 'Describe your event, theme, quantities and any inspiration links. Takes under 5 minutes.'], ['We quote', 'Within 48 hours you receive a personalised, itemised proposal — no surprises.'], ['Approve & pay', 'Accept the quote and pay the 50% deposit. We get to work immediately.'], ['We deliver', 'Track your order live. Items arrive beautifully packed, on time.'], ].map(([t, d], i) => (
{i + 1}

{t}

{d}

))}
); } /* ── Step 1: Event details + brief + links ────────────────── */ function CoForm({ data, set, onNext, onBack }) { const [urls, setUrls] = useState(data.urls.length ? data.urls : ['']); const updateUrl = (i, v) => { const u = [...urls]; u[i] = v; setUrls(u); set('urls', u); }; const addUrl = () => { const u = [...urls, '']; setUrls(u); set('urls', u); }; const removeUrl = (i) => { const u = urls.filter((_, j) => j !== i); setUrls(u.length ? u : ['']); set('urls', u.length ? u : ['']); }; const [inspoProducts, setInspoProducts] = useState(data.inspirationProductIds || []); const toggleInspoProduct = (id) => { const next = inspoProducts.includes(id) ? inspoProducts.filter(x => x !== id) : [...inspoProducts, id]; setInspoProducts(next); set('inspirationProductIds', next); }; const [catalogueOpen, setCatalogueOpen] = useState(false); const inspiration = data.inspiration || []; const removeInspiration = (id) => set('inspiration', inspiration.filter(p => p.id !== id)); const validate = () => { if (!data.eventType || !data.eventDate || !data.brief.trim()) { alert('Please fill in the event type, date and project brief.'); return false; } return true; }; return (

Step 1 of 3

Event & brief

The more detail you give us, the more accurate your quote will be.

set('eventDate', e.target.value)} min={new Date().toISOString().split('T')[0]} />