/* AMBER & ZAFRAN — Gifting Salon (reuses Homepage Gifting content) */
function Gifting({ t, lang, go }) {
  return (
    <div>
      <section style={{ background: 'linear-gradient(160deg,#762538,#4d1623)', color: 'var(--white)', padding: '78px 24px 60px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', border: '1px solid var(--gold-line)' }}></div>

        <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.giftK}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(40px,13vw,54px)', color: 'var(--white)', marginTop: 14, whiteSpace: 'pre-line' }}>{t.giftT}</h1>
        <p className="body" style={{ color: 'rgba(253,253,253,.82)', maxWidth: 320, margin: '18px auto 0' }}>{t.giftB}</p>

        <Reveal style={{ display: 'flex', justifyContent: 'center', margin: '40px 0 36px' }}>
          <div style={{ width: 150, height: 150, position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(150deg,#1d0c10,#2c1116)', boxShadow: '0 30px 50px rgba(0,0,0,.4)' }}></div>
            <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 16, transform: 'translateX(-50%)', background: 'linear-gradient(var(--gold-deep),var(--gold))' }}></div>
            <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 16, transform: 'translateY(-50%)', background: 'linear-gradient(90deg,var(--gold-deep),var(--gold))' }}></div>
            <img src="assets/mark-gold.png" alt="" style={{ position: 'absolute', width: 44, top: '50%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 2 }} />
          </div>
        </Reveal>

        <Reveal><button className="btn btn-gold" onClick={() => go('shop')}>{t.giftCta} <Icon.arrow className="arr" /></button></Reveal>
      </section>

      <section className="sec">
        <Reveal className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }}>
          <div className="kicker solo center" style={{ justifyContent: 'center' }}>{lang === 'ar' ? 'كيف يعمل' : 'How It Works'}</div>
          <h2 className="sec-title h-md">{lang === 'ar' ? 'كل تفصيلٍ مُعتنى به' : 'Every Detail, Considered'}</h2>
        </Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {[
            [lang === 'ar' ? 'اختر العطر' : 'Choose the Fragrance', lang === 'ar' ? 'تصفّح المتجر واخترْ القطعة المناسبة للمناسبة.' : 'Browse the Boutique and select the piece for the occasion.'],
            [lang === 'ar' ? 'فعّل خيار الهدية' : 'Toggle Gifting at Checkout', lang === 'ar' ? 'عند الدفع، فعّل "اجعلها هدية" لإضافة التغليف والرسالة.' : 'At checkout, switch on "Make this a gift" to add wrapping and a message.'],
            [lang === 'ar' ? 'التغليف والختم' : 'Wrapped & Sealed', lang === 'ar' ? 'حرير عنّابي، ختمٌ ذهبي، ورسالةٌ بخطّ اليد.' : 'Burgundy silk, a gold seal, and a personal message in calligraphy.'],
          ].map(([h, b], i) => (
            <Reveal key={i} style={{ display: 'flex', gap: 18 }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--gold-deep-on-light)', lineHeight: 1 }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <div style={{ fontFamily: lang === 'ar' ? 'var(--arabic-display)' : 'var(--serif)', fontSize: 19 }}>{h}</div>
                <p className="body" style={{ marginTop: 4 }}>{b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <Footer t={t} lang={lang} go={go} />
    </div>
  );
}

Object.assign(window, { Gifting });