/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Ako to funguje
   -------------------------------------------------------------
   Štyri kroky procesu (Analýza → Personalizácia → Spätná väzba → Analytika).
   Roadmap rail s violet trackom, animovanými node-ami a sub-task chipmi.

   Závislosti (window): IconBrain, IconStudent, IconSparkle, IconChart
   ============================================================= */

function V2_HowItWorks() {
  const { IconBrain, IconStudent, IconSparkle, IconChart } = window;
  const steps = [
  {
    n: '01',
    title: 'Analýza materiálov',
    body: 'AI asistent spracuje sylabus, prednášky, skriptá a cvičenia daného predmetu. Na ich základe vytvorí kontextový základ pre ďalšiu podporu výučby.',
    detail: ['Indexovanie materiálov', 'RAG nad PDF/Word/Slides', 'Sémantická mapa predmetu'],
    icon: <IconBrain />
  },
  {
    n: '02',
    title: 'Personalizácia',
    body: 'Asistent prispôsobuje výstupy štýlu pedagóga a&nbsp;úrovni študenta. Generuje obsahovo relevantné materiály v&nbsp;požadovanom jazyku.',
    detail: ['Profil pedagóga', 'Adaptácia podľa študenta', 'Multilingválne výstupy'],
    icon: <IconStudent />
  },
  {
    n: '03',
    title: 'Spätná väzba',
    body: 'Pri zadaniach navrhuje individuálne komentáre a&nbsp;odporúčania. Pedagóg si zároveň zachováva plnú kontrolu nad&nbsp;hodnotením.',
    detail: ['Návrh komentárov a hodnotenia', 'Pedagóg potvrdzuje výstup', 'Audit log každej zmeny'],
    icon: <IconSparkle />
  },
  {
    n: '04',
    title: 'Analytika',
    body: 'Pedagóg získava v&nbsp;priebehu semestra prehľad o&nbsp;napredovaní študentov, náročných témach a&nbsp;vplyve metodických úprav na&nbsp;priebeh výučby.',
    detail: ['Dashboard úspešnosti', 'Heatmapa náročnosti tém', 'Návrhy úprav metodiky'],
    icon: <IconChart />
  }];

  return (
    <section id="how" className="vz-section vz-snap" style={{ background: 'var(--vz-mist)' }}>
      <div className="vz-container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>AKO FUNGUJE VZDELAI - PROCES</span>
          <h2 className="vz-fluid-h2-s" style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            lineHeight: 1.08, letterSpacing: '-0.02em',
            color: 'var(--vz-ink)', margin: 0
          }}>
            Štyri kroky od&nbsp;zadania k&nbsp;personalizovanej výučbe.
          </h2>
        </div>

        {/* Roadmap rail with all 4 steps */}
        <div className="vz-roadmap-rail" style={{
          position: 'relative',
          paddingTop: 8
        }}>
          {/* base track + animated shimmer.
              Track Y math: rail has paddingTop: 8, bubble height 76 →
              bubble center sits at 8 + 38 = 46px from rail's padding-box
              top. Track height is 2, so top = 45 puts the track's
              centerline (45 + 1) exactly at the bubble centerline (46). */}
          <div className="vz-roadmap-track" aria-hidden="true" style={{
            position: 'absolute', left: '6%', right: '6%', top: 45, height: 2,
            borderRadius: 2, overflow: 'hidden',
            background: 'linear-gradient(to right, var(--border) 0%, var(--vz-violet-100, #E2D7FF) 50%, var(--border) 100%)'
          }}>
            <div className="vz-roadmap-shimmer" style={{
              position: 'absolute', top: 0, left: 0, height: '100%', width: '40%',
              background: 'linear-gradient(90deg, transparent 0%, var(--vz-violet) 50%, transparent 100%)',
              opacity: 0.6
            }}></div>
          </div>

          {/* nodes row */}
          <div className="vz-roadmap-row" style={{
            position: 'relative',
            display: 'grid',
            gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))`,
            gap: 24
          }}>
            {steps.map((s, i) =>
            <div key={s.n} className="vz-roadmap-step" style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              textAlign: 'center',
              animation: `vzRoadmapStepIn 700ms cubic-bezier(0.16, 1, 0.3, 1) ${i * 120}ms both`
            }}>
                {/* node */}
                <div className="vz-roadmap-bubble" style={{
                width: 76, height: 76, borderRadius: '50%',
                background: '#fff',
                border: '2px solid var(--vz-violet)',
                color: 'var(--vz-violet)',
                display: 'grid', placeItems: 'center',
                position: 'relative', zIndex: 2,
                transition: 'transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease',
                boxShadow: '0 4px 16px rgba(124, 78, 255, 0.12)'
              }}>
                  {s.icon}
                  <span style={{
                  position: 'absolute', top: -6, right: -6,
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'var(--vz-violet)', color: '#fff',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                  letterSpacing: '0.05em',
                  boxShadow: '0 2px 8px rgba(124, 78, 255, 0.32)'
                }}>{s.n}</span>
                </div>

                {/* label */}
                <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.01em',
                color: 'var(--vz-ink)',
                margin: '24px 0 10px'
              }}>{s.title}</h3>

                <p style={{
                fontSize: 15, lineHeight: 1.55,
                color: 'var(--vz-ink-60)',
                margin: '0 0 20px',
                maxWidth: 32 + 'ch'
              }} dangerouslySetInnerHTML={{ __html: s.body }} />

                {/* sub-tasks */}
                <ul style={{
                listStyle: 'none', padding: 0, margin: 0,
                display: 'flex', flexDirection: 'column', gap: 8,
                width: '100%', maxWidth: 260
              }}>
                  {s.detail.map((d) =>
                <li key={d} style={{
                  fontSize: 13, lineHeight: 1.4,
                  color: 'var(--vz-ink-60)',
                  padding: '8px 14px',
                  background: '#fff',
                  border: '1px solid var(--border)',
                  borderRadius: 999,
                  fontFamily: 'var(--font-mono)',
                  letterSpacing: '0.01em'
                }}>{d}</li>
                )}
                </ul>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ────── EXPORT ────── */
window.V2_HowItWorks = V2_HowItWorks;