MathApp_frontend/src/screens/OnboardingScreen.tsx

import { useState } from 'react';
import { AnimatePresence, motion } from 'motion/react';
import { ChevronLeft, ChevronRight, Sparkles } from 'lucide-react';
import { SeyarMascot } from '@/mascots/SeyarMascot';
import type { SeyarChar, SeyarMood } from '@/mascots/seyar';

const SLIDES: { char: SeyarChar; mood: SeyarMood; bg: string; sub: string; title: string; desc: string }[] = [
  {
    char: 'sigma', mood: 'happy', bg: '#4C5FD5',
    sub: 'از پایه‌ی سوم تا دوازدهم',
    title: 'به تدریسینو خوش اومدی!',
    desc: 'من سیگمام. ریاضیِ کتابِ خودت رو جزیره به جزیره با هم جلو می‌بریم؛ هر جزیره چند درسِ کوتاه و یه عالمه تمرین.',
  },
  {
    char: 'delta', mood: 'excited', bg: '#FF7A3D',
    sub: 'هر روز یه کم',
    title: 'امتیاز بگیر، زنجیره بساز',
    desc: 'منم دلتا! با هر جوابِ درست امتیاز و سکه می‌گیری، روزهای پیاپی‌ت شمرده می‌شه و تو جدولِ امتیازها بالا می‌ری.',
  },
  {
    char: 'pi', mood: 'happy', bg: '#9B7BFF',
    sub: 'هر جا گیر کردی',
    title: 'از پی بپرس',
    desc: 'من پی‌ام. هر سوالی داشتی، یا جوابی رو غلط زدی، ازم بپرس؛ از روی کتابِ خودت قدم‌به‌قدم توضیح می‌دم.',
  },
];

export function OnboardingScreen({ onDone }: { onDone: () => void }) {
  const [step, setStep] = useState(0);
  const slide = SLIDES[step];
  const last = step === SLIDES.length - 1;

  return (
    <div className="relative flex h-full flex-col text-white transition-colors duration-500" style={{ backgroundColor: slide.bg }}>
      {step > 0 && (
        <button
          type="button"
          aria-label="قبلی"
          onClick={() => setStep((s) => s - 1)}
          className="absolute right-5 top-10 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-white/15"
        >
          <ChevronRight size={18} strokeWidth={2.5} />
        </button>
      )}

      <div className="flex flex-1 flex-col items-center justify-center px-8">
        <AnimatePresence mode="wait">
          <motion.div
            key={step}
            initial={{ opacity: 0, y: 28 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.35 }}
            className="flex flex-col items-center gap-6 text-center"
          >
            <div className="rounded-3xl border border-white/10 bg-white/10 p-6">
              <SeyarMascot char={slide.char} mood={slide.mood} size={150} />
            </div>
            <div>
              <p className="mb-1 text-sm font-medium text-white/70">{slide.sub}</p>
              <h1 className="mb-3 text-2xl font-black leading-snug">{slide.title}</h1>
              <p className="text-sm leading-[1.9] text-white/85">{slide.desc}</p>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>

      <div className="flex justify-center gap-2 pb-4" aria-hidden>
        {SLIDES.map((_, i) => (
          <span key={i} className={`h-2 rounded-full transition-all duration-300 ${i === step ? 'w-6 bg-white' : 'w-2 bg-white/30'}`} />
        ))}
      </div>

      <div className="flex gap-3 px-6 pb-10">
        {!last && (
          <button type="button" onClick={onDone} className="flex-1 rounded-2xl border border-white/25 py-3.5 text-sm font-semibold text-white/85">
            رد کردن
          </button>
        )}
        <button
          type="button"
          onClick={last ? onDone : () => setStep((s) => s + 1)}
          style={{ color: slide.bg }}
          className="flex flex-[2] items-center justify-center gap-2 rounded-2xl bg-white py-3.5 font-black shadow-lg shadow-black/20 active:scale-95"
        >
          {last ? <>بزن بریم! <Sparkles size={18} /></> : <>بعدی <ChevronLeft size={18} /></>}
        </button>
      </div>
    </div>
  );
}