/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Konzorcium (partneri)
   -------------------------------------------------------------
   Hero card pre lead partnera (UNIZA · FPEDAS) + 2×2 grid pre 4 priemyselných.
   Media slot je <a> link → `<img>` ak je k dispozícii, inak placeholder s iniciálkami.

   Závislosti (window): (žiadne — Media je lokálny komponent)
   ============================================================= */

function V2_Consortium() {
  const lead = {
    name: 'UNIZA · FPEDAS',
    fullName: 'Žilinská univerzita v Žiline · Fakulta PEDAS',
    role: 'Vedúca inštitúcia',
    desc: 'Akademický garant projektu koordinuje výskum, metodiku a integráciu AI nástrojov do študijných programov fakulty.',
    img: 'assets/partners/uniza.png',
    url: 'https://fpedas.uniza.sk/', // doplniť reálny odkaz
    initials: 'UZ'
  };
  const partners = [
  {
    name: 'Aricoma Systems',
    role: 'Priemyselný partner',
    desc: 'Vývoj a nasadenie AI asistenta v cieľovom prostredí.\nArchitektúra, MLOps a integrácie.',
    img: 'assets/partners/aricoma.png',
    url: 'https://www.aricoma.com/', // doplniť reálny odkaz
    initials: 'AS'
  },
  {
    name: 'COMPOTE',
    role: 'Priemyselný partner',
    desc: 'Import vstupných učebných materiálov a generovanie\nvýstupov pomocou RAG pipeline.',
    img: 'assets/partners/compote.png',
    url: 'https://compote.eu',
    initials: 'CP'
  },
  {
    name: 'COMTEC',
    role: 'Priemyselný partner',
    desc: 'Integrácia a nasadenie AI asistenta do prostredia\nMicrosoft Teams a univerzitnej infraštruktúry.',
    img: 'assets/partners/comtec.png',
    url: 'https://comtec.sk',
    initials: 'CT'
  },
  {
    name: 'ESMO Žilina',
    role: 'Priemyselný partner',
    desc: 'Prediktívna analytika a grafická vizualizácia výstupov \n(Data Intelligence vrstva projektu).',
    img: 'assets/partners/esmo.png',
    url: 'https://www.esmo.sk',
    initials: 'ES',
    fill: true
  }];


  // Renders an image OR a stylised placeholder with initials, wrapped in an <a> link.
  // Aspect ratio is fixed via CSS (vz-partner-media) so swapping placeholder for <img> keeps layout.
  const Media = ({ img, initials, accent = false, fill = false, url, name }) =>
  <a
    className={`vz-partner-media${accent ? ' is-accent' : ''}${fill ? ' is-fill' : ''}`}
    href={url || '#'}
    target="_blank"
    rel="noopener noreferrer">

      {img ?
    <img src={img} alt="" loading="lazy" decoding="async" /> :

    <div className="vz-partner-placeholder">
          <span className="vz-partner-initials">{initials}</span>
          <svg className="vz-partner-grid-bg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <pattern id={`pp-${initials}`} width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M10 0H0V10" fill="none" stroke="currentColor" strokeWidth="0.4" />
              </pattern>
            </defs>
            <rect width="100" height="100" fill={`url(#pp-${initials})`} />
          </svg>
        </div>
    }
      <span className="vz-partner-media-overlay" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M7 17L17 7M9 7h8v8" />
        </svg>
      </span>
    </a>;


  return (
    <section id="consortium" className="vz-section vz-snap" style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <div className="vz-container">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="vz-eyebrow" style={{ display: 'block', marginBottom: 16 }}>Konzorcium</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'
          }}>
            Päť partnerov, jedna misia.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--vz-ink-60)', margin: 0, maxWidth: 620 }}>Konzorcium spája akademickú expertízu UNIZA so skúsenosťami štyroch priemyselných partnerov s vývojom, integráciou a nasadením AI riešení v reálnom prostredí.


          </p>
        </div>

        {/* Lead partner — hero card */}
        <article className="vz-partner-lead">
          <Media img={lead.img} initials={lead.initials} url={lead.url} name={lead.name} accent />
          <div className="vz-partner-lead-body">
            <span className="vz-mono vz-partner-role">
              <span aria-hidden="true" className="vz-partner-dot"></span>
              {lead.role}
            </span>
            <h3 className="vz-partner-name">{lead.name}</h3>
            <div className="vz-partner-fullname">{lead.fullName}</div>
            <p className="vz-partner-desc">{lead.desc}</p>
          </div>
        </article>

        {/* Industry partners — 2×2 grid */}
        <div className="vz-partner-grid">
          {partners.map((p) =>
          <article key={p.name} className="vz-partner-card">
              <Media img={p.img} initials={p.initials} url={p.url} name={p.name} fill={p.fill} />
              <div className="vz-partner-card-body">
                <span className="vz-mono vz-partner-role">{p.role}</span>
                <h3 className="vz-partner-name vz-partner-name-sm">{p.name}</h3>
                <p className="vz-partner-desc">{p.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

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