/* bespoke.jsx — five-step bespoke funnel */

const Bespoke = ({onConsult, setRoute}) => {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    category: '',
    occasion: '',
    references: [],
    stoneType: '',
    stoneShape: '',
    stoneColor: '',
    caratBand: '',
    metal: '',
    setting: '',
    budget: '',
    timing: '',
    notes: '',
  });

  const set = (k, v) => setData((d) => ({...d, [k]: v}));
  const toggleRef = (k) => setData((d) => {
    const has = d.references.includes(k);
    return {...d, references: has ? d.references.filter(x => x !== k) : [...d.references, k]};
  });

  const steps = [
    'The Piece',
    'The Stone',
    'Metal & Setting',
    'Brief & Budget',
    'Review',
  ];

  return (
    <div className="page-enter">
      <BespokeHero />

      <section className="shell" style={{padding: '60px 48px 24px'}}>
        <div className="stepper" style={{marginBottom: 16}}>
          {steps.map((s, i) => (
            <div key={s} className="stepper__item"
                 data-active={i === step}
                 data-done={i < step}
                 onClick={() => i < step && setStep(i)}>
              <span className="stepper__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="stepper__title">{s}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="shell" style={{padding: '32px 48px 80px', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'flex-start'}}>
        <div>
          {step === 0 && <StepPiece data={data} set={set} toggleRef={toggleRef} />}
          {step === 1 && <StepStone data={data} set={set} />}
          {step === 2 && <StepMetal data={data} set={set} />}
          {step === 3 && <StepBrief data={data} set={set} />}
          {step === 4 && <StepReview data={data} setStep={setStep} />}

          <div style={{marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--gold-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
            <button className="btn-link" disabled={step === 0} onClick={() => setStep(step - 1)} style={{opacity: step === 0 ? 0.3 : 1}}>
              ← Back
            </button>
            <div style={{fontSize: 12, color: 'var(--ink-60)', letterSpacing: '0.06em'}}>Step {step + 1} of {steps.length}</div>
            {step < steps.length - 1 ? (
              <button className="btn btn-primary" onClick={() => setStep(step + 1)}>Continue</button>
            ) : (
              <button className="btn btn-gold" onClick={onConsult}>
                Send to Atelier
              </button>
            )}
          </div>
        </div>

        <BespokeSidebar data={data} />
      </section>

      <BespokeProcess />
      <ConsultantIntro onConsult={onConsult} />
    </div>
  );
};

// ===========================================================
// Bespoke Hero
// ===========================================================
const BespokeHero = () => (
  <div className="shell" style={{padding: '64px 48px 24px'}}>
    <div style={{maxWidth: 880}}>
      <span className="eyebrow">Bespoke · Made for you</span>
      <h1 className="display" style={{fontSize: 'clamp(56px, 7vw, 104px)', margin: '20px 0 0', lineHeight: 1.02}}>
        Begin a <em>one-of-one</em>.
      </h1>
      <p style={{marginTop: 28, maxWidth: 640, fontSize: 17, color: 'var(--ink-60)', lineHeight: 1.65}}>
        Five short questions, then a consultant. Bring whatever you have — a sketch, a screenshot, an heirloom, a stone — and we'll meet it with a brief, three 3D-CAD renders, and a four-to-six-week atelier window.
      </p>
    </div>
  </div>
);

// ===========================================================
// Step 1 — The Piece
// ===========================================================
const StepPiece = ({data, set, toggleRef}) => {
  const categories = [
    {id: 'engagement', name: 'Engagement ring', sub: 'Solitaire, halo, three-stone, cluster'},
    {id: 'band', name: 'Wedding band', sub: 'Eternity, half-eternity, plain, mixed'},
    {id: 'cocktail', name: 'Cocktail ring', sub: 'Statement, gemstone, novelty'},
    {id: 'earrings', name: 'Earrings', sub: 'Studs, drops, hoops, climbers'},
    {id: 'necklace', name: 'Necklace / Pendant', sub: 'Solitaire, station, heirloom motif'},
    {id: 'bracelet', name: 'Bracelet / Bangle', sub: 'Tennis, link, cuff, eternity'},
    {id: 'rework', name: 'Heirloom rework', sub: 'Bring an existing piece to begin'},
    {id: 'other', name: 'Something else', sub: 'Brooch, anklet, pinky, charm — anything'},
  ];

  const occasions = ['Engagement', 'Wedding', 'Anniversary', 'Birthday', 'Push present', 'Self-gift', 'Gift to a friend'];

  const refs = ['aureveris', 'velantrix', 'magnolia', 'prismara', 'celeste', 'imperial-eagle'];

  return (
    <div>
      <h2 className="display" style={{fontSize: 38, margin: 0}}>What are we making?</h2>
      <p style={{color: 'var(--ink-60)', marginTop: 8}}>One brief sentence is enough. We'll pull the rest out of you over coffee.</p>

      <div className="field" style={{marginTop: 36}}>
        <label className="field-label">Category</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12}}>
          {categories.map((c) => (
            <button key={c.id} className="chip"
                    data-selected={data.category === c.id}
                    onClick={() => set('category', c.id)}
                    style={{padding: '18px 20px', textAlign: 'left', display: 'block'}}>
              <div style={{fontSize: 14, fontWeight: 500, letterSpacing: 0, textTransform: 'none'}}>{c.name}</div>
              <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 4, letterSpacing: 0, textTransform: 'none'}}>{c.sub}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">For what occasion?</label>
        <div className="chip-row">
          {occasions.map((o) => (
            <button key={o} className="chip" data-selected={data.occasion === o} onClick={() => set('occasion', o)}>{o}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Reference pieces — pick a few (optional)</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12}}>
          {refs.map((id) => {
            const p = byId(id);
            const selected = data.references.includes(id);
            return (
              <button key={id} onClick={() => toggleRef(id)} style={{
                position: 'relative',
                aspectRatio: '4/5',
                padding: 0,
                border: `1px solid ${selected ? 'var(--palace-gold)' : 'var(--ink-20)'}`,
                background: 'var(--card-bg)',
                cursor: 'pointer',
                overflow: 'hidden',
                outline: selected ? '2px solid var(--palace-gold)' : 'none',
                outlineOffset: -3,
              }}>
                <img src={p.img} alt={p.name} style={{width: '100%', height: '100%', objectFit: 'cover'}} />
                <div style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0,
                  padding: '10px 12px',
                  background: 'linear-gradient(to top, rgba(20,16,31,0.85), transparent)',
                  color: '#FFF',
                  fontFamily: 'var(--font-display)',
                  fontStyle: 'italic',
                  fontSize: 16,
                  textAlign: 'left',
                }}>{p.name}</div>
                {selected && (
                  <div style={{
                    position: 'absolute', top: 10, right: 10,
                    width: 24, height: 24,
                    background: 'var(--palace-gold)',
                    color: '#FFF',
                    display: 'grid', placeItems: 'center',
                  }}>
                    <Icon.Check size={14} />
                  </div>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ===========================================================
// Step 2 — The Stone
// ===========================================================
const StepStone = ({data, set}) => {
  const stones = [
    {id: 'diamond', name: 'Diamond', sub: 'Brilliant, emerald, oval, pear, marquise, princess'},
    {id: 'sapphire', name: 'Sapphire', sub: 'Blue, pink, yellow, multi — most worn at the house'},
    {id: 'emerald', name: 'Emerald', sub: 'Colombian & Zambian'},
    {id: 'ruby', name: 'Ruby', sub: 'Burmese, pigeon-blood, oval & cushion'},
    {id: 'spinel', name: 'Spinel', sub: 'Red, blue, cobalt — collectors\' choice'},
    {id: 'mixed', name: 'A mix', sub: 'Halo of one, centre of another'},
    {id: 'own', name: 'I have my own stone', sub: 'Bring it — we\'ll certify it'},
    {id: 'open', name: 'Advise me', sub: 'Show me three options'},
  ];

  const shapes = ['Round', 'Oval', 'Cushion', 'Emerald', 'Pear', 'Marquise', 'Princess', 'Heart', 'Asscher'];
  const colors = ['Colourless / D–F', 'Near colourless / G–J', 'Blue sapphire', 'Pink sapphire', 'Yellow sapphire', 'Emerald green', 'Ruby red', 'Multi / rainbow'];
  const carats = ['Up to 0.5ct', '0.5 – 1ct', '1 – 2ct', '2 – 3ct', '3 – 5ct', '5ct +', 'Advise me'];

  return (
    <div>
      <h2 className="display" style={{fontSize: 38, margin: 0}}>The stone, first.</h2>
      <p style={{color: 'var(--ink-60)', marginTop: 8}}>The piece is drawn <em>around</em> it.</p>

      <div className="field" style={{marginTop: 36}}>
        <label className="field-label">Stone type</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12}}>
          {stones.map((s) => (
            <button key={s.id} className="chip" data-selected={data.stoneType === s.id} onClick={() => set('stoneType', s.id)} style={{padding: '16px 20px', textAlign: 'left', display: 'block'}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
                <Icon.Diamond size={14} />
                <span style={{fontSize: 14, letterSpacing: 0, textTransform: 'none', fontWeight: 500}}>{s.name}</span>
              </div>
              <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 4, letterSpacing: 0, textTransform: 'none'}}>{s.sub}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Shape</label>
        <div className="chip-row">
          {shapes.map((s) => (
            <button key={s} className="chip" data-selected={data.stoneShape === s} onClick={() => set('stoneShape', s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Colour / hue</label>
        <div className="chip-row">
          {colors.map((c) => (
            <button key={c} className="chip" data-selected={data.stoneColor === c} onClick={() => set('stoneColor', c)}>{c}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Carat band</label>
        <div className="chip-row">
          {carats.map((c) => (
            <button key={c} className="chip" data-selected={data.caratBand === c} onClick={() => set('caratBand', c)}>{c}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

// ===========================================================
// Step 3 — Metal & Setting
// ===========================================================
const StepMetal = ({data, set}) => {
  const metals = [
    {id: 'yellow', name: '18k Yellow Gold', sub: 'Warm, traditional, holds colour in stones'},
    {id: 'rose', name: '18k Rose Gold', sub: 'Pink-warm, complements diamond & morganite'},
    {id: 'white', name: '18k White Gold', sub: 'Cool-grey, mainstream bridal'},
    {id: 'platinum', name: 'Platinum 950', sub: 'Heaviest, hypoallergenic, lifetime'},
    {id: 'mixed', name: 'Two-tone', sub: 'White centre, rose or yellow shank'},
  ];
  const settings = [
    {id: 'solitaire', name: 'Solitaire', d: 'Single stone, prong or bezel.'},
    {id: 'halo', name: 'Halo', d: 'Pavé around centre stone.'},
    {id: 'three', name: 'Three-stone', d: 'Centre flanked by accents.'},
    {id: 'cluster', name: 'Cluster', d: 'Stones grouped as a single jewel.'},
    {id: 'eternity', name: 'Eternity', d: 'Full circle of stones.'},
    {id: 'bezel', name: 'Bezel / Tension', d: 'Modern, low-profile.'},
  ];

  return (
    <div>
      <h2 className="display" style={{fontSize: 38, margin: 0}}>Metal &amp; setting.</h2>
      <p style={{color: 'var(--ink-60)', marginTop: 8}}>If you're unsure, leave it to the bench.</p>

      <div className="field" style={{marginTop: 36}}>
        <label className="field-label">Metal</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12}}>
          {metals.map((m) => (
            <button key={m.id} className="chip" data-selected={data.metal === m.id} onClick={() => set('metal', m.id)} style={{padding: '16px 20px', textAlign: 'left', display: 'block', alignItems: 'center'}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
                <span style={{width: 24, height: 24, borderRadius: '50%', background: metalSwatch(m.id), border: '1px solid rgba(0,0,0,0.1)'}} />
                <span style={{fontSize: 14, letterSpacing: 0, textTransform: 'none', fontWeight: 500}}>{m.name}</span>
              </div>
              <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 6, letterSpacing: 0, textTransform: 'none', paddingLeft: 36}}>{m.sub}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Setting</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12}}>
          {settings.map((s) => (
            <button key={s.id} className="chip" data-selected={data.setting === s.id} onClick={() => set('setting', s.id)} style={{padding: '20px 16px', textAlign: 'center', display: 'block'}}>
              <SettingDiagram type={s.id} selected={data.setting === s.id} />
              <div style={{fontSize: 13, marginTop: 12, letterSpacing: 0, textTransform: 'none', fontWeight: 500}}>{s.name}</div>
              <div style={{fontSize: 11, color: 'var(--ink-60)', marginTop: 4, letterSpacing: 0, textTransform: 'none'}}>{s.d}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

const metalSwatch = (id) => ({
  yellow: 'linear-gradient(135deg, #E8C56E, #B8923A)',
  rose: 'linear-gradient(135deg, #E5B5A1, #BF8870)',
  white: 'linear-gradient(135deg, #E8E8EE, #B8B8C2)',
  platinum: 'linear-gradient(135deg, #DFE2E6, #9CA3AA)',
  mixed: 'linear-gradient(90deg, #E8C56E 0% 33%, #E8E8EE 33% 66%, #E5B5A1 66% 100%)',
})[id];

const SettingDiagram = ({type, selected}) => {
  const c = selected ? 'var(--palace-gold)' : 'var(--ink-40)';
  return (
    <svg width="44" height="32" viewBox="0 0 44 32" fill="none" stroke={c} strokeWidth="1.2" style={{display: 'block', margin: '0 auto'}}>
      <line x1="2" y1="28" x2="42" y2="28" />
      {type === 'solitaire' && (
        <React.Fragment>
          <polygon points="22,6 26,14 22,22 18,14" fill={c} fillOpacity="0.2" />
          <line x1="18" y1="14" x2="18" y2="20" />
          <line x1="26" y1="14" x2="26" y2="20" />
        </React.Fragment>
      )}
      {type === 'halo' && (
        <React.Fragment>
          <circle cx="22" cy="14" r="8" />
          <polygon points="22,9 25,14 22,19 19,14" fill={c} fillOpacity="0.3" />
        </React.Fragment>
      )}
      {type === 'three' && (
        <React.Fragment>
          <circle cx="14" cy="16" r="3" />
          <polygon points="22,8 26,16 22,24 18,16" fill={c} fillOpacity="0.2" />
          <circle cx="30" cy="16" r="3" />
        </React.Fragment>
      )}
      {type === 'cluster' && (
        <React.Fragment>
          {[[18,10],[26,10],[22,16],[18,22],[26,22]].map(([x,y], i) => <circle key={i} cx={x} cy={y} r="2.5" />)}
        </React.Fragment>
      )}
      {type === 'eternity' && (
        <React.Fragment>
          {[6, 12, 18, 22, 26, 32, 38].map((x, i) => <circle key={i} cx={x} cy="14" r="2.5" />)}
        </React.Fragment>
      )}
      {type === 'bezel' && (
        <React.Fragment>
          <rect x="14" y="10" width="16" height="10" rx="2" />
          <polygon points="22,11 27,15 22,19 17,15" fill={c} fillOpacity="0.25" />
        </React.Fragment>
      )}
    </svg>
  );
};

// ===========================================================
// Step 4 — Brief & Budget
// ===========================================================
const StepBrief = ({data, set}) => {
  const budgets = [
    {id: '9-20', name: 'AED 9k – 20k', sub: 'A polished, considered first piece'},
    {id: '20-50', name: 'AED 20k – 50k', sub: 'Signature & most bridal'},
    {id: '50-100', name: 'AED 50k – 100k', sub: 'Centre stone, statement work'},
    {id: '100+', name: 'AED 100k +', sub: 'Couture and high-jewellery'},
    {id: 'open', name: 'Open / advise me', sub: 'Three options across bands'},
  ];
  const timings = ['4–6 weeks (standard)', '6–10 weeks (more intricate)', 'I have a deadline', 'No rush'];

  return (
    <div>
      <h2 className="display" style={{fontSize: 38, margin: 0}}>The brief.</h2>
      <p style={{color: 'var(--ink-60)', marginTop: 8}}>Budget bands and timing — both flexible, both worth saying out loud.</p>

      <div className="field" style={{marginTop: 36}}>
        <label className="field-label">Comfortable budget</label>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12}}>
          {budgets.map((b) => (
            <button key={b.id} className="chip" data-selected={data.budget === b.id} onClick={() => set('budget', b.id)} style={{padding: '14px 18px', textAlign: 'left', display: 'block'}}>
              <div style={{fontSize: 14, fontWeight: 500, letterSpacing: 0, textTransform: 'none'}}>{b.name}</div>
              <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 4, letterSpacing: 0, textTransform: 'none'}}>{b.sub}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">Timing</label>
        <div className="chip-row">
          {timings.map((t) => (
            <button key={t} className="chip" data-selected={data.timing === t} onClick={() => set('timing', t)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label className="field-label">A note for the bench</label>
        <textarea className="field-textarea" value={data.notes} onChange={(e) => set('notes', e.target.value)}
                  placeholder="e.g. 'My grandmother's emerald, oval-cut, I want a halo of pink sapphires around it. Right hand, ring size 6.'"
                  style={{minHeight: 140}} />
      </div>

      <div style={{padding: 24, background: 'var(--champagne)', display: 'flex', gap: 16, alignItems: 'flex-start'}}>
        <div style={{color: 'var(--palace-gold)', flexShrink: 0, marginTop: 2}}><Icon.Diamond size={20} /></div>
        <div>
          <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--royal-night)'}}>
            Bringing your own stone?
          </div>
          <div style={{marginTop: 6, fontSize: 13, color: 'var(--ink-60)', lineHeight: 1.6}}>
            We'll certify it through GIA-equivalent labs, photograph it, and recommend three settings around it. No charge if you don't proceed.
          </div>
        </div>
      </div>
    </div>
  );
};

// ===========================================================
// Step 5 — Review
// ===========================================================
const StepReview = ({data, setStep}) => {
  const summary = [
    {label: 'Category', value: data.category || '—', editStep: 0},
    {label: 'Occasion', value: data.occasion || '—', editStep: 0},
    {label: 'References', value: data.references.length ? data.references.map(id => byId(id)?.name).join(' · ') : 'None selected', editStep: 0},
    {label: 'Stone', value: [data.stoneType, data.stoneShape, data.stoneColor, data.caratBand].filter(Boolean).join(' · ') || '—', editStep: 1},
    {label: 'Metal & setting', value: [data.metal, data.setting].filter(Boolean).join(' · ') || '—', editStep: 2},
    {label: 'Budget', value: data.budget || '—', editStep: 3},
    {label: 'Timing', value: data.timing || '—', editStep: 3},
    {label: 'Note', value: data.notes || '—', editStep: 3},
  ];

  return (
    <div>
      <h2 className="display" style={{fontSize: 38, margin: 0}}>Looks good?</h2>
      <p style={{color: 'var(--ink-60)', marginTop: 8}}>
        A consultant will read this, pull stones, draft three 3D-CAD renders, and email you within 48 hours.
      </p>
      <div style={{marginTop: 36, borderTop: '1px solid var(--gold-line)'}}>
        {summary.map((s) => (
          <div key={s.label} style={{display: 'grid', gridTemplateColumns: '180px 1fr auto', padding: '20px 0', borderBottom: '1px solid var(--ink-10)', alignItems: 'baseline', gap: 16}}>
            <div className="label" style={{fontSize: 11}}>{s.label}</div>
            <div style={{fontSize: 14, color: 'var(--charcoal)', textTransform: 'capitalize'}}>{s.value}</div>
            <button className="btn-link" style={{fontSize: 10}} onClick={() => setStep(s.editStep)}>Edit</button>
          </div>
        ))}
      </div>
    </div>
  );
};

// ===========================================================
// Sidebar
// ===========================================================
const BespokeSidebar = ({data}) => {
  return (
    <aside style={{position: 'sticky', top: 100, padding: 32, background: 'var(--card-bg)', border: '1px solid var(--gold-line)'}}>
      <div className="eyebrow">Atelier preview</div>
      <h3 className="display" style={{fontSize: 28, margin: '12px 0 24px'}}>Your piece</h3>

      <div style={{position: 'relative', aspectRatio: '4/5', background: 'var(--champagne)', overflow: 'hidden', marginBottom: 24}}>
        <PreviewArt data={data} />
      </div>

      <dl style={{margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14}}>
        <PreviewRow label="Category" value={data.category} />
        <PreviewRow label="Stone" value={[data.stoneType, data.stoneShape].filter(Boolean).join(' · ')} />
        <PreviewRow label="Hue" value={data.stoneColor} />
        <PreviewRow label="Carat" value={data.caratBand} />
        <PreviewRow label="Metal" value={data.metal} />
        <PreviewRow label="Setting" value={data.setting} />
        <PreviewRow label="Budget" value={data.budget && `AED ${data.budget === '100+' ? '100k+' : data.budget + 'k'}`} />
      </dl>

      <div style={{marginTop: 28, padding: '16px 0 0', borderTop: '1px solid var(--ink-10)', fontSize: 12, color: 'var(--ink-60)', lineHeight: 1.6}}>
        Indicative lead time: <strong style={{color: 'var(--royal-night)'}}>4–6 weeks</strong> from sign-off on the chosen render.
      </div>
    </aside>
  );
};

const PreviewArt = ({data}) => {
  // Render a small "moodboard" representation
  const refImgs = data.references.slice(0, 4).map(id => byId(id)?.img).filter(Boolean);
  if (refImgs.length === 0) {
    return (
      <div style={{position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--ink-40)', textAlign: 'center', padding: 32}}>
        <div>
          <div style={{color: 'var(--palace-gold)', marginBottom: 16}}><Icon.Crown size={32} /></div>
          <div className="label" style={{fontSize: 11}}>Your moodboard</div>
          <div style={{marginTop: 8, fontSize: 12}}>Pick references and a stone — we'll start painting it in.</div>
        </div>
      </div>
    );
  }
  return (
    <div style={{position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: refImgs.length > 1 ? '1fr 1fr' : '1fr', gridTemplateRows: refImgs.length > 2 ? '1fr 1fr' : '1fr', gap: 2}}>
      {refImgs.map((src, i) => (
        <img key={i} src={src} alt="" style={{width: '100%', height: '100%', objectFit: 'cover'}} />
      ))}
    </div>
  );
};

const PreviewRow = ({label, value}) => (
  <div style={{display: 'grid', gridTemplateColumns: '90px 1fr', gap: 14, alignItems: 'baseline', fontSize: 13}}>
    <span className="label" style={{fontSize: 10}}>{label}</span>
    <span style={{color: value ? 'var(--charcoal)' : 'var(--ink-40)', textTransform: 'capitalize'}}>
      {value || '—'}
    </span>
  </div>
);

// ===========================================================
// Process detail (after stepper)
// ===========================================================
const BespokeProcess = () => (
  <section style={{background: 'var(--section-bg)'}}>
    <div className="shell section-pad">
      <SectionHead
        eyebrow="The process"
        title={<>From brief to <em>hallmark</em>.</>}
        sub="Roughly four to six weeks, three weekly check-ins, and one piece that didn't exist when the month began."
      />
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16}}>
        {[
          {n: '01', t: 'Brief', sub: 'Week 0', d: 'Private consult — references, stone, budget, sketch.'},
          {n: '02', t: 'Stone curation', sub: 'Week 1', d: 'Three stones pulled, certified, brought to the table.'},
          {n: '03', t: 'CAD renders', sub: 'Week 2', d: 'Three 3D-CAD renders. Refine to one signed-off design.'},
          {n: '04', t: 'Atelier', sub: 'Weeks 3–5', d: 'Wax, cast, set, polish. Weekly photos from the bench.'},
          {n: '05', t: 'Reveal', sub: 'Week 6', d: 'Hallmarked, certified, photographed — and yours.'},
        ].map((p) => (
          <div key={p.n} style={{background: 'var(--card-bg)', padding: '28px 22px', borderTop: '2px solid var(--palace-gold)'}}>
            <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 32, color: 'var(--palace-gold)', lineHeight: 1}}>{p.n}</div>
            <div className="label" style={{fontSize: 10, marginTop: 16}}>{p.sub}</div>
            <h4 className="display" style={{margin: '6px 0 12px', fontSize: 22, fontStyle: 'normal'}}>{p.t}</h4>
            <p style={{margin: 0, fontSize: 13, color: 'var(--ink-60)', lineHeight: 1.55}}>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ===========================================================
// Consultant intro
// ===========================================================
const ConsultantIntro = ({onConsult}) => (
  <section className="shell section-pad" style={{display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center'}}>
    <div style={{aspectRatio: '4/5', background: 'var(--champagne)', overflow: 'hidden', position: 'relative'}}>
      <img src="assets/lifestyle-1.webp" alt="Consultant" style={{width: '100%', height: '100%', objectFit: 'cover'}} />
    </div>
    <div>
      <span className="eyebrow">Your consultant</span>
      <h2 className="display" style={{fontSize: 'clamp(36px, 4.4vw, 56px)', margin: '20px 0 24px'}}>
        Sat across the table — <em>not behind glass.</em>
      </h2>
      <p style={{fontSize: 16, color: 'var(--ink-60)', lineHeight: 1.7, maxWidth: 540}}>
        Bespoke pieces are walked through by a senior consultant from start to hallmark. You see the stones loose, you see the wax model, you handle the cast before it's set. Three weekly photo updates from the bench in Bangkok, one final reveal in Deira.
      </p>
      <div style={{display: 'flex', gap: 12, marginTop: 36}}>
        <button className="btn btn-primary" onClick={onConsult}>Book a Private Consultation</button>
        <a className="btn btn-ghost" href="https://wa.me/971545839411" target="_blank" rel="noreferrer">WhatsApp the atelier</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Bespoke });