/* reference.jsx, references page; uses Header/Footer/Arrow from advant.jsx */
const { useState: useStateR } = React;

/* ============ DATA (fallback when WP is unreachable) ============
   Naročnik = naslov (se ne prevaja). Prevajata se le lokacija in opis. */

const PROJECTS = [
  { id: "PC-014", client: "Krka d.d.", loc: "Novo mesto · SI",
    summary: "Izgradnja novega glavnega podatkovnega centra, gradbena dela, ognjevarne stene/strop/tla, sistem gašenja Novec 1230, integracija v nadzorni sistem." },
  { id: "PC-013", client: "Ministrstvo za šolstvo in šport", loc: "Ljubljana · SI",
    summary: "Izgradnja novega podatkovnega centra z 22 omarami, InRow hlajenjem, sistemom gašenja Inergen in nadzornim sistemom." },
  { id: "PC-012", client: "Ministrstvo za obrambo RS", loc: "Ljubljana · SI",
    summary: "Izgradnja varne sobe AST stopnje zaščite po EN1047-2 z EM zaščito TEMPEST." },
  { id: "PC-011", client: "Kontrola zračnega prometa RS", loc: "Brnik · SI",
    summary: "Izgradnja podatkovnega centra s 150 rack omarami, inteligentnim napajanjem, ATS in KVM stikali ter 10G ožičenjem." },
  { id: "PC-010", client: "Petrol d.d.", loc: "Ljubljana · SI",
    summary: "Prenova podatkovnega centra s prenovljenim hlajenjem InRow v varni sobi po EN1047-2." },
  { id: "PC-009", client: "Banka Koper & Intesa Sanpaolo Card", loc: "Koper · SI",
    summary: "Prenova podatkovnega centra, nove strežniške in komunikacijske omare, inteligentni rack PDU, povezave Cat 6A in optika." },
  { id: "PC-008", client: "ARNES", loc: "Ljubljana · SI",
    summary: "Nov podatkovni center, ~30 omar, 90 kW moči, InRow hlajenje in sistem gašenja Novec." },
  { id: "PC-007", client: "TEŠ, Termoelektrarna Šoštanj", loc: "Šoštanj · SI",
    summary: "Izgradnja novega podatkovnega centra ≈120 m² z redundantnim UPS sistemom APC 2 × 160 kVA." },
  { id: "PC-006", client: "Državni zbor RS", loc: "Ljubljana · SI",
    summary: "Prenova dveh podatkovnih centrov, prenovljeno hlajenje in napajanje, IBM Tivoli za samodejni zagon/zaustavitev." },
  { id: "PC-005", client: "Alpha Bank", loc: "Beograd · RS",
    summary: "Postavitev podatkovnega centra ≈80 m² z InRow RP hlajenjem in centralnim nadzornim sistemom." },
  { id: "PC-004", client: "Postal Bank", loc: "Sofia · BG",
    summary: "Postavitev podatkovnega centra ≈60 m², 22 omar, UPS sistem APC in InRow hlajenje." },
  { id: "PC-003", client: "Zavarovalnica Tilia d.d.", loc: "Novo mesto · SI",
    summary: "Prenova podatkovnega centra ≈40 m², DEA za upravno stavbo in sistem gašenja Novec." },
  { id: "OZ-007", client: "Kristalna palača, BTC City", loc: "Ljubljana · SI",
    summary: "Računalniška omrežja 23-etažne stavbe, 105 km Cat 6 kabla, 3 200 priključkov, 400 optičnih medpovezav." },
  { id: "OZ-006", client: "DSU d.o.o., Pisarne državne uprave", loc: "Ljubljana · SI",
    summary: "28 vozlišč, 325 km kabla Cat 6A in Cat 6, 6 400 priključkov, 960 optičnih povezav." },
  { id: "OZ-005", client: "ATCC, Center za kontrolo zračnega prometa", loc: "Brnik · SI",
    summary: "10 000 m² letališka kontrola, 10G ožičenje, 100 km Cat 6A, 3 400 priključkov." },
  { id: "OM-004", client: "MAHLE Letrika d.o.o.", loc: "Šempeter pri Gorici · SI",
    summary: "Visoko zanesljivo industrijsko brezžično omrežje. Stikala Allied Telesis, AP Lancom Systems." },
  { id: "OM-003", client: "HKOM, Javna uprava", loc: "Slovenija, državna mreža",
    summary: "Visoko zanesljivo brezžično omrežje za javno upravo, centralizirano upravljanje, OTP + RADIUS." },
  { id: "OM-002", client: "Šole, srednje šole, vrtci & javni zavodi", loc: "Slovenija, 100+ ustanov",
    summary: "Izgradnja LAN in brezžičnih omrežij v 100+ izobraževalnih ustanovah, 3 000+ AP Lancom, EDUROAM." },
  { id: "AV-002", client: "Poslovni objekt Atlas", loc: "Podgorica · ME",
    summary: "Prvi popolnoma avtomatizirani poslovni objekt v Črni gori. 184 krmilnikov, 27 CCTV kamer, 45 čitalnikov." },
];

const TRUST_GROUPS = [
  { name: "Krka", meta: "Farmacija · DC" },
  { name: "Petrol", meta: "Energetika · DC" },
  { name: "Telekom Slovenije", meta: "Telekom · LAN" },
  { name: "NLB", meta: "Bančništvo" },
  { name: "Banka Koper", meta: "Bančništvo · DC" },
  { name: "Zavarovalnica Tilia", meta: "Zavarovalnice · DC" },
  { name: "Lek", meta: "Farmacija" },
  { name: "Novartis", meta: "Farmacija, LJ + Mengeš" },
  { name: "Lafarge Cement", meta: "Industrija" },
  { name: "MAHLE Letrika", meta: "Avtomotiv · WLAN" },
  { name: "Adria Airways", meta: "Letalstvo" },
  { name: "Helios", meta: "Industrija" },

  { name: "Državni zbor RS", meta: "Vlada · DC" },
  { name: "Ministrstvo za obrambo", meta: "Obramba" },
  { name: "Ministrstvo za notr. zadeve", meta: "Vlada" },
  { name: "Ministrstvo za javno upravo", meta: "Vlada" },
  { name: "Ministrstvo za šolstvo", meta: "Vlada · DC" },
  { name: "Vlada RS", meta: "Vlada" },
  { name: "Sodišča", meta: "Pravosodje" },
  { name: "ARSO", meta: "Vlada · DC" },

  { name: "ARNES", meta: "Akademsko omrežje" },
  { name: "Kontrola zračnega prometa", meta: "Letalstvo · DC" },
  { name: "UKC Ljubljana", meta: "Zdravstvo" },
  { name: "UKC Maribor", meta: "Zdravstvo" },
  { name: "Pediatrična klinika", meta: "Zdravstvo" },
  { name: "ZD Jesenice", meta: "Zdravstvo" },
  { name: "Dravske elektrarne", meta: "Energetika · LAN" },
  { name: "TEŠ", meta: "Energetika · DC" },
  { name: "Belinka", meta: "Industrija" },
  { name: "GEN-I", meta: "Energetika" },

  { name: "BTC, Kristalna palača", meta: "Realestate · LAN" },
  { name: "Alpha Bank (RS)", meta: "Export · DC" },
  { name: "Postal Bank (BG)", meta: "Export · DC" },
  { name: "Atlas (ME)", meta: "Export · BMS" },
  { name: "Skupina Hakl", meta: "Industrija" },
];

/* ============ COMPONENTS ============ */

function RefHero({ heroData }) {
  const hd = heroData || {};
  const stats = hd.stats || [
    { num: "28let", label: "Neprekinjenega dela" },
    { num: "530km", label: "Skupaj UTP/FTP kabla" },
    { num: "3 000+", label: "WiFi dostopnih točk v šolah" },
    { num: "4trg", label: "SI · BG · RS · ME" },
  ];
  return (
    <section className="page-hero">
      <div className="container">
        <div className="page-hero__inner">
          <div className="page-hero__title">
            <div className="sec-head__index"><span className="num">REF</span><span>28 let, vladne ustanove, banke, industrija</span></div>
            <h1 dangerouslySetInnerHTML={{ __html: hd.h1 || "Stvari, ki<br/>delajo <em>ponoči.</em>" }} />
            <p className="page-hero__lede">
              {hd.sub || "Izbor kritičnih projektov, ki smo jih izvedli za slovenske vladne ustanove, banke, energetiko in zdravstvo, z obsegom, opremo in obremenitvami v številkah, ne v marketingu."}
            </p>
          </div>
        </div>
        <div className="ref-hero__stats">
          {stats.map((s, i) => {
            const num = typeof s === 'object' ? s.num : '';
            const lbl = typeof s === 'object' ? s.label : '';
            const match = num.match(/^([\d\s\.]+)(\D.*)$/);
            return (
              <div className="ref-hero__stat" key={i}>
                {match
                  ? <div className="num">{match[1].trim()}<sup>{match[2].trim()}</sup></div>
                  : <div className="num">{num}</div>
                }
                <div className="lbl">{lbl}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProjectRow({ p }) {
  return (
    <div className="proj">
      <div className="proj__client">
        <div className="proj__client-name">{p.client}</div>
        {p.loc && <div className="proj__client-loc">{p.loc}</div>}
      </div>
      <div className="proj__summary">{p.summary}</div>
    </div>
  );
}

function ProjectList({ items }) {
  return (
    <div className="container" style={{ paddingLeft: "var(--sp-6, 40px)", paddingRight: "var(--sp-6, 40px)" }}>
      <div className="proj-list">
        {items.map((p) => (
          <ProjectRow key={p.id} p={p} />
        ))}
      </div>
    </div>
  );
}

function TrustWall({ groups }) {
  const displayGroups = (groups && groups.length) ? groups : TRUST_GROUPS;
  return (
    <section className="trust">
      <div className="container">
        <div className="trust__head">
          <div>
            <div className="sec-head__index"><span className="num">02</span><span>Stranke</span></div>
            <h2 style={{ marginTop: 16 }}>Vlade, banke, energetika, zdravstvo, šolstvo.</h2>
          </div>
          <p>
            Ponosni smo, da nam vladne ustanove in ugledna domača in tuja
            podjetja v Sloveniji zaupajo razvoj, izgradnjo in nadgradnje
            podatkovnih centrov, omrežij in informacijskih sistemov, od
            načrtovanja do celovitega vzdrževanja.
          </p>
        </div>
        <div className="trust__wall">
          {displayGroups.map(c => (
            <div className="trust__cell" key={c.name}>
              <div className="name">{c.name}</div>
              <div className="meta">{c.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RefCTA() {
  return (
    <section className="ref-cta">
      <div className="container">
        <div className="ref-cta__inner">
          <h2>
            Vaš sistem si zasluži, da<br/>
            <em>dela ponoči.</em>
          </h2>
          <div className="ref-cta__actions">
            <a href="/#contact" className="btn btn--primary" onClick={(e) => { e.preventDefault(); window.__openContactModal && window.__openContactModal(); }}>
              <span>Pogovorimo se o projektu</span>
              <Arrow size={14} className="arrow" />
            </a>
            <a href="/o-podjetju" className="btn btn--ghost">
              <span>Spoznajte ekipo</span>
              <Arrow size={14} className="arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ APP ============ */

function ReferenceApp() {
  const [projects, setProjects] = useStateR(null); /* null = loading */
  const [trustGroups] = useStateR(TRUST_GROUPS);
  const [heroData, setHeroData] = useStateR(null);
  const [modalOpen, setModalOpen] = useStateR(false);

  React.useEffect(() => {
    window.__openContactModal = () => setModalOpen(true);
    return () => { window.__openContactModal = null; };
  }, []);

  /* Fallback: hide preloader after 3 s and show page with static data */
  React.useEffect(() => {
    const t = setTimeout(() => {
      setProjects(p => p === null ? [] : p);
      window.AdvantWP && window.AdvantWP.hidePreloader();
    }, 3000);
    return () => clearTimeout(t);
  }, []);

  /* ── Load WP data ── */
  React.useEffect(() => {
    const { wpOptions, wpPosts, gs, decode } = window.AdvantWP || {};
    if (!wpOptions) { setProjects([]); window.AdvantWP && window.AdvantWP.hidePreloader(); return; }

    /* Apply global contact/nav to T */
    wpOptions('global').then(g => {
      const set = (obj, key, val) => { if (val) obj[key] = decode(val); };
      ['SI','EN','DE'].forEach(LANG => {
        const l = LANG.toLowerCase();
        const tl = T[LANG];
        set(tl.contact.meta, 'emailVal',   gs(g, `g_contact_email_${l}`));
        set(tl.contact.meta, 'phoneVal',   gs(g, `g_contact_phone_${l}`));
        set(tl.contact.meta, 'addressVal', gs(g, `g_contact_address_${l}`));
        set(tl.contact.meta, 'mapsUrl',    gs(g, `g_contact_maps_${l}`));
        set(tl.footer, 'emailVal', gs(g, `g_contact_email_${l}`));
        set(tl.footer, 'phoneVal', gs(g, `g_contact_phone_${l}`));
      });
    }).catch(() => {});

    /* Fetch reference-page options + referenca CPT posts */
    Promise.all([
      wpOptions('reference-page'),
      wpPosts('referenca', { per_page: 200 }),
    ])
      .then(([rp, posts]) => {
        const l = (document.body.dataset.lang || 'SI').toLowerCase();

        /* ── Hero stats ── */
        const stats = [];
        for (let i = 1; i <= 3; i++) {
          const n = gs(rp, `rp_st${i}_num_${l}`);
          const lb = gs(rp, `rp_st${i}_label_${l}`);
          if (n) stats.push({ num: n, label: lb });
        }
        setHeroData({
          h1:    gs(rp, `rp_hero_h1_${l}`)  || null,
          sub:   gs(rp, `rp_hero_sub_${l}`) || null,
          heroImg: gs(rp, `rp_hero_image_${l}`) || null,
          stats: stats.length ? stats : null,
        });

        /* ── Map CPT posts → PROJECTS shape ──
           title = Naročnik (ime se ne prevaja); lokacija + opis sta prevedljiva. */
        if (!posts || !posts.length) {
          setProjects(PROJECTS); /* fallback to hardcoded */
          window.AdvantWP && window.AdvantWP.hidePreloader();
          return;
        }
        const mapped = posts
          .map(p => {
            const a = p.acf || {};
            return {
              id:      String(p.id),
              client:  decode(gs(a, `ref_client_${l}`) || gs(a, 'ref_client_si') || (p.title && p.title.rendered) || ''),
              loc:     decode(gs(a, `ref_location_${l}`) || gs(a, 'ref_location_si') || ''),
              summary: decode(gs(a, `ref_summary_${l}`) || gs(a, 'ref_summary_si') || ''),
            };
          })
          .filter(p => p.client); /* skip incomplete entries */

        setProjects(mapped.length ? mapped : PROJECTS);
        window.AdvantWP && window.AdvantWP.hidePreloader();
      })
      .catch(e => {
        console.warn('[AdvantWP] reference load failed, using fallback.', e);
        setProjects(PROJECTS);
        window.AdvantWP && window.AdvantWP.hidePreloader();
      });
  }, []);

  /* Loading — preloader overlay covers the page */
  if (projects === null) return null;

  return (
    <LangContext.Provider value={document.body.dataset.lang || "SI"}>
      <AmbientOrb />
      <Header />
      <RefHero heroData={heroData} />
      <section style={{ padding: "40px 0 80px", background: "var(--bg-2)" }}>
        <ProjectList items={projects} />
      </section>
      <TrustWall groups={trustGroups} />
      <Contact />
      <Footer />
      <ContactModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </LangContext.Provider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ReferenceApp />);