/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Hero
   -------------------------------------------------------------
   Úvodná full-bleed sekcia s mesh gradientom, animovanými blobmi,
   neurónovými linkami a dvomi CTA buttonmi.

   Eyebrow + headline + lead text sú konfigurovateľné cez Tweaks panel
   (props `t` = tweaks object). Ostatné texty sú statické.

   Závislosti (window): renderHeadlineWithAI, V2_HERO_BACKGROUNDS
   (V2_HERO_BACKGROUNDS sú definované v homepage.jsx, viď. tweakable
   defaults — sú zdielané s Tweaks panelom).
   ============================================================= */

/* ────── HLAVNÝ KOMPONENT ────── */
function V2_Hero({ t }) {
  const { renderHeadlineWithAI, V2_HERO_BACKGROUNDS } = window;
  return (
    <section className="vz-hero vz-snap" style={{
      position: 'relative', overflow: 'hidden',
      background: V2_HERO_BACKGROUNDS[t.heroStyle] || V2_HERO_BACKGROUNDS.mesh
    }}>
      {/* Animované pozadie — drifting glow blobs + neural nodes */}
      <div className="vz-hero-fx" aria-hidden="true">
        <span className="vz-hero-blob b1" />
        <span className="vz-hero-blob b2" />
        <span className="vz-hero-blob b3" />

        {/* Neural connection lines (SVG nad blobmi, pod obsahom) */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        viewBox="0 0 1440 720" preserveAspectRatio="none">
          <path className="vz-hero-line" d="M170,180 C400,260 720,160 980,300" />
          <path className="vz-hero-line" d="M260,500 C520,420 820,560 1180,440" style={{ animationDelay: '-4s' }} />
          <path className="vz-hero-line" d="M120,360 C440,300 760,460 1280,200" style={{ animationDelay: '-9s' }} />
        </svg>

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

      {/* Decorative bottom wave — animated subtle drift */}
      <svg className="vz-hero-wave"
      style={{ position: 'absolute', bottom: 0, left: 0, width: '110%', height: 120, opacity: 0.55, pointerEvents: 'none' }}
      viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
        <path d="M0,80 C360,20 720,140 1080,60 C1260,20 1380,40 1440,30 L1440,120 L0,120 Z"
        fill="rgba(179,98,255,0.18)" />
        <path d="M0,100 C400,40 760,120 1120,80 C1280,60 1380,80 1440,70 L1440,120 L0,120 Z"
        fill="rgba(109,79,232,0.22)" />
      </svg>

      <div className="vz-container" style={{ position: 'relative' }}>
        <span className="vz-mono" style={{
          fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.72)', display: 'inline-block', marginBottom: 24
        }}>
          {t.heroEyebrow}
        </span>
        <h1 className="vz-fluid-h1" style={{
          fontFamily: 'var(--font-display)', fontWeight: 800,
          lineHeight: 1.04, letterSpacing: '-0.025em',
          color: '#fff', margin: 0, maxWidth: 1040
        }}>
          {renderHeadlineWithAI(t.heroHeadline)}
        </h1>
        <p className="vz-fluid-body" style={{
          lineHeight: 1.55, maxWidth: 720, width: '100%',
          color: 'rgba(255,255,255,0.78)', margin: '32px 0 40px'
        }}>Spoločná iniciatíva UNIZA, Aricoma Systems, COMPOTE, COMTEC a ESMO Žilina prináša personalizovaného AI asistenta pre modernú podporu výučby.
Asistent pracuje so sylabom, učebnicami a prednáškami daného predmetu, pripravuje personalizované výstupy pre študentov aj pedagógov a poskytuje okamžitú spätnú väzbu v prostredí Microsoft Teams.



        </p>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <a href="#for-whom" style={{
            padding: '16px 28px', borderRadius: 12,
            background: 'var(--vz-violet)', color: '#fff',
            fontSize: 16, fontWeight: 600, textDecoration: 'none',
            boxShadow: 'var(--shadow-violet)'
          }}>Zistiť viac o&nbsp;projekte</a>
          <a href="#outputs" style={{
            padding: '16px 28px', borderRadius: 12,
            background: 'transparent', color: '#fff',
            border: '1px solid rgba(255,255,255,0.28)',
            fontSize: 16, fontWeight: 600, textDecoration: 'none'
          }}>Výstupy a publikácie →</a>
        </div>
      </div>
    </section>);
}

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