/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Pre koho je VzdelAI ("Audience")
   -------------------------------------------------------------
   Asymetrický intro grid (nadpis vľavo, lead text + 2 meta riadky
   vpravo) + 3 karty s ikonami: Pedagógom, Študentom, Univerzite.

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

/* ────── HLAVNÝ KOMPONENT ────── */
function V2_Audience() {
  const { IconBrain, IconStudent, IconBuilding } = window;

  /* DÁTA: tri cieľové skupiny */
  const cards = [
  {
    icon: <IconBrain />,
    title: 'Pedagógom',
    body: 'AI asistent podporuje pedagógov pri&nbsp;tvorbe výučbových materiálov, príprave hodnotení, formulovaní spätnej väzby a&nbsp;odpovedaní na&nbsp;otázky študentov. Pracuje so&nbsp;sylabom konkrétneho predmetu, čím pomáha zabezpečiť vecnú presnosť a&nbsp;konzistentnosť obsahu.'
  },
  {
    icon: <IconStudent />,
    title: 'Študentom',
    body: 'AI asistent poskytuje študentom personalizovanú podporu počas celého semestra, od&nbsp;vysvetľovania učiva cez&nbsp;pomoc so&nbsp;zadaniami až&nbsp;po&nbsp;okamžitú spätnú väzbu. Jeho neustála dostupnosť podporuje samostatné štúdium, individuálne tempo učenia a&nbsp;prácu s&nbsp;obsahom v&nbsp;preferovanom jazyku.'
  },
  {
    icon: <IconBuilding />,
    title: 'Univerzite',
    body: 'Univerzite prináša AI asistent prehľadnú analytiku výučby na&nbsp;úrovni predmetov, podporu integrácie s&nbsp;Microsoft 365 a&nbsp;Moodle a&nbsp;bezpečnú prevádzku v&nbsp;súlade s GDPR. Pomáha zvyšovať kvalitu vzdelávania a&nbsp;efektívne rozvíjať digitálnu podporu výučby.'
  }];


  return (
    <section id="for-whom" className="vz-section vz-snap" style={{ background: '#fff' }}>
      <div className="vz-container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)', gap: 'clamp(40px, 6vw, 96px)', alignItems: 'start', marginBottom: 'clamp(40px, 5vw, 64px)' }} className="vz-intro-grid">
          <div>
            <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>O projekte</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
            }}>
              Modernizácia výučby cez&nbsp;<span style={{
                background: 'var(--grad-ai)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text',
                WebkitTextFillColor: 'transparent', color: 'transparent'
              }}>umelú inteligenciu</span>.
            </h2>
          </div>
          <div style={{ display: 'grid', gap: 20, paddingTop: 8 }}>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--vz-ink-60)', margin: 0, textAlign: "left" }}>
              Cieľom je vytvoriť digitálneho asistenta, ktorý poskytuje
              komplexnú&nbsp;personalizovanú podporu pedagógom aj&nbsp;študentom
              v&nbsp;rôznych fázach vzdelávania na&nbsp;Žilinskej univerzite.
            </p>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
              borderTop: '1px solid var(--border)', paddingTop: 20
            }} className="vz-intro-meta">
              <div>
                <div className="vz-mono" style={{
                  fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'var(--vz-violet-700)', marginBottom: 8, fontWeight: 600
                }}>Hlavný výstup</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--vz-ink-60)' }}>
                  Funkčný prototyp digitálneho asistenta pripraveného na&nbsp;širšie nasadenie
                  v&nbsp;rámci&nbsp;UNIZA aj&nbsp;mimo nej.
                </div>
              </div>
              <div>
                <div className="vz-mono" style={{
                  fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'var(--vz-violet-700)', marginBottom: 8, fontWeight: 600
                }}>Ďalší prínos</div>
                <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--vz-ink-60)' }}>
                  Výskumné závery o&nbsp;možnostiach AI vo&nbsp;vzdelávaní +
                  odporúčania na&nbsp;celonárodné škálovanie.
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 20,
          margin: 'clamp(48px, 6vw, 80px) 0 32px'
        }}>
          <span className="vz-eyebrow" style={{
            color: 'var(--vz-violet)', fontWeight: 700
          }}>
            Cieľové skupiny
          </span>
          <span style={{
            flex: 1, height: 1, background: 'var(--border)'
          }} aria-hidden="true"></span>
          <span style={{
            fontSize: 13, color: 'var(--vz-ink-40)',
            fontFamily: 'var(--font-mono)'
          }}>
            komu projekt slúži
          </span>
        </div>
        <div className="vz-grid-3">
          {cards.map((c) =>
          <article key={c.title} className="vz-card-pad" style={{
            background: '#fff', border: '1px solid var(--border)',
            borderRadius: 16,
            transition: 'box-shadow 220ms ease, transform 220ms ease', textAlign: "center"
          }}>
              <div style={{
              width: 56, height: 56, borderRadius: 12,
              background: 'var(--vz-violet-50)', color: 'var(--vz-violet)',
              display: 'grid', placeItems: 'center', margin: '0 auto 24px'
            }}>{c.icon}</div>
              <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 24, lineHeight: 1.2, letterSpacing: '-0.01em',
              color: 'var(--vz-ink)', margin: '0 0 12px', textAlign: "center"
            }}>{c.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--vz-ink-60)', margin: 0, fontWeight: "400", textAlign: "center" }}
            dangerouslySetInnerHTML={{ __html: c.body }} />
            </article>
          )}
        </div>
      </div>
    </section>);
}

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