// Onboarding — halaman panduan penggunaan Rinta (video tutorial + langkah cepat).
// Dipakai sebagai view 'onboarding' (menu "Panduan") + modal sambutan sekali
// untuk user baru (WelcomeOnboarding).
const { useState: useState_ob } = React;

// ── Ganti URL ini dengan link EMBED video tutorial (YouTube/Vimeo). ──
// Contoh YouTube: 'https://www.youtube.com/embed/XXXXXXXXXXX'
// Contoh Vimeo:   'https://player.vimeo.com/video/XXXXXXXXX'
// Biarkan kosong ('') untuk menampilkan placeholder "video segera hadir".
const ONBOARDING_VIDEO_URL = '';

// Slot video 16:9 — render iframe kalau ada URL, atau placeholder rapi.
function OnboardingVideo() {
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: '16 / 9',
      borderRadius: 16, overflow: 'hidden', background: 'var(--bg-2)',
      border: '1px solid var(--line)',
    }}>
      {ONBOARDING_VIDEO_URL ? (
        <iframe
          src={ONBOARDING_VIDEO_URL}
          title="Tutorial Rinta"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      ) : (
        <div style={{
          position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center',
          background: 'linear-gradient(150deg, color-mix(in oklch, var(--primary) 12%, transparent), transparent)',
        }}>
          <div>
            <div style={{
              width: 64, height: 64, borderRadius: '50%', margin: '0 auto 14px',
              background: 'var(--primary)', color: 'white', display: 'grid', placeItems: 'center',
              boxShadow: '0 10px 30px -10px color-mix(in oklch, var(--primary) 60%, transparent)',
            }}>
              {/* play icon */}
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
            </div>
            <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--ink)' }}>Video tutorial segera hadir</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 4 }}>Sementara, ikuti langkah cepat di bawah.</div>
          </div>
        </div>
      )}
    </div>
  );
}

// Daftar langkah onboarding. `to` = key view yang dibuka saat tombol diklik.
const ONBOARDING_STEPS = [
  { icon: <I.Plus size={16} />,  to: 'builder',   accent: 'var(--primary)',
    title: 'Buat survei', desc: 'Klik "Riset Baru", pilih jenis riset (Top of Mind, Concept Test, dll). AI akan menyusun pertanyaan otomatis.' },
  { icon: <I.Gift size={16} />,  to: 'builder',   accent: 'oklch(0.6 0.15 40)',
    title: 'Atur hadiah', desc: 'Di langkah Hadiah, pilih channel (Pulsa/DANA/ShopeePay) atau kode voucher — penyemangat agar responden menyelesaikan survei.' },
  { icon: <I.Image size={16} />, to: 'landing',   accent: 'oklch(0.55 0.16 300)',
    title: 'Sesuaikan halaman survei', desc: 'Atur logo, warna, headline, atau aktifkan mode anonim di Landing Page agar jawaban lebih objektif.' },
  { icon: <I.Send size={16} />,  to: 'responses', accent: 'oklch(0.55 0.14 245)',
    title: 'Bagikan link', desc: 'Salin link survei lalu sebarkan ke responden (WA/IG/iklan). Untuk survei per-wilayah, responden wajib mengaktifkan GPS.' },
  { icon: <I.Chart size={16} />, to: 'responses', accent: 'oklch(0.52 0.13 160)',
    title: 'Pantau hasil', desc: 'Lihat respons real-time, demografi, peta wilayah, dan brand share di Dashboard & Responses.' },
  { icon: <I.Check size={16} />, to: 'responses', accent: 'oklch(0.6 0.15 40)',
    title: 'Kirim hadiah', desc: 'Di Responses, transfer hadiah ke nomor responden, tandai "sudah dikirim", dan lampirkan bukti transfer.' },
];

function OnboardingView({ onNav }) {
  const go = (v) => { if (typeof onNav === 'function') onNav(v); };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <TopBar title="Panduan Rinta" subtitle="Video tutorial & langkah cepat dari nol sampai hasil" />
      <div className="scroll" style={{ flex: 1, overflow: 'auto', padding: 24, background: 'var(--bg)' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          {/* Hero */}
          <div style={{ marginBottom: 18 }}>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.015em' }}>Selamat datang di Rinta 🎓</div>
            <div style={{ fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.55 }}>
              Rinta membantumu menjalankan survei Top of Mind & riset brand — dari bikin kuesioner, kumpulkan respons,
              sampai kirim hadiah. Tonton videonya atau ikuti langkah di bawah.
            </div>
          </div>

          {/* Video */}
          <div className="card" style={{ padding: 14, marginBottom: 20 }}>
            <OnboardingVideo />
          </div>

          {/* Langkah cepat */}
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 12 }}>
            Langkah cepat
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: 12 }}>
            {ONBOARDING_STEPS.map((s, i) => (
              <div key={i} className="card" style={{ padding: 16, display: 'flex', gap: 13, alignItems: 'flex-start' }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 9, flexShrink: 0,
                  background: `color-mix(in oklch, ${s.accent} 14%, transparent)`, color: s.accent,
                  display: 'grid', placeItems: 'center', position: 'relative',
                }}>
                  {s.icon}
                  <span style={{
                    position: 'absolute', top: -6, left: -6, width: 18, height: 18, borderRadius: '50%',
                    background: 'var(--ink)', color: 'white', fontSize: 10, fontWeight: 700,
                    display: 'grid', placeItems: 'center',
                  }}>{i + 1}</span>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{s.title}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 3, lineHeight: 1.5 }}>{s.desc}</div>
                  <button onClick={() => go(s.to)} className="btn btn-soft" style={{ marginTop: 10, padding: '5px 12px', fontSize: 12.5 }}>
                    Buka <I.ArrowRight size={13} />
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* CTA */}
          <div className="card" style={{
            marginTop: 20, padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
            background: 'linear-gradient(135deg, var(--primary), oklch(0.42 0.20 290))', color: 'white', border: 'none',
          }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700 }}>Siap mulai?</div>
              <div style={{ fontSize: 13, opacity: 0.92, marginTop: 2 }}>Buat survei pertamamu sekarang — AI yang menyusun pertanyaannya.</div>
            </div>
            <button onClick={() => go('builder')} className="btn" style={{
              background: 'white', color: 'var(--primary)', border: 'none', fontWeight: 600, flexShrink: 0,
            }}>
              <I.Plus size={14} /> Buat Survei
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Modal sambutan — muncul sekali untuk user baru (flag di localStorage).
function WelcomeOnboarding({ onClose, onOpenGuide }) {
  return (
    <div
      onClick={onClose}
      style={{ position: 'fixed', inset: 0, background: 'rgba(15,18,30,0.55)', display: 'grid', placeItems: 'center', zIndex: 60, padding: 24 }}
    >
      <div onClick={(e) => e.stopPropagation()} className="card" style={{ width: '100%', maxWidth: 520, padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: 22, background: 'linear-gradient(135deg, var(--primary), oklch(0.42 0.20 290))', color: 'white' }}>
          <div style={{ fontSize: 11, opacity: 0.85, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Selamat datang 🎓</div>
          <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>Yuk kenalan dengan Rinta</div>
          <div style={{ fontSize: 13, opacity: 0.92, marginTop: 4, lineHeight: 1.5 }}>
            Panduan singkat: bikin survei → kumpulkan respons → kirim hadiah. Cuma butuh 2 menit.
          </div>
        </div>
        <div style={{ padding: 18 }}>
          <OnboardingVideo />
          <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
            <button onClick={onClose} className="btn btn-ghost">Lewati</button>
            <button onClick={onOpenGuide} className="btn btn-primary"><I.ArrowRight size={14} /> Lihat panduan</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingView, WelcomeOnboarding });