/* AMBER & ZAFRAN — VIP Elite (reuses Homepage VIP content) */
function VIP({ t, lang, go }) {
  return (
    <div>
      <section style={{ background: 'var(--black)', color: 'var(--white)', padding: '78px 24px 60px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 50% at 50% 0%, rgba(220,177,107,.14), transparent 60%)' }}></div>

        <Reveal style={{ position: 'relative' }}>
          <img src="assets/mark-gold.png" alt="" style={{ width: 70, margin: '0 auto 18px' }} />
          <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.vipK}</div>
          <h1 className="sec-title h-lg" style={{ color: 'var(--white)', marginTop: 14 }}>{t.vipT}</h1>
          <p className="body" style={{ color: 'rgba(253,253,253,.78)', maxWidth: 300, margin: '14px auto 0' }}>{t.vipB}</p>
        </Reveal>

        <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 14, margin: '34px auto 0', maxWidth: 320, position: 'relative' }}>
          {t.vipPoints.map((pt, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,.1)' }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 13, color: 'var(--gold)', width: 22 }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontFamily: lang === 'ar' ? 'var(--arabic)' : 'var(--sans)', fontWeight: 300, fontSize: 14, color: 'rgba(253,253,253,.9)' }}>{pt}</span>
            </div>
          ))}
        </Reveal>

        <Reveal style={{ textAlign: 'center', marginTop: 34, position: 'relative' }}>
          <button className="btn btn-gold" onClick={() => go('shop')}>{t.vipCta}</button>
        </Reveal>
      </section>

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

Object.assign(window, { VIP });