// arcai-screen-on03.jsx — ON-03 Placement Assessment Intro

function ScreenON03({ onNavigate }) {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setMounted(true), 0);
    return () => clearTimeout(t);
  }, []);

  const bullets = [
    {
      icon: '🎯',
      label: 'Adaptive',
      sub: 'Pertanyaan menyesuaikan jawaban kamu.',
    },
    {
      icon: '🤝',
      label: 'Tanpa stress',
      sub: 'Tidak ada nilai gagal — semua jawaban berguna.',
    },
    {
      icon: '🧭',
      label: 'Hasilnya untuk kamu',
      sub: 'Level + jalur belajar yang sesuai posisi awal kamu.',
    },
  ];

  const fadeStyle = {
    opacity: mounted ? 1 : 0,
    transform: mounted ? 'translateY(0)' : 'translateY(8px)',
    transition: 'opacity 0.5s ease, transform 0.5s ease',
  };

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', paddingTop: 44, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '14px 20px 4px' }}>
        <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          ONBOARDING · 3 dari 8
        </span>
      </div>

      <div style={{ flex: 1, padding: '20px 24px 140px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 8, marginBottom: 22, ...fadeStyle }}>
          <div style={{ width: 80, height: 80, display: 'flex', alignItems: 'center', justifyContent: 'center', filter: 'drop-shadow(0 0 12px var(--accent-glow))' }}>
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
              <circle cx="40" cy="40" r="34" stroke="var(--accent)" strokeWidth="1.5" opacity="0.35" />
              <circle cx="40" cy="40" r="26" stroke="var(--accent)" strokeWidth="1" opacity="0.2" />
              <path d="M40 12 L44 36 L68 40 L44 44 L40 68 L36 44 L12 40 L36 36 Z" fill="var(--accent)" opacity="0.95" />
              <circle cx="40" cy="40" r="3" fill="var(--bg)" />
            </svg>
          </div>
          <div style={{ marginTop: 14 }}>
            <EyebrowChip>PLACEMENT ASSESSMENT</EyebrowChip>
          </div>
        </div>

        <div style={{ ...fadeStyle, transitionDelay: '0.08s' }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 26,
            fontWeight: 700,
            letterSpacing: '-0.02em',
            color: 'var(--text)',
            lineHeight: 1.2,
            margin: 0,
            textAlign: 'center',
          }}>
            Bukan ujian. Cuma kenalan sama level kamu.
          </h1>
          <p style={{
            fontSize: 14,
            color: 'var(--text-muted)',
            lineHeight: 1.55,
            marginTop: 12,
            marginBottom: 0,
            textAlign: 'center',
          }}>
            Jawab apa yang kamu rasa benar. Kalau bingung, tebak juga gapapa — arcai pakai jawabannya buat susun pelajaran yang pas.
          </p>
        </div>

        <div style={{
          marginTop: 24,
          background: 'var(--surface-1)',
          border: '1px solid var(--border)',
          borderRadius: 16,
          padding: 18,
          display: 'flex',
          flexDirection: 'column',
          gap: 14,
          ...fadeStyle,
          transitionDelay: '0.16s',
        }}>
          {bullets.map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{
                width: 28,
                height: 28,
                borderRadius: '50%',
                background: 'var(--accent-overlay-soft)',
                border: '1px solid var(--accent-overlay-mid)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 14,
                flexShrink: 0,
              }}>
                {b.icon}
              </div>
              <div style={{ flex: 1, paddingTop: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', lineHeight: 1.3 }}>
                  {b.label}
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 2 }}>
                  {b.sub}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, ...fadeStyle, transitionDelay: '0.24s' }}>
          <div style={{
            fontSize: 11,
            color: 'var(--text-dim)',
            textTransform: 'uppercase',
            letterSpacing: '0.08em',
            fontWeight: 700,
            marginBottom: 8,
          }}>
            SETELAH INI
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            Kamu dapat level + rekomendasi jalur belajar yang bisa kamu mulai langsung.
          </div>
        </div>

        <div style={{ flex: 1 }} />
      </div>

      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px 28px', background: 'linear-gradient(to top, var(--bg) 60%, transparent)', borderTop: '1px solid var(--border)' }}>
        <BtnPrimary onClick={() => onNavigate('ON04')} fullWidth>
          Mulai sekarang →
        </BtnPrimary>
        <div style={{ textAlign: 'center', marginTop: 10 }}>
          <button style={{
            fontSize: 12,
            color: 'var(--text-muted)',
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: '4px 8px',
          }}>
            Nanti aja
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenON03 });