/* Central Rewards Club — Onboarding flow. window.Onboarding */
function Onboarding({ onComplete, accent }) {
  const [step, setStep] = React.useState(0);
  const [phone, setPhone] = React.useState('812-1142-0099');
  const [otp, setOtp] = React.useState(['', '', '', '']);
  const [name, setName] = React.useState('Reza Pratama');
  const [interests, setInterests] = React.useState(['Streetwear', 'Sneakers']);
  const otpRefs = React.useRef([]);

  const allInterests = ['Streetwear', 'Sneakers', 'Tech', 'Parfum', 'Beauty', 'Fashion', 'Home', 'F&B', 'Watches'];
  const next = () => setStep((s) => s + 1);

  const setOtpAt = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const arr = [...otp]; arr[i] = v; setOtp(arr);
    if (v && i < 3) otpRefs.current[i + 1]?.focus();
  };
  const otpFull = otp.every((d) => d);

  const wrap = (children, dark) => (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: dark ? 'var(--crc-primary-dark)' : 'var(--crc-bg)', position: 'relative', overflow: 'hidden' }}>{children}</div>
  );

  // ── 0 — Welcome / splash ──
  if (step === 0) return wrap((
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 80% at 50% 0%, #6e1a26 0%, #4D1019 55%, #350a11 100%)' }} />
      <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', padding: '90px 28px 40px', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 'auto' }}>
          <Logo size={30} mono />
          <span style={{ fontWeight: 700, fontSize: 15, letterSpacing: '.04em' }}>CENTRAL REWARDS</span>
        </div>
        <div style={{ width: '100%', aspectRatio: '4/3', borderRadius: 20, overflow: 'hidden', marginBottom: 28, boxShadow: '0 24px 50px rgba(0,0,0,.4)' }}>
          <Img slot="onb-hero" placeholder="Foto lifestyle premium" radius={20} />
        </div>
        <h1 className="crc-display" style={{ margin: 0, fontSize: 38, fontWeight: 700, lineHeight: 1.08 }}>Lebih dari<br />sekadar <span style={{ color: 'var(--crc-gold)' }}>belanja.</span></h1>
        <p style={{ margin: '14px 0 26px', fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,.78)', maxWidth: 300 }}>Kumpulkan poin dari belanja & media sosial. Nikmati akses eksklusif khusus member Central.</p>
        <CRCButton variant="gold" size="lg" full onClick={next}>Mulai sekarang</CRCButton>
        <button onClick={next} style={{ marginTop: 16, background: 'none', border: 'none', color: 'rgba(255,255,255,.7)', fontWeight: 600, fontSize: 14, fontFamily: 'var(--crc-font)', cursor: 'pointer' }}>Saya sudah punya akun</button>
      </div>
    </div>
  ), true);

  // ── 1 — Phone entry ──
  if (step === 1) return wrap((
    <OnbScaffold step={1} onBack={() => setStep(0)} title="Masuk dengan nomor HP" sub="Kami akan kirim kode verifikasi via SMS atau WhatsApp.">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 16px', background: '#fff', borderRadius: 14, boxShadow: 'inset 0 0 0 1.5px var(--crc-line)', height: 56 }}>
        <span style={{ fontWeight: 700, fontSize: 16, color: 'var(--crc-ink)' }}>🇮🇩 +62</span>
        <div style={{ width: 1, height: 26, background: 'var(--crc-line)' }} />
        <input value={phone} onChange={(e) => setPhone(e.target.value)} style={{ flex: 1, border: 'none', outline: 'none', fontSize: 16, fontWeight: 600, fontFamily: 'var(--crc-font)', color: 'var(--crc-ink)', background: 'transparent' }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, color: 'var(--crc-ink-2)', fontSize: 12.5 }}>
        <CRCIcon name="shield" size={16} color="var(--crc-success)" />
        Data kamu aman & terenkripsi sesuai UU PDP.
      </div>
      <div style={{ marginTop: 'auto' }}>
        <CRCButton variant="primary" size="lg" full onClick={next} disabled={phone.length < 6}>Kirim kode</CRCButton>
      </div>
    </OnbScaffold>
  ));

  // ── 2 — OTP ──
  if (step === 2) return wrap((
    <OnbScaffold step={2} onBack={() => setStep(1)} title="Masukkan kode OTP" sub={`Kode 4 digit dikirim ke +62 ${phone}`}>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 8 }}>
        {otp.map((d, i) => (
          <input key={i} ref={(el) => (otpRefs.current[i] = el)} value={d} inputMode="numeric" maxLength={1}
            onChange={(e) => setOtpAt(i, e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Backspace' && !d && i > 0) otpRefs.current[i - 1]?.focus(); }}
            style={{ width: 60, height: 70, textAlign: 'center', fontSize: 28, fontWeight: 700, fontFamily: 'var(--crc-font)', color: 'var(--crc-primary)', borderRadius: 14, border: 'none', outline: 'none', background: '#fff', boxShadow: d ? '0 0 0 2px var(--crc-primary)' : 'inset 0 0 0 1.5px var(--crc-line)', transition: 'box-shadow .15s' }} />
        ))}
      </div>
      <button onClick={() => setOtp(['1', '2', '3', '4'])} style={{ display: 'block', margin: '22px auto 0', background: 'none', border: 'none', color: 'var(--crc-ink-2)', fontSize: 13, fontWeight: 600, fontFamily: 'var(--crc-font)', cursor: 'pointer' }}>Kirim ulang kode dalam 0:28 · <span style={{ color: 'var(--crc-primary)' }}>isi demo</span></button>
      <div style={{ marginTop: 'auto' }}>
        <CRCButton variant="primary" size="lg" full onClick={next} disabled={!otpFull}>Verifikasi</CRCButton>
      </div>
    </OnbScaffold>
  ));

  // ── 3 — Profile setup ──
  if (step === 3) return wrap((
    <OnbScaffold step={3} onBack={() => setStep(2)} title="Lengkapi profil" sub="Bantu kami memberi penawaran yang relevan untukmu.">
      <label style={lbl}>Nama lengkap</label>
      <input value={name} onChange={(e) => setName(e.target.value)} style={inp} />
      <label style={{ ...lbl, marginTop: 16 }}>Tanggal lahir</label>
      <input defaultValue="14 / 08 / 1998" style={inp} />
      <label style={{ ...lbl, marginTop: 18 }}>Minat belanja <span style={{ color: 'var(--crc-ink-2)', fontWeight: 500 }}>(pilih beberapa)</span></label>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
        {allInterests.map((it) => {
          const on = interests.includes(it);
          return <Chip key={it} label={it} active={on} onClick={() => setInterests((p) => on ? p.filter((x) => x !== it) : [...p, it])} />;
        })}
      </div>
      <div style={{ marginTop: 'auto' }}>
        <CRCButton variant="primary" size="lg" full onClick={next}>Lanjutkan</CRCButton>
      </div>
    </OnbScaffold>
  ));

  // ── 4 — Welcome points celebration ──
  return wrap((
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', background: 'radial-gradient(120% 70% at 50% 0%, #6e1a26 0%, #4D1019 60%, #350a11 100%)', color: '#fff' }}>
      <Confetti show={true} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '40px 30px' }}>
        <div style={{ width: 110, height: 110, borderRadius: '50%', background: 'linear-gradient(135deg,#E3C887,#C9A961 45%,#9A7B33)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 16px 50px rgba(201,169,97,.5)', animation: 'crc-pop .5s cubic-bezier(.2,.8,.2,1)' }}>
          <CRCIcon name="sparkle" size={52} color="#3a2c0a" stroke={2} />
        </div>
        <p style={{ margin: '28px 0 6px', fontSize: 14, fontWeight: 600, letterSpacing: '.12em', color: 'var(--crc-gold)' }}>SELAMAT DATANG, REZA</p>
        <div className="crc-display" style={{ fontSize: 56, fontWeight: 800, lineHeight: 1 }}>+500</div>
        <p style={{ margin: '4px 0 0', fontSize: 17, fontWeight: 600 }}>poin sambutan</p>
        <p style={{ margin: '18px 0 0', fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.78)', maxWidth: 280 }}>Poinmu sudah masuk. Mulai belanja & bagikan momen untuk mengumpulkan lebih banyak.</p>
      </div>
      <div style={{ padding: '0 28px 40px' }}>
        <CRCButton variant="gold" size="lg" full onClick={onComplete}>Masuk ke beranda</CRCButton>
      </div>
    </div>
  ));
}

const lbl = { display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--crc-ink-2)', marginBottom: 6 };
const inp = { width: '100%', height: 52, padding: '0 16px', fontSize: 16, fontWeight: 600, fontFamily: 'var(--crc-font)', color: 'var(--crc-ink)', borderRadius: 14, border: 'none', outline: 'none', background: '#fff', boxShadow: 'inset 0 0 0 1.5px var(--crc-line)', boxSizing: 'border-box' };

function OnbScaffold({ children, step, onBack, title, sub }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '64px 24px 36px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
        <button onClick={onBack} style={{ width: 40, height: 40, borderRadius: 12, border: 'none', background: '#fff', boxShadow: 'var(--crc-sh-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <CRCIcon name="chevL" size={20} />
        </button>
        <div style={{ flex: 1, display: 'flex', gap: 6 }}>
          {[1, 2, 3].map((s) => <div key={s} style={{ flex: 1, height: 4, borderRadius: 999, background: s <= step ? 'var(--crc-primary)' : 'var(--crc-line)' }} />)}
        </div>
      </div>
      <h1 style={{ margin: 0, fontSize: 25, fontWeight: 700, letterSpacing: '-0.02em' }}>{title}</h1>
      <p style={{ margin: '8px 0 26px', fontSize: 14.5, color: 'var(--crc-ink-2)', lineHeight: 1.5 }}>{sub}</p>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>{children}</div>
    </div>
  );
}

// Logo mark (geometric C + diamond)
function Logo({ size = 28, mono }) {
  const gold = mono ? '#C9A961' : 'var(--crc-gold)';
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <path d="M30 11a13 13 0 1 0 0 18" stroke={mono ? '#fff' : 'var(--crc-primary)'} strokeWidth="4.5" strokeLinecap="round" />
      <path d="M20 14l5 6-5 6-5-6z" fill={gold} />
    </svg>
  );
}

Object.assign(window, { Onboarding, Logo });