// ── Platform section interactions ────────────────────────────────────────

window.addEventListener("load", () => {

  const loader = document.getElementById("pageLoader");

  if (!loader) return;

  setTimeout(() => {

    loader.style.opacity = "0";
    loader.style.pointerEvents = "none";

    setTimeout(() => {
      loader.remove();
    }, 1000);

  }, 1000);

});

//
document.addEventListener("DOMContentLoaded", function () {
  const footerTarget = document.getElementById("footer");

  if (!footerTarget) return;

  fetch("footer-en.html")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Footer file not found");
      }
      return response.text();
    })
    .then((html) => {
      footerTarget.innerHTML = html;

      const yearEl = document.getElementById("yr");
      if (yearEl) {
        yearEl.textContent = new Date().getFullYear();
      }
    })
    .catch((error) => {
      console.error("Footer load failed:", error);
    });
});


  (function () {
    // 1. Scroll-reveal
    var revealObs = new IntersectionObserver(function(entries) {
      entries.forEach(function(e) { if (e.isIntersecting) e.target.classList.add('pl-visible'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.pl-reveal').forEach(function(el) { revealObs.observe(el); });

    // 2. Animated counters
    var countObs = new IntersectionObserver(function(entries) {
      entries.forEach(function(e) {
        if (!e.isIntersecting) return;
        var el = e.target, target = parseInt(el.dataset.target, 10), cur = 0;
        var step = Math.max(1, Math.ceil(target / 30));
        var tid = setInterval(function() { cur = Math.min(cur + step, target); el.textContent = cur; if (cur >= target) clearInterval(tid); }, 40);
        countObs.unobserve(el);
      });
    }, { threshold: 0.5 });
    document.querySelectorAll('.pl-counter').forEach(function(el) { countObs.observe(el); });

    //
    function initLanguageMenu() {
  const langToggle = document.getElementById("langToggle");
  const langMenu = document.getElementById("langMenu");

  if (!langToggle || !langMenu) return;

  langToggle.addEventListener("click", () => {
    langMenu.classList.toggle("hidden");
  });

  langMenu.querySelectorAll("a").forEach(link => {
    link.addEventListener("click", () => {
      langMenu.classList.add("hidden");
    });
  });
}


//

    // 4. Deployment option cycling
    var opts = document.querySelectorAll('.deploy-opt');
    if (opts.length) {
      var curOpt = 0;
      function setActive(idx) {
        opts.forEach(function(opt, i) {
          var active = i === idx;
          opt.style.background = active ? 'rgba(41,194,229,0.10)' : '';
          opt.style.borderColor = active ? 'rgba(41,194,229,0.35)' : 'rgba(203,213,225,1)';
          var label = opt.querySelector('.text-xs.font-semibold');
          if (label) label.style.color = active ? '#0f172a' : '#64748b';
          var dot = opt.querySelector('.deploy-dot');
          if (dot) dot.style.background = active ? '#29C2E5' : 'transparent';
          var ring = dot ? dot.parentElement : null;
          if (ring) ring.style.borderColor = active ? '#29C2E5' : '#cbd5e1';
        });
      }
      setInterval(function() { curOpt = (curOpt + 1) % opts.length; setActive(curOpt); }, 1800);
    }

    // ── 5. Cross-platform card live animation ────────────────────────────────
    (function cpAnim() {
      var bars     = document.querySelectorAll('.cp-bar');
      var phoneBar = document.getElementById('cp-phone-bar');
      var syncDot  = document.getElementById('cp-sync-dot');
      var toast    = document.getElementById('cp-toast');
      var shimmer  = document.getElementById('cp-shimmer');
      var loadBar  = document.getElementById('cp-load');
      if (!bars.length) return;

      // Chart data sets — cycle through them
      var chartSets = [
        [40, 65, 50, 80, 35, 55],
        [72, 42, 88, 30, 62, 46],
        [55, 78, 44, 92, 28, 68],
        [30, 60, 72, 50, 82, 40],
        [85, 50, 35, 70, 55, 90]
      ];
      var setIdx = 0;

      function updateChart() {
        setIdx = (setIdx + 1) % chartSets.length;
        var d = chartSets[setIdx];
        bars.forEach(function(bar, i) { bar.style.height = d[i] + '%'; });
        if (phoneBar) phoneBar.style.width = (d[3] * 0.9) + '%';
      }

      // Address-bar loader
      function animLoad() {
        if (!loadBar) return;
        loadBar.style.transition = 'none';
        loadBar.style.width = '0%';
        requestAnimationFrame(function() {
          requestAnimationFrame(function() {
            loadBar.style.transition = 'width 1.1s cubic-bezier(0.22,1,0.36,1)';
            loadBar.style.width = '88%';
            setTimeout(function() {
              loadBar.style.transition = 'width 0.25s ease';
              loadBar.style.width = '0%';
            }, 1400);
          });
        });
      }

      // Sync dot travels from top → bottom of track, then toast + shimmer fire
      function fireSyncPulse() {
        if (!syncDot) return;
        // reset to top, invisible
        syncDot.style.transition = 'none';
        syncDot.style.opacity = '0';
        syncDot.style.top = '8%';
        requestAnimationFrame(function() {
          requestAnimationFrame(function() {
            // travel down
            syncDot.style.transition = 'top 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.2s';
            syncDot.style.opacity = '1';
            syncDot.style.top = '88%';
            // when arrives at phone...
            setTimeout(function() {
              // toast slides in
              if (toast) {
                toast.style.opacity = '1';
                toast.style.transform = 'translateY(0)';
              }
              // shimmer sweeps
              if (shimmer) {
                shimmer.style.transition = 'left 0.5s ease';
                shimmer.style.left = '110%';
                setTimeout(function() {
                  shimmer.style.transition = 'none';
                  shimmer.style.left = '-40px';
                }, 550);
              }
              // fade dot out
              syncDot.style.opacity = '0';
              // dismiss toast
              setTimeout(function() {
                if (toast) {
                  toast.style.opacity = '0';
                  toast.style.transform = 'translateY(-6px)';
                }
              }, 1100);
            }, 620);
          });
        });
      }

      // Kick everything off with short initial delay
      setTimeout(animLoad, 600);
      setTimeout(fireSyncPulse, 1000);

      // Loop
      setInterval(updateChart,   2400);
      setInterval(animLoad,      3600);
      setInterval(fireSyncPulse, 3600);
    })();

    // ── 6. Integration card (Card 4) ─────────────────────────────────────────
    (function intAnim() {
      var rows    = [document.getElementById('int-row-0'), document.getElementById('int-row-1'), document.getElementById('int-row-2')];
      var hub     = document.getElementById('int-hub');
      var ring    = document.getElementById('int-ring');
      if (!rows[0]) return;

      // colours per row: [bg, border, iconBg]
      var rowCfg = [
        { bg:'rgba(41,194,229,0.08)',   border:'rgba(41,194,229,0.55)'   },
        { bg:'rgba(23,214,195,0.08)',   border:'rgba(23,214,195,0.55)'   },
        { bg:'rgba(244,201,74,0.10)',  border:'rgba(244,201,74,0.60)'  }
      ];
      var cur = -1;

      function resetAll() {
        rows.forEach(function(r) {
          r.style.background   = '#fff';
          r.style.borderColor  = '#e2e8f0';
          r.style.boxShadow    = 'none';
          r.style.transform    = 'translateX(0)';
        });
      }

      function pulseHub() {
        if (!hub || !ring) return;
        hub.style.transform = 'scale(1.12)';
        ring.style.boxShadow = '0 0 0 8px rgba(23,214,195,0.25)';
        setTimeout(function() {
          hub.style.transform = 'scale(1)';
          ring.style.boxShadow = '0 0 0 0 rgba(23,214,195,0)';
        }, 400);
      }

      function activateRow(idx) {
        resetAll();
        pulseHub();
        var r   = rows[idx];
        var cfg = rowCfg[idx];
        r.style.background  = cfg.bg;
        r.style.borderColor = cfg.border;
        r.style.boxShadow   = '0 2px 12px rgba(41,194,229,0.12)';
        r.style.transform   = 'translateX(3px)';
        setTimeout(function() { r.style.transform = 'translateX(0)'; }, 350);
      }

      function step() {
        cur = (cur + 1) % rows.length;
        activateRow(cur);
      }

      setTimeout(step, 700);
      setInterval(step, 1600);
    })();

    // ── 7. Pipeline card (Card 5) ─────────────────────────────────────────────
    (function pipeAnim() {
      var stages  = [document.getElementById('pipe-stage-0'), document.getElementById('pipe-stage-1'), document.getElementById('pipe-stage-2')];
      var arrows  = [document.getElementById('pipe-arrow-0'), document.getElementById('pipe-arrow-1')];
      var qBar    = document.getElementById('pipe-quality-bar');
      var qNum    = document.getElementById('pipe-quality-num');
      if (!stages[0]) return;

      var stageGlows = [
        { bg:'rgba(41,194,229,0.18)',  border:'rgba(41,194,229,0.55)',  shadow:'0 0 16px rgba(41,194,229,0.2)'  },
        { bg:'rgba(23,214,195,0.15)',  border:'rgba(23,214,195,0.55)',  shadow:'0 0 16px rgba(23,214,195,0.2)'  },
        { bg:'rgba(244,201,74,0.15)', border:'rgba(244,201,74,0.55)', shadow:'0 0 16px rgba(244,201,74,0.2)' }
      ];
      var stageBase = [
        { bg:'rgba(41,194,229,0.08)',  border:'rgba(41,194,229,0.2)'  },
        { bg:'rgba(23,214,195,0.08)',  border:'rgba(23,214,195,0.25)' },
        { bg:'rgba(244,201,74,0.10)', border:'rgba(244,201,74,0.25)'}
      ];

      var cur = 0;

      function resetStages() {
        stages.forEach(function(s, i) {
          s.style.background  = stageBase[i].bg;
          s.style.borderColor = stageBase[i].border;
          s.style.boxShadow   = 'none';
          s.style.transform   = 'scale(1)';
        });
        arrows.forEach(function(a) { a.style.color = '#cbd5e1'; });
      }

      function lightStage(idx) {
        resetStages();
        var s = stages[idx];
        var g = stageGlows[idx];
        s.style.background  = g.bg;
        s.style.borderColor = g.border;
        s.style.boxShadow   = g.shadow;
        s.style.transform   = 'scale(1.04)';
        // light preceding arrows
        for (var i = 0; i < idx; i++) { arrows[i].style.color = '#29C2E5'; }
      }

      // quality bar count-up
      function animQuality(target, duration) {
        if (!qBar || !qNum) return;
        qBar.style.width = '0%';
        qNum.textContent = '0%';
        var start = performance.now();
        function tick(now) {
          var t = Math.min((now - start) / duration, 1);
          var ease = 1 - Math.pow(1 - t, 3);
          var val = Math.round(ease * target * 10) / 10;
          qBar.style.width = val + '%';
          qNum.textContent = val.toFixed(1) + '%';
          if (t < 1) requestAnimationFrame(tick);
        }
        requestAnimationFrame(tick);
      }

      function runCycle() {
        // stage 0
        lightStage(0);
        setTimeout(function() {
          // stage 1
          lightStage(1);
          setTimeout(function() {
            // stage 2
            lightStage(2);
            setTimeout(function() {
              resetStages();
              animQuality(98.4, 1200);
            }, 600);
          }, 600);
        }, 600);
      }

      setTimeout(runCycle, 500);
      setInterval(runCycle, 3800);
    })();

    // ── 8. Modular Architecture card (Card 6) ────────────────────────────────
    (function modAnim() {
      var tiles    = [];
      for (var i = 0; i < 6; i++) tiles.push(document.getElementById('mod-tile-' + i));
      var scaleBar = document.getElementById('mod-scale-bar');
      if (!tiles[0]) return;

      var tileColors = [
        { bg:'rgba(41,194,229,0.16)',  border:'rgba(41,194,229,0.5)',  ico:'#29C2E5' },
        { bg:'rgba(23,214,195,0.16)',  border:'rgba(23,214,195,0.5)',  ico:'#17D6C3' },
        { bg:'rgba(244,201,74,0.18)', border:'rgba(244,201,74,0.5)', ico:'#F4C94A' },
        { bg:'rgba(41,194,229,0.12)',  border:'rgba(41,194,229,0.4)',  ico:'#29C2E5' },
        { bg:'rgba(23,214,195,0.12)',  border:'rgba(23,214,195,0.4)',  ico:'#17D6C3' },
        { bg:'rgba(244,201,74,0.14)', border:'rgba(244,201,74,0.4)', ico:'#F4C94A' }
      ];

      var scaleWidths = [35, 55, 70, 85, 60, 92, 45, 78];
      var scaleIdx    = 0;
      var tileIdx     = 0;
      var prevTile    = -1;

      function resetTile(idx) {
        var t = tiles[idx];
        if (!t) return;
        t.style.background  = idx < 3 ? ['rgba(41,194,229,0.08)','rgba(23,214,195,0.08)','rgba(244,201,74,0.1)'][idx] : '#fff';
        t.style.borderColor = idx < 3 ? ['rgba(41,194,229,0.2)','rgba(23,214,195,0.2)','rgba(244,201,74,0.25)'][idx] : '#e2e8f0';
        t.style.boxShadow   = 'none';
        t.style.transform   = 'scale(1)';
        var ico  = t.querySelector('svg');
        var lbl  = t.querySelector('span');
        if (ico) ico.style.color  = idx < 3 ? ['#29C2E5','#17D6C3','#F4C94A'][idx] : '#94a3b8';
        if (lbl) lbl.style.color  = idx < 3 ? '#475569' : '#94a3b8';
      }

      function activateTile(idx) {
        if (prevTile >= 0) resetTile(prevTile);
        var t   = tiles[idx];
        var cfg = tileColors[idx];
        t.style.background  = cfg.bg;
        t.style.borderColor = cfg.border;
        t.style.boxShadow   = '0 4px 14px rgba(41,194,229,0.15)';
        t.style.transform   = 'scale(1.08)';
        var ico = t.querySelector('svg');
        var lbl = t.querySelector('span');
        if (ico) ico.style.color = cfg.ico;
        if (lbl) lbl.style.color = '#1e293b';
        prevTile = idx;
      }

      function stepTile() {
        activateTile(tileIdx);
        tileIdx = (tileIdx + 1) % tiles.length;
      }

      function stepScale() {
        if (!scaleBar) return;
        scaleIdx = (scaleIdx + 1) % scaleWidths.length;
        scaleBar.style.width = scaleWidths[scaleIdx] + '%';
      }

      setTimeout(stepTile, 400);
      setInterval(stepTile,  900);
      setTimeout(stepScale,  600);
      setInterval(stepScale, 1800);
    })();

  })();
 


  window.addEventListener('scroll', () => {
    const nav = document.getElementById('topnav');
    if (nav) nav.classList.toggle('scrolled', window.scrollY > 30);
  }, { passive: true });

  window.switchTab = function(idx) {
    document.querySelectorAll('.ftab').forEach((t, i) => t.classList.toggle('active', i === idx));
    document.querySelectorAll('.fpanel').forEach((p, i) => p.classList.toggle('active', i === idx));
  };