// Onboarding — 4 slides + name input. Persists name on completion.
function Onboarding({ profile, onDone }) {
  const [step, setStep] = React.useState(0);
  const [name, setName] = React.useState(profile.name || '');

  const slides = [
    {
      bg: 'linear-gradient(180deg, #DDE9DF 0%, #EDE6DC 100%)',
      content: (
        <div style={{ textAlign: 'center', padding: '0 28px', animation: 'oaFadeUp .5s' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28, animation: 'oaDrift 4s ease-in-out infinite' }}>
            <Mascot size={170} mood="cheer" wave />
          </div>
          <h1 style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 40, lineHeight: 1.05, margin: '0 0 14px', color: OA_THEME.sageDeep }}>
            Selamat datang
          </h1>
          <p style={{ fontSize: 22, lineHeight: 1.45, margin: 0, color: OA_THEME.ink }}>
            Halo, saya <b style={{ color: OA_THEME.sageDeep }}>Sari</b>. Saya akan menemani Oma berlatih sedikit setiap hari. ✿
          </p>
        </div>
      ),
    },
    {
      bg: 'linear-gradient(180deg, #E2EAF0 0%, #EDE6DC 100%)',
      content: (
        <div style={{ textAlign: 'center', padding: '0 24px', animation: 'oaFadeUp .5s' }}>
          <h1 style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 32, margin: '0 0 22px', color: OA_THEME.skyDeep }}>
            Latihan apa saja?
          </h1>
          <div style={{ display: 'grid', gap: 12, textAlign: 'left' }}>
            {[
              { i: '🃏', t: 'Memori', s: 'Cocokkan kartu yang sama' },
              { i: '🔢', t: 'Angka', s: 'Hitung kecil yang menyenangkan' },
              { i: '📝', t: 'Bahasa', s: 'Lengkapi peribahasa lama' },
              { i: '🔍', t: 'Cari Beda', s: 'Temukan satu yang berbeda' },
            ].map(o => (
              <div key={o.t} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                background: OA_THEME.card, border: `1.5px solid ${OA_THEME.line}`,
                borderRadius: 18, padding: '14px 16px',
                boxShadow: '0 2px 0 rgba(60,82,76,0.06)',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: '#EAF1EB', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 26,
                }}>{o.i}</div>
                <div>
                  <div style={{ fontWeight: 800, fontSize: 21 }}>{o.t}</div>
                  <div style={{ fontSize: 17, color: OA_THEME.inkSoft }}>{o.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ),
    },
    {
      bg: 'linear-gradient(180deg, #EDE0D8 0%, #EDE6DC 100%)',
      content: (
        <div style={{ textAlign: 'center', padding: '0 28px', animation: 'oaFadeUp .5s' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
            <Mascot size={120} mood="happy" />
          </div>
          <h1 style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 30, margin: '0 0 16px', color: OA_THEME.sageDeep }}>
            Pelan, tanpa terburu-buru
          </h1>
          <div style={{ background: OA_THEME.card, border: `1.5px solid ${OA_THEME.line}`, borderRadius: 18, padding: '16px 18px', textAlign: 'left' }}>
            {[
              ['🌿', 'Tidak ada batas waktu di setiap latihan'],
              ['🤍', 'Salah pun tidak apa — kita coba lagi'],
              ['📅', 'Cukup beberapa menit setiap hari'],
            ].map(([i, t]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', fontSize: 19, color: OA_THEME.ink }}>
                <span style={{ fontSize: 24 }}>{i}</span>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>
      ),
    },
    {
      bg: 'linear-gradient(180deg, #EDE0D8 0%, #EDE6DC 100%)',
      content: (
        <div style={{ textAlign: 'center', padding: '0 28px', animation: 'oaFadeUp .5s' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
            <Mascot size={120} mood="happy" />
          </div>
          <h1 style={{ fontFamily: 'Lora, serif', fontStyle: 'italic', fontWeight: 600, fontSize: 32, margin: '0 0 8px', color: OA_THEME.sageDeep }}>
            Siapa nama Oma?
          </h1>
          <p style={{ fontSize: 19, color: OA_THEME.inkSoft, margin: '0 0 22px' }}>
            Supaya saya bisa menyapa setiap pagi.
          </p>
          <input
            value={name}
            onChange={e => setName(e.target.value.slice(0, 30))}
            placeholder="Nama Oma…"
            aria-label="Nama Oma"
            autoFocus
            style={{
              width: '100%', boxSizing: 'border-box',
              fontFamily: 'Nunito', fontSize: 26, fontWeight: 700,
              textAlign: 'center', color: OA_THEME.ink,
              background: OA_THEME.card,
              border: `2.5px solid ${OA_THEME.sage}`,
              borderRadius: 18, padding: '18px 16px',
              outline: 'none',
              boxShadow: `0 4px 0 ${OA_THEME.sage}30`,
            }}
          />
          <p style={{ fontSize: 16, color: OA_THEME.inkSoft, marginTop: 18 }}>
            Nanti bisa diubah di halaman profil.
          </p>
        </div>
      ),
    },
  ];

  const last = step === slides.length - 1;
  const cleanName = (name || '').trim();
  const firstName = cleanName.split(' ')[0] || 'Oma';
  const canFinish = !last || cleanName.length > 0;

  const finish = () => {
    onDone({ name: cleanName || 'Oma' });
  };

  return (
    <div style={{
      width: '100%', minHeight: '100dvh',
      background: slides[step].bg,
      display: 'flex', flexDirection: 'column',
      paddingTop: 'max(40px, env(safe-area-inset-top))',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 22px 0' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {slides.map((_, i) => (
            <div key={i} style={{
              width: i === step ? 28 : 10, height: 10, borderRadius: 6,
              background: i === step ? OA_THEME.sageDeep : 'rgba(42,58,56,0.18)',
              transition: 'all .25s',
            }} />
          ))}
        </div>
        {!last && (
          <button onClick={() => { OASound.tap(); finish(); }} className="oa-no-tap" style={{
            background: 'transparent', border: 'none',
            fontFamily: 'Nunito', fontSize: 18, fontWeight: 700, color: OA_THEME.inkSoft, cursor: 'pointer',
            padding: '8px 8px',
          }}>Lewati</button>
        )}
      </div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 0' }}>
        <div style={{ width: '100%' }} key={step}>
          {slides[step].content}
        </div>
      </div>

      <div style={{ padding: '0 24px max(36px, env(safe-area-inset-bottom))' }}>
        <OABigButton dark color={OA_THEME.sageDeep} disabled={!canFinish} onClick={() => last ? finish() : setStep(step + 1)}>
          {last ? `Mulai, ${firstName}!` : 'Lanjut'}
          {!last && <span style={{ fontSize: 22 }}>→</span>}
        </OABigButton>
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;