// Onboarding screen — welcomes user, Milo says hi, goals selection

function OnboardingScreen({ theme, lang, onComplete }) {
  const [step, setStep] = React.useState(0);
  const [goal, setGoal] = React.useState(null);
  const [level, setLevel] = React.useState(null);

  const t = {
    fr: {
      welcome: 'Salut, moi c\u2019est Milo !',
      subtitle: 'Ensemble, on va d\u00e9mystifier la comptabilit\u00e9. 15 min par jour, et tu vas y prendre go\u00fbt.',
      start: 'Commencer',
      goalQ: 'Quel est ton objectif ?',
      goalsub: 'Milo adaptera ton parcours',
      goals: [
        { k: 'student', t: 'R\u00e9viser mes cours', s: 'Pr\u00e9parer un examen ou un dipl\u00f4me', icon: '\ud83c\udf93' },
        { k: 'pro', t: 'Monter en comp\u00e9tence', s: 'Formation continue, certification', icon: '\ud83d\udcbc' },
        { k: 'entrepreneur', t: 'Comprendre ma boîte', s: 'G\u00e9rer ma freelance / TPE', icon: '\ud83d\ude80' },
        { k: 'curious', t: 'Par curiosit\u00e9', s: 'Juste apprendre quelque chose de nouveau', icon: '\u2728' },
      ],
      levelQ: 'Quel est ton niveau ?',
      levelsub: 'Sois honnête, Milo ne jugera pas',
      levels: [
        { k: 0, t: 'Z\u00e9ro', s: 'D\u00e9bit, cr\u00e9dit... c\u2019est quoi ?' },
        { k: 1, t: 'Quelques bases', s: 'J\u2019ai vu \u00e7a \u00e0 l\u2019\u00e9cole' },
        { k: 2, t: 'Je me d\u00e9brouille', s: 'Je sais lire un bilan' },
        { k: 3, t: 'Expert', s: 'Je veux me perfectionner' },
      ],
      letgo: 'C\u2019est parti !',
    },
    en: {
      welcome: 'Hi, I\u2019m Milo!',
      subtitle: 'Let\u2019s demystify accounting together. 15 min a day and you\u2019ll love it.',
      start: 'Get started',
      goalQ: 'What\u2019s your goal?',
      goalsub: 'Milo will tailor your path',
      goals: [
        { k: 'student', t: 'Study for class', s: 'Prepare for an exam or diploma', icon: '\ud83c\udf93' },
        { k: 'pro', t: 'Level up my skills', s: 'Continuing education, cert', icon: '\ud83d\udcbc' },
        { k: 'entrepreneur', t: 'Understand my business', s: 'Manage my freelance / SME', icon: '\ud83d\ude80' },
        { k: 'curious', t: 'Just curious', s: 'Learn something new', icon: '\u2728' },
      ],
      levelQ: 'What\u2019s your level?',
      levelsub: 'Be honest, Milo won\u2019t judge',
      levels: [
        { k: 0, t: 'Zero', s: 'Debit, credit... what?' },
        { k: 1, t: 'Some basics', s: 'Saw it at school' },
        { k: 2, t: 'Getting there', s: 'I can read a balance sheet' },
        { k: 3, t: 'Expert', s: 'Want to sharpen further' },
      ],
      letgo: 'Let\u2019s go!',
    },
  }[lang];

  return (
    <div style={{
      height: '100%', background: theme.bg, display: 'flex',
      flexDirection: 'column', padding: '70px 24px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* BG pattern */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 320,
        background: `radial-gradient(ellipse at 50% 0%, ${theme.primarySoft}, transparent 70%)`,
        pointerEvents: 'none',
      }} />

      {/* step progress dots */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 24, zIndex: 2 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            flex: 1, height: 6, borderRadius: 3,
            background: i <= step ? theme.primary : theme.border,
            transition: 'background 0.3s',
          }}/>
        ))}
      </div>

      {step === 0 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', zIndex: 2 }}>
          <div style={{ animation: 'miloBob 3s ease-in-out infinite' }}>
            <MiloFull size={180} emotion="excited" pose="wave" accessory="tie" />
          </div>
          <h1 style={{
            fontFamily: theme.font, fontSize: 32, fontWeight: theme.headingWeight,
            color: theme.ink, textAlign: 'center', margin: '16px 0 12px',
            letterSpacing: -0.5,
          }}>{t.welcome}</h1>
          <p style={{
            fontFamily: theme.fontBody, fontSize: 16, color: theme.inkSoft,
            textAlign: 'center', lineHeight: 1.5, margin: 0, maxWidth: 300,
          }}>{t.subtitle}</p>
        </div>
      )}

      {step === 1 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', zIndex: 2 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
            <MiloHead size={56} emotion="focused"/>
            <SpeechBubble theme={theme}>
              <strong style={{fontFamily:theme.font,fontSize:18}}>{t.goalQ}</strong>
              <div style={{fontSize:13,color:theme.inkSoft,marginTop:2}}>{t.goalsub}</div>
            </SpeechBubble>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20 }}>
            {t.goals.map(g => (
              <button key={g.k} onClick={() => setGoal(g.k)} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 16px', textAlign: 'left', cursor: 'pointer',
                background: goal === g.k ? theme.primarySoft : theme.surface,
                border: `2px solid ${goal === g.k ? theme.primary : theme.border}`,
                borderRadius: 16, fontFamily: theme.fontBody,
                boxShadow: goal === g.k ? `0 2px 0 ${theme.primary}` : `0 2px 0 ${theme.border}`,
                transition: 'all 0.15s',
              }}>
                <div style={{ fontSize: 28 }}>{g.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: theme.ink }}>{g.t}</div>
                  <div style={{ fontSize: 13, color: theme.inkSoft, marginTop: 2 }}>{g.s}</div>
                </div>
                <div style={{
                  width: 22, height: 22, borderRadius: 11,
                  border: `2px solid ${goal === g.k ? theme.primary : theme.border}`,
                  background: goal === g.k ? theme.primary : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {goal === g.k && (
                    <svg width="12" height="10" viewBox="0 0 12 10">
                      <path d="M1 5l3 3 7-7" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </div>
              </button>
            ))}
          </div>
        </div>
      )}

      {step === 2 && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', zIndex: 2 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
            <MiloHead size={56} emotion="wink"/>
            <SpeechBubble theme={theme}>
              <strong style={{fontFamily:theme.font,fontSize:18}}>{t.levelQ}</strong>
              <div style={{fontSize:13,color:theme.inkSoft,marginTop:2}}>{t.levelsub}</div>
            </SpeechBubble>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20 }}>
            {t.levels.map(l => (
              <button key={l.k} onClick={() => setLevel(l.k)} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '14px 16px', textAlign: 'left', cursor: 'pointer',
                background: level === l.k ? theme.primarySoft : theme.surface,
                border: `2px solid ${level === l.k ? theme.primary : theme.border}`,
                borderRadius: 16, fontFamily: theme.fontBody,
                boxShadow: level === l.k ? `0 2px 0 ${theme.primary}` : `0 2px 0 ${theme.border}`,
              }}>
                <div style={{ display: 'flex', gap: 2 }}>
                  {[0,1,2,3].map(i => (
                    <div key={i} style={{
                      width: 8, height: 20 + i*4, borderRadius: 2,
                      background: i <= l.k ? theme.primary : theme.border,
                    }}/>
                  ))}
                </div>
                <div style={{ flex: 1, marginLeft: 8 }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: theme.ink }}>{l.t}</div>
                  <div style={{ fontSize: 13, color: theme.inkSoft, marginTop: 2 }}>{l.s}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* CTA */}
      <div style={{ marginTop: 16, zIndex: 2 }}>
        <Button theme={theme} full size="lg"
          onClick={() => {
            if (step === 0) setStep(1);
            else if (step === 1 && goal) setStep(2);
            else if (step === 2 && level !== null) onComplete(goal, level);
          }}
          style={{ opacity: (step === 1 && !goal) || (step === 2 && level === null) ? 0.5 : 1 }}
        >{step === 2 ? t.letgo : step === 0 ? t.start : (lang==='fr'?'Continuer':'Continue')}</Button>
      </div>

      <style>{`@keyframes miloBob {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}`}</style>
    </div>
  );
}

function SpeechBubble({ theme, children, tail = 'left' }) {
  return (
    <div style={{ position: 'relative', flex: 1 }}>
      <div style={{
        background: theme.surface, border: `2px solid ${theme.border}`,
        borderRadius: 14, padding: '10px 14px',
        fontFamily: theme.fontBody, color: theme.ink,
        boxShadow: `0 2px 0 ${theme.border}`,
      }}>
        {children}
      </div>
      {tail === 'left' && (
        <div style={{
          position: 'absolute', left: -8, top: 14,
          width: 0, height: 0,
          borderRight: `10px solid ${theme.surface}`,
          borderTop: '8px solid transparent',
          borderBottom: '8px solid transparent',
          filter: `drop-shadow(-2px 0 0 ${theme.border})`,
        }}/>
      )}
    </div>
  );
}

Object.assign(window, { OnboardingScreen, SpeechBubble });