/* ================================================================
   brezzicna-omrezja.jsx, dedicated Wi-Fi service page
   Depends on: advant.jsx (Arrow, Header, Footer, Contact,
   ContactModal, AmbientOrb, LangContext all in global scope)
   ================================================================ */

const { useState, useEffect, useRef } = React;

/* Module-level language — resolved before any component renders */
const _wl = (document.body && document.body.dataset && document.body.dataset.lang) || "SI";

/* ── Multilingual content ─────────────────────────────────────── */
const WIFI_C = {
  SI: {
    heroEyebrow: "Brezžična omrežja",
    heroH1Main: "Wi-Fi infrastruktura,",
    heroH1Em: "načrtovana z meritvami.",
    heroH1Hot: "Ne z ugibanjem.",
    heroLede: "Advant načrtuje, optimizira in preveri poslovna Wi-Fi omrežja z naprednim RF modeliranjem, meritvami na lokaciji in dokazljivimi rezultati. Brez mrtvih območij. Brez presenečenj. Brez ugibanja.",
    heroBadge: "Velja za vse renomirane proizvajalce WiFi opreme",
    heroCta: "Rezerviraj Wi-Fi oceno",
    heroStats: [["100%", "validacija pokritosti"], ["40–70%", "izboljšanje zmogljivosti"], ["0", "mrtvih con po optimizaciji"]],
    typesIdx: "VSI TIPI Wi-Fi",
    typesH2: "Pokrivamo vsa\nokolja in primere.",
    typesDesc: "Od pisarniškega do industrijskega okolja — vsako ima svoje zahteve. Advant načrtuje Wi-Fi sisteme za vse scenarije, z enakim inženirskim standardom in merljivimi rezultati.",
    types: [
      { id: "indoor", tag: "INDOOR", title: "Notranji Wi-Fi", items: ["Pisarne", "Konferenčne dvorane", "Hoteli", "Restavracije", "Trgovine", "Šole in predavalnice", "Bolnišnice in domovi za ostarele"] },
      { id: "outdoor", tag: "OUTDOOR", title: "Zunanji Wi-Fi", items: ["Parkirišča", "Terase", "Kampi", "Športna igrišča", "Mestni trgi", "Parki", "Smučišča in turistične zunanje lokacije"] },
      { id: "das", tag: "DAS", title: "Distribuiran Antenski Sistem", items: ["Podatkovni centri", "Visokoregalna in avtomatizirana skladišča z AGV/AMR roboti", "Parkirne hiše", "Logistični in distribucijski centri", "Proizvodne hale", "Zamrzovalne in EX-cone, Faradayeve kletke, silosi", "Tuneli in pristanišča"] },
    ],
    problemIdx: "PROBLEM",
    problemH2: "Nestabilen Wi-Fi ni\ntehnična nevšečnost.\nJe poslovno tveganje.",
    problemLabel: "GLAVNI VZROK / NAČRTOVANJE BREZ MERITEV",
    problemBody: "Večina Wi-Fi težav nastane, ker so omrežja načrtovana po občutku, ne po podatkih. Rezultat so mrtve cone, prekinjeni klici, slab roaming in nestabilno delovanje v trenutkih, ko mora infrastruktura delovati brezhibno.",
    problemItems: ["Video in VoIP klici se prekinjajo v ključnih trenutkih.", "Ekipe izgubljajo čas z reconnectanjem, čakanjem in prijavami napak.", "Naprave med premikanjem izgubljajo povezavo med access pointi.", "Kritične cone v pisarnah, hotelih, skladiščih ali proizvodnji ostanejo nepokrite.", "Access pointi so pogosto postavljeni po občutku, brez realnih RF meritev."],
    problemClose: "Ne ugibamo, kje bo Wi-Fi deloval.",
    problemCloseSub: "Omrežje najprej načrtujemo, nato izmerimo in na koncu dokažemo, da deluje v realnem prostoru.",
    approachIdx: "PRISTOP",
    approachH2: "Naš inženirski\npristop.",
    approachCards: [
      { num: "01", tag: "SURVEY", title: "Predictive & On-Site Surveys", body: "S pomočjo RF modeliranja in meritev na lokaciji predvidimo širjenje signala, vpliv sten, materialov in realnih pogojev v prostoru." },
      { num: "02", tag: "RF", title: "Spectrum Analysis", body: "Prepoznamo in zmanjšamo motnje, ki jih povzročajo druge naprave, radarji, mikrovalovne pečice, BLE naprave ali sosednja omrežja." },
      { num: "03", tag: "CAPACITY", title: "Capacity Planning", body: "Omrežje načrtujemo glede na število uporabnikov, naprav in obremenitev, od pisarn do skladišč, hotelov, dvoran in večjih poslovnih okolij." },
      { num: "04", tag: "ROAMING", title: "Roaming Optimization", body: "Nastavimo stabilne prehode med dostopnimi točkami, da VoIP, video klici in mobilne naprave delujejo brez prekinitev med premikanjem." },
      { num: "05", tag: "VALIDATION", title: "Validation & Compliance", body: "Po izvedbi preverimo pokritost, signal, zakasnitve, izgube paketov, roaming in zmogljivost glede na dogovorjene cilje." },
      { num: "06", tag: "REUSE", title: "Infrastructure Reuse", body: "Obstoječih AP-jev ne zamenjamo na slepo. Staro opremo preselimo v manj zahtevne cone in optimiziramo skupni ROI projekta." },
    ],
    rfIdx: "RF ENGINEERING / LIVE VALIDATION",
    rfH2: "Od načrta do\ndokazljivega rezultata.",
    rfDesc: "Vsako omrežje začnemo z RF modeliranjem prostora. Predvidimo pokritost, postavimo dostopne točke na podatkovni osnovi in validiramo rezultate po namestitvi. Kar vidite spodaj, je razlika med ugibanjem in inženiringom.",
    rfNote: "RSS Measure = meritve po namestitvi · RSS Predict = napoved pokritosti (pred izvedbo) · RSS Optimize = po optimizaciji",
    rfValidateBadge: "Validirano za poslovno uporabo",
    validIdx: "VALIDACIJA",
    validH2: "Namestitev ni\nkonec projekta.",
    validDesc: "Takrat se začne dokazovanje. Vsak Advant projekt zaključimo z validacijo v realnem okolju, preverimo, ali se načrtovano omrežje ujema z dejanskim delovanjem, in predamo poročilo z meritvami pokritosti, signalov, latenc, roaminga in zmogljivosti.",
    validPillars: [
      { num: "01", title: "Coverage Validation", body: "Vsak del prostora preverimo glede moči in kakovosti signala. Rezultati so dokumentirani in predani naročniku kot dokazilo o ustrezni pokritosti." },
      { num: "02", title: "Latency & Packet Loss Testing", body: "Preverimo stabilnost za video klice, VoIP in poslovne aplikacije. Merimo zakasnitve, jitter in izgube paketov v realnih pogojih." },
      { num: "03", title: "Roaming Performance", body: "Preverimo, ali naprave gladko prehajajo med access pointi brez prekinitev in nepotrebnih zakasnitev pri premikanju po prostoru." },
    ],
    compIdx: "PRIMERJAVA",
    compH2Before: "Razlika med ugibanjem",
    compH2After: "in inženiringom je merljiva.",
    compDesc: "Ista lokacija. Iste naprave. Popolnoma drug pristop. Spodaj so tipični rezultati pred in po Advant Wi-Fi optimizaciji.",
    compBeforeTag: "PRED",
    compBeforeSub: "Brez meritev · po občutku",
    compAfterTag: "po Advant optimizaciji",
    compAfterSub: "Z RF meritvami · validirano",
    compMetrics: [
      { label: "Signal strength", bef: "−85 dBm", aft: "−55 dBm", befW: 14, aftW: 72 },
      { label: "Packet loss", bef: "12.4%", aft: "0.0%", befW: 82, aftW: 2 },
      { label: "Dead zones", bef: "3 cone", aft: "0", befW: 65, aftW: 0 },
      { label: "Roaming", bef: "Nestabilen", aft: "Brezhibni", befW: 18, aftW: 94 },
      { label: "User experience", bef: "Nestabilno", aft: "Zanesljivo", befW: 14, aftW: 92 },
      { label: "Throughput", bef: "1×", aft: "3×", befW: 30, aftW: 96 },
    ],
    compHighlights: [["+65%", "MOČNEJŠI SIGNAL"], ["0", "MRTVIH CON"], ["3×", "VEČJA PREPUSTNOST"]],
    bizIdx: "POSLOVNA VREDNOST",
    bizH2: "Zanesljiva infrastruktura\nza ekipe, goste\nin kritične procese.",
    bizDesc: "Tehnični rezultati se prevedejo v poslovne učinke. Omrežje, ki deluje, pomeni manjše stroške, manj prekinitev in večjo produktivnost.",
    bizOutcomes: [
      ["Manj prekinitev pri delu", "Stabilna povezava za vse procese in delovne postaje, brez izpadov v kritičnih trenutkih."],
      ["Stabilni video in VoIP klici", "Omrežje je optimizirano za real-time promet z nizkimi zakasnitvami in brez izgub paketov."],
      ["Boljša izkušnja za zaposlene in goste", "Enaka kakovost za vse cone, od pisarne do hodnikov, konferenčnih sob in skupnih prostorov."],
      ["Zanesljivost pri visoki gostoti", "Capacity planning zagotavlja stabilnost pri stotinah ali tisočih hkratnih napravah."],
      ["Manj support ticketov", "Rešene temeljne težave pomenijo manj reklamacij in manj časa za odpravljanje incidentov."],
      ["Omrežje, pripravljeno na rast", "Wi-Fi 6/7 arhitektura je zasnovana z rezervo za prihodnje naprave, IoT in višje obremenitve."],
    ],
    artIdx: "VSEBINA",
    artH2: "Več o brezžičnih\nomrežjih.",
    artDesc: "Zapisi naših inženirjev o Wi-Fi projektih, meritvah in tehnoloških odločitvah. Brez marketinga, samo izkušnje s terena.",
    artReadTime: "branja",
    artMore: "Vse novice",
    artMoreHref: "/novice",
    ctaIdx: "KONTAKT",
    partnersIdx: "PARTNERJI",
    heroCoord: "[WLAN] RF Engineering",
    faqIdx: "POGOSTA VPRAŠANJA",
    faqH2: "Vprašanja & odgovori",
  },
  EN: {
    heroEyebrow: "Wireless Networks",
    heroH1Main: "Wi-Fi infrastructure,",
    heroH1Em: "engineered with measurements.",
    heroH1Hot: "Not with guesswork.",
    heroLede: "Advant designs, optimises and validates enterprise Wi-Fi networks using advanced RF modelling, on-site measurements and proven results. No dead zones. No surprises. No guessing.",
    heroBadge: "Compatible with all leading Wi-Fi equipment manufacturers",
    heroCta: "Book a Wi-Fi assessment",
    heroStats: [["100%", "coverage validated"], ["40–70%", "performance improvement"], ["0", "dead zones after optimisation"]],
    typesIdx: "ALL WI-FI TYPES",
    typesH2: "We cover every\nenvironment and use case.",
    typesDesc: "From office to industrial environments — each has its own requirements. Advant designs Wi-Fi systems for all scenarios, with the same engineering standard and measurable results.",
    types: [
      { id: "indoor", tag: "INDOOR", title: "Indoor Wi-Fi", items: ["Offices", "Conference rooms", "Hotels", "Restaurants", "Retail", "Schools and lecture halls", "Hospitals and care homes"] },
      { id: "outdoor", tag: "OUTDOOR", title: "Outdoor Wi-Fi", items: ["Car parks", "Terraces", "Campsites", "Sports grounds", "Town squares", "Parks", "Ski resorts and tourist outdoor sites"] },
      { id: "das", tag: "DAS", title: "Distributed Antenna System", items: ["Data centers", "High-bay and automated warehouses with AGV/AMR robots", "Multi-storey car parks", "Logistics and distribution centres", "Manufacturing halls", "Cold stores and EX zones, Faraday cages, silos", "Tunnels and ports"] },
    ],
    problemIdx: "PROBLEM",
    problemH2: "Unstable Wi-Fi is not\na technical inconvenience.\nIt is a business risk.",
    problemLabel: "ROOT CAUSE / DESIGN WITHOUT MEASUREMENTS",
    problemBody: "Most Wi-Fi problems arise because networks are designed by guesswork, not by data. The result is dead zones, dropped calls, poor roaming and unstable performance at the moments when infrastructure must work flawlessly.",
    problemItems: ["Video and VoIP calls drop at critical moments.", "Teams lose time reconnecting, waiting and raising tickets.", "Devices lose connection between access points while moving.", "Critical zones in offices, hotels, warehouses or production remain uncovered.", "Access points are often placed by feel, without real RF measurements."],
    problemClose: "We don't guess where Wi-Fi will work.",
    problemCloseSub: "We design the network first, then measure it, and finally prove that it works in the real space.",
    approachIdx: "APPROACH",
    approachH2: "Our engineering\napproach.",
    approachCards: [
      { num: "01", tag: "SURVEY", title: "Predictive & On-Site Surveys", body: "Using RF modelling and on-site measurements, we predict signal propagation, the effect of walls, materials and real conditions in the space." },
      { num: "02", tag: "RF", title: "Spectrum Analysis", body: "We identify and mitigate interference from other devices, radars, microwave ovens, BLE devices and neighbouring networks." },
      { num: "03", tag: "CAPACITY", title: "Capacity Planning", body: "We design the network based on the number of users, devices and load — from offices to warehouses, hotels, halls and larger business environments." },
      { num: "04", tag: "ROAMING", title: "Roaming Optimization", body: "We configure stable transitions between access points so that VoIP, video calls and mobile devices work without interruptions while moving." },
      { num: "05", tag: "VALIDATION", title: "Validation & Compliance", body: "After installation, we verify coverage, signal, latency, packet loss, roaming and performance against the agreed targets." },
      { num: "06", tag: "REUSE", title: "Infrastructure Reuse", body: "We don't replace existing APs blindly. Old equipment is relocated to less demanding zones, optimising the project's total ROI." },
    ],
    rfIdx: "RF ENGINEERING / LIVE VALIDATION",
    rfH2: "From design to\nproven results.",
    rfDesc: "Every network starts with RF modelling of the space. We predict coverage, place access points on a data basis and validate results after installation. What you see below is the difference between guesswork and engineering.",
    rfNote: "RSS Measure = post-installation measurements · RSS Predict = coverage prediction (before installation) · RSS Optimize = after optimisation",
    rfValidateBadge: "Validated for business use",
    validIdx: "VALIDATION",
    validH2: "Installation is not\nthe end of the project.",
    validDesc: "That is when the proof begins. Every Advant project concludes with real-environment validation — we verify that the designed network matches actual performance and deliver a report with measurements of coverage, signals, latency, roaming and throughput.",
    validPillars: [
      { num: "01", title: "Coverage Validation", body: "Every part of the space is tested for signal strength and quality. Results are documented and delivered to the client as proof of adequate coverage." },
      { num: "02", title: "Latency & Packet Loss Testing", body: "We verify stability for video calls, VoIP and business applications. We measure latency, jitter and packet loss under real conditions." },
      { num: "03", title: "Roaming Performance", body: "We verify that devices transition smoothly between access points without interruptions or unnecessary delays while moving through the space." },
    ],
    compIdx: "COMPARISON",
    compH2Before: "The difference between guesswork",
    compH2After: "and engineering is measurable.",
    compDesc: "Same location. Same devices. Completely different approach. Below are typical results before and after Advant Wi-Fi optimisation.",
    compBeforeTag: "BEFORE",
    compBeforeSub: "Without measurements · by feel",
    compAfterTag: "after Advant optimisation",
    compAfterSub: "With RF measurements · validated",
    compMetrics: [
      { label: "Signal strength", bef: "−85 dBm", aft: "−55 dBm", befW: 14, aftW: 72 },
      { label: "Packet loss", bef: "12.4%", aft: "0.0%", befW: 82, aftW: 2 },
      { label: "Dead zones", bef: "3 zones", aft: "0", befW: 65, aftW: 0 },
      { label: "Roaming", bef: "Unstable", aft: "Seamless", befW: 18, aftW: 94 },
      { label: "User experience", bef: "Unreliable", aft: "Reliable", befW: 14, aftW: 92 },
      { label: "Throughput", bef: "1×", aft: "3×", befW: 30, aftW: 96 },
    ],
    compHighlights: [["+65%", "STRONGER SIGNAL"], ["0", "DEAD ZONES"], ["3×", "MORE THROUGHPUT"]],
    bizIdx: "BUSINESS VALUE",
    bizH2: "Reliable infrastructure\nfor teams, guests\nand critical processes.",
    bizDesc: "Technical results translate into business outcomes. A network that works means lower costs, fewer interruptions and higher productivity.",
    bizOutcomes: [
      ["Fewer work interruptions", "Stable connection for all processes and workstations, without outages at critical moments."],
      ["Stable video and VoIP calls", "The network is optimised for real-time traffic with low latency and no packet loss."],
      ["Better experience for staff and guests", "Equal quality throughout — from offices to corridors, conference rooms and common areas."],
      ["Reliability at high density", "Capacity planning ensures stability with hundreds or thousands of simultaneous devices."],
      ["Fewer support tickets", "Resolved root causes mean fewer complaints and less time spent on incidents."],
      ["Network ready for growth", "Wi-Fi 6/7 architecture is designed with headroom for future devices, IoT and higher loads."],
    ],
    artIdx: "ARTICLES",
    artH2: "More about wireless\nnetworks.",
    artDesc: "Insights from our engineers on Wi-Fi projects, measurements and technology decisions. No marketing — just field experience.",
    artReadTime: "read",
    artMore: "All articles",
    artMoreHref: "/en/news",
    ctaIdx: "CONTACT",
    partnersIdx: "PARTNERS",
    heroCoord: "[WLAN] RF Engineering",
    faqIdx: "FAQ",
    faqH2: "Questions & answers",
  },
  DE: {
    heroEyebrow: "Drahtlose Netzwerke",
    heroH1Main: "WLAN-Infrastruktur,",
    heroH1Em: "geplant mit Messungen.",
    heroH1Hot: "Nicht mit Raten.",
    heroLede: "Advant plant, optimiert und validiert Business-WLAN-Netzwerke mit fortschrittlichem HF-Modelling, Vor-Ort-Messungen und nachweisbaren Ergebnissen. Keine toten Zonen. Keine Überraschungen. Kein Raten.",
    heroBadge: "Kompatibel mit allen führenden WLAN-Geräteherstellern",
    heroCta: "WLAN-Bewertung buchen",
    heroStats: [["100%", "Abdeckung validiert"], ["40–70%", "Leistungsverbesserung"], ["0", "tote Zonen nach Optimierung"]],
    typesIdx: "ALLE WLAN-TYPEN",
    typesH2: "Wir decken jede\nUmgebung und jeden Anwendungsfall ab.",
    typesDesc: "Von Büro bis Industrieumgebung — jede hat eigene Anforderungen. Advant plant WLAN-Systeme für alle Szenarien, mit demselben Engineering-Standard und messbaren Ergebnissen.",
    types: [
      { id: "indoor", tag: "INDOOR", title: "Innen-WLAN", items: ["Büros", "Konferenzräume", "Hotels", "Restaurants", "Einzelhandel", "Schulen und Hörsäle", "Krankenhäuser und Pflegeheime"] },
      { id: "outdoor", tag: "OUTDOOR", title: "Außen-WLAN", items: ["Parkplätze", "Terrassen", "Campingplätze", "Sportanlagen", "Stadtplätze", "Parks", "Skigebiete und touristische Außenstandorte"] },
      { id: "das", tag: "DAS", title: "Verteiltes Antennensystem", items: ["Rechenzentren", "Hochregallager und automatisierte Lager mit AGV/AMR-Robotern", "Parkhäuser", "Logistik- und Verteilzentren", "Produktionshallen", "Kühlhäuser und EX-Zonen, Faradaykäfige, Silos", "Tunnel und Häfen"] },
    ],
    problemIdx: "PROBLEM",
    problemH2: "Instabiles WLAN ist keine\ntechnische Unannehmlichkeit.\nEs ist ein Geschäftsrisiko.",
    problemLabel: "GRUNDURSACHE / PLANUNG OHNE MESSUNGEN",
    problemBody: "Die meisten WLAN-Probleme entstehen, weil Netzwerke nach Gefühl und nicht nach Daten geplant werden. Das Ergebnis sind tote Zonen, abgebrochene Anrufe, schlechtes Roaming und instabiler Betrieb genau dann, wenn die Infrastruktur einwandfrei funktionieren muss.",
    problemItems: ["Video- und VoIP-Anrufe brechen in kritischen Momenten ab.", "Teams verlieren Zeit durch Reconnecting, Warten und Ticketmeldungen.", "Geräte verlieren beim Bewegen die Verbindung zwischen Access Points.", "Kritische Zonen in Büros, Hotels, Lagern oder der Produktion bleiben unversorgt.", "Access Points werden oft nach Gefühl platziert, ohne echte HF-Messungen."],
    problemClose: "Wir raten nicht, wo WLAN funktionieren wird.",
    problemCloseSub: "Wir planen das Netzwerk zuerst, messen es dann und beweisen schließlich, dass es im realen Raum funktioniert.",
    approachIdx: "ANSATZ",
    approachH2: "Unser Engineering-\nAnsatz.",
    approachCards: [
      { num: "01", tag: "SURVEY", title: "Prädiktive & On-Site-Surveys", body: "Mit HF-Modellierung und Vor-Ort-Messungen sagen wir die Signalausbreitung, den Einfluss von Wänden, Materialien und realen Raumverhältnissen vorher." },
      { num: "02", tag: "RF", title: "Spektrumanalyse", body: "Wir identifizieren und reduzieren Störungen durch andere Geräte, Radare, Mikrowellen, BLE-Geräte oder Nachbarnetzwerke." },
      { num: "03", tag: "CAPACITY", title: "Kapazitätsplanung", body: "Wir planen das Netzwerk nach Anzahl der Nutzer, Geräte und Last — von Büros bis Lagerhäuser, Hotels, Hallen und größere Geschäftsumgebungen." },
      { num: "04", tag: "ROAMING", title: "Roaming-Optimierung", body: "Wir konfigurieren stabile Übergänge zwischen Access Points, damit VoIP, Videoanrufe und mobile Geräte beim Bewegen ohne Unterbrechungen funktionieren." },
      { num: "05", tag: "VALIDATION", title: "Validierung & Compliance", body: "Nach der Installation überprüfen wir Abdeckung, Signal, Latenz, Paketverluste, Roaming und Leistung gegenüber den vereinbarten Zielen." },
      { num: "06", tag: "REUSE", title: "Infrastruktur-Wiederverwendung", body: "Wir tauschen vorhandene APs nicht blindlings aus. Alte Geräte werden in weniger anspruchsvolle Zonen verlegt und der Gesamt-ROI optimiert." },
    ],
    rfIdx: "HF-ENGINEERING / LIVE-VALIDIERUNG",
    rfH2: "Vom Entwurf zum\nnachweisbaren Ergebnis.",
    rfDesc: "Jedes Netzwerk beginnt mit der HF-Modellierung des Raums. Wir sagen die Abdeckung vorher, platzieren Access Points auf Datenbasis und validieren die Ergebnisse nach der Installation. Was Sie unten sehen, ist der Unterschied zwischen Raten und Engineering.",
    rfNote: "RSS Measure = Messungen nach Installation · RSS Predict = Abdeckungsvorhersage (vor Installation) · RSS Optimize = nach Optimierung",
    rfValidateBadge: "Für den Geschäftseinsatz validiert",
    validIdx: "VALIDIERUNG",
    validH2: "Die Installation ist nicht\ndas Ende des Projekts.",
    validDesc: "Dann beginnt der Beweis. Jedes Advant-Projekt endet mit einer Validierung in realer Umgebung — wir überprüfen, ob das geplante Netzwerk der tatsächlichen Leistung entspricht, und übergeben einen Bericht mit Messungen zu Abdeckung, Signalen, Latenzen, Roaming und Durchsatz.",
    validPillars: [
      { num: "01", title: "Abdeckungsvalidierung", body: "Jeder Teil des Raums wird auf Signalstärke und -qualität geprüft. Ergebnisse werden dokumentiert und dem Kunden als Nachweis ausreichender Abdeckung übergeben." },
      { num: "02", title: "Latenz- & Pakettestung", body: "Wir prüfen die Stabilität für Videoanrufe, VoIP und Geschäftsanwendungen. Wir messen Latenzen, Jitter und Paketverluste unter realen Bedingungen." },
      { num: "03", title: "Roaming-Leistung", body: "Wir überprüfen, ob Geräte beim Bewegen im Raum nahtlos zwischen Access Points wechseln — ohne Unterbrechungen und unnötige Verzögerungen." },
    ],
    compIdx: "VERGLEICH",
    compH2Before: "Der Unterschied zwischen Raten",
    compH2After: "und Engineering ist messbar.",
    compDesc: "Gleicher Standort. Gleiche Geräte. Völlig anderer Ansatz. Unten sind typische Ergebnisse vor und nach der Advant-WLAN-Optimierung.",
    compBeforeTag: "VORHER",
    compBeforeSub: "Ohne Messungen · nach Gefühl",
    compAfterTag: "nach Advant-Optimierung",
    compAfterSub: "Mit HF-Messungen · validiert",
    compMetrics: [
      { label: "Signalstärke", bef: "−85 dBm", aft: "−55 dBm", befW: 14, aftW: 72 },
      { label: "Paketverlust", bef: "12,4%", aft: "0,0%", befW: 82, aftW: 2 },
      { label: "Tote Zonen", bef: "3 Zonen", aft: "0", befW: 65, aftW: 0 },
      { label: "Roaming", bef: "Instabil", aft: "Nahtlos", befW: 18, aftW: 94 },
      { label: "Nutzererlebnis", bef: "Unzuverlässig", aft: "Zuverlässig", befW: 14, aftW: 92 },
      { label: "Durchsatz", bef: "1×", aft: "3×", befW: 30, aftW: 96 },
    ],
    compHighlights: [["+65%", "STÄRKERES SIGNAL"], ["0", "TOTE ZONEN"], ["3×", "MEHR DURCHSATZ"]],
    bizIdx: "GESCHÄFTSWERT",
    bizH2: "Zuverlässige Infrastruktur\nfür Teams, Gäste\nund kritische Prozesse.",
    bizDesc: "Technische Ergebnisse übersetzen sich in geschäftliche Resultate. Ein Netzwerk das funktioniert bedeutet niedrigere Kosten, weniger Unterbrechungen und höhere Produktivität.",
    bizOutcomes: [
      ["Weniger Arbeitsunterbrechungen", "Stabile Verbindung für alle Prozesse und Arbeitsstationen, ohne Ausfälle in kritischen Momenten."],
      ["Stabile Video- und VoIP-Anrufe", "Das Netzwerk ist für Echtzeit-Datenverkehr mit niedriger Latenz und ohne Paketverluste optimiert."],
      ["Bessere Erfahrung für Mitarbeiter und Gäste", "Gleiche Qualität überall — von Büros bis Flure, Konferenzräume und Gemeinschaftsbereiche."],
      ["Zuverlässigkeit bei hoher Dichte", "Kapazitätsplanung gewährleistet Stabilität bei Hunderten oder Tausenden gleichzeitiger Geräte."],
      ["Weniger Support-Tickets", "Behobene Grundursachen bedeuten weniger Reklamationen und weniger Zeit für Incident-Bearbeitung."],
      ["Netzwerk bereit für Wachstum", "Wi-Fi 6/7-Architektur ist mit Reserve für zukünftige Geräte, IoT und höhere Lasten ausgelegt."],
    ],
    artIdx: "ARTIKEL",
    artH2: "Mehr über drahtlose\nNetzwerke.",
    artDesc: "Einblicke unserer Ingenieure zu WLAN-Projekten, Messungen und Technologieentscheidungen. Kein Marketing — nur Erfahrungen aus der Praxis.",
    artReadTime: "Lesezeit",
    artMore: "Alle Artikel",
    artMoreHref: "/de/neuigkeiten",
    ctaIdx: "KONTAKT",
    partnersIdx: "PARTNER",
    heroCoord: "[WLAN] RF Engineering",
    faqIdx: "FAQ",
    faqH2: "Fragen & Antworten",
  },
};

/* ── Shared content object — fallback content, mutated in-place with WP data
   (WifiApp re-renders once WP options resolve). All components read `WC`. ── */
const WC = Object.assign({}, WIFI_C[_wl] || WIFI_C.SI);

/* Apply WP WiFi options onto WC (only non-empty values override fallback). */
function applyWifiWP(wf) {
  const { gs, rep, decode } = window.AdvantWP || {};
  if (!gs) return;
  const l = (_wl || "SI").toLowerCase();
  const D = (v) => (v && decode ? decode(v) : v);
  const txt = (name) => { const v = gs(wf, `wf_${name}_${l}`); return v ? D(v) : ""; };
  const set = (key, val) => { if (val != null && val !== "") WC[key] = val; };
  const rows = (name) => rep(wf, `wf_${l}_${name}`);

  /* ── Hero ── */
  set("heroEyebrow", txt("hero_eyebrow"));
  set("heroCoord",   txt("hero_coord"));
  set("heroH1Main",  txt("hero_h1_main"));
  set("heroH1Em",    txt("hero_h1_em"));
  set("heroH1Hot",   txt("hero_h1_hot"));
  set("heroLede",    txt("hero_lede"));
  set("heroBadge",   txt("hero_badge"));
  set("heroCta",     txt("hero_cta"));
  const hs = rows("hero_stats").map((r) => [D(gs(r, "num")), D(gs(r, "label"))]).filter((s) => s[0]);
  if (hs.length) WC.heroStats = hs;

  /* ── Tipi Wi-Fi ── */
  set("typesIdx",  txt("types_idx"));
  set("typesH2",   txt("types_h2"));
  set("typesDesc", txt("types_desc"));
  const tcards = rows("types").map((r, i) => {
    const base = (WC.types && WC.types[i]) || {};
    const itemsRaw = D(gs(r, "items"));
    return {
      id: base.id || `t${i}`,
      tag: D(gs(r, "tag")) || base.tag || "",
      title: D(gs(r, "title")) || base.title || "",
      items: itemsRaw ? itemsRaw.split("\n").map((s) => s.trim()).filter(Boolean) : (base.items || []),
    };
  });
  if (tcards.length) WC.types = tcards;

  /* ── Problem ── */
  set("problemIdx",      txt("prob_idx"));
  set("problemH2",       txt("prob_h2"));
  set("problemLabel",    txt("prob_label"));
  set("problemBody",     txt("prob_body"));
  set("problemClose",    txt("prob_close"));
  set("problemCloseSub", txt("prob_close_sub"));
  const pitems = rows("prob_items").map((r) => D(gs(r, "text"))).filter(Boolean);
  if (pitems.length) WC.problemItems = pitems;

  /* ── Pristop ── */
  set("approachIdx", txt("appr_idx"));
  set("approachH2",  txt("appr_h2"));
  const acards = rows("approach").map((r) => ({
    num: D(gs(r, "num")), tag: D(gs(r, "tag")), title: D(gs(r, "title")), body: D(gs(r, "body")),
  })).filter((c) => c.title);
  if (acards.length) WC.approachCards = acards;

  /* ── RF dashboard (samo naslovi) ── */
  set("rfIdx",          txt("rf_idx"));
  set("rfH2",           txt("rf_h2"));
  set("rfDesc",         txt("rf_desc"));
  set("rfNote",         txt("rf_note"));
  set("rfValidateBadge",txt("rf_validate"));

  /* ── Validacija ── */
  set("validIdx",  txt("valid_idx"));
  set("validH2",   txt("valid_h2"));
  set("validDesc", txt("valid_desc"));
  const pillars = rows("pillars").map((r) => ({
    num: D(gs(r, "num")), title: D(gs(r, "title")), body: D(gs(r, "body")),
  })).filter((p) => p.title);
  if (pillars.length) WC.validPillars = pillars;

  /* ── Primerjava ── */
  set("compIdx",       txt("comp_idx"));
  set("compH2Before",  txt("comp_h2_before"));
  set("compH2After",   txt("comp_h2_after"));
  set("compDesc",      txt("comp_desc"));
  set("compBeforeTag", txt("comp_bef_tag"));
  set("compBeforeSub", txt("comp_bef_sub"));
  set("compAfterTag",  txt("comp_aft_tag"));
  set("compAfterSub",  txt("comp_aft_sub"));
  const metrics = rows("comp_metrics").map((r) => ({
    label: D(gs(r, "label")), bef: D(gs(r, "bef")), aft: D(gs(r, "aft")),
    befW: Number(gs(r, "befw")) || 0, aftW: Number(gs(r, "aftw")) || 0,
  })).filter((m) => m.label);
  if (metrics.length) WC.compMetrics = metrics;
  const highs = rows("comp_highlights").map((r) => [D(gs(r, "num")), D(gs(r, "label"))]).filter((h) => h[0]);
  if (highs.length) WC.compHighlights = highs;

  /* ── Poslovna vrednost ── */
  set("bizIdx",  txt("biz_idx"));
  set("bizH2",   txt("biz_h2"));
  set("bizDesc", txt("biz_desc"));
  const outcomes = rows("outcomes").map((r) => [D(gs(r, "title")), D(gs(r, "body"))]).filter((o) => o[0]);
  if (outcomes.length) WC.bizOutcomes = outcomes;

  /* ── Članki (samo naslovi) ── */
  set("artIdx",      txt("art_idx"));
  set("artH2",       txt("art_h2"));
  set("artDesc",     txt("art_desc"));
  set("artReadTime", txt("art_readtime"));
  set("artMore",     txt("art_more"));

  /* ── FAQ (samo naslovi) ── */
  set("faqIdx", txt("faq_idx"));
  set("faqH2",  txt("faq_h2"));
}

/* ── Reveal helper ─────────────────────────────────────────── */
function useReveal(threshold = 0.07) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const go = () => {setVis(true);obs.disconnect();clearTimeout(fb);};
    const obs = new IntersectionObserver(
      (es) => {es.forEach((e) => {if (e.isIntersecting) go();});},
      { threshold }
    );
    obs.observe(el);
    const fb = setTimeout(() => {
      if (el.getBoundingClientRect().top < window.innerHeight + 240) go();
    }, 450);
    return () => {obs.disconnect();clearTimeout(fb);};
  }, []);
  return [ref, vis];
}

/* ══ 1. HERO ══════════════════════════════════════════════════ */
function WifiHero() {
  const C = WC;
  const displayStats = C.heroStats || [];
  return (
    <section className="wh">
      <div className="wh__bg" />
      <div className="wh__scrim" />
      <div className="container">
        <div className="wh__inner">
          <div className="wh__eyebrow">
            <span>{C.heroEyebrow}</span>
            <span className="wh__eyebrow-sep" />
            <span className="wh__coord">{C.heroCoord}</span>
          </div>
          <h1 className="wh__h1">
            <span className="wh__h1-main">{C.heroH1Main}</span>
            <span className="wh__h1-em">{C.heroH1Em}</span>
            <span className="wh__h1-hot">{C.heroH1Hot}</span>
          </h1>
          <p className="wh__lede">
            {C.heroLede}
          </p>
          <div className="wh__badge">{C.heroBadge}</div>
          <div className="wh__stats">
            {displayStats.map(([n, l]) =>
              <div className="wh__stat" key={n}>
                <div className="wh__stat-n">{n}</div>
                <div className="wh__stat-l">{l}</div>
              </div>
            )}
            <a href="#contact" className="wh__stats-cta btn btn--primary"
              onClick={(e) => { e.preventDefault(); window.__openContactModal && window.__openContactModal(); }}>
              {C.heroCta} <Arrow size={13} className="arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ══ 1.5 WIFI TYPES ═══════════════════════════════════════════ */
function WifiTypes() {
  const C = WC;
  const typeImgs = { indoor: "/images/wifi/densed-office.jpg", outdoor: "/images/wifi/outdoor-business.jpg", das: "/images/wifi/das-kolaz.jpg" };
  const types = C.types.map(t => ({ ...t, img: typeImgs[t.id] }));

  return (
    <section className="wtp">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">00</span><span>{C.typesIdx}</span></div>
            <h2>{C.typesH2.split("\n").map((l, i) => <React.Fragment key={i}>{l}{i < C.typesH2.split("\n").length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">
            {C.typesDesc}
          </div>
        </div>
        <div className="wtp__grid">
          {types.map((t) => (
            <div key={t.id} className="wtp__card">
              <div className="wtp__media">
                <img src={t.img} alt={t.title} loading="lazy" />
              </div>
              <div className="wtp__body">
                <div className="wtp__tag">{t.tag}</div>
                <div className="wtp__title">{t.title}</div>
                <ul className="wtp__list">
                  {t.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ══ 2. PROBLEM ═══════════════════════════════════════════════ */
function WifiProblem() {
  const [ref, vis] = useReveal();
  const C = WC;

  return (
    <section className="wp" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">01</span><span>{C.problemIdx}</span></div>
            <h2>{C.problemH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">
            <div className="wp__right-label">{C.problemLabel}</div>
            <p className="wp__right-body">{C.problemBody}</p>
          </div>
        </div>
        <div className={"wp__grid" + (vis ? " sr-ready" : "")}>
          <div>
            <div className="wp__list">
              {C.problemItems.map((it, i) =>
              <div className="wp__item sr-item" key={i} style={{ "--d": i }}>
                  <span>{it}</span>
                </div>
              )}
            </div>
          </div>
          <div className="sr-item" style={{ "--d": 5 }}>
            <div className="wp__close">
              <strong>{C.problemClose}</strong><br />
              {C.problemCloseSub}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ══ 3. ENGINEERING APPROACH ══════════════════════════════════ */
function WifiApproach() {
  const [ref, vis] = useReveal();
  const C = WC;
  const cards = C.approachCards;

  return (
    <section className="wa" id="approach" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">02</span><span>{C.approachIdx}</span></div>
            <h2>{C.approachH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">


          </div>
        </div>
        <div className={"wa__grid" + (vis ? " sr-ready" : "")}>
          {cards.map((c, i) =>
          <div className={"wa__card sr-item"} key={c.num} style={{ "--d": i }}>
              <div className="wa__card-top">
                <span className="wa__card-num">{c.num}</span>
                <span className="wa__card-tag">{c.tag}</span>
              </div>
              <div className="wa__card-title">{c.title}</div>
              <div className="wa__card-body">{c.body}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ══ 4. RF ENGINEERING DASHBOARD ══════════════════════════════ */

/* Shared 3-column panel (reused by both variants) */
function RFPanel({ s, barVis, fadeIn }) {
  return (
    <div className={"wrf__panel" + (fadeIn ? " is-fading" : "")}>
      <div className="wrf__panel-head">
        <span>Signal analysis</span>
        <span className="live">Live</span>
      </div>
      <div className="wrf__panel-col">
        <div className="wrf__section-lbl">{_wl==="EN"?"Measurements":_wl==="DE"?"Messungen":"Meritve"}</div>
        {s.metrics.map(([k, v, cls]) =>
        <div className="wrf__row" key={k}>
          <span className="wrf__row-k">{k}</span>
          <span className={`wrf__row-v ${cls}`}>{v}</span>
        </div>
        )}
      </div>
      <div className="wrf__panel-col">
        <div className="wrf__section-lbl">{_wl==="EN"?"Performance":_wl==="DE"?"Leistung":"Zmogljivost"}</div>
        {s.perf.map(([k, v, cls]) =>
        <div className="wrf__row" key={k}>
          <span className="wrf__row-k">{k}</span>
          <span className={`wrf__row-v ${cls}`}>{v}</span>
        </div>
        )}
      </div>
      <div className="wrf__panel-col">
        <div className="wrf__section-lbl">{_wl==="EN"?"Implementation":_wl==="DE"?"Implementierung":"Izvedba"}</div>
        {s.bars.map((b) =>
        <div className="wrf__bar-row" key={b.label}>
          <div className="wrf__bar-head"><span>{b.label}</span><span>{b.val}</span></div>
          <div className="wrf__bar-track">
            <div className={"wrf__bar-fill" + (barVis ? " is-visible" : "")} style={{ "--w": `${b.w}%` }} />
          </div>
        </div>
        )}
        {s.showValidationBadge &&
          <div className="wrf__panel-validate">
            <span className="wrf__panel-validate-check">✓</span>
            {WC.rfValidateBadge}
          </div>
        }
      </div>
    </div>);
}

/* ── Varianta A: Realne Ekahau slike ─────────────────────────── */
function RFCanvasImages({ barVis, activeTab, setActiveTab }) {
  const tabList = ["RSS · Measure", "RSS · Predict", "RSS · Optimize"];
  const tabKeys = ["measure", "predict", "optimize"];

  const tabModes = {
    measure:  "POST-DEPLOYMENT · RSS (Real Site Survey)",
    predict:  "PRE-DEPLOYMENT · RSS Predictive Model",
    optimize: "AFTER OPTIMISATION · RSS Final (validirano)"
  };

  const images = {
    predict: "/images/wifi/pss.jpg",
    measure: "/images/wifi/rss-initial.jpg",
    optimize: "/images/wifi/rss-final.jpg"
  };

  const stateData = {
    predict: {
      badge: "PSS · Predictive Model",
      metrics: [
        ["Simulated (predictive)", "−45 dBm", "warn"],
        ["Actual (measured)", "—", "dim"],
        ["Variance", "—", "dim"],
        ["Interference level", "Predicted: Low", "good"],
      ],
      perf: [
        ["Throughput (predicted)", "1.2 Gbps", "good"],
        ["Packet loss (est.)", "< 0.1%", "good"],
        ["Latency (est.)", "< 5 ms", "good"],
        ["Dead zones (predicted)", "0", "good"],
      ],
      bars: [
        { label: "AP placement optimized", val: "98%", w: 98 },
        { label: "Coverage validation", val: "—", w: 0 },
        { label: "Interference mitigation", val: "—", w: 0 },
      ],
      showValidationBadge: false,
    },
    measure: {
      badge: "RSS · Live Measurement",
      metrics: [
        ["Simulated (predictive)", "—", "dim"],
        ["Actual (measured)", "−52 do −85 dBm", "good"],
        ["Variance", "—", "dim"],
        ["Interference level", "Medium to High", "bad"],
      ],
      perf: [
        ["Throughput peak", "0.05 to 0.2 Gbps", "bad"],
        ["Packet loss", "< 5.8%", "bad"],
        ["Latency", "12 ms", "warn"],
        ["Dead zones", "2", "bad"],
      ],
      bars: [
        { label: "AP placement optimized", val: "50%", w: 50 },
        { label: "Coverage validation", val: "70%", w: 70 },
        { label: "Interference mitigation", val: "60%", w: 60 },
      ],
      showValidationBadge: false,
    },
    optimize: {
      badge: "RSS Final · Optimization Complete",
      metrics: [
        ["Simulated (predictive)", "−45 dBm", "warn"],
        ["Actual (optimized)", "−46 dBm", "good"],
        ["Variance", "−1 dBm", "good"],
        ["Interference level", "Low", "good"],
      ],
      perf: [
        ["Throughput peak", "1.2 Gbps", "good"],
        ["Packet loss", "0.0%", "good"],
        ["Latency", "< 5 ms", "good"],
        ["Dead zones", "0", "good"],
      ],
      bars: [
        { label: "AP placement optimized", val: "98%", w: 98 },
        { label: "Coverage validation", val: "100%", w: 100 },
        { label: "Interference mitigation", val: "94%", w: 94 },
      ],
      showValidationBadge: true,
    },
  };

  const s = stateData[activeTab] || stateData.predict;

  const [fadeIn, setFadeIn] = useState(false);
  const hasMounted = useRef(false);
  useEffect(() => {
    if (!hasMounted.current) { hasMounted.current = true; return; }
    setFadeIn(true);
    const t = setTimeout(() => setFadeIn(false), 300);
    return () => clearTimeout(t);
  }, [activeTab]);

  return (
    <div className="wrf__inner">
      <div className="wrf__tabs">
        <div className="wrf__tabs-list">
          {tabList.map((tab, i) =>
          <button
            key={tab}
            className={"wrf__tab" + (activeTab === tabKeys[i] ? " is-active" : "")}
            onClick={() => setActiveTab(tabKeys[i])}>
            {tab}
          </button>
          )}
        </div>
        <div className="wrf__tabs-mode">{tabModes[activeTab]}</div>
      </div>
      <div className={"wrf__canvas wrf__canvas--img" + (fadeIn ? " is-fading" : "")}>
        <img key={activeTab} src={images[activeTab]} alt={s.badge} className="wrf__floorplan-img" />
        <div className="wrf__canvas-badge">{s.badge}</div>
        <div className="wrf__canvas-foot">{tabModes[activeTab]}</div>
      </div>
      <RFPanel s={s} barVis={barVis} fadeIn={fadeIn} />
    </div>);
}

/* ── Varianta B: Kod-based dashboard ─────────────────────────── */
function RFCanvas({ barVis, activeTab, setActiveTab }) {
  /* Ekahau-style gradient: bright green → yellow-green → yellow → transparent */
  const ZG1 = "radial-gradient(ellipse, rgba(34,197,94,0.78) 0%, rgba(74,222,128,0.52) 18%, rgba(163,230,53,0.28) 42%, rgba(250,204,21,0.10) 62%, transparent 80%)";
  const ZG2 = "radial-gradient(ellipse, rgba(34,197,94,0.60) 0%, rgba(74,222,128,0.38) 18%, rgba(163,230,53,0.20) 42%, rgba(250,204,21,0.07) 62%, transparent 78%)";
  const ZG3 = "radial-gradient(ellipse, rgba(34,197,94,0.90) 0%, rgba(74,222,128,0.62) 18%, rgba(163,230,53,0.35) 42%, rgba(250,204,21,0.14) 62%, transparent 80%)";

  /* State-dependent AP positions — Measure = 2 APs right side only (like RSS initial) */
  const apsByState = {
    predict:  [{ id:"AP-01",x:12,y:27},{ id:"AP-02",x:47,y:25},{ id:"AP-03",x:12,y:74},{ id:"AP-04",x:84,y:73}],
    measure:  [{ id:"AP-06",x:47,y:40},{ id:"AP-11",x:84,y:40}],
    optimize: [{ id:"AP-01",x:12,y:27},{ id:"AP-02",x:47,y:25},{ id:"AP-03",x:12,y:74},{ id:"AP-04",x:84,y:73}],
  };

  /* Large overlapping zones — cover full floor in predict/optimize, right-half in measure */
  const zonesByState = {
    predict:  [{x:12,y:27,rx:62,ry:145},{x:47,y:25,rx:66,ry:140},{x:12,y:74,rx:62,ry:140},{x:84,y:73,rx:52,ry:140}],
    measure:  [{x:47,y:40,rx:64,ry:145},{x:84,y:40,rx:52,ry:140}],
    optimize: [{x:12,y:27,rx:66,ry:150},{x:47,y:25,rx:70,ry:145},{x:12,y:74,rx:66,ry:145},{x:84,y:73,rx:54,ry:145}],
  };

  const stateData = {
    predict: {
      badge: "PSS · Predictive Model", foot: "PRE-DEPLOYMENT · PSS (Predictive Site Survey)",
      showDeadCover: false, zoneBg: ZG1,
      rssi: [
        {x:"7%", y:"10%",val:"−44 dBm",bad:false,sim:true},
        {x:"42%",y:"10%",val:"−47 dBm",bad:false,sim:true},
        {x:"7%", y:"62%",val:"−45 dBm",bad:false,sim:true},
        {x:"79%",y:"62%",val:"−48 dBm",bad:false,sim:true},
      ],
      metrics: [["Simulated (predictive)","−45 dBm","warn"],["Actual (measured)","—","dim"],["Variance","—","dim"],["Interference level","Predicted: Low","good"]],
      perf:    [["Throughput (predicted)","1.2 Gbps","good"],["Packet loss (est.)","< 0.1%","good"],["Latency (est.)","< 5 ms","good"],["Dead zones (predicted)","0","good"]],
      bars:    [{label:"AP placement optimized",val:"98%",w:98},{label:"Coverage validation",val:"—",w:0},{label:"Interference mitigation",val:"—",w:0}],
      showValidationBadge: false,
    },
    measure: {
      badge: "RSS · Live Measurement", foot: "POST-DEPLOYMENT · RSS (Real Site Survey)",
      showDeadCover: true, zoneBg: ZG2,
      rssi: [
        {x:"42%",y:"28%",val:"−48 dBm",bad:false,sim:false},
        {x:"79%",y:"28%",val:"−51 dBm",bad:false,sim:false},
        {x:"10%",y:"46%",val:"−84 dBm",bad:true, sim:false},
      ],
      metrics: [["Simulated (predictive)","—","dim"],["Actual (measured)","−52 do −85 dBm","good"],["Variance","—","dim"],["Interference level","Medium to High","bad"]],
      perf:    [["Throughput peak","0.05 to 0.2 Gbps","bad"],["Packet loss","< 5.8%","bad"],["Latency","12 ms","warn"],["Dead zones","2","bad"]],
      bars:    [{label:"AP placement optimized",val:"50%",w:50},{label:"Coverage validation",val:"70%",w:70},{label:"Interference mitigation",val:"60%",w:60}],
      showValidationBadge: false,
    },
    optimize: {
      badge: "RSS Final · Optimization Complete", foot: "AFTER OPTIMISATION · RSS Final (validirano)",
      showDeadCover: false, zoneBg: ZG3,
      rssi: [
        {x:"7%", y:"10%",val:"−44 dBm",bad:false,sim:false},
        {x:"42%",y:"10%",val:"−46 dBm",bad:false,sim:false},
        {x:"7%", y:"62%",val:"−45 dBm",bad:false,sim:false},
        {x:"79%",y:"62%",val:"−47 dBm",bad:false,sim:false},
      ],
      metrics: [["Simulated (predictive)","−45 dBm","warn"],["Actual (optimized)","−46 dBm","good"],["Variance","−1 dBm","good"],["Interference level","Low","good"]],
      perf:    [["Throughput peak","1.2 Gbps","good"],["Packet loss","0.0%","good"],["Latency","< 5 ms","good"],["Dead zones","0","good"]],
      bars:    [{label:"AP placement optimized",val:"98%",w:98},{label:"Coverage validation",val:"100%",w:100},{label:"Interference mitigation",val:"94%",w:94}],
      showValidationBadge: true,
    },
  };

  const s     = stateData[activeTab]   || stateData.predict;
  const aps   = apsByState[activeTab]  || apsByState.predict;
  const zones = zonesByState[activeTab]|| zonesByState.predict;

  const tabList = ["RSS · Measure", "RSS · Predict", "RSS · Optimize"];
  const tabKeys = ["measure", "predict", "optimize"];
  const tabModes = {
    measure:  "POST-DEPLOYMENT · RSS (Real Site Survey)",
    predict:  "PRE-DEPLOYMENT · RSS Predictive Model",
    optimize: "AFTER OPTIMISATION · RSS Final (validirano)"
  };

  const [fadeIn, setFadeIn] = useState(false);
  const hasMounted = useRef(false);
  useEffect(() => {
    if (!hasMounted.current) { hasMounted.current = true; return; }
    setFadeIn(true);
    const t = setTimeout(() => setFadeIn(false), 300);
    return () => clearTimeout(t);
  }, [activeTab]);

  return (
    <div className="wrf__inner">
      <div className="wrf__tabs">
        <div className="wrf__tabs-list">
          {tabList.map((tab, i) =>
          <button key={tab}
            className={"wrf__tab" + (activeTab === tabKeys[i] ? " is-active" : "")}
            onClick={() => setActiveTab(tabKeys[i])}>
            {tab}
          </button>
          )}
        </div>
        <div className="wrf__tabs-mode">{tabModes[activeTab]}</div>
      </div>
      <div className={"wrf__canvas" + (fadeIn ? " is-fading" : "")}>
        {/* Heatmap zones — rendered below floor plan */}
        {zones.map((z, i) =>
        <div key={i} className="wrf__zone" style={{
          left:`${z.x}%`, top:`${z.y}%`,
          width:`${z.rx}%`, height:`${z.ry}%`,
          background: s.zoneBg,
        }} />
        )}
        {/* Measure dead zone: dark gradient covers left ~40% of canvas */}
        {s.showDeadCover && <div className="wrf__dead-cover" />}
        {/* Landscape SVG floor plan — viewBox matches 8:3 canvas ratio */}
        <svg className="wrf__floorplan" viewBox="0 0 1000 365"
          xmlns="http://www.w3.org/2000/svg"
          style={{position:"absolute",inset:0,width:"100%",height:"100%"}}>
          {/* Outer boundary */}
          <rect x="12" y="10" width="976" height="345" fill="none" stroke="rgba(255,255,255,0.14)" strokeWidth="1.5"/>
          {/* Horizontal mid-corridor */}
          <line x1="12" y1="183" x2="988" y2="183" stroke="rgba(255,255,255,0.09)" strokeWidth="1.5"/>
          {/* Left zone divider: SERVER ROOM / OPEN SPACE */}
          <line x1="230" y1="10" x2="230" y2="355" stroke="rgba(255,255,255,0.09)" strokeWidth="1.5"/>
          {/* Right zone divider: OPEN SPACE / CONF area */}
          <line x1="770" y1="10" x2="770" y2="355" stroke="rgba(255,255,255,0.09)" strokeWidth="1.5"/>
          {/* Bottom internal rooms */}
          <line x1="400" y1="183" x2="400" y2="355" stroke="rgba(255,255,255,0.055)" strokeWidth="1" strokeDasharray="4 4"/>
          <line x1="590" y1="183" x2="590" y2="355" stroke="rgba(255,255,255,0.055)" strokeWidth="1" strokeDasharray="4 4"/>
          {/* Door gaps */}
          <line x1="230" y1="75" x2="230" y2="115" stroke="rgba(10,10,11,1)" strokeWidth="3"/>
          <line x1="230" y1="245" x2="230" y2="285" stroke="rgba(10,10,11,1)" strokeWidth="3"/>
          <line x1="770" y1="75" x2="770" y2="115" stroke="rgba(10,10,11,1)" strokeWidth="3"/>
          <line x1="770" y1="245" x2="770" y2="285" stroke="rgba(10,10,11,1)" strokeWidth="3"/>
          {/* Room labels */}
          <text x="120" y="95"  fill="rgba(255,255,255,0.13)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">SERVER</text>
          <text x="120" y="110" fill="rgba(255,255,255,0.13)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">ROOM</text>
          <text x="120" y="273" fill="rgba(255,255,255,0.11)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">OFFICE A</text>
          <text x="495" y="95"  fill="rgba(255,255,255,0.10)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">OPEN SPACE</text>
          <text x="340" y="278" fill="rgba(255,255,255,0.08)" fontFamily="DM Mono,monospace" fontSize="10" letterSpacing="1"   textAnchor="middle">OFFICE B</text>
          <text x="493" y="278" fill="rgba(255,255,255,0.08)" fontFamily="DM Mono,monospace" fontSize="10" letterSpacing="1"   textAnchor="middle">MEETING</text>
          <text x="680" y="278" fill="rgba(255,255,255,0.08)" fontFamily="DM Mono,monospace" fontSize="10" letterSpacing="1"   textAnchor="middle">OFFICE C</text>
          <text x="882" y="95"  fill="rgba(255,255,255,0.11)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">STORAGE</text>
          <text x="882" y="273" fill="rgba(255,255,255,0.11)" fontFamily="DM Mono,monospace" fontSize="11" letterSpacing="1.5" textAnchor="middle">CONF</text>
        </svg>
        {/* AP markers */}
        {aps.map((ap) =>
        <div key={ap.id} className="wrf__ap" style={{left:`${ap.x}%`,top:`${ap.y}%`,zIndex:5}}>
          {[38,68,98].map((sz,ri) =>
          <div key={ri} className="wrf__ap-ring" style={{width:sz,height:sz,marginLeft:-sz/2,marginTop:-sz/2,animationDelay:`${ri*0.5}s`}} />
          )}
          <div className="wrf__ap-dot" />
          <div className="wrf__ap-lbl">{ap.id}</div>
        </div>
        )}
        {/* RSSI labels */}
        {s.rssi.map((r,i) =>
        <div key={i} className={"wrf__rssi"+(r.bad?" bad":"")+(r.sim?" sim":"")} style={{left:r.x,top:r.y,zIndex:6}}>
          {r.val}
        </div>
        )}
        <div className="wrf__canvas-badge" style={{zIndex:7}}>{s.badge}</div>
        <div className="wrf__canvas-foot"  style={{zIndex:7}}>{s.foot}</div>
      </div>
      <RFPanel s={s} barVis={barVis} fadeIn={fadeIn} />
    </div>);
}

function WifiRFDashboard() {
  const [ref, vis] = useReveal(0.05);
  const [activeTabA, setActiveTabA] = useState("measure");
  const C = WC;
  return (
    <section className="wrf" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">03</span><span>{C.rfIdx}</span></div>
            <h2>{C.rfH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">{C.rfDesc}</div>
        </div>
        <RFCanvasImages barVis={vis} activeTab={activeTabA} setActiveTab={setActiveTabA} />
        <p className="wrf__note">{C.rfNote}</p>
      </div>
    </section>);

}

/* ══ 5. VALIDATION ════════════════════════════════════════════ */
function WifiValidation() {
  const [ref, vis] = useReveal();
  const C = WC;
  const pillars = C.validPillars;

  return (
    <section className="wv" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">04</span><span>{C.validIdx}</span></div>
            <h2>{C.validH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">{C.validDesc}</div>
        </div>
        <div className={"wv__pillars" + (vis ? " sr-ready" : "")}>
          {pillars.map((p, i) =>
          <div className={"wv__pillar sr-item"} key={p.num} style={{ "--d": i }}>
              <div className="wv__pillar-num">{p.num}</div>
              <div className="wv__pillar-title">{p.title}</div>
              <div className="wv__pillar-body">{p.body}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ══ 6. BEFORE / AFTER ════════════════════════════════════════ */
function WifiComparison() {
  const [ref, vis] = useReveal();
  const C = WC;
  const metrics = C.compMetrics;
  const highlights = C.compHighlights;

  return (
    <section className="wba" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">05</span><span>{C.compIdx}</span></div>
            <h2>{C.compH2Before}<br />{C.compH2After}</h2>
          </div>
          <div className="sec-head__right">{C.compDesc}</div>
        </div>

        {/* Two-panel comparison */}
        <div className={"wba__panels" + (vis ? " is-vis" : "")}>
          {/* BEFORE */}
          <div className="wba__panel wba__panel--bef">
            <div className="wba__panel-hd">
              <span className="mono wba__panel-tag bef">{C.compBeforeTag}</span>
              <span className="wba__panel-sub">{C.compBeforeSub}</span>
            </div>
            {metrics.map((m, i) =>
            <div className="wba__mrow" key={m.label} style={{ "--d": i }}>
                <div className="wba__mrow-top">
                  <span className="wba__mrow-lbl">{m.label}</span>
                  <span className="wba__mrow-val bef">{m.bef}</span>
                </div>
                <div className="wba__mrow-track">
                  <div className="wba__mrow-fill bef" style={{ "--w": `${m.befW}%` }} />
                </div>
              </div>
            )}
          </div>

          {/* AFTER */}
          <div className="wba__panel wba__panel--aft">
            <div className="wba__panel-hd">
              <span className="mono wba__panel-tag aft">{WC.compAfterTag}</span>
              <span className="wba__panel-sub">{WC.compAfterSub}</span>
            </div>
            {metrics.map((m, i) =>
            <div className="wba__mrow" key={m.label} style={{ "--d": i }}>
                <div className="wba__mrow-top">
                  <span className="wba__mrow-lbl">{m.label}</span>
                  <span className="wba__mrow-val aft">{m.aft}</span>
                </div>
                <div className="wba__mrow-track">
                  <div className="wba__mrow-fill aft" style={{ "--w": `${m.aftW}%` }} />
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Highlights */}
        <div className="wba__highlights">
          {highlights.map(([n, l]) =>
          <div className="wba__hl" key={n}>
              <div className="wba__hl-n">{n}</div>
              <div className="wba__hl-l">{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ══ 7. BUSINESS VALUE ════════════════════════════════════════ */
function WifiBusiness() {
  const [ref, vis] = useReveal();
  const C = WC;
  const outcomes = C.bizOutcomes;

  return (
    <section className="wbv" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">06</span><span>{C.bizIdx}</span></div>
            <h2>{C.bizH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">{C.bizDesc}</div>
        </div>
        <div className={"wbv__outcomes" + (vis ? " sr-ready" : "")}>
          {outcomes.map(([t, b], i) =>
          <div className={"wbv__outcome sr-item"} key={t} style={{ "--d": i }}>
              <div className="wbv__outcome-dot" />
              <div className="wbv__outcome-title">{t}</div>
              <div className="wbv__outcome-body">{b}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ══ 8. ARTICLES ══════════════════════════════════════════════ */
function WifiArticles() {
  const [ref, vis] = useReveal();
  const C = WC;
  const [articles, setArticles] = React.useState([
    { id: "N-021", date: "14. mar 2026", readTime: "10 min", title: "Wi-Fi 7 v industrijskem okolju: prvi praktični izsledki", excerpt: "Šest mesecev meritev v proizvodni hali. Kje 320 MHz kanali pomagajo in kje je MLO ključen za zanesljivost industrijskih povezav." },
    { id: "N-017", date: "11. jan 2026", readTime: "8 min", title: "Spectrum analysis: kako prepoznamo motnje pred namestitvijo", excerpt: "RF motnje so najpogostejši razlog za slab Wi-Fi v industrijskih in hotelskih okoljih." },
    { id: "N-015", date: "03. dec 2025", readTime: "7 min", title: "Roaming brez prekinitev: zakaj 802.11r ni vedno dovolj", excerpt: "Fast BSS Transition reši le del problema. Razložimo, katere nastavitve in topologije so potrebne za res zanesljiv roaming v poslovnih okoljih." }
  ]);

  React.useEffect(() => {
    const { wpPosts, gs, fmtDate, decode, stripShortcodes, calcReadTime } = window.AdvantWP || {};
    if (!wpPosts) return;
    wpPosts('posts', { per_page: 3, orderby: 'date', order: 'desc' })
      .then(posts => {
        if (!posts || !posts.length) return;
        setArticles(posts.map(p => {
          const acf = p.acf || {};
          const acfExcerpt = gs(acf, `nov_excerpt_${_wl.toLowerCase()}`);
          return {
            id:       String(p.id),
            date:     fmtDate(p.date_gmt || p.date),
            readTime: calcReadTime(p.content && p.content.rendered),
            title:    decode(p.title && p.title.rendered || ''),
            excerpt:  acfExcerpt ? decode(acfExcerpt) : stripShortcodes(p.excerpt && p.excerpt.rendered || ''),
          };
        }).filter(a => a.title));
      })
      .catch(() => {});
  }, []);

  return (
    <section className="wart" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">08</span><span>{C.artIdx}</span></div>
            <h2>{C.artH2.split("\n").map((l, i, arr) => <React.Fragment key={i}>{l}{i < arr.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">{C.artDesc}</div>
        </div>
        <div className={"wart__grid" + (vis ? " sr-ready" : "")}>
          {articles.map((a, i) =>
          <a className={"wart__card sr-item"} key={a.id} href={`${C.artMoreHref}/${a.slug || a.id}`} style={{ "--d": i }}>
              <div className="wart__card__body">
                <div className="wart__card__meta">
                  <span>{a.date}</span>
                  <span className="dot" />
                  <span>{a.id}</span>
                </div>
                <div className="wart__card__title">{a.title}</div>
                <p className="wart__card__excerpt">{a.excerpt}</p>
                <div className="wart__card__foot">
                  <span>{a.readTime} {C.artReadTime}</span>
                  <Arrow size={12} className="arr" />
                </div>
              </div>
            </a>
          )}
        </div>
        <div className="wart__more">
          <a href={C.artMoreHref} className="btn">{C.artMore} <Arrow size={13} className="arrow" /></a>
        </div>
      </div>
    </section>);

}


function WifiFinalCTA() {
  const tags = [
  "Wi-Fi network design", "Predictive survey", "On-site survey",
  "Spectrum analysis", "Roaming optimization", "Capacity planning",
  "Post-deployment validation", "Wi-Fi performance reporting",
  "RF interference mitigation", "Wi-Fi 6 / Wi-Fi 7"];
  const C = WC;
  const ctaH2 = { SI: ["Imate projekt, težavo", "ali pa samo vprašanje?"], EN: ["Have a project, a problem,", "or just a question?"], DE: ["Haben Sie ein Projekt, ein Problem", "oder einfach eine Frage?"] };
  const ctaSub = { SI: "V nekaj korakih vas usmerimo do prave rešitve. Odgovor v roku enega delovnega dne, tehnični sestanek po dogovoru.", EN: "We'll guide you to the right solution in a few steps. Response within one business day, technical meeting by appointment.", DE: "Wir führen Sie in wenigen Schritten zur richtigen Lösung. Antwort innerhalb eines Werktages, technisches Treffen nach Vereinbarung." };
  const ctaBtn1 = { SI: "Rezerviraj Wi-Fi oceno", EN: "Book a Wi-Fi assessment", DE: "WLAN-Bewertung buchen" };
  const ctaBtn2 = { SI: "Pošlji povpraševanje", EN: "Send enquiry", DE: "Anfrage senden" };
  const h2 = ctaH2[_wl] || ctaH2.SI;

  return (
    <section className="wfcta">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">08</span><span>{C.ctaIdx}</span></div>
          </div>
        </div>
        <div className="wfcta__inner">
          <div>
            <h2>{h2[0]}<br /><em>{h2[1]}</em></h2>
            <p className="wfcta__sub">{ctaSub[_wl] || ctaSub.SI}</p>
          </div>
          <div className="wfcta__actions">
            <a href="#" className="btn btn--primary"
            onClick={(e) => {e.preventDefault();window.__openContactModal && window.__openContactModal();}}>
              {ctaBtn1[_wl] || ctaBtn1.SI} <Arrow size={13} className="arrow" />
            </a>
            <a href="#" className="btn"
            onClick={(e) => {e.preventDefault();window.__openContactModal && window.__openContactModal();}}>
              {ctaBtn2[_wl] || ctaBtn2.SI} <Arrow size={13} className="arrow" />
            </a>
          </div>
          <div className="wfcta__tags">
            {tags.map((t) => <span className="wfcta__tag" key={t}>{t}</span>)}
          </div>
        </div>
      </div>
    </section>);

}

/* ══ 8. PARTNERS ══════════════════════════════════════════════ */
function WifiPartners() {
  const [ref, vis] = useReveal();
  const C = WC;
  const partnersDesc = {
    SI: "Za najzahtevnejša industrijska in logistična okolja sodelujemo s specializiranimi partnerji, ki pokrivajo tehnologije, kjer standardni WiFi doseže svoje meje.",
    EN: "For the most demanding industrial and logistics environments, we work with specialised partners covering technologies where standard Wi-Fi reaches its limits.",
    DE: "Für die anspruchsvollsten Industrie- und Logistikumgebungen arbeiten wir mit spezialisierten Partnern zusammen, die Technologien abdecken, wo Standard-WLAN seine Grenzen erreicht.",
  };
  const partnersH2 = { SI: "Tehnološki\npartnerji.", EN: "Technology\npartners.", DE: "Technologie-\npartner." };
  const h2 = (partnersH2[_wl] || partnersH2.SI).split("\n");
  return (
    <section className="wpar" ref={ref}>
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">07</span><span>{C.partnersIdx}</span></div>
            <h2>{h2.map((l, i) => <React.Fragment key={i}>{l}{i < h2.length - 1 && <br />}</React.Fragment>)}</h2>
          </div>
          <div className="sec-head__right">{partnersDesc[_wl] || partnersDesc.SI}</div>
        </div>
        <div className={"wpar__grid" + (vis ? " sr-ready" : "")}>
          <div className="wpar__card sr-item" style={{ "--d": 0 }}>
            <div className="wpar__card-body">
              <div className="wpar__image-wrap">
                <img
                  src="/images/wifi/das-kolaz.jpg"
                  alt="Kymata DAS okolja — visokoregalna skladišča, tuneli, pristanišča"
                  className="wpar__image"
                />
                <div className="wpar__image-caption">
                  Visokoregalna skladišča · Zamrzovalne komore · Tuneli · Pristanišča · AGV/AMR okolja
                </div>
              </div>
              <div className="wpar__card-right">
                <img
                  src="/images/wifi/kymata-logo.svg"
                  alt="Kymata"
                  className="wpar__logo"
                />
                <p className="wpar__desc">
                  Kymata je italijanski specialist za patentirane sisteme porazdeljenih anten (DAS), 
                  ki zagotavljajo zanesljivo brezžično pokritost v okoljih, kjer klasični WiFi ne zmore — 
                  visokoregalna skladišča, zamrzovalne komore, produkcijske hale z AGV/AMR roboti, tuneli 
                  in pristanišča. Tehnologija je združljiva z vsemi vodilnimi proizvajalci WiFi, LTE in LoRa opreme.
                </p>
                <div className="wpar__tags">
                  <span>DAS</span><span>WiFi</span><span>LTE</span>
                  <span>5G private</span><span>LoRa</span><span>DECT</span><span>UHF</span>
                </div>
                <a
                  href="https://kymata.it/en/soluzioni-e-tecnologia/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn wpar__btn">
                  Več o partnerju <Arrow size={13} className="arrow" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

/* ══ 9. FAQ ═══════════════════════════════════════════════════ */
function WifiFAQ() {
  const [open, setOpen] = useState(null);
  const toggle = (i) => setOpen(open === i ? null : i);
  const items = [
  ["Kako se lotite načrtovanja brezžičnega omrežja?",
  "Začnemo s predictive site survey, RF modeliranjem prostora pred namestitvijo. Določimo optimalno postavitev dostopnih točk, kanal in moči. Nato izvedemo on-site meritve na lokaciji in validiramo pokritost, kapaciteto in roaming pred predajo naročniku."],
  ["Kakšna je razlika med Wi-Fi 6 in Wi-Fi 7?",
  "Wi-Fi 6 (802.11ax) prinaša OFDMA, MU-MIMO in BSS Coloring za visoko gostoto naprav. Wi-Fi 7 (802.11be) dodaja Multi-Link Operation (MLO) in 320 MHz kanale, bistveno nižje latence in večja prepustnost v zahtevnih okoljih z mnogimi hkratnimi napravami."],
  ["Zakaj imamo mrtve cone kljub obstoječim dostopnim točkam?",
  "Najpogostejši vzroki so napačna postavitev AP-jev brez meritev, interference sosednjih kanalov, previsoka oddajna moč, ki povzroča \"sticky client\" efekt, ali fizične prepreke, ki niso bile upoštevane pri načrtovanju. Naredimo spectrum analizo in RF meritve ter določimo točen vzrok."],
  ["Kaj točno preverite med validacijo po izvedbi?",
  "Opravimo celoten validation sweep: pokritost signala (RSSI) po vseh conah, SNR in kakovost signala, throughput testi na več točkah, latence in packet loss za VoIP/video aplikacije, roaming testi med dostopnimi točkami in spectrum scan za nove interference. Vse dokumentiramo v poročilu."],
  ["Kako dolgo traja izvedba Wi-Fi omrežja?",
  "Manjši pisarniški projekt (do 20 AP) v 2–5 dneh vključno z validacijo. Večji objekti (skladišča, hoteli, industrijski obrati) od 2 do 6 tednov. Čas je odvisen od kompleksnosti prostora, dostopa in zahtevanega obsega testiranja."],
  ["Ali ponujate vzdrževanje in monitoring po izvedbi?",
  "Da, ponujamo periodične site survey ponovitve ob prenovi prostorov, monitoring omrežja z alerti, optimizacije ob povečanju gostote uporabnikov in interventno podporo. Vse v sklopu SLA pogodbe, prilagojene vašim potrebam."]];

  return (
    <section className="srv-faq">
      <div className="container">
        <div className="srv-faq__head">
          <div className="sec-head__index"><span className="num">08</span><span>{WC.faqIdx}</span></div>
          <h2>{WC.faqH2}</h2>
        </div>
        <div className="srv-faq__list">
          {items.map(([q, a], i) =>
          <div key={i} className={"srv-faq__item" + (open === i ? " is-open" : "")} onClick={() => toggle(i)}>
              <div className="srv-faq__q">
                <span>{q}</span>
                <span className="srv-faq__icon" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.25">
                    <path d="M2 7h10M7 2v10" className="srv-faq__icon-plus" />
                  </svg>
                </span>
              </div>
              <div className="srv-faq__a"><p>{a}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ══ 10. OTHER SERVICES ═══════════════════════════════════════ */
function WifiOther() {
  const others = [
  ["podatkovni-centri", "Podatkovni centri", "01"],
  ["dvignjeni-pod", "Dvignjeni podi", "02"],
  ["racunalniska-omrezja", "Računalniška omrežja", "03"]];

  return (
    <section className="srv-other">
      <div className="container">
        <div className="sec-head">
          <div className="sec-head__left">
            <div className="sec-head__index"><span className="num">09</span><span>NAPREJ</span></div>
            <h2>Druge rešitve.</h2>
          </div>
        </div>
        <div className="srv-other__grid">
          {others.map(([id, name, num]) =>
          <a className="srv-other__card" key={id} href={`/${id}`}>
              <span className="srv-other__num mono">{num}</span>
              <span className="srv-other__name">{name}</span>
              <Arrow size={14} className="srv-other__arr" />
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ══ APP ROOT ═════════════════════════════════════════════════ */
function WifiApp() {
  const [modalOpen, setModalOpen] = useState(false);
  const [, force] = useState(0);

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

  useEffect(() => {
    const { wpOptions, gs, decode } = window.AdvantWP || {};
    if (!wpOptions) { 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}`));
      });
      force(n => n + 1);
    }).catch(() => {});

    wpOptions('wf')
      .then(wf => {
        applyWifiWP(wf);
        force(n => n + 1);
        window.AdvantWP && window.AdvantWP.hidePreloader();
      })
      .catch(e => {
        console.warn('[AdvantWP] brezzicna-omrezja load failed, using fallback.', e);
        window.AdvantWP && window.AdvantWP.hidePreloader();
      });
  }, []);

  return (
    <LangContext.Provider value={document.body.dataset.lang || "SI"}>
      <ScrollProgress />
      <AmbientOrb />
      <Header setLang={() => {}} />
      <WifiHero />
      <WifiTypes />
      <WifiProblem />
      <WifiApproach />
      <WifiRFDashboard />
      <WifiValidation />
      <WifiComparison />
      <WifiBusiness />
      <WifiPartners />
      <Contact />
      <Footer />
      <ContactModal open={modalOpen} onClose={() => setModalOpen(false)} initialArea="wifi" />
    </LangContext.Provider>
  );
}

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