/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Výstupy projektu
   -------------------------------------------------------------
   Asymetrický 12-col grid 7 výstupov; 4 typu "feature" (span 6, violet rail).
   Inline Icon komponent rieši 7 SVG ikon (model/platform/materials/...).

   Závislosti (window): (lokálny Icon komponent)
   ============================================================= */

function V2_Outputs() {
  const outputs = [
  {
    n: '01',
    cat: 'AI modely',
    icon: 'model',
    title: 'AI modely pre slovenský akademický kontext',
    body: 'Jazykové modely doladené na slovenčinu, akademickú terminológiu a obsah konkrétnych predmetov FPEDAS.',
    tag: 'TRL 4',
    feature: true,
    span: 6
  },
  {
    n: '02',
    cat: 'Platforma',
    icon: 'platform',
    title: 'VzdelAI — digitálna platforma pre interaktívne vzdelávanie',
    body: 'Integrované riešenie prepájajúce generatívne modely, analytické nástroje a adaptívne vzdelávacie stratégie s nasadením v prostredí MS Teams.',
    tag: 'TRL 5',
    feature: true,
    span: 6
  },
  {
    n: '03',
    cat: 'Materiály',
    icon: 'materials',
    title: 'Personalizované študijné materiály',
    body: 'Materiály prispôsobené individuálnym potrebám študentov a metodike učiteľov. Otvorená licencia pre tretie strany.',
    span: 4
  },
  {
    n: '04',
    cat: 'Výskum',
    icon: 'research',
    title: 'Výskumná správa o dopade AI vo vzdelávaní',
    body: 'Odborná analýza pedagogických, metodických a technologických dôsledkov využívania AI v akademickom prostredí.',
    span: 4
  },
  {
    n: '05',
    cat: 'Študijné predmety',
    icon: 'curriculum',
    title: 'Dva nové vyučovacie predmety',
    body: 'Predmety začlenené do študijných plánov FPEDAS, zamerané na aktuálne poznatky o využití AI vo vzdelávaní a manažmente.',
    span: 4
  },
  {
    n: '06',
    cat: 'Publikácie',
    icon: 'publications',
    title: 'Vedecké publikácie v Q1 časopisoch',
    body: 'Výstupom budú vedecké články, zahraničná monografia, diplomové práce a jedna dizertačná práca nadväzujúca na výsledky projektu.',
    span: 6
  },
  {
    n: '07',
    cat: 'Konferencia',
    icon: 'conference',
    title: 'Medzinárodná konferencia',
    body: 'Záverečná konferencia predstaví výsledky projektu odbornej verejnosti a vytvorí priestor na diskusiu s expertmi v oblasti AI, didaktiky a vzdelávacích technológií.',
    span: 6
  }];

  const Icon = ({ kind }) => {
    const common = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (kind === 'model') return <svg {...common}><circle cx="12" cy="6" r="2"></circle><circle cx="5" cy="14" r="2"></circle><circle cx="19" cy="14" r="2"></circle><circle cx="9" cy="20" r="1.5"></circle><circle cx="15" cy="20" r="1.5"></circle><path d="M12 8v3m-1 1.5L7 13m6-.5l4 .5M6 16l3 3m9-3l-3 3"></path></svg>;
    if (kind === 'platform') return <svg {...common}><rect x="3" y="4" width="18" height="13" rx="2"></rect><path d="M3 9h18M8 21h8M12 17v4"></path></svg>;
    if (kind === 'materials') return <svg {...common}><path d="M5 4h9l5 5v11a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z"></path><path d="M14 4v5h5M8 13h8M8 17h6"></path></svg>;
    if (kind === 'research') return <svg {...common}><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5M9 11h4M11 9v4"></path></svg>;
    if (kind === 'curriculum') return <svg {...common}><path d="M3 6l9-3 9 3-9 3-9-3z"></path><path d="M7 8.5V14c0 1.5 2.5 3 5 3s5-1.5 5-3V8.5M21 7v6"></path></svg>;
    if (kind === 'publications') return <svg {...common}><path d="M4 5a2 2 0 012-2h6v17H6a2 2 0 01-2-2V5z"></path><path d="M20 5a2 2 0 00-2-2h-6v17h6a2 2 0 002-2V5z"></path></svg>;
    if (kind === 'conference') return <svg {...common}><circle cx="9" cy="8" r="3"></circle><path d="M3 19c0-3 2.5-5 6-5s6 2 6 5"></path><circle cx="17" cy="9" r="2"></circle><path d="M15 19c0-2 1.5-3.5 4-3.5"></path></svg>;
    return null;
  };

  return (
    <section id="outputs" className="vz-section vz-snap" style={{ background: 'var(--vz-mist)' }}>
      <div className="vz-container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 56, flexWrap: 'wrap', gap: 24
        }}>
          <div style={{ maxWidth: 720 }}>
            <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>Očakávané výstupy</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'
            }}>Čo prinesie VzdelAI do decembra 2028.

            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--vz-ink-60)', margin: 0, maxWidth: 620 }}>Do decembra 2028 projekt prinesie výstupy, ktoré prepoja technológiu, pedagogiku, výskum a disemináciu. Ich jadrom bude model a platforma VzdelAI, nové študijné materiály a predmety, vedecké publikácie aj medzinárodná konferencia.



            </p>
          </div>
          <span className="vz-mono vz-outputs-meta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--vz-ink-50, var(--vz-ink-60))', fontWeight: 500, minWidth: 0
          }}>
            <span aria-hidden="true" style={{
              width: 6, height: 6, borderRadius: '50%',
              background: 'var(--vz-violet)', flex: '0 0 auto'
            }}></span>
            Ukážka vybraných výstupov
            <span aria-hidden="true" style={{
              color: 'var(--vz-ink-30, var(--vz-ink-40))', letterSpacing: 0
            }}>·</span>
            <span style={{ color: 'var(--vz-ink-70, var(--vz-ink-60))', fontWeight: 600 }}>
              7 z 10 plánovaných
            </span>
          </span>
        </div>
        <div className="vz-grid-12 vz-outputs-grid">
          {outputs.map((o) =>
          <article key={o.n}
          className={`vz-card-pad vz-output-card${o.feature ? ' is-feature' : ''}`}
          style={{
            gridColumn: `span ${o.span}`,
            background: '#fff', borderRadius: 16,
            border: '1px solid var(--border)',
            display: 'flex', flexDirection: 'column',
            minHeight: o.feature ? 260 : 220,
            position: 'relative', overflow: 'hidden'
          }}>
              {o.feature &&
            <span aria-hidden="true" style={{
              position: 'absolute', top: 0, left: 0, width: 3, height: '100%',
              background: 'var(--vz-violet)'
            }}></span>
            }
              <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 18, gap: 12
            }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span className="vz-mono" style={{
                  fontSize: 12, letterSpacing: '0.18em', fontWeight: 600,
                  color: 'var(--vz-violet)'
                }}>{o.n}</span>
                  <span style={{
                  color: 'var(--vz-ink-40)',
                  display: 'inline-flex', alignItems: 'center'
                }}>
                    <Icon kind={o.icon} />
                  </span>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span className="vz-mono" style={{
                  padding: '4px 10px', borderRadius: 999,
                  background: 'var(--vz-mist)', color: 'var(--vz-ink-70, var(--vz-ink-60))',
                  border: '1px solid var(--border)',
                  fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
                  fontWeight: 600, whiteSpace: 'nowrap'
                }}>{o.cat}</span>
                  {o.tag &&
                <span className="vz-mono" style={{
                  padding: '4px 10px', borderRadius: 999,
                  background: 'var(--vz-violet-50)', color: 'var(--vz-violet-700)',
                  fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase',
                  fontWeight: 600, whiteSpace: 'nowrap'
                }}>{o.tag}</span>
                }
                </span>
              </div>
              <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: o.feature ? 26 : 20, lineHeight: 1.22, letterSpacing: '-0.01em',
              color: 'var(--vz-ink)', margin: '0 0 12px'
            }}>{o.title}</h3>
              <p style={{
              fontSize: 15, lineHeight: 1.6,
              color: 'var(--vz-ink-60)', margin: 0
            }}>{o.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

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