/* Central Rewards Club — Profile, tier progress, history, events/VIP, notifications. */

function Profile({ ctx }) {
  const C = ctx.C, T = ctx.tierObj;
  const pct = T.nextSpend ? (ctx.member.ytdSpend / T.nextSpend) * 100 : 100;
  const toNext = T.nextSpend ? Math.max(0, T.nextSpend - ctx.member.ytdSpend) : 0;

  const menu = [
    { icon: 'wallet', label: 'Riwayat transaksi', sub: 'Poin & pembelian', go: 'history' },
    { icon: 'calendar', label: 'Events & VIP', sub: 'Acara eksklusif member', go: 'events', badge: ctx.tier !== 'classic' },
    { icon: 'card', label: 'Kartu digital', sub: 'Tampilkan QR di kasir', sheet: true },
    { icon: 'instagram', label: 'Akun terhubung', sub: 'Instagram, TikTok', go: 'social' },
    { icon: 'bell', label: 'Notifikasi', sub: 'Atur preferensi', go: 'notifications' },
    { icon: 'shield', label: 'Privasi & keamanan', sub: 'Data & UU PDP', go: 'settings' },
    { icon: 'globe', label: 'Bahasa', sub: 'Indonesia', go: 'settings' },
    { icon: 'info', label: 'Bantuan', sub: 'FAQ & dukungan', go: 'settings' },
  ];

  return (
    <div style={{ paddingBottom: 24 }}>
      {/* Header */}
      <div style={{ background: 'radial-gradient(120% 100% at 50% 0%,#6e1a26,#4D1019)', color: '#fff', padding: '58px 20px 26px', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 56, right: 16 }}>
          <button onClick={() => ctx.push('settings')} style={{ width: 40, height: 40, borderRadius: 12, border: 'none', background: 'rgba(255,255,255,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><CRCIcon name="settings" size={20} color="#fff" /></button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', overflow: 'hidden', boxShadow: '0 0 0 3px var(--crc-gold)' }}><Img slot="avatar" placeholder="Foto" radius={32} /></div>
          <div>
            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>{ctx.member.name}</h1>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.7)', marginTop: 2 }}>No. {ctx.member.memberId}</div>
            <div style={{ marginTop: 7 }}><TierBadge tier={ctx.tier} size="sm" /></div>
          </div>
        </div>
        {/* stats */}
        <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
          {[['Poin', ctx.fmt.pts(ctx.points)], ['Belanja \'26', 'Rp ' + (ctx.member.ytdSpend / 1e6).toFixed(1) + 'jt'], ['Voucher', ctx.store.vouchers.filter((v) => v.status === 'active').length]].map(([l, v], i) => (
            <div key={i} style={{ flex: 1, background: 'rgba(255,255,255,.12)', borderRadius: 14, padding: '12px 8px', textAlign: 'center' }}>
              <div className="crc-display" style={{ fontSize: 19, fontWeight: 800 }}>{v}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,.7)', marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tier ladder */}
      <div style={{ padding: '18px 20px 0' }}>
        <Surface pad={18}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>Perjalanan tier</h3>
            {T.next && <span style={{ fontSize: 12, color: 'var(--crc-ink-2)', fontWeight: 600 }}>{ctx.fmt.idr(toNext)} lagi</span>}
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
            <div style={{ position: 'absolute', top: 16, left: 16, right: 16, height: 3, background: 'var(--crc-line)' }} />
            <div style={{ position: 'absolute', top: 16, left: 16, width: `calc(${Math.min(100, (tierRank(ctx.tier) / 3) * 100 + pct / 3 * 0.33)}% - 16px)`, maxWidth: 'calc(100% - 32px)', height: 3, background: 'linear-gradient(90deg,var(--crc-gold),var(--crc-gold-deep))' }} />
            {['classic', 'gold', 'platinum', 'black'].map((tk) => {
              const reached = tierRank(ctx.tier) >= tierRank(tk);
              const cur = ctx.tier === tk;
              return (
                <div key={tk} style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, zIndex: 1 }}>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: reached ? C.TIERS[tk].card : '#fff', boxShadow: cur ? '0 0 0 3px var(--crc-gold-soft), inset 0 0 0 1px rgba(0,0,0,.06)' : reached ? 'none' : 'inset 0 0 0 2px var(--crc-line)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <CRCIcon name="crown" size={15} color={reached ? (tk === 'gold' || tk === 'platinum' ? '#3a2c0a' : '#fff') : 'var(--crc-line)'} stroke={2.4} />
                  </div>
                  <span style={{ fontSize: 10.5, fontWeight: cur ? 700 : 600, color: cur ? 'var(--crc-ink)' : 'var(--crc-ink-2)' }}>{C.TIERS[tk].name.replace('Central ', '')}</span>
                </div>
              );
            })}
          </div>
          {T.next && <p style={{ margin: '16px 0 0', fontSize: 13, color: 'var(--crc-ink-2)', lineHeight: 1.5, textAlign: 'center' }}>Belanja <b style={{ color: 'var(--crc-ink)' }}>{ctx.fmt.idr(toNext)}</b> lagi tahun ini untuk naik ke <b style={{ color: 'var(--crc-gold-deep)' }}>{C.TIERS[T.next].name}</b>.</p>}
        </Surface>
      </div>

      {/* VIP concierge banner */}
      {ctx.tier !== 'classic' && (
        <div style={{ padding: '14px 20px 0' }}>
          <div onClick={() => ctx.push('events')} style={{ borderRadius: 18, padding: '18px 20px', background: 'linear-gradient(135deg,#2b2b2b,#0e0e0e)', color: '#fff', display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', boxShadow: 'var(--crc-sh-md)' }}>
            <span style={{ width: 46, height: 46, borderRadius: 13, background: 'linear-gradient(135deg,var(--crc-gold),var(--crc-gold-deep))', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name="crown" size={24} color="#3a2c0a" /></span>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Premium Concierge</div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.7)' }}>Events eksklusif & layanan VIP</div>
            </div>
            <CRCIcon name="chevR" size={20} color="var(--crc-gold)" />
          </div>
        </div>
      )}

      {/* Menu */}
      <div style={{ padding: '18px 20px 0' }}>
        <Surface pad={6}>
          {menu.map((m, i) => (
            <button key={m.label} onClick={() => m.sheet ? ctx.openSheet(<CardSheet ctx={ctx} />) : ctx.push(m.go)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '13px 12px', background: 'none', border: 'none', borderTop: i ? '1px solid var(--crc-line-soft)' : 'none', cursor: 'pointer', fontFamily: 'var(--crc-font)', textAlign: 'left' }}>
              <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--crc-bg)', color: 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name={m.icon} size={20} /></span>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--crc-ink)' }}>{m.label}</div><div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{m.sub}</div></div>
              {m.badge && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--crc-gold)' }} />}
              <CRCIcon name="chevR" size={18} color="var(--crc-line)" />
            </button>
          ))}
        </Surface>
      </div>

      <div style={{ padding: '16px 20px 0' }}>
        <button onClick={() => ctx.openSheet(<LogoutSheet ctx={ctx} />)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '14px', borderRadius: 14, border: 'none', background: '#fff', boxShadow: 'var(--crc-sh-sm)', color: 'var(--crc-error)', fontWeight: 600, fontSize: 14.5, fontFamily: 'var(--crc-font)', cursor: 'pointer' }}><CRCIcon name="logout" size={19} />Keluar</button>
        <p style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--crc-ink-2)', marginTop: 14 }}>Central Rewards Club · v1.0 · Member sejak {ctx.member.joined}</p>
      </div>
    </div>
  );
}

// ── Transaction history ──
function History({ ctx }) {
  const C = ctx.C;
  const [filter, setFilter] = React.useState('all');
  const list = ctx.store.transactions.filter((t) => filter === 'all' || t.kind === filter);
  const iconFor = { earn: 'store', social: 'sparkle', redeem: 'gift' };
  const colorFor = { earn: 'var(--crc-success)', social: 'var(--crc-coral)', redeem: 'var(--crc-primary)' };
  return (
    <div style={{ paddingBottom: 24 }}>
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '8px 20px 4px' }}>
        {[['all', 'Semua'], ['earn', 'Belanja'], ['social', 'Sosial'], ['redeem', 'Penukaran']].map(([k, l]) => <Chip key={k} label={l} active={filter === k} onClick={() => setFilter(k)} />)}
      </div>
      <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map((t) => (
          <Surface key={t.id} pad={14} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
            <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--crc-bg)', color: colorFor[t.kind], display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name={iconFor[t.kind]} size={21} /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{t.label}</div>
              <div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{t.sub} · {t.when}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ color: t.points > 0 ? 'var(--crc-success)' : 'var(--crc-coral)', fontWeight: 700, fontSize: 14 }}>{t.points > 0 ? '+' : ''}{ctx.fmt.pts(t.points)}</div>
              {t.amount && <div style={{ fontSize: 11, color: 'var(--crc-ink-2)' }}>{ctx.fmt.idr(t.amount)}</div>}
            </div>
          </Surface>
        ))}
      </div>
    </div>
  );
}

// ── Events & VIP ──
function Events({ ctx }) {
  const C = ctx.C;
  return (
    <div style={{ paddingBottom: 24 }}>
      <div style={{ background: 'linear-gradient(135deg,#2b2b2b,#0e0e0e)', color: '#fff', padding: '58px 20px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><CRCIcon name="crown" size={20} color="var(--crc-gold)" /><span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '.06em', color: 'var(--crc-gold)' }}>PREMIUM CONCIERGE</span></div>
        <h1 style={{ margin: '10px 0 4px', fontSize: 23, fontWeight: 800 }}>Events & pengalaman</h1>
        <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,.75)', lineHeight: 1.5 }}>Akses eksklusif untuk member Gold ke atas — private shopping, trunk show & masterclass.</p>
      </div>

      {ctx.store.myEvents.length > 0 && (
        <div style={{ padding: '18px 20px 0' }}>
          <SectionHead title="RSVP kamu" />
          {ctx.store.myEvents.map((e) => (
            <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--crc-success-soft)', borderRadius: 16, padding: '14px 16px' }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, background: '#fff', color: 'var(--crc-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name="check" size={22} stroke={2.6} /></span>
              <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 14.5 }}>{e.title}</div><div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)' }}>{e.date} · Terkonfirmasi</div></div>
            </div>
          ))}
        </div>
      )}

      <div style={{ padding: '18px 20px 0' }}>
        <SectionHead title="Akan datang" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {C.events.map((e) => {
            const locked = tierRank(ctx.tier) < tierRank(e.tier);
            const booked = ctx.actions.isBooked(e.id);
            return (
              <div key={e.id} style={{ borderRadius: 18, overflow: 'hidden', background: '#fff', boxShadow: 'var(--crc-sh-sm)' }}>
                <div style={{ height: 150, position: 'relative' }}>
                  <Img slot={e.slot} placeholder="Foto event" radius={0} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5))' }} />
                  <span style={{ position: 'absolute', top: 12, right: 12, padding: '4px 10px', borderRadius: 999, background: 'rgba(0,0,0,.55)', color: 'var(--crc-gold)', fontSize: 11, fontWeight: 700 }}>{C.TIERS[e.tier].name}+</span>
                  <div style={{ position: 'absolute', left: 14, bottom: 12, color: '#fff' }}>
                    <div style={{ fontSize: 18, fontWeight: 700, textShadow: '0 1px 8px rgba(0,0,0,.4)' }}>{e.title}</div>
                    <div style={{ fontSize: 12.5, opacity: .9, marginTop: 2 }}>{e.place}</div>
                  </div>
                </div>
                <div style={{ padding: '14px 16px' }}>
                  <div style={{ display: 'flex', gap: 16, color: 'var(--crc-ink-2)', fontSize: 13, marginBottom: 12 }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CRCIcon name="calendar" size={15} />{e.date}</span>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CRCIcon name="clock" size={15} />{e.time}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 12.5, fontWeight: 600, color: booked ? 'var(--crc-success)' : locked ? 'var(--crc-gold-deep)' : 'var(--crc-success)' }}>{booked ? '✓ Terdaftar' : locked ? '🔒 ' + e.spots : e.spots}</span>
                    {booked ? <CRCButton variant="secondary" size="sm" disabled>Terdaftar</CRCButton>
                      : <CRCButton variant={locked ? 'outline' : 'primary'} size="sm" onClick={() => locked ? ctx.toast('Khusus member ' + C.TIERS[e.tier].name, 'warning') : ctx.openSheet(<RSVPSheet ctx={ctx} e={e} />)}>{locked ? 'Terkunci' : 'RSVP'}</CRCButton>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function RSVPSheet({ ctx, e }) {
  const [done, setDone] = React.useState(false);
  if (done) return (
    <div style={{ padding: '20px 24px 34px', textAlign: 'center', position: 'relative' }}>
      <Confetti show={true} />
      <div style={{ width: 72, height: 72, borderRadius: '50%', margin: '8px auto 0', background: 'var(--crc-success-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="check" size={36} color="var(--crc-success)" stroke={3} /></div>
      <h2 style={{ margin: '18px 0 6px', fontSize: 20, fontWeight: 700 }}>RSVP terkonfirmasi!</h2>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: 'var(--crc-ink-2)', lineHeight: 1.5 }}>{e.title}<br />{e.date} · {e.time}</p>
      <CRCButton variant="primary" size="lg" full onClick={() => ctx.closeSheet()}>Selesai</CRCButton>
    </div>
  );
  return (
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ height: 150, borderRadius: 16, overflow: 'hidden', marginBottom: 16 }}><Img slot={e.slot} placeholder="" radius={0} /></div>
      <h2 style={{ margin: '0 0 8px', fontSize: 20, fontWeight: 700 }}>{e.title}</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 14 }}>
        {[['calendar', e.date], ['clock', e.time], ['pin', e.place]].map(([ic, tx]) => <div key={ic} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 13.5, color: 'var(--crc-ink-2)' }}><CRCIcon name={ic} size={17} color="var(--crc-primary)" />{tx}</div>)}
      </div>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: 'var(--crc-ink-2)', lineHeight: 1.6 }}>{e.desc}</p>
      <CRCButton variant="gold" size="lg" full onClick={() => { ctx.actions.rsvp(e); ctx.celebrate(); setDone(true); }}>Konfirmasi kehadiran</CRCButton>
    </div>
  );
}

// ── Notifications ──
function Notifications({ ctx }) {
  const iconFor = { points: 'sparkle', social: 'instagram', tier: 'arrowUp', promo: 'tag', event: 'calendar' };
  React.useEffect(() => { const id = setTimeout(() => ctx.actions.markNotificationsRead(), 700); return () => clearTimeout(id); }, []);
  return (
    <div style={{ padding: '8px 20px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {ctx.store.notifications.length === 0 && <EmptyState icon="bell" title="Tidak ada notifikasi" sub="Aktivitas terbaru akan muncul di sini." />}
      {ctx.store.notifications.map((n) => (
        <Surface key={n.id} pad={14} style={{ display: 'flex', alignItems: 'flex-start', gap: 13, background: n.unread ? '#fff' : 'var(--crc-bg)', boxShadow: n.unread ? 'var(--crc-sh-sm)' : 'none' }}>
          <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--crc-primary-soft)', color: 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name={iconFor[n.kind]} size={20} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', gap: 7 }}>{n.title}{n.unread && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--crc-coral)' }} />}</div>
            <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)', marginTop: 2 }}>{n.sub}</div>
          </div>
          <span style={{ fontSize: 11.5, color: 'var(--crc-ink-2)' }}>{n.when}</span>
        </Surface>
      ))}
    </div>
  );
}

// ── Settings (privacy / preferences) ──
function Settings({ ctx }) {
  const [push, setPush] = React.useState(true);
  const [social, setSocial] = React.useState(true);
  const [perso, setPerso] = React.useState(true);
  const Toggle = ({ on, set }) => (
    <button onClick={() => set(!on)} style={{ width: 48, height: 28, borderRadius: 999, border: 'none', background: on ? 'var(--crc-success)' : 'var(--crc-line)', position: 'relative', cursor: 'pointer', transition: 'background .2s', flexShrink: 0 }}>
      <span style={{ position: 'absolute', top: 3, left: on ? 23 : 3, width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .2s' }} />
    </button>
  );
  const rows = [
    { label: 'Notifikasi promo', sub: 'Penawaran & flash sale', on: push, set: setPush },
    { label: 'Update poin & misi sosial', sub: 'Status verifikasi', on: social, set: setSocial },
    { label: 'Personalisasi penawaran', sub: 'Berdasarkan riwayat belanja', on: perso, set: setPerso },
  ];

  // Export the member's data as a downloadable JSON file (UU PDP right to access).
  const downloadData = () => {
    const s = ctx.store, m = ctx.member, C = ctx.C;
    const payload = {
      exportedAt: new Date().toISOString(),
      member: { name: m.name, memberId: m.memberId, tier: ctx.tier, phone: C.member.phone, email: C.member.email, birthday: C.member.birthday, joined: m.joined, interests: C.member.interests },
      balance: { points: s.points, ytdSpend: s.ytdSpend },
      vouchers: s.vouchers, transactions: s.transactions, socialHistory: s.socialHistory, events: s.myEvents, notifications: s.notifications,
    };
    try {
      const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = 'central-rewards-' + m.memberId.replace(/\s/g, '') + '.json';
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(url), 1500);
      ctx.toast('Data pribadi diunduh (JSON)', 'success');
    } catch (e) { ctx.toast('Unduhan tidak didukung di perangkat ini', 'warning'); }
  };

  const privacy = [
    { ic: 'shield', l: 'Unduh data saya', s: 'Salinan data pribadi (JSON)', on: downloadData },
    { ic: 'lock', l: 'Kelola persetujuan', s: 'Consent & izin pemrosesan', on: () => ctx.openSheet(<ConsentSheet ctx={ctx} />) },
    { ic: 'x', l: 'Hapus akun', s: 'Hapus permanen', danger: true, on: () => ctx.openSheet(<DeleteAccountSheet ctx={ctx} />) },
  ];

  return (
    <div style={{ padding: '8px 20px 24px' }}>
      <div style={{ padding: '4px 4px 10px', fontSize: 13, fontWeight: 700, color: 'var(--crc-ink-2)', letterSpacing: '.03em' }}>PREFERENSI</div>
      <Surface pad={6}>
        {rows.map((r, i) => (
          <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 12px', borderTop: i ? '1px solid var(--crc-line-soft)' : 'none' }}>
            <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14 }}>{r.label}</div><div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{r.sub}</div></div>
            <Toggle on={r.on} set={r.set} />
          </div>
        ))}
      </Surface>
      <div style={{ padding: '20px 4px 10px', fontSize: 13, fontWeight: 700, color: 'var(--crc-ink-2)', letterSpacing: '.03em' }}>PRIVASI & DATA (UU PDP)</div>
      <Surface pad={6}>
        {privacy.map((r, i) => (
          <button key={r.l} onClick={r.on} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 12px', background: 'none', border: 'none', borderTop: i ? '1px solid var(--crc-line-soft)' : 'none', cursor: 'pointer', fontFamily: 'var(--crc-font)', textAlign: 'left' }}>
            <span style={{ width: 38, height: 38, borderRadius: 11, background: r.danger ? 'var(--crc-coral-soft)' : 'var(--crc-bg)', color: r.danger ? 'var(--crc-error)' : 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name={r.ic} size={19} /></span>
            <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14, color: r.danger ? 'var(--crc-error)' : 'var(--crc-ink)' }}>{r.l}</div><div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{r.s}</div></div>
            <CRCIcon name="chevR" size={18} color="var(--crc-line)" />
          </button>
        ))}
      </Surface>
    </div>
  );
}

// ── Consent management (UU PDP) ──
function ConsentSheet({ ctx }) {
  const [c, setC] = React.useState({ personalize: true, partners: false, marketing: true, analytics: true });
  const items = [
    { k: '_req', l: 'Pemrosesan data keanggotaan', s: 'Wajib untuk layanan', locked: true },
    { k: 'personalize', l: 'Personalisasi penawaran', s: 'Berdasarkan riwayat belanja' },
    { k: 'partners', l: 'Berbagi ke mitra Grand Indonesia', s: 'Tenant & brand partner' },
    { k: 'marketing', l: 'Email & WhatsApp marketing', s: 'Promo & kabar terbaru' },
    { k: 'analytics', l: 'Analitik penggunaan', s: 'Tingkatkan pengalaman app' },
  ];
  const Tog = ({ on, onClick, disabled }) => (
    <button onClick={disabled ? undefined : onClick} style={{ width: 48, height: 28, borderRadius: 999, border: 'none', background: on ? 'var(--crc-success)' : 'var(--crc-line)', position: 'relative', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.55 : 1, transition: 'background .2s', flexShrink: 0 }}>
      <span style={{ position: 'absolute', top: 3, left: on ? 23 : 3, width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.3)', transition: 'left .2s' }} />
    </button>
  );
  return (
    <div style={{ padding: '8px 20px 30px' }}>
      <h2 style={{ margin: '4px 0 4px', fontSize: 19, fontWeight: 700 }}>Kelola persetujuan</h2>
      <p style={{ margin: '0 0 16px', fontSize: 13.5, color: 'var(--crc-ink-2)', lineHeight: 1.5 }}>Atur izin pemrosesan data pribadimu sesuai UU PDP. Bisa diubah kapan saja.</p>
      <Surface pad={6}>
        {items.map((it, i) => (
          <div key={it.k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 12px', borderTop: i ? '1px solid var(--crc-line-soft)' : 'none' }}>
            <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', gap: 7 }}>{it.l}{it.locked && <CRCIcon name="lock" size={13} color="var(--crc-ink-2)" />}</div><div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{it.s}</div></div>
            <Tog on={it.locked ? true : c[it.k]} disabled={it.locked} onClick={() => setC((p) => ({ ...p, [it.k]: !p[it.k] }))} />
          </div>
        ))}
      </Surface>
      <div style={{ marginTop: 18 }}><CRCButton variant="primary" size="lg" full onClick={() => { ctx.closeSheet(); ctx.toast('Persetujuan diperbarui', 'success'); }}>Simpan persetujuan</CRCButton></div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 14, fontSize: 12, color: 'var(--crc-ink-2)' }}><CRCIcon name="shield" size={15} color="var(--crc-success)" />Perubahan dicatat & berlaku langsung.</div>
    </div>
  );
}

// ── Delete account (destructive) ──
function DeleteAccountSheet({ ctx }) {
  return (
    <div style={{ padding: '12px 24px 34px', textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: '50%', margin: '6px auto 0', background: 'var(--crc-coral-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="x" size={32} color="var(--crc-error)" stroke={2.6} /></div>
      <h2 style={{ margin: '16px 0 8px', fontSize: 20, fontWeight: 700 }}>Hapus akun permanen?</h2>
      <p style={{ margin: '0 0 8px', fontSize: 14, color: 'var(--crc-ink-2)', lineHeight: 1.55 }}>Tindakan ini <b style={{ color: 'var(--crc-error)' }}>tidak bisa dibatalkan</b>. Semua data akan dihapus permanen:</p>
      <div style={{ background: 'var(--crc-bg)', borderRadius: 12, padding: '12px 16px', margin: '0 0 6px', textAlign: 'left' }}>
        {[[ctx.fmt.pts(ctx.points) + ' poin', 'sparkle'], [ctx.store.vouchers.length + ' voucher', 'ticket'], ['Riwayat & tier ' + ctx.tierObj.name, 'clock']].map(([t, ic]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 0', fontSize: 13.5, color: 'var(--crc-ink)' }}><CRCIcon name={ic} size={16} color="var(--crc-error)" />{t}</div>
        ))}
      </div>
      <div style={{ marginTop: 18 }}>
        <CRCButton variant="primary" size="lg" full onClick={() => { ctx.actions.reset('new'); ctx.closeSheet(); ctx.replayOnboarding(); ctx.toast('Akun dihapus', 'info'); }} style={{ background: 'var(--crc-error)', boxShadow: '0 8px 22px rgba(211,47,47,.28)' }}>Ya, hapus akun saya</CRCButton>
        <button onClick={() => ctx.closeSheet()} style={{ display: 'block', width: '100%', marginTop: 12, background: 'none', border: 'none', color: 'var(--crc-ink-2)', fontWeight: 600, fontSize: 14.5, fontFamily: 'var(--crc-font)', cursor: 'pointer', padding: '6px' }}>Batal</button>
      </div>
    </div>
  );
}

// ── Logout confirmation ──
function LogoutSheet({ ctx }) {
  return (
    <div style={{ padding: '12px 24px 34px', textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: '50%', margin: '6px auto 0', overflow: 'hidden', boxShadow: '0 0 0 3px var(--crc-gold)' }}><Img slot="avatar" radius={32} /></div>
      <h2 style={{ margin: '16px 0 6px', fontSize: 19, fontWeight: 700 }}>Keluar dari akun?</h2>
      <p style={{ margin: '0 0 22px', fontSize: 13.5, color: 'var(--crc-ink-2)', lineHeight: 1.5 }}>Kamu akan kembali ke halaman awal. Poin & data tetap tersimpan saat kamu masuk lagi.</p>
      <CRCButton variant="primary" size="lg" icon="logout" full onClick={() => { ctx.closeSheet(); ctx.replayOnboarding(); }} style={{ background: 'var(--crc-error)', boxShadow: '0 8px 22px rgba(211,47,47,.28)' }}>Ya, keluar</CRCButton>
      <button onClick={() => ctx.closeSheet()} style={{ display: 'block', width: '100%', marginTop: 12, background: 'none', border: 'none', color: 'var(--crc-ink-2)', fontWeight: 600, fontSize: 14.5, fontFamily: 'var(--crc-font)', cursor: 'pointer', padding: '6px' }}>Batal</button>
    </div>
  );
}

Object.assign(window, { Profile, History, Events, RSVPSheet, Notifications, Settings, LogoutSheet, ConsentSheet, DeleteAccountSheet });