/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Hlavné aktivity P1HM01–06
   -------------------------------------------------------------
   Plochý zoznam šiestich aktivít s kódom, názvom a vlastníkom (chip s dot-om).
   Hover vrstva v CSS (vz-activity-row).

   Závislosti (window): (žiadne)
   ============================================================= */

function V2_Activities() {
  const items = [
  ['P1HM01', 'Komplexný návrh, vývoj a nasadenie AI asistenta v cieľovom prostredí', 'Aricoma Systems'],
  ['Z0HM03', 'Import vstupných učebných materiálov a generovanie výstupov (RAG)', 'COMPOTE'],
  ['P4HM02', 'Integrácia a nasadenie AI asistenta do prostredia Microsoft Teams', 'COMTEC'],
  ['P3HM04', 'Prediktívna analytika a grafická vizualizácia výstupov (Data Intelligence)', 'ESMO Žilina'],
  ['Z0HM05', 'Návrh modelu správania, testovanie a metodika širšieho nasadenia', 'UNIZA · FPEDAS'],
  ['Z0HM06', 'Publikovanie vedeckých výstupov a diseminácia výsledkov projektu', 'UNIZA · FPEDAS']];

  return (
    <section id="activities" className="vz-section vz-snap" style={{ background: '#fff' }}>
      <div className="vz-container">
        <div style={{ maxWidth: 620, marginBottom: 56 }}>
          <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>Hlavné aktivity · M01–M36</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 0 16px'
          }}>
            Šesť hlavných aktivít.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--vz-ink-60)', margin: 0 }}>Šesť aktivít pokrýva celý vývoj VzdelAI od výskumu a spracovania materiálov cez integráciu do MS Teams a analytiku až po testovanie a disemináciu výsledkov.


          </p>
        </div>
        <div>
          <ul className="vz-activity-list" style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'flex', flexDirection: 'column',
            borderTop: '1px solid var(--border)'
          }}>
            {items.map(([code, title, owner]) =>
            <li key={code} className="vz-activity-row" style={{
              display: 'grid', gridTemplateColumns: '92px 1fr auto',
              alignItems: 'center', gap: 24,
              padding: '20px 8px',
              borderBottom: '1px solid var(--border)',
              transition: 'background-color 240ms ease, transform 240ms ease'
            }}>
                <span className="vz-activity-code vz-mono" style={{
                fontSize: 13, letterSpacing: '0.18em',
                color: 'var(--vz-violet)', fontWeight: 600,
                transition: 'color 240ms ease'
              }}>{code}</span>
                <div className="vz-activity-title" style={{
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 18, lineHeight: 1.45, letterSpacing: '-0.01em',
                color: 'var(--vz-ink)'
              }}>{title}</div>
                <span className="vz-activity-owner" style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '6px 12px', borderRadius: 999,
                background: 'var(--vz-mist)',
                border: '1px solid var(--border)',
                fontFamily: 'var(--font-mono)',
                fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'var(--vz-ink-60)', fontWeight: 600,
                whiteSpace: 'nowrap',
                transition: 'background-color 240ms ease, color 240ms ease, border-color 240ms ease'
              }}>
                  <span style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--vz-violet)', flex: '0 0 auto'
                }}></span>
                  {owner}
                </span>
              </li>
            )}
            </ul>
          </div>
        </div>
    </section>);

}

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