// Bespoke page — 5-step wizard const { useState: useStateB, useEffect: useEffectB } = React; const OCCASIONS = ['Engagement', 'Wedding', 'Anniversary', 'Birthday', 'Heirloom redesign', 'For myself']; const PIECES = [ { id: 'engagement', label: 'Engagement ring', d: 'Solitaire, halo, hidden halo, cluster' }, { id: 'wedding', label: 'Wedding band', d: 'Plain, pavé, eternity, men\'s' }, { id: 'pendant', label: 'Pendant or necklace', d: 'Solitaire, sapphire halo, tennis' }, { id: 'earrings', label: 'Earrings', d: 'Studs, hoops, drops' }, { id: 'redesign', label: 'Redesign / remake', d: 'New setting for an existing stone' }, { id: 'other', label: 'Something else', d: 'Tell us about it in the brief' }, ]; const STONES = [ { id: 'natural', label: 'Natural diamond', d: 'GIA-certified, traditional supply' }, { id: 'lab', label: 'Lab-grown diamond', d: 'IGI-certified, same optical properties' }, { id: 'sapphire', label: 'Coloured stone', d: 'Sapphire, ruby, emerald' }, { id: 'unsure', label: 'Not sure yet', d: 'We\'ll guide you through the choice' }, ]; const METALS = ['18K White Gold', '18K Yellow Gold', '18K Rose Gold', 'Platinum', 'Decide with advisor']; const BUDGETS = ['Under 10,000 AED', '10–25,000 AED', '25–50,000 AED', '50–100,000 AED', '100,000+ AED', 'I\'d prefer to discuss']; function BespokePage() { return React.createElement(Shell, { current: 'bespoke' }, () => React.createElement(React.Fragment, null, React.createElement('section', { className: 'bespoke-hero' }, React.createElement('div', { className: 'container' }, React.createElement('div', { className: 'grid' }, React.createElement('div', null, React.createElement('div', { className: 'eyebrow', style: { marginBottom: 18 } }, 'Bespoke'), React.createElement('h1', null, 'Designed ', React.createElement('em', null, 'with'), ' you. Crafted on our bench.'), React.createElement('p', null, 'A sketch on a napkin, a family stone, a Pinterest board — every commission begins as a conversation in the showroom or by video. From there, the work happens in-house in Gold & Diamond Park: CAD, wax, casting, hand-setting, polishing.'), React.createElement('p', null, 'Resizing usually finishes in a couple of hours. A new design is typically ready in two to five days. Bring whatever you have — we\'ll meet you there.'), React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 28 } }, React.createElement('a', { href: '#wizard', className: 'btn btn-primary' }, 'Start a design brief'), React.createElement('a', { href: 'https://wa.me/971568747327?text=Hi%2C%20I\'d%20like%20to%20discuss%20a%20bespoke%20design.', target: '_blank', className: 'btn btn-text' }, 'Or on WhatsApp →'), ), ), React.createElement('div', { className: 'hero-image' }, React.createElement('img', { src: 'assets/bride-marquise.webp', alt: 'Bespoke marquise engagement ring' }), React.createElement('div', { className: 'badge' }, React.createElement('div', { className: 'eyebrow', style: { color: 'var(--accent-deep)' } }, 'Recent commission'), React.createElement('div', { className: 'serif', style: { fontSize: 18 } }, 'Marquise Cluster'), React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-muted)' } }, 'Lab-grown · Platinum · 2 days'), ), ), ), ), ), React.createElement(ProcessStrip, null), React.createElement(Wizard, null), React.createElement(BespokeQuotes, null), ), ); } function ProcessStrip() { const steps = [ { n: '01', label: 'Share', body: 'Sketch, Pinterest, or just a story.' }, { n: '02', label: 'Consult', body: '4Cs, stones, materials, quoted price.' }, { n: '03', label: 'Design', body: 'CAD renders and a wax model to approve.' }, { n: '04', label: 'Craft', body: 'Casting, setting, polishing on our bench.' }, { n: '05', label: 'Deliver', body: 'Presented with the GIA / IGI report.' }, ]; return React.createElement('section', { style: { padding: '60px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' } }, React.createElement('div', { className: 'container' }, React.createElement('div', { className: 'process-steps', style: { marginTop: 0, paddingTop: 0, borderTop: 0, gridTemplateColumns: 'repeat(5, 1fr)' } }, ...steps.map((s, i) => React.createElement('div', { className: 'process-step', key: i, style: { color: 'var(--fg)' } }, React.createElement('div', { className: 'num', style: { color: 'var(--accent-deep)' } }, s.n), React.createElement('div', { className: 'step-label', style: { color: 'var(--fg)' } }, s.label), React.createElement('div', { className: 'step-body', style: { color: 'var(--fg-muted)' } }, s.body), )), ), ), ); } function Wizard() { const [step, setStep] = useStateB(0); const [data, setData] = useStateB({ occasion: '', piece: '', stone: '', metal: '', budget: '', name: '', contact: '', email: '', note: '', timing: '', }); const labels = ['Occasion', 'Piece', 'Stone & metal', 'Budget & timing', 'Your details']; const next = () => setStep(Math.min(4, step + 1)); const prev = () => setStep(Math.max(0, step - 1)); const set = (patch) => setData({ ...data, ...patch }); const stepValid = () => { if (step === 0) return !!data.occasion; if (step === 1) return !!data.piece; if (step === 2) return !!data.stone && !!data.metal; if (step === 3) return !!data.budget; if (step === 4) return data.name && data.contact; return true; }; const [done, setDone] = useStateB(false); const submit = () => setDone(true); return React.createElement('section', { className: 'wizard', id: 'wizard' }, React.createElement('div', { className: 'container' }, React.createElement('div', { className: 'eyebrow', style: { marginBottom: 18, textAlign: 'center' } }, 'Custom Design Brief'), React.createElement('h2', { className: 'serif', style: { textAlign: 'center', fontSize: 44, fontWeight: 400, margin: '0 0 48px', lineHeight: 1.1 } }, 'Tell us about ', React.createElement('em', { style: { fontStyle: 'italic', color: 'var(--accent-deep)' } }, 'the piece'), '.'), React.createElement('div', { className: 'progress' }, ...labels.map((l, i) => React.createElement('div', { key: i, className: 'step' + (i < step ? ' done' : '') + (i === step ? ' current' : ''), onClick: () => i <= step && setStep(i) }, React.createElement('div', { className: 'bar' }), React.createElement('div', { className: 'label' }, (i + 1).toString().padStart(2, '0') + ' · ' + l), ), ), ), done ? React.createElement('div', { className: 'wizard-card thanks' }, React.createElement('div', { className: 'check' }, '✓'), React.createElement('h2', null, 'Brief received, ' + (data.name.split(' ')[0] || 'thank you') + '.'), React.createElement('p', { className: 'sub', style: { maxWidth: 460, margin: '12px auto 24px' } }, 'A designer will reply on WhatsApp within the hour with first questions and a suggested time for the consultation. Replies come from a +971 number between 10am and 9pm Dubai.'), React.createElement('div', { style: { display: 'inline-flex', gap: 12 } }, React.createElement('a', { href: 'https://wa.me/971568747327', target: '_blank', className: 'btn btn-primary' }, 'Open WhatsApp now'), React.createElement('a', { href: 'collections.html', className: 'btn btn-text' }, 'Browse pieces while you wait →'), ), ) : React.createElement('div', { className: 'wizard-card' }, React.createElement('div', { className: 'step-num' }, 'Step ' + String(step + 1).padStart(2, '0') + ' of 05'), step === 0 && React.createElement('div', null, React.createElement('h2', null, 'What\'s the occasion?'), React.createElement('p', { className: 'help' }, 'A small piece of context helps us suggest the right starting point — be it a centre stone, a band, or a redesign.'), React.createElement('div', { className: 'chip-group' }, ...OCCASIONS.map(o => React.createElement('button', { key: o, type: 'button', className: 'chip' + (data.occasion === o ? ' active' : ''), onClick: () => set({ occasion: o }) }, o), ), ), ), step === 1 && React.createElement('div', null, React.createElement('h2', null, 'And what kind of piece?'), React.createElement('p', { className: 'help' }, 'You can change your mind in the consultation. This just helps us prepare references and stones in advance.'), React.createElement('div', { className: 'choice-grid' }, ...PIECES.map(p => React.createElement('button', { key: p.id, type: 'button', className: 'choice' + (data.piece === p.id ? ' active' : ''), onClick: () => set({ piece: p.id }) }, React.createElement('div', { className: 'h' }, p.label), React.createElement('div', { className: 'd' }, p.d), ), ), ), ), step === 2 && React.createElement('div', null, React.createElement('h2', null, 'Stone and metal.'), React.createElement('p', { className: 'help' }, 'Most clients arrive uncertain — there\'s no wrong answer here.'), React.createElement('div', { className: 'eyebrow muted', style: { marginBottom: 12 } }, 'Stone'), React.createElement('div', { className: 'choice-grid', style: { marginBottom: 36 } }, ...STONES.map(s => React.createElement('button', { key: s.id, type: 'button', className: 'choice' + (data.stone === s.id ? ' active' : ''), onClick: () => set({ stone: s.id }) }, React.createElement('div', { className: 'h' }, s.label), React.createElement('div', { className: 'd' }, s.d), ), ), ), React.createElement('div', { className: 'eyebrow muted', style: { marginBottom: 12 } }, 'Metal'), React.createElement('div', { className: 'chip-group' }, ...METALS.map(m => React.createElement('button', { key: m, type: 'button', className: 'chip' + (data.metal === m ? ' active' : ''), onClick: () => set({ metal: m }) }, m), ), ), ), step === 3 && React.createElement('div', null, React.createElement('h2', null, 'Budget and timing.'), React.createElement('p', { className: 'help' }, 'A band is helpful so the advisor brings appropriate stones to the consultation. Quoted in AED — we can confirm in USD, GBP, EUR.'), React.createElement('div', { className: 'eyebrow muted', style: { marginBottom: 12 } }, 'Budget'), React.createElement('div', { className: 'chip-group', style: { marginBottom: 28 } }, ...BUDGETS.map(b => React.createElement('button', { key: b, type: 'button', className: 'chip' + (data.budget === b ? ' active' : ''), onClick: () => set({ budget: b }) }, b), ), ), React.createElement('div', { className: 'field' }, React.createElement('label', null, 'When do you need it by?'), React.createElement('input', { value: data.timing, onChange: e => set({ timing: e.target.value }), placeholder: 'e.g. proposing in three weeks' }), ), ), step === 4 && React.createElement('div', null, React.createElement('h2', null, 'Where do we send the brief?'), React.createElement('p', { className: 'help' }, 'We\'ll reply on WhatsApp first — it\'s how we work day-to-day. Email is the fallback.'), React.createElement('div', { className: 'field-row' }, React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Your name'), React.createElement('input', { required: true, value: data.name, onChange: e => set({ name: e.target.value }) })), React.createElement('div', { className: 'field' }, React.createElement('label', null, 'WhatsApp or phone'), React.createElement('input', { required: true, value: data.contact, onChange: e => set({ contact: e.target.value }), placeholder: '+971 ...' })), ), React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Email (optional)'), React.createElement('input', { value: data.email, onChange: e => set({ email: e.target.value }) })), React.createElement('div', { className: 'field' }, React.createElement('label', null, 'The brief — describe what you have in mind'), React.createElement('textarea', { rows: 4, value: data.note, onChange: e => set({ note: e.target.value }), placeholder: 'A halo ring with a square cushion, vintage feel, milgrain on the band...' })), ), React.createElement('div', { className: 'wizard-actions' }, React.createElement('div', null, step > 0 && React.createElement('button', { className: 'btn btn-text', onClick: prev }, '← Back'), ), React.createElement('div', { style: { display: 'flex', gap: 16, alignItems: 'center' } }, React.createElement('div', { className: 'step-of' }, String(step + 1).padStart(2, '0') + ' / 05'), step < 4 ? React.createElement('button', { className: 'btn btn-primary', disabled: !stepValid(), onClick: next, style: { opacity: stepValid() ? 1 : 0.4 } }, 'Continue →') : React.createElement('button', { className: 'btn btn-primary', disabled: !stepValid(), onClick: submit, style: { opacity: stepValid() ? 1 : 0.4 } }, 'Send brief'), ), ), ), ), ); } function BespokeQuotes() { return React.createElement('section', { className: 'section' }, React.createElement('div', { className: 'container' }, React.createElement('div', { className: 'editorial' }, React.createElement('div', { className: 'img' }, React.createElement('img', { src: 'assets/bride-veil.webp', alt: '' })), React.createElement('div', { className: 'body' }, React.createElement('div', { className: 'eyebrow' }, 'On the bench'), React.createElement('h2', null, 'Resizing in hours. New rings, ', React.createElement('em', null, 'in days'), '.'), React.createElement('p', null, '"They produced a custom marquise ring inside two days. The 4Cs were explained without a hint of pressure." — guest, visiting from the UK.'), React.createElement('p', null, '"Came in for a resize, walked out the same afternoon. Invisible work." — Tatyana R., Dubai resident.'), React.createElement('div', { style: { marginTop: 24, display: 'flex', gap: 12 } }, React.createElement('a', { href: 'index.html#testimonials', className: 'btn-text' }, 'Read all reviews →')), ), ), ), ); } ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(BespokePage));