// 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));
