/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Aktuality / Blog (NEPOUŽITÉ)
   -------------------------------------------------------------
   Zatiaľ nezahrnuté v App komponente — pripravené pre budúce zapnutie.
   Tri abstraktné gradient thumbnails (žiadne stock photos).

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

function V2_News() {
  const posts = [
  {
    date: '24. 04. 2026',
    cat: 'Tlačová správa',
    title: 'VzdelAI štartuje v januári 2026 ako prvý slovenský AI projekt pre vysoké školstvo.',
    excerpt: 'Žilinská univerzita získala financovanie na trojročný výskum personalizovaného AI asistenta…',
    tone: 'a'
  },
  {
    date: '12. 03. 2026',
    cat: 'Workshop',
    title: 'Úvodný workshop pre pedagógov FPEDAS prebehol s rekordnou účasťou.',
    excerpt: 'Účastníci diskutovali o potenciáli AI v rutinnej príprave výučbových materiálov…',
    tone: 'b'
  },
  {
    date: '02. 02. 2026',
    cat: 'Konferencia',
    title: 'Konzorcium predstavilo metodiku adaptácie LLM pre slovenský akademický kontext.',
    excerpt: 'Spoločne s partnermi Aricoma, COMPOTE, COMTEC a ESMO predstavili prvé dáta…',
    tone: 'c'
  }];

  // Three abstract gradient "thumbnails" using brand palette only — no stock photos.
  const thumb = (tone) => {
    if (tone === 'a') return 'radial-gradient(80% 60% at 30% 20%, rgba(179,98,255,0.65) 0%, transparent 60%), linear-gradient(135deg, #2A1A6B 0%, #0F0A33 100%)';
    if (tone === 'b') return 'radial-gradient(70% 50% at 70% 80%, rgba(109,79,232,0.7) 0%, transparent 60%), linear-gradient(135deg, #3A1F8A 0%, #2A1A6B 100%)';
    return 'radial-gradient(50% 60% at 50% 50%, rgba(179,98,255,0.45) 0%, transparent 60%), linear-gradient(135deg, #0F0A33 0%, #3A1F8A 100%)';
  };
  return (
    <section id="news" className="vz-section vz-snap" style={{ background: 'var(--vz-mist)' }}>
      <div className="vz-container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 56, flexWrap: 'wrap', gap: 16
        }}>
          <div>
            <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>Blog</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
            }}>Aktuality z&nbsp;projektu.</h2>
          </div>
          <a href="#" style={{
            color: 'var(--vz-violet-700)', fontWeight: 600, fontSize: 15,
            textDecoration: 'none'
          }}>Všetky príspevky →</a>
        </div>
        <div className="vz-grid-3">
          {posts.map((p) =>
          <article key={p.title} style={{
            background: '#fff', borderRadius: 16, overflow: 'hidden',
            border: '1px solid var(--border)'
          }}>
              <div style={{
              height: 200, background: thumb(p.tone),
              position: 'relative'
            }}>
                <div style={{
                position: 'absolute', left: 20, bottom: 20,
                padding: '6px 12px', borderRadius: 999,
                background: 'rgba(255,255,255,0.16)',
                border: '1px solid rgba(255,255,255,0.28)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                fontFamily: 'var(--font-mono)',
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: '#fff', fontWeight: 500
              }}>{p.cat}</div>
              </div>
              <div style={{ padding: 28 }}>
                <div className="vz-mono" style={{
                fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--vz-ink-40)', marginBottom: 12
              }}>{p.date}</div>
                <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 20, lineHeight: 1.25, letterSpacing: '-0.01em',
                color: 'var(--vz-ink)', margin: '0 0 12px'
              }} dangerouslySetInnerHTML={{ __html: p.title }} />
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--vz-ink-60)', margin: 0 }}
              dangerouslySetInnerHTML={{ __html: p.excerpt }} />
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

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