/* global React */
/* =============================================================
   VzdelAI — SEKCIA: V číslach (Stat band)
   -------------------------------------------------------------
   Tmavá sekcia s 4 stat kartami: 36 mesiacov · 5 partnerov · 6 aktivít · 8,98M €.
   Layered background — gradient blobs, neural lines, floating nodes.

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

function V2_Stats() {
  const stats = [
  { n: '36', label: 'mesiacov realizácie', sub: '01/2026 — 12/2028', idx: '' },
  { n: '5', label: 'partnerov v konzorciu', sub: 'UNIZA a 4 priemyselní partneri', idx: '' },
  { n: '6', label: 'hlavných aktivít', sub: 'P1HM01 — Z0HM06', idx: '' },
  { n: '8,98M €', label: 'NFP zo zdrojov EÚ a ŠR', sub: 'Program Slovensko 2021–27', idx: '' }];

  return (
    <section id="stats" className="vz-section vz-snap vz-stats-snap" style={{
      background: 'var(--vz-midnight)', color: '#fff', padding: '120px 0',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* Layered background — original blob + new subtle floating lights + grid */}
      <div className="vz-stats-bg" aria-hidden="true">
        <div className="vz-stats-grid-overlay"></div>
        <div className="vz-stats-blob vz-stats-blob-1"></div>
        <div className="vz-stats-blob vz-stats-blob-2"></div>
        <div className="vz-stats-blob vz-stats-blob-3"></div>

        {/* Neural connection lines */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        viewBox="0 0 1440 720" preserveAspectRatio="none">
          <path className="vz-hero-line" d="M120,140 C420,220 720,120 1320,260" />
          <path className="vz-hero-line" d="M180,560 C480,460 800,620 1280,500" style={{ animationDelay: '-5s' }} />
          <path className="vz-hero-line" d="M80,360 C400,320 760,440 1380,180" style={{ animationDelay: '-10s' }} />
        </svg>

        {/* Floating data nodes — same vocabulary as hero */}
        <span className="vz-hero-node n1"></span>
        <span className="vz-hero-node n2"></span>
        <span className="vz-hero-node n3"></span>
        <span className="vz-hero-node n4"></span>
        <span className="vz-hero-node n5"></span>
        <span className="vz-hero-node n6"></span>
      </div>

      <div className="vz-container" style={{ position: 'relative' }}>
        {/* Header */}
        <div style={{
          maxWidth: 760, marginBottom: 'clamp(48px, 6vw, 72px)'
        }}>
          <span className="vz-eyebrow" style={{
            display: 'block', marginBottom: 16,
            color: 'var(--vz-violet-200, #DCD0FF)'
          }}>PROJEKT V ČÍSLACH</span>
          <h2 className="vz-fluid-h2-s" style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            lineHeight: 1.08, letterSpacing: '-0.02em',
            color: '#fff', margin: '0 0 20px'
          }}>
            Projekt <span style={{
              background: 'var(--grad-ai)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text',
              WebkitTextFillColor: 'transparent', color: 'transparent'
            }}>VzdelAI</span> v číslach.
          </h2>
          <p className="vz-prose" style={{
            fontSize: 17, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.68)', margin: 0, maxWidth: 620, width: '100%'
          }}>Tri roky realizácie, päť partnerov, šesť hlavných aktivít a cielené financovanie vytvárajú rámec pre vývoj, nasadenie a overenie VzdelAI ako AI asistenta pre vysokoškolskú výučbu.



          </p>
        </div>

        {/* Stats grid */}
        <div className="vz-stats-grid">
          {stats.map((s, i) =>
          <article key={i} className="vz-stat-card">
              {s.idx && <span className="vz-stat-card-idx">{s.idx}</span>}
              <div className="vz-stat-card-num">
                {s.n}
              </div>
              <div className="vz-stat-card-label">{s.label}</div>
              <div className="vz-stat-card-sub">{s.sub}</div>
              <span className="vz-stat-card-glow" aria-hidden="true"></span>
            </article>
          )}
        </div>
      </div>
    </section>);

}

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