/* i18n.jsx — language context, translations (EN/NL/DE/ES/AR), LangPicker */

const LangContext = React.createContext({ lang: 'en', setLang: () => {} });

const LANG_LIST = [
  { code: 'en', name: 'English',    flag: '🇬🇧', rtl: false },
  { code: 'nl', name: 'Nederlands', flag: '🇳🇱', rtl: false },
  { code: 'de', name: 'Deutsch',    flag: '🇩🇪', rtl: false },
  { code: 'es', name: 'Español',    flag: '🇪🇸', rtl: false },
  { code: 'ar', name: 'العربية',   flag: '🇸🇦', rtl: true  },
];

const T = {
  en: {
    nav: { dashboard: 'Dashboard', courses: 'Courses', passport: 'Skills Passport', reader: 'Reader', achievements: 'Achievements' },
    search: 'Search courses, skills, books…',
    logout: 'Log out',
    streak: n => `${n} days`,
    dash: {
      morning: 'Good morning', afternoon: 'Good afternoon', evening: 'Good evening',
      welcome: n => `Welcome back, ${n}`,
      sub: 'Pick up where you left off, level up your skills passport, and keep your streak alive.',
      stats: { xp: 'Total XP', streak: 'Day streak', rank: 'Cohort rank', badges: 'Badges earned' },
      continueLearning: 'Continue learning',
      allCourses: 'All courses',
      completedCerts: 'Completed certifications',
      certified: n => `${n} certified`,
      yourSkills: 'Your skills',
      spiderSub: 'Spider view across your e-CF competencies',
      openPassport: 'Open passport',
      leaderboard: 'Leaderboard',
      thisWeek: 'This week',
      enrolled: 'Currently enrolled',
      enrolledBtn: 'Enrolled',
      lessonsOf: (d, t) => `${d}/${t} lessons complete`,
      upcomingTraining: 'Upcoming training',
      joinLive: 'Join live',
      recoTitle: 'Recommended next step',
      recoTag: 'For you',
      startCourse: 'Start this course',
    },
    pages: {
      courses:      { eyebrow: 'Catalogue',  title: 'Courses',          sub: 'Best-practice frameworks from Van Haren — each one ready to learn, gamify, and certify.' },
      passport:     { eyebrow: 'Portfolio',  title: 'Skills Passport',  sub: 'Your verified competency record across every course and framework.' },
      reader:       { eyebrow: 'Library',    title: 'Reader',           sub: 'Read, annotate and export your learning materials.' },
      achievements: { eyebrow: 'Progress',   title: 'Achievements',     sub: 'Badges, levels and ranking — the rewards layer that runs across every course and book.' },
    },
    edu: {
      nav: { dashboard: 'Dashboard', cohorts: 'My Cohorts', learners: 'Learners', trainers: 'Trainers', products: 'Products', prep: 'Session Prep', gamification: 'Gamification', leaderboard: 'Leaderboard', reports: 'Course KPIs', integration: 'Integration', settings: 'Settings' },
      search: 'Search cohorts, learners, sessions…',
      streak: n => `${n} day streak`,
    },
  },
  nl: {
    nav: { dashboard: 'Dashboard', courses: 'Cursussen', passport: 'Vaardigheidspaspoort', reader: 'Lezer', achievements: 'Prestaties' },
    search: 'Zoek cursussen, vaardigheden, boeken…',
    logout: 'Uitloggen',
    streak: n => `${n} dagen`,
    dash: {
      morning: 'Goedemorgen', afternoon: 'Goedemiddag', evening: 'Goedenavond',
      welcome: n => `Welkom terug, ${n}`,
      sub: 'Ga verder waar je was, verbeter je vaardigheidspaspoort en houd je streak gaande.',
      stats: { xp: 'Totaal XP', streak: 'Dagstreak', rank: 'Cohortpositie', badges: 'Behaalde badges' },
      continueLearning: 'Verder leren',
      allCourses: 'Alle cursussen',
      completedCerts: 'Behaalde certificaten',
      certified: n => `${n} gecertificeerd`,
      yourSkills: 'Jouw vaardigheden',
      spiderSub: 'Spinnenweboverzicht van jouw e-CF competenties',
      openPassport: 'Open paspoort',
      leaderboard: 'Ranglijst',
      thisWeek: 'Deze week',
      enrolled: 'Momenteel ingeschreven',
      enrolledBtn: 'Ingeschreven',
      lessonsOf: (d, t) => `${d}/${t} lessen voltooid`,
      upcomingTraining: 'Komende training',
      joinLive: 'Live deelnemen',
      recoTitle: 'Aanbevolen volgende stap',
      recoTag: 'Voor jou',
      startCourse: 'Start deze cursus',
    },
    pages: {
      courses:      { eyebrow: 'Catalogus',   title: 'Cursussen',             sub: 'Best-practice frameworks van Van Haren — elk klaar om te leren, te gamificeren en te certificeren.' },
      passport:     { eyebrow: 'Portfolio',   title: 'Vaardigheidspaspoort',  sub: 'Jouw geverifieerde competentiedossier voor elke cursus en elk framework.' },
      reader:       { eyebrow: 'Bibliotheek', title: 'Lezer',                 sub: 'Lees, annoteer en exporteer jouw leermateriaal.' },
      achievements: { eyebrow: 'Voortgang',   title: 'Prestaties',            sub: 'Badges, niveaus en ranglijst — de beloningslaag in elke cursus en elk boek.' },
    },
    edu: {
      nav: { dashboard: 'Dashboard', cohorts: 'Mijn cohorten', learners: 'Cursisten', trainers: 'Trainers', products: 'Producten', prep: 'Sessievoorbereiding', gamification: 'Gamificatie', leaderboard: 'Ranglijst', reports: 'Cursus KPIs', integration: 'Integratie', settings: 'Instellingen' },
      search: 'Zoek cohorten, cursisten, sessies…',
      streak: n => `${n} dagen streak`,
    },
  },
  de: {
    nav: { dashboard: 'Dashboard', courses: 'Kurse', passport: 'Kompetenzpass', reader: 'Leser', achievements: 'Leistungen' },
    search: 'Kurse, Fähigkeiten, Bücher suchen…',
    logout: 'Abmelden',
    streak: n => `${n} Tage`,
    dash: {
      morning: 'Guten Morgen', afternoon: 'Guten Tag', evening: 'Guten Abend',
      welcome: n => `Willkommen zurück, ${n}`,
      sub: 'Machen Sie dort weiter, wo Sie aufgehört haben, und verbessern Sie Ihren Kompetenzpass.',
      stats: { xp: 'Gesamt-XP', streak: 'Tagesstreak', rank: 'Kohorten-Rang', badges: 'Abzeichen' },
      continueLearning: 'Weiterlernen',
      allCourses: 'Alle Kurse',
      completedCerts: 'Abgeschlossene Zertifizierungen',
      certified: n => `${n} zertifiziert`,
      yourSkills: 'Ihre Fähigkeiten',
      spiderSub: 'Übersicht Ihrer e-CF-Kompetenzen',
      openPassport: 'Pass öffnen',
      leaderboard: 'Rangliste',
      thisWeek: 'Diese Woche',
      enrolled: 'Derzeit eingeschrieben',
      enrolledBtn: 'Eingeschrieben',
      lessonsOf: (d, t) => `${d}/${t} Lektionen abgeschlossen`,
      upcomingTraining: 'Bevorstehendes Training',
      joinLive: 'Live teilnehmen',
      recoTitle: 'Empfohlener nächster Schritt',
      recoTag: 'Für Sie',
      startCourse: 'Kurs starten',
    },
    pages: {
      courses:      { eyebrow: 'Katalog',      title: 'Kurse',           sub: 'Best-Practice-Frameworks von Van Haren — zum Lernen, Gamifizieren und Zertifizieren.' },
      passport:     { eyebrow: 'Portfolio',    title: 'Kompetenzpass',   sub: 'Ihr verifiziertes Kompetenzprofil für jeden Kurs und jedes Framework.' },
      reader:       { eyebrow: 'Bibliothek',   title: 'Leser',           sub: 'Lesen, kommentieren und exportieren Sie Ihre Lernmaterialien.' },
      achievements: { eyebrow: 'Fortschritt',  title: 'Leistungen',      sub: 'Abzeichen, Level und Rangliste — das Belohnungssystem für jeden Kurs.' },
    },
    edu: {
      nav: { dashboard: 'Dashboard', cohorts: 'Meine Kohorten', learners: 'Lernende', trainers: 'Trainer', products: 'Produkte', prep: 'Sitzungsvorbereitung', gamification: 'Gamifizierung', leaderboard: 'Rangliste', reports: 'Kurs-KPIs', integration: 'Integration', settings: 'Einstellungen' },
      search: 'Kohorten, Lernende, Sitzungen suchen…',
      streak: n => `${n} Tage in Folge`,
    },
  },
  es: {
    nav: { dashboard: 'Panel', courses: 'Cursos', passport: 'Pasaporte de Habilidades', reader: 'Lector', achievements: 'Logros' },
    search: 'Buscar cursos, habilidades, libros…',
    logout: 'Cerrar sesión',
    streak: n => `${n} días`,
    dash: {
      morning: 'Buenos días', afternoon: 'Buenas tardes', evening: 'Buenas noches',
      welcome: n => `Bienvenido de nuevo, ${n}`,
      sub: 'Continúa donde lo dejaste, mejora tu pasaporte de habilidades y mantén tu racha.',
      stats: { xp: 'XP total', streak: 'Racha diaria', rank: 'Rango del grupo', badges: 'Insignias obtenidas' },
      continueLearning: 'Continuar aprendiendo',
      allCourses: 'Todos los cursos',
      completedCerts: 'Certificaciones completadas',
      certified: n => `${n} certificado`,
      yourSkills: 'Tus habilidades',
      spiderSub: 'Vista de araña de tus competencias e-CF',
      openPassport: 'Abrir pasaporte',
      leaderboard: 'Clasificación',
      thisWeek: 'Esta semana',
      enrolled: 'Inscrito actualmente',
      enrolledBtn: 'Inscrito',
      lessonsOf: (d, t) => `${d}/${t} lecciones completadas`,
      upcomingTraining: 'Próxima formación',
      joinLive: 'Unirse en vivo',
      recoTitle: 'Próximo paso recomendado',
      recoTag: 'Para ti',
      startCourse: 'Iniciar curso',
    },
    pages: {
      courses:      { eyebrow: 'Catálogo',    title: 'Cursos',                     sub: 'Marcos de mejores prácticas de Van Haren — listos para aprender, gamificar y certificar.' },
      passport:     { eyebrow: 'Portafolio',  title: 'Pasaporte de Habilidades',   sub: 'Tu registro de competencias verificado en cada curso y marco.' },
      reader:       { eyebrow: 'Biblioteca',  title: 'Lector',                     sub: 'Lee, anota y exporta tus materiales de aprendizaje.' },
      achievements: { eyebrow: 'Progreso',    title: 'Logros',                     sub: 'Insignias, niveles y clasificación — la capa de recompensas en cada curso y libro.' },
    },
    edu: {
      nav: { dashboard: 'Panel', cohorts: 'Mis grupos', learners: 'Estudiantes', trainers: 'Formadores', products: 'Productos', prep: 'Preparación', gamification: 'Gamificación', leaderboard: 'Clasificación', reports: 'KPIs del curso', integration: 'Integración', settings: 'Configuración' },
      search: 'Buscar grupos, estudiantes, sesiones…',
      streak: n => `Racha de ${n} días`,
    },
  },
  ar: {
    nav: { dashboard: 'لوحة القيادة', courses: 'الدورات', passport: 'جواز المهارات', reader: 'القارئ', achievements: 'الإنجازات' },
    search: 'ابحث عن الدورات والمهارات والكتب…',
    logout: 'تسجيل الخروج',
    streak: n => `${n} أيام`,
    dash: {
      morning: 'صباح الخير', afternoon: 'مساء الخير', evening: 'مساء النور',
      welcome: n => `مرحباً بعودتك، ${n}`,
      sub: 'تابع من حيث توقفت، طوّر جواز مهاراتك وحافظ على سلسلتك.',
      stats: { xp: 'إجمالي XP', streak: 'أيام متتالية', rank: 'ترتيب المجموعة', badges: 'الشارات المكتسبة' },
      continueLearning: 'متابعة التعلم',
      allCourses: 'جميع الدورات',
      completedCerts: 'الشهادات المكتملة',
      certified: n => `${n} معتمد`,
      yourSkills: 'مهاراتك',
      spiderSub: 'عرض شبكي لكفاءاتك في e-CF',
      openPassport: 'فتح الجواز',
      leaderboard: 'لوحة المتصدرين',
      thisWeek: 'هذا الأسبوع',
      enrolled: 'مسجل حالياً',
      enrolledBtn: 'مسجل',
      lessonsOf: (d, t) => `${d}/${t} درس مكتمل`,
      upcomingTraining: 'التدريب القادم',
      joinLive: 'الانضمام مباشرة',
      recoTitle: 'الخطوة التالية الموصى بها',
      recoTag: 'لك',
      startCourse: 'ابدأ هذه الدورة',
    },
    pages: {
      courses:      { eyebrow: 'الكتالوج', title: 'الدورات',          sub: 'أطر أفضل الممارسات من فان هارن — جاهزة للتعلم والتحفيز والاعتماد.' },
      passport:     { eyebrow: 'المحفظة',  title: 'جواز المهارات',    sub: 'سجل كفاءاتك الموثق في كل دورة وإطار عمل.' },
      reader:       { eyebrow: 'المكتبة',  title: 'القارئ',            sub: 'اقرأ وعلّق وصدّر مواد التعلم الخاصة بك.' },
      achievements: { eyebrow: 'التقدم',   title: 'الإنجازات',         sub: 'الشارات والمستويات والتصنيف — طبقة المكافآت في كل دورة وكتاب.' },
    },
    edu: {
      nav: { dashboard: 'لوحة القيادة', cohorts: 'مجموعاتي', learners: 'المتعلمون', trainers: 'المدربون', products: 'المنتجات', prep: 'تحضير الجلسة', gamification: 'التلعيب', leaderboard: 'لوحة المتصدرين', reports: 'مؤشرات الدورة', integration: 'التكامل', settings: 'الإعدادات' },
      search: 'ابحث عن المجموعات والمتعلمين والجلسات…',
      streak: n => `${n} أيام متتالية`,
    },
  },
};

function useLang() {
  return React.useContext(LangContext);
}

function LangPicker() {
  const { lang, setLang } = useLang();
  const [open, setOpen] = React.useState(false);
  const current = LANG_LIST.find(l => l.code === lang) || LANG_LIST[0];

  return (
    <div style={{ padding: '4px 13px 2px' }}>
      <button
        className={'nav-item' + (open ? ' active' : '')}
        onClick={() => setOpen(o => !o)}
        style={{ width: '100%' }}
      >
        <span className="nav-ico" style={{ fontSize: 18, lineHeight: 1 }}>{current.flag}</span>
        <span className="lbl">{current.name}</span>
        <Icon name="chevD" size={13} style={{ marginLeft: 'auto', opacity: .4, flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }} />
      </button>

      {open && (
        <div style={{ margin: '4px 2px 0', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--rail-border)', background: 'var(--surface)' }}>
          {LANG_LIST.map((l, i) => (
            <button key={l.code}
              onClick={() => { setLang(l.code); setOpen(false); }}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 13px',
                borderBottom: i < LANG_LIST.length - 1 ? '1px solid var(--line-2)' : 'none',
                border: 'none', cursor: 'pointer',
                background: lang === l.code ? 'var(--rail-active)' : 'transparent',
                color: lang === l.code ? 'var(--vh-blue-500)' : 'var(--rail-ink)',
                fontFamily: 'var(--body)', fontSize: 13.5, fontWeight: lang === l.code ? 700 : 500,
                direction: l.rtl ? 'rtl' : 'ltr', textAlign: l.rtl ? 'right' : 'left',
                transition: 'background .12s',
              }}
              onMouseEnter={e => { if (lang !== l.code) e.currentTarget.style.background = 'var(--surface-2)'; }}
              onMouseLeave={e => { if (lang !== l.code) e.currentTarget.style.background = 'transparent'; }}
            >
              <span style={{ fontSize: 17, flex: 'none', lineHeight: 1 }}>{l.flag}</span>
              <span style={{ flex: 1 }}>{l.name}</span>
              {lang === l.code && <Icon name="check" size={14} style={{ color: 'var(--vh-blue-500)', flexShrink: 0 }} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Tip({ text }) {
  const [show, setShow] = React.useState(false);
  return (
    <span style={{ position:'relative', display:'inline-flex', alignItems:'center', marginLeft:5 }}
      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
      <span style={{ width:16, height:16, borderRadius:'50%', background:'rgba(18,129,196,.6)', display:'inline-grid', placeItems:'center', fontSize:9.5, fontWeight:800, color:'#fff', cursor:'help', flexShrink:0, lineHeight:1, fontStyle:'italic', fontFamily:'Georgia,serif' }}>i</span>
      {show && (
        <div style={{ position:'absolute', bottom:'calc(100% + 10px)', left:'50%', transform:'translateX(-50%)', background:'#fff', color:'#1c2740', fontSize:12.5, fontWeight:500, padding:'10px 14px', borderRadius:10, maxWidth:260, lineHeight:1.55, boxShadow:'0 8px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06)', zIndex:999, whiteSpace:'normal', pointerEvents:'none' }}>
          {text}
          <span style={{ position:'absolute', top:'100%', left:'50%', transform:'translateX(-50%)', width:0, height:0, borderLeft:'7px solid transparent', borderRight:'7px solid transparent', borderTop:'7px solid #fff' }}/>
        </div>
      )}
    </span>
  );
}

Object.assign(window, { LangContext, LANG_LIST, T, useLang, LangPicker, Tip });