Gafla Concierge

For everything after the piece.

The lifetime of a Gafla jewel is longer than the day it arrived. Concierge gathers Gift Cards, sizing, polishing, resizing, and repair under one quiet number.

{[ { id: 'gift', label: 'Gift Card' }, { id: 'size', label: 'Size Guide' }, { id: 'care', label: 'Care & Repair' }, { id: 'curated', label: 'Curated for You' }, ].map((t) => ( ))}

{tab === 'gift' && ( <>

GAFLA

AED {giftAmount.toLocaleString()}

{giftFrom ? `From ${giftFrom}` : '—'}

{giftTo ? `For ${giftTo}` : 'A gift of caravan'}

Delivered as a printed card by hand in the UAE, or by mail anywhere in the GCC. Digital cards available by request.

A gift, kept open.

Four standard amounts, in real AED. Or choose your own number — the Concierge will tailor everything: paper, ribbon, the moment of handover.

Amount

{[1000, 3000, 5000, 10000].map((a) => ( ))}

setGiftTo(e.target.value)} /> setGiftFrom(e.target.value)} />

setGiftMsg(e.target.value)} />
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 28 }}>Add to Bag</button>
                </div>
              </Reveal>
            </>
          )}

{tab === 'size' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/heritage-loose-pearls.webp" alt="Heritage pearls" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>The <em>right</em> fit.</h2>
                  <p>If you are unsure of size, the Concierge can arrange a complimentary at‑boutique fitting, or send a paper ring sizer to most GCC addresses. Below is a quick reference.</p>
                  <table className="size-table">
                    <thead>
                      <tr><th>EU</th><th>UK</th><th>US</th><th>Circumference (mm)</th></tr>
                    </thead>
                    <tbody>
                      <tr><td>46</td><td>F½</td><td>3¾</td><td>46.0</td></tr>
                      <tr><td>48</td><td>H</td><td>4½</td><td>48.0</td></tr>
                      <tr><td>50</td><td>J</td><td>5¼</td><td>50.0</td></tr>
                      <tr><td>52</td><td>L</td><td>6</td><td>52.0</td></tr>
                      <tr><td>54</td><td>N</td><td>6¾</td><td>54.0</td></tr>
                      <tr><td>56</td><td>P</td><td>7½</td><td>56.0</td></tr>
                      <tr><td>58</td><td>Q¾</td><td>8½</td><td>58.0</td></tr>
                    </tbody>
                  </table>
                  <button className="btn btn--ghost arrow" style={{ marginTop: 32 }} onClick={() => navigate('contact')}><span>Request a ring sizer</span></button>
                </div>
              </Reveal>
            </>
          )}

{tab === 'care' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/concierge-care-repair-polishing.webp" alt="Care and repair" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>Polish, resize, <em>repair.</em></h2>
                  <p>Each Gafla piece is built to outlive its decade. The Concierge offers cleaning, polishing, resizing, and repair work — consult before any service so we can advise on stones and finish.</p>
                  <div className="care-grid">
                    {[
                      { n: '01', t: 'Cleaning', d: 'Ultrasonic and steam, by hand. Done while you wait at the Majlis.' },
                      { n: '02', t: 'Polishing', d: 'Light re‑polish to restore lustre; deeper work by quotation.' },
                      { n: '03', t: 'Resizing', d: 'Most rings can be resized one to two sizes either way.' },
                      { n: '04', t: 'Repair', d: 'Stone tightening, link replacement, full restoration by quotation.' },
                    ].map((c) => (
                      <div key={c.n} className="care-card">
                        <div className="care-card__no">{c.n}</div>
                        <div className="care-card__t">{c.t}</div>
                        <div className="care-card__d">{c.d}</div>
                      </div>
                    ))}
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 32 }} onClick={() => navigate('contact')}>Open a Service Ticket</button>
                </div>
              </Reveal>
            </>
          )}

{tab === 'curated' && (
            <>
              <Reveal>
                <div className="con-img"><img src="media/concierge-gift-card.webp" alt="Curated gifting" /></div>
              </Reveal>
              <Reveal delay={100}>
                <div className="con-body">
                  <h2>Curated <em>for the moment.</em></h2>
                  <p>For a birthday, an heir, a return from travel — the Concierge will hand‑pick a short list across the seven lines, framed to your story. Send a brief and a printed proposal arrives within two working days.</p>
                  <div className="gift-fields" style={{ marginTop: 24 }}>
                    <input placeholder="Recipient's name (optional)" />
                    <input placeholder="Occasion" />
                    <input placeholder="Budget guideline (AED)" />
                    <textarea placeholder="A short brief" rows="4" />
                  </div>
                  <button className="btn btn--primary" style={{ marginTop: 28 }}>Send Brief</button>
                </div>
              </Reveal>
            </>
          )}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ConciergePage });