/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Footer (značka + funding + legal)
   -------------------------------------------------------------
   Top row: brand+kontakt vľavo, funding lockup (3 logá) vpravo.
   Bottom: separátor + jednoriadkový legal text.

   Závislosti (window): V2_LogoMark
   ============================================================= */

function V2_Footer() {
  const { V2_LogoMark } = window;
  const fundingItems = [
  {
    img: 'assets/funding/eu.png',
    caption: 'Spolufinancované Európskou úniou'
  },
  {
    img: 'assets/funding/slovensko.png',
    caption: 'Program Slovensko 2021–2027'
  },
  {
    img: 'assets/funding/minedu.png',
    caption: 'Ministerstvo školstva, výskumu,\u00A0vývoja a mládeže SR'
  }];


  return (
    <footer className="vz-snap" style={{ background: 'var(--vz-midnight)', color: 'rgba(255,255,255,0.72)' }}>
      <div className="vz-container" style={{ paddingTop: 80 }}>
        {/* Top row: brand+contact (left) + funding (right) */}
        <div className="vz-footer-top">
          {/* Brand + contact stack */}
          <div className="vz-footer-brand">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <V2_LogoMark size={36} radius={10} />
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: '#fff',
                letterSpacing: '-0.02em'
              }}>
                Vzdel<span style={{
                  background: 'var(--grad-ai)',
                  WebkitBackgroundClip: 'text', backgroundClip: 'text',
                  WebkitTextFillColor: 'transparent', color: 'transparent'
                }}>AI</span>
              </span>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, margin: '0 0 28px', maxWidth: 320 }}>Personalizovaný AI asistent pedagóga pre interaktívne vzdelávanie.

            </p>

            <div className="vz-mono" style={{
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.52)', marginBottom: 14, fontWeight: 500
            }}>Kontakt</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: '#fff' }}>
              Žilinská univerzita v&nbsp;Žiline<br />
              FPEDAS<br />
              Univerzitná 8215/1<br />
              010 26 Žilina, Slovensko
            </div>
            <div style={{ marginTop: 14, fontSize: 14 }}>
              <a href="mailto:vzdelai@fpedas.uniza.sk" style={{ color: '#fff', textDecoration: 'none' }}>
                vzdelai@fpedas.uniza.sk
              </a>
            </div>
          </div>

          {/* Funding lockup — wider, integrated, bigger placeholders */}
          <div className="vz-footer-funding">
            <div className="vz-mono" style={{
              fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.52)', marginBottom: 20, fontWeight: 500
            }}>Projekt je spolufinancovaný</div>
            <div className="vz-funding-grid">
              {fundingItems.map((f) =>
              <figure key={f.img} className="vz-funding-item" style={{ textAlign: "center" }}>
                  <div className="vz-funding-media">
                    <img src={f.img} alt="" loading="lazy" decoding="async" />
                  </div>
                  <figcaption className="vz-funding-caption" style={{ textAlign: "center" }}>{f.caption}</figcaption>
                </figure>
              )}
            </div>
          </div>
        </div>

        {/* Separator */}
        <div style={{
          height: 1, background: 'var(--vz-royal)',
          margin: '56px 0 28px'
        }} />

        {/* Bottom legal line — wide, ideally 1 line on desktop */}
        <div className="vz-footer-legal">
          © 2026 Žilinská univerzita v&nbsp;Žiline · Kód projektu ITMS+ NFP401101C526 ·
          Tento projekt je spolufinancovaný Európskou úniou prostredníctvom Programu Slovensko
          2021–2027 (EFRR).
        </div>
      </div>
    </footer>);

}

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