/* o-nas.jsx, about page; uses Header/Footer/Arrow from advant.jsx */

/* Page language — resolved before any component renders (for hardcoded labels/fallbacks) */
const _AL = (typeof document !== "undefined" && document.body && document.body.dataset && document.body.dataset.lang) || "SI";

/* Motto section translations (label is UI-only; words/quote also have WP fallbacks) */
const MOTTO_LABEL = { SI: "Naš moto", EN: "Our motto", DE: "Unser Motto" };
const MOTTO_FALLBACK = {
  SI: ["Poslušati.", "Premisliti.", "Verjeti.", "Sanjati.", "Si upati."],
  EN: ["Listen.", "Think.", "Believe.", "Dream.", "Dare."],
  DE: ["Zuhören.", "Nachdenken.", "Glauben.", "Träumen.", "Wagen."],
};

/* Mission statement fallbacks (the live text lives in WP on_mission_h2; these cover missing values) */
const MISSION_FALLBACK = {
  SI: "Biti vodilno regionalno podjetje za <strong>načrtovanje in gradnjo podatkovnih centrov</strong>, omrežij in stavbne avtomatizacije, z ekipo, ki <em>razume sistem</em>, ne le svoj del.",
  EN: "To be the leading regional company for design and construction of data centres, networks and building automation, with a team that <em>understands the system</em>, not just their part.",
  DE: "Das führende regionale Unternehmen für Planung und Bau von Rechenzentren, Netzwerken und Gebäudeautomation zu sein — mit einem Team, das <em>das System versteht</em>, nicht nur seinen Teil.",
};

/* Director portrait fallbacks (used only when WP has no value for the page language) */
const PORTRAIT_FALLBACK = {
  SI: { role: "Generalni direktor", quote: "Naša prednost je kombinacija strokovnosti, natančnosti in vestnosti, povezuje pa nas prepričanje, da je <em>kreativnost iskanje, poskušanje in rast</em>. Sprejemanje novih izzivov, veselje pri delu in zadovoljstvo s tem, kar ustvarimo." },
  EN: { role: "CEO", quote: "Our strength is the combination of expertise, precision and diligence, united by the belief that <em>creativity is searching, trying and growing</em>. Embracing new challenges, joy in work and satisfaction in what we create." },
  DE: { role: "Geschäftsführer", quote: "Unsere Stärke ist die Kombination aus Fachkompetenz, Präzision und Gewissenhaftigkeit, verbunden durch die Überzeugung, dass <em>Kreativität Suchen, Versuchen und Wachsen bedeutet</em>." },
};

const CAPABILITIES = [
["01", "Svetovanje", "Analiza obstoječega stanja, ocena tveganj, priporočila pred odločitvijo."],
["02", "Konceptna zasnova", "Topologija, redundanca, strošek lastništva, pred prvo risbo."],
["03", "Izvedbeni načrti", "Dokumentacija po veljavnih standardih, koordinacija s strojnimi in elektro inštalacijami."],
["04", "Implementacija", "Lastni inženirski tim za vodenje gradnje, instalacijo in zagon."],
["05", "Tehnična podpora", "Prevzem, dokumentacija, šolanje uporabnikov."],
["06", "Vzdrževanje", "SLA pogodbe, monitoring, intervencije 24/7, celoten življenjski cikel."]];


const CLIENT_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" },
  { name: "Lafarge Cement", meta: "Industrija" },
  { name: "MAHLE Letrika", meta: "Avtomotiv · WLAN" },
  { name: "Helios", meta: "Industrija" },
  { name: "SGP Pomgrad", meta: "Gradbeništvo" },
  { 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: "Ministrstvo za zunanje zadeve", meta: "Vlada" },
  { name: "Ministrstvo za pravosodje", meta: "Vlada" },
  { name: "Vlada RS", meta: "Vlada" },
  { name: "ARSO", meta: "Vlada · DC" },
  { name: "ARNES", meta: "Akademsko omrežje" },
  { name: "Institut Jožef Stefan", meta: "Raziskave" },
  { name: "Kontrola zračnega prometa", meta: "Letalstvo · DC" },
  { name: "Zavod za zaposlovanje", meta: "Javni sektor" },
  { name: "JP Energetika", meta: "Energetika" },
  { name: "UKC Ljubljana", meta: "Zdravstvo" },
  { name: "UKC Maribor", meta: "Zdravstvo" },
  { name: "Zdravstveni domovi", meta: "Zdravstvo" },
  { name: "TEŠ", meta: "Energetika · DC" },
];


function AboutHero({ heroImg, label, sublabel, h1, lede, yearsNum, yearsLabel }) {
  const hl = h1 || "Inženirji,<br />ne <em>ponudniki.</em>";
  return (
    <section className="about-hero">
      <div className="about-hero__bg" style={{ backgroundImage: `url("${heroImg || '/images/dc-pristop.png'}")` }} />
      <div className="about-hero__scrim" />
      <div className="container">
        <div className="about-hero__inner">
          <div>
            <div className="sec-head__index"><span className="num" style={{fontFamily:"DM Mono,monospace",fontSize:11}}>{label || "O PODJETJU"}</span><span>{sublabel || "Advant · Ljubljana · Slovenija"}</span></div>
            <h1 style={{ marginTop: 28 }} dangerouslySetInnerHTML={{ __html: h1 || "Inženirji,<br />ne <em>ponudniki.</em>" }} />
            <p className="about-hero__lede" style={{ marginTop: 32 }}>
              {lede || "Načrtujemo, gradimo in vzdržujemo kritično fizično infrastrukturo, podatkovne centre, omrežja, hladilne sisteme in avtomatizacijo stavb. Od koncepta do desetega leta delovanja."}
            </p>
          </div>
          <div className="about-hero__since">
            <div className="about-hero__since-num">{yearsNum || "28"}</div>
            <div className="about-hero__since-meta">
              <strong>{yearsLabel || "let neprekinjenega dela"}</strong>
              <span>EST.&nbsp;1998</span>
              <span>SI · LJUBLJANA</span>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function Mission({ label, h2, body }) {
  /* Mission statement lives in WP `on_mission_h2`; `body` is legacy/empty. */
  const big = body || h2 || (MISSION_FALLBACK[_AL] || MISSION_FALLBACK.SI);
  return (
    <section className="mission-wrap">
      <div className="container">
        <div className="mission">
          <div className="mission__label">
            <div className="sec-head__index"><span className="num">01</span><span>{label || "Poslanstvo"}</span></div>
          </div>
          <p className="mission__big" dangerouslySetInnerHTML={{ __html: big }} />
        </div>
      </div>
    </section>);
}

function Capabilities({ label, h2, items }) {
  const caps = items && items.length ? items : CAPABILITIES;
  return (
    <section className="caps">
      <div className="container">
        <div className="caps__head">
          <div className="sec-head__index"><span className="num">02</span><span>{label || "Kako delamo"}</span></div>
          <h2>{h2 || "Od analize do dolgoročnega delovanja."}</h2>
        </div>
        <div className="caps__list">
          {caps.map(([n, t, d]) =>
          <div className="caps__item" key={n}>
              <span className="caps__num">{n}</span>
              <div>
                <div className="caps__title">{t}</div>
                <p className="caps__desc">{d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function Portrait({ img, name, title, quote }) {
  const fb = PORTRAIT_FALLBACK[_AL] || PORTRAIT_FALLBACK.SI;
  const quoteHtml = quote || fb.quote;
  return (
    <section className="portrait">
      <div className="container">
        <div className={"portrait__inner" + (img ? "" : " portrait__inner--no-media")}>
          {img && <div className="portrait__media"><img src={img} alt={name || "Simon Jordan"} loading="lazy" /></div>}
          <div className="portrait__body">
            <p className="portrait__quote" dangerouslySetInnerHTML={{ __html: quoteHtml }} />
            <div className="portrait__signature">
              <div>
                <div className="portrait__signature-name">{name || "Simon Jordan"}</div>
                <div className="portrait__signature-role">{title || fb.role}</div>
              </div>
              <div className="portrait__signature-meta">
                Ljubljana<br />EST.&nbsp;1998
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function Motto({ words }) {
  const displayWords = (words && words.length) ? words : (MOTTO_FALLBACK[_AL] || MOTTO_FALLBACK.SI);
  return (
    <section className="motto">
      <div className="container">
        <div className="motto__inner">
          <div className="motto__label">
            <span className="bar" />
            <span>{MOTTO_LABEL[_AL] || MOTTO_LABEL.SI}</span>
            <span className="bar" />
          </div>
          <div className="motto__words">
            {displayWords.map((w) => <span key={w} className="motto__word">{w}</span>)}
          </div>
        </div>
      </div>
    </section>);
}

function Clients({ h2, desc, clientList }) {
  const displayClients = (clientList && clientList.length) ? clientList : CLIENT_GROUPS;
  return (
    <section className="clients">
      <div className="container">
        <div className="clients__head">
          <div>
            <div className="sec-head__index"><span className="num">03</span><span>Stranke</span></div>
            <h2 style={{ marginTop: 18 }}>{h2 || "Okolja z najvišjimi zahtevami."}</h2>
          </div>
          <p>{desc || "Zaupajo nam slovenska podjetja, ministrstva in inštitucije, naše delo sega tudi na tuje trge. Tukaj je delni izbor."}</p>
        </div>
        <div className="trust__wall">
          {displayClients.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 AboutCTA({ h2, btn1, btn2 }) {
  return (
    <section className="about-cta">
      <div className="container">
        <div className="about-cta__inner">
          <h2 dangerouslySetInnerHTML={{ __html: h2 || "Imate projekt?<br /><em>Slišimo se.</em>" }} />
          <div className="about-cta__actions">
            <a href="/#contact" className="btn btn--primary" onClick={e => { e.preventDefault(); window.__openContactModal && window.__openContactModal(); }}>
              <span>{btn1 || "Kontaktirajte nas"}</span>
              <Arrow size={14} className="arrow" />
            </a>
            <a href="/#references" className="btn btn--ghost">
              <span>{btn2 || "Poglej reference"}</span>
              <Arrow size={14} className="arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>);
}

function AboutApp() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [wp, setWp] = React.useState(null);

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

  /* Fallback: hide preloader after 3 s even if WP never responds */
  React.useEffect(() => {
    const t = setTimeout(() => window.AdvantWP && window.AdvantWP.hidePreloader(), 3000);
    return () => clearTimeout(t);
  }, []);

  React.useEffect(() => {
    const { wpOptions, gs, rep, repF, decode } = window.AdvantWP || {};
    if (!wpOptions) { window.AdvantWP && window.AdvantWP.hidePreloader(); return; }

    /* Fetch global (contact/nav) and o-nas options in parallel */
    Promise.all([wpOptions('global'), wpOptions('o-nas')])
      .then(([g, on]) => {
        /* Apply global contact/nav to T (shared Header/Footer) */
        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, 'faxVal',     gs(g, `g_contact_fax_${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}`));
        });

        /* use page language; fall back to 'si' if WP has no EN/DE content */
        const pageLang = (document.body.dataset.lang || 'SI').toLowerCase();
        const l = pageLang;

        /* Render ==highlight== as <em> */
        const hl = v => v ? decode(v).replace(/==(.+?)==/g, '<em>$1</em>') : '';

        /* ── capabilities: on_cap{1-6}_{num/title/desc}_si ── */
        const caps = [];
        for (let i = 1; i <= 6; i++) {
          const n  = gs(on, `on_cap${i}_num_${l}`);
          const t  = gs(on, `on_cap${i}_title_${l}`);
          const d  = gs(on, `on_cap${i}_desc_${l}`);
          if (t) caps.push([n || String(i).padStart(2,'0'), t, d]);
        }

        /* ── clients ── */
        const clRows = rep(on, `on_${l}_clients`);
        const clientList = clRows.length
          ? clRows.map(r => ({ name: decode(r.name || ''), meta: decode(r.meta || '') }))
          : null;

        /* ── motto words ── */
        const mottoWords = repF(on, `on_${l}_motto_words`, 'word').map(decode).filter(Boolean);

        setWp({
          heroImg:    gs(on, `on_hero_image_${l}`),
          heroLabel:  gs(on, `on_hero_label_${l}`),
          heroSublabel: gs(on, `on_hero_sublabel_${l}`),
          heroH1:     hl(gs(on, `on_hero_h1_${l}`)),
          heroLede:   gs(on, `on_hero_lede_${l}`),
          heroYearsNum:   gs(on, `on_hero_years_num_${l}`),
          heroYearsLabel: gs(on, `on_hero_years_label_${l}`),
          missionLabel: gs(on, `on_mission_label_${l}`),
          missionH2:    hl(gs(on, `on_mission_h2_${l}`)),
          missionBody:  gs(on, `on_mission_body_${l}`),
          capsLabel: gs(on, `on_caps_label_${l}`),
          capsH2:    gs(on, `on_caps_h2_${l}`),
          caps: caps.length ? caps : null,
          portraitImg:   gs(on, `on_portrait_img_${l}`),
          portraitName:  gs(on, `on_portrait_name_${l}`),
          portraitTitle: gs(on, `on_portrait_title_${l}`),
          portraitQuote: hl(gs(on, `on_portrait_quote_${l}`)),
          mottoWords: mottoWords.length ? mottoWords : null,
          clientsH2:   gs(on, `on_clients_h2_${l}`),
          clientsDesc: gs(on, `on_clients_desc_${l}`),
          clientList,
          ctaH2:   hl(gs(on, `on_cta_h2_${l}`)),
          ctaBtn1: gs(on, `on_cta_btn1_${l}`),
          ctaBtn2: gs(on, `on_cta_btn2_${l}`),
        });
        window.AdvantWP && window.AdvantWP.hidePreloader();
      })
      .catch(e => {
        console.warn('[AdvantWP] o-nas load failed, using fallback.', e);
        window.AdvantWP && window.AdvantWP.hidePreloader();
      });
  }, []);

  const w = wp || {};

  return (
    <LangContext.Provider value={document.body.dataset.lang || "SI"}>
      <AmbientOrb />
      <Header />
      <AboutHero
        heroImg={w.heroImg} label={w.heroLabel} sublabel={w.heroSublabel}
        h1={w.heroH1} lede={w.heroLede}
        yearsNum={w.heroYearsNum} yearsLabel={w.heroYearsLabel}
      />
      <Mission label={w.missionLabel} h2={w.missionH2} body={w.missionBody} />
      <Capabilities label={w.capsLabel} h2={w.capsH2} items={w.caps} />
      <Portrait img={w.portraitImg} name={w.portraitName} title={w.portraitTitle} quote={w.portraitQuote} />
      <Motto words={w.mottoWords} />
      <Clients h2={w.clientsH2} desc={w.clientsDesc} clientList={w.clientList} />
      <Contact />
      <Footer />
      <ContactModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </LangContext.Provider>
  );
}

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