/* Tutorial.jsx — skippable Dutch onboarding that explains the board */
(function () {
  const LucideIcon = window.LucideIcon;
  const GenderSymbol = window.GenderSymbol;
  const { useState } = React;

  const E = React.createElement;
  const dot = (cls, txt) => E('span', { className: 'tx-dot ' + cls }, E('span', { className: 'd' }), txt);

  const STEPS = [
    {
      icon: 'LayoutGrid', tag: 'Welkom',
      title: 'Verdeel je klas op het digibord',
      body: () => E('p', null, 'Met dit bord verdeel je de leerlingen van één leerjaar over twee nieuwe klassen. ',
        'Alle kaarten staan onderin in de ', E('b', null, 'bak'), '. Je sleept ze naar ', E('b', null, 'Klas 1'), ' of ',
        E('b', null, 'Klas 2'), ' — samen, op het grote scherm.'),
    },
    {
      icon: 'IdCard', tag: 'De kaart',
      title: 'Wat staat er op een leerlingkaart?',
      body: () => E('div', { className: 'tx-list' },
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Naam'), 'groot bovenaan.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Oude klas + geslacht'),
          'rechtsboven het klaslabel (', E(GenderSymbol, { gender: 'm', size: 16 }), ' / ', E(GenderSymbol, { gender: 'f', size: 16 }), ').'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Vriendjes'), 'de drie gekozen namen, in kleur (zie volgende stap).'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Niveaus'), 'bolletjes voor rekenen, lezen en spelling (R · B · S) plus een AVI-badge.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Gedrag'), 'de gekleurde balk links op de kaart.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k', style: { color: '#7c3aed' } }, 'IAC'), 'naam verschijnt in het paars als IAC op Ja staat.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k', style: { color: '#7c3aed' } }, 'Leersteun'), 'kaart krijgt een paarse gloed als Leersteun op Ja staat.')),
    },
    {
      icon: 'Heart', tag: 'Vriendjes',
      title: 'De kleur van een vriendje vertelt alles',
      body: () => E('div', null,
        E('div', { className: 'tx-friends' },
          dot('fr--same', 'Sara — samen in dezelfde klas'),
          dot('fr--tray', 'Tess — nog in de bak'),
          dot('fr--other', 'Noor — in de andere klas')),
        E('p', { style: { marginTop: '14px' } }, 'Zo zie je in één oogopslag of een kind bij een vriendje zit. ',
          'Bevriende kinderen worden binnen een klas automatisch ', E('b', null, 'samen gegroepeerd'), ' (groen kader). ',
          'Kinderen zonder match staan onderaan. Heeft een geplaatst kind ', E('b', null, 'géén'), ' van zijn vriendjes bij zich, dan krijgt de kaart een ',
          E('span', { style: { color: 'var(--r-ink)', fontWeight: 800 } }, 'rode gloed'), '.')),
    },
    {
      icon: 'Hand', tag: 'Plaatsen',
      title: 'Slepen of tikken',
      body: () => E('div', { className: 'tx-list' },
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Slepen'), 'pak een kaart en sleep hem naar een klas (werkt met de vinger).'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Tikken'), 'tik een kaart aan en kies een klas in het balkje dat verschijnt.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k' }, 'Bewerken'), 'dubbeltik een kaart om alle gegevens aan te passen.'),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-k tx-k-r' }, 'Botsing'), 'twee kinderen die niet samen mogen, kleuren rood met een waarschuwing.')),
    },
    {
      icon: 'Users', tag: 'Overzicht',
      title: 'Het overzicht boven elke klas',
      body: () => E('p', null, 'De balk boven elke klas telt live mee: ',
        E('b', null, 'aantal leerlingen'), ', de verdeling ', E(GenderSymbol, { gender: 'm', size: 15 }), '/', E(GenderSymbol, { gender: 'f', size: 15 }),
        ', uit welke oude klassen ze komen, en de niveaus voor rekenen, lezen en spelling. ',
        'Is er een botsing in de klas, dan verschijnt hier een rode waarschuwing. De klasnaam pas je aan door erop te tikken.'),
    },
    {
      icon: 'Settings', tag: 'Knoppen',
      title: 'De knoppen rechtsboven',
      body: () => E('div', { className: 'tx-list' },
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-btnk' }, E(LucideIcon, { name: 'List', size: 16, strokeWidth: 2.4 })),
          E('span', null, E('b', null, 'Alle leerlingen'), ' — bewerk in één lijst alle gegevens en niveaus, met zoeken en filteren.')),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-btnk' }, E(LucideIcon, { name: 'Plus', size: 16, strokeWidth: 2.6 })),
          E('span', null, E('b', null, 'Leerling toevoegen'), ' — voeg een losse kaart toe.')),
        E('div', { className: 'tx-item' }, E('span', { className: 'tx-btnk' }, E(LucideIcon, { name: 'Settings', size: 16, strokeWidth: 2.2 })),
          E('span', null, E('b', null, 'Instellingen'), ' — kies welke velden op de kaart staan, hernoem velden en klassen, en ',
            E('b', null, 'importeer/exporteer'), ' via Excel of een sessiebestand. Daar reset je ook de verdeling.'))),
    },
  ];

  function Tutorial({ onClose }) {
    const [i, setI] = useState(0);
    const step = STEPS[i];
    const last = i === STEPS.length - 1;

    return E('div', { className: 'tx-wrap' },
      E('div', { className: 'tx' },
        E('button', { className: 'tx-skip', onClick: onClose }, 'Overslaan'),
        E('div', { className: 'tx-icon' }, E(LucideIcon, { name: step.icon, size: 30, strokeWidth: 2.2 })),
        E('div', { className: 'tx-tag' }, 'Stap ' + (i + 1) + ' van ' + STEPS.length + ' · ' + step.tag),
        E('h2', { className: 'tx-title' }, step.title),
        E('div', { className: 'tx-body' }, step.body()),
        E('div', { className: 'tx-foot' },
          E('div', { className: 'tx-dots' }, STEPS.map((_, n) =>
            E('button', { key: n, className: 'tx-pip' + (n === i ? ' on' : ''), onClick: () => setI(n), 'aria-label': 'Stap ' + (n + 1) }))),
          E('span', { className: 'spacer' }),
          i > 0 ? E('button', { className: 'icon-btn', onClick: () => setI(i - 1) },
            E(LucideIcon, { name: 'ChevronLeft', size: 18, strokeWidth: 2.6 }), 'Vorige') : null,
          last
            ? E('button', { className: 'icon-btn primary', onClick: onClose },
                E(LucideIcon, { name: 'Check', size: 18, strokeWidth: 2.6 }), 'Aan de slag')
            : E('button', { className: 'icon-btn primary', onClick: () => setI(i + 1) },
                'Volgende', E(LucideIcon, { name: 'ChevronRight', size: 18, strokeWidth: 2.6 }))
        )
      )
    );
  }

  window.Tutorial = Tutorial;
})();