var si = 0,
                slides = document.querySelectorAll(".hero-slide"),
                dots = document.querySelectorAll(".carousel-dot"),
                t,
                dir = 1,
                autoStop = false,
                autoInterval = 7000;

            function show(i, direction) {
                if (direction === undefined) return;
                var current = slides[si];
                var next = slides[i];
                if (direction === 1) {
                    current.style.transform = "translateY(100%)";
                    current.style.opacity = "0";
                    current.style.zIndex = "1";
                    next.style.transform = "translateY(-100%)";
                    next.style.opacity = "0";
                    next.style.zIndex = "1";
                    requestAnimationFrame(function () {
                        next.style.transition =
                            "transform 0.5s ease, opacity 0.5s ease";
                        next.style.transform = "translateY(0)";
                        next.style.opacity = "1";
                        next.style.zIndex = "2";
                    });
                } else {
                    current.style.transform = "translateY(-100%)";
                    current.style.opacity = "0";
                    current.style.zIndex = "1";
                    next.style.transform = "translateY(100%)";
                    next.style.opacity = "0";
                    next.style.zIndex = "1";
                    requestAnimationFrame(function () {
                        next.style.transition =
                            "transform 0.5s ease, opacity 0.5s ease";
                        next.style.transform = "translateY(0)";
                        next.style.opacity = "1";
                        next.style.zIndex = "2";
                    });
                }
                for (var j = 0; j < dots.length; j++) {
                    if (j === i) {
                        dots[j].classList.add("active");
                    } else {
                        dots[j].classList.remove("active");
                    }
                }
                si = i;
            }
            function nextSlide() {
                show((si + 1) % slides.length, 1);
                resetTimer();
            }
            function prevSlide() {
                show((si - 1 + slides.length) % slides.length, -1);
                resetTimer();
            }
            function goSlide(i) {
                autoStop = true;
                show(i, i > si ? 1 : -1);
                clearInterval(t);
                t = null;
            }
            function resetTimer() {
                clearInterval(t);
                t = setInterval(nextSlide, autoInterval);
            }

            window.addEventListener("load", function () {
                var o = document.getElementById("spinner");
                o.classList.add("hidden");
                setTimeout(function () {
                    o.style.display = "none";
                }, 500);
            });
            setTimeout(function () {
                var o = document.getElementById("spinner");
                o.classList.add("hidden");
                setTimeout(function () {
                    o.style.display = "none";
                }, 500);
            }, 3000);
            t = setInterval(nextSlide, autoInterval);

            for (var s = 0; s < slides.length; s++) {
                slides[s].addEventListener("click", function () {
                    autoStop = true;
                    clearInterval(t);
                    t = null;
                });
            }

                        document.querySelectorAll(".tab-btn").forEach(function (b) {
                b.addEventListener("click", function () {
                    document.querySelectorAll(".tab-btn").forEach(function (x) {
                        x.classList.remove("active");
                    });
                    document
                        .querySelectorAll(".tab-pane")
                        .forEach(function (p) {
                            p.classList.remove("active");
                        });
                    this.classList.add("active");
                    document
                        .getElementById(this.getAttribute("data-t"))
                        .classList.add("active");
                });
            });

            /* ---- Order Widget ---- */
            var orderPopupShown = false;
            function openOrderWidget(
                plan,
                monthlyPrice,
                yearlyPrice,
                isEmpire,
            ) {
                document.getElementById("orderPanelBuy").style.display =
                    "block";
                var widget = document.getElementById("orderWidgetOverlay");
                document.getElementById("orderPlanTitle").textContent = plan;
                var yearly = yearlyMode;
                var price = yearly ? yearlyPrice : monthlyPrice;
                var amountEl = document.getElementById("orderPlanPrice");
                var prefix = isEmpire ? ">$" : "$";
                amountEl.textContent = prefix + " " + price.toFixed(2);
                document.getElementById("orderPlanPeriod").textContent = yearly
                    ? "/ year"
                    : "/ month";
                var couponMsg = document.getElementById("orderCouponMsg");
                var yearlySave = document.getElementById("orderYearlySave");
                if (!yearly) {
                    couponMsg.style.display = "block";
                    yearlySave.style.display = "none";
                } else {
                    couponMsg.style.display = "none";
                    yearlySave.style.display = "block";
                    var saved = Math.round(
                        (1 - yearlyPrice / (monthlyPrice * 12)) * 100,
                    );
                    document.getElementById("orderSavePercent").textContent =
                        saved;
                }
                var buyBtn = document.getElementById("orderBuyBtn");
                var loc = document.getElementById("orderServerLocation").value;
                buyBtn.href =
                    "/3/" +
                    price.toFixed(2) +
                    "/4/" +
                    encodeURIComponent(plan) +
                    "?location=" +
                    encodeURIComponent(loc);
                widget.style.display = "flex";
                orderPopupShown = true;
            }
            function closeOrderWidget() {
                document.getElementById("orderWidgetOverlay").style.display =
                    "none";
            }
            // Escape key closes the order widget
            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape") {
                    var widget = document.getElementById(
                        "orderWidgetOverlay",
                    );
                    if (widget && widget.style.display === "flex") {
                        closeOrderWidget();
                    }
                }
            });
            document
                .getElementById("orderServerLocation")
                .addEventListener("change", function () {
                    var plan =
                        document.getElementById("orderPlanTitle").textContent;
                    var priceText = document
                        .getElementById("orderPlanPrice")
                        .textContent.replace(">$", "")
                        .replace("$", "")
                        .trim();
                    var price = parseFloat(priceText);
                    var loc = this.value;
                    document.getElementById("orderBuyBtn").href =
                        "/3/" +
                        price.toFixed(2) +
                        "/4/" +
                        encodeURIComponent(plan) +
                        "?location=" +
                        encodeURIComponent(loc);
                });
            function applyCoupon() {
                var input = document.getElementById("orderCouponInput");
                var status = document.getElementById("orderCouponStatus");
                var code = input.value.trim();
                if (code.toLowerCase() === "free trial") {
                    status.textContent =
                        "\u2713 Coupon FREE TRIAL applied - 1 month free";
                    status.style.color = "#1a7f37";
                } else {
                    status.textContent = "Invalid coupon code";
                    status.style.color = "#dc3545";
                }
                status.style.display = "block";
            }
            /* ---- Billing Toggle ---- */
            var yearlyMode = false;
            var biSwitch = document.getElementById("billingSwitch");
            var labels = document.querySelectorAll(".toggle-label");
            var monthlyLabel = document.querySelector(".toggle-label-monthly");
            var yearlyLabel = document.querySelector(".toggle-label-yearly");

            function updatePrices(yearly) {
                var amounts = document.querySelectorAll(".price-amount");
                for (var k = 0; k < amounts.length; k++) {
                    var el = amounts[k];
                    var val = yearly
                        ? el.getAttribute("data-yearly")
                        : el.getAttribute("data-monthly");
                    var prefix =
                        el.textContent.trim().charAt(0) === ">" ? ">" : "";
                    el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
                }
                var periods = document.querySelectorAll(".price-period");
                for (var k = 0; k < periods.length; k++) {
                    periods[k].textContent = yearly ? "/ year" : "/ month";
                }
                var saves = document.querySelectorAll(".price-save");
                for (var k = 0; k < saves.length; k++) {
                    var s = saves[k];
                    if (yearly) {
                        s.style.display = "block";
                        s.textContent = s.getAttribute("data-yearly-text");
                    } else {
                        s.style.display = "block";
                        s.textContent = s.getAttribute("data-monthly-text");
                    }
                }
                var ctaNote = document.getElementById("pricingCtaNote");
                if (ctaNote) {
                    ctaNote.innerHTML = yearly
                        ? "Save money, less administration"
                        : "Perfect for trial, termination any time";
                }
            }

            function setBilling(yearly) {
                yearlyMode = yearly;
                if (yearly) {
                    biSwitch.classList.add("yearly");
                    monthlyLabel.classList.remove("active");
                    yearlyLabel.classList.add("active");
                } else {
                    biSwitch.classList.remove("yearly");
                    monthlyLabel.classList.add("active");
                    yearlyLabel.classList.remove("active");
                }
                updatePrices(yearly);
            }

            biSwitch.addEventListener("click", function () {
                setBilling(!yearlyMode);
            });
            monthlyLabel.addEventListener("click", function () {
                setBilling(false);
            });
            yearlyLabel.addEventListener("click", function () {
                setBilling(true);
            });

            /* init billing display to monthly */
            updatePrices(false);

            /* ---- Blog Module ---- */
            var blogState = {
                allPosts: [],
                filteredPosts: [],
                currentPage: 1,
                perPage: 6,
                searchTerm: "",
            };

            function formatDate(dateStr) {
                var d = new Date(dateStr + "T00:00:00Z");
                var months = [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "Jun",
                    "Jul",
                    "Aug",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dec",
                ];
                return (
                    months[d.getUTCMonth()] +
                    " " +
                    d.getUTCDate() +
                    ", " +
                    d.getUTCFullYear()
                );
            }

            function badgeClass(area) {
                var m = {
                    "speed-run": "speed-run",
                    guide: "guide",
                    howto: "howto",
                    news: "news",
                };
                return m[area] || "default";
            }

            function renderBlog() {
                var grid = document.getElementById("blogGrid");
                var search = (blogState.searchTerm || "").toLowerCase();
                blogState.filteredPosts = blogState.allPosts.filter(
                    function (p) {
                        if (!search) return true;
                        return (
                            (p.headline + " " + p.teaser)
                                .toLowerCase()
                                .indexOf(search) !== -1
                        );
                    },
                );
                var total = blogState.filteredPosts.length;
                var totalPages = Math.max(
                    1,
                    Math.ceil(total / blogState.perPage),
                );
                if (blogState.currentPage > totalPages)
                    blogState.currentPage = totalPages;
                var start = (blogState.currentPage - 1) * blogState.perPage;
                var pagePosts = blogState.filteredPosts.slice(
                    start,
                    start + blogState.perPage,
                );

                var html = "";
                if (pagePosts.length === 0) {
                    html =
                        '<div class="blog-empty">No posts match your search.</div>';
                } else {
                    for (var i = 0; i < pagePosts.length; i++) {
                        var p = pagePosts[i];
                        var bc = badgeClass(p.area);
                        var agentHtml = "";
                        if (p.agent)
                            agentHtml =
                                '<span class="blog-agent">' +
                                p.agent +
                                "</span>";
                        html +=
                            '<div class="blog-card">' +
                            '<div class="blog-card-top">' +
                            '<span class="blog-badge blog-badge-' +
                            bc +
                            '">' +
                            p.area +
                            "</span>" +
                            agentHtml +
                            "</div>" +
                            '<div class="blog-date">' +
                            formatDate(p.date) +
                            "</div>" +
                            '<h3><a href="' +
                            p.link +
                            '">' +
                            p.headline +
                            "</a></h3>" +
                            '<p class="blog-teaser">' +
                            p.teaser +
                            "</p>" +
                            '<a href="' +
                            p.link +
                            '" class="blog-readmore">Read more &rarr;</a>' +
                            "</div>";
                    }
                }
                grid.innerHTML = html;

                var pag = document.getElementById("blogPagination");
                var pagHtml = "";
                if (totalPages > 1) {
                    pagHtml +=
                        '<button class="blog-page-btn" onclick="blogGo(1)"' +
                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
                        ">&laquo;</button>";
                    pagHtml +=
                        '<button class="blog-page-btn" onclick="blogGo(' +
                        (blogState.currentPage - 1) +
                        ')"' +
                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
                        ">&lsaquo; Prev</button>";
                    pagHtml +=
                        '<span class="blog-page-info">Page ' +
                        blogState.currentPage +
                        " of " +
                        totalPages +
                        "</span>";
                    pagHtml +=
                        '<button class="blog-page-btn" onclick="blogGo(' +
                        (blogState.currentPage + 1) +
                        ')"' +
                        (blogState.currentPage >= totalPages
                            ? ' disabled"'
                            : '"') +
                        ">Next &rsaquo;</button>";
                    pagHtml +=
                        '<button class="blog-page-btn" onclick="blogGo(' +
                        totalPages +
                        ')"' +
                        (blogState.currentPage >= totalPages
                            ? ' disabled"'
                            : '"') +
                        ">&raquo;</button>";
                }
                pag.innerHTML = pagHtml;
            }

            function blogGo(page) {
                blogState.currentPage = page;
                renderBlog();
            }

            /* ---- Silent ping for hero carousel ---- */
            (function() {
              var SERVERS = [
                { host: 'meppel.odoo4projects.com', city: 'Amsterdam' },
                { host: 'boston.odoo4projects.com', city: 'Boston' },
                { host: 'manchester.odoo4projects.com', city: 'Manchester' },
                { host: 'mumbai.odoo4projects.com', city: 'Mumbai' },
                { host: 'saopaulo.odoo4projects.com', city: 'S\u00e3o Paulo' },
                { host: 'sydney.odoo4projects.com', city: 'Sydney' }
              ];
              var heroImages = {
                'meppel.odoo4projects.com': 'images/hero/amsterdam.webp',
                'boston.odoo4projects.com': 'images/hero/boston.webp',
                'manchester.odoo4projects.com': 'images/hero/london.webp',
                'mumbai.odoo4projects.com': 'images/hero/mumbai.webp',
                'saopaulo.odoo4projects.com': 'images/hero/brazil.webp',
                'sydney.odoo4projects.com': 'images/hero/sydney.webp'
              };

              function pingServer(host) {
                return new Promise(function(resolve) {
                  var start = performance.now();
                  var img = new Image();
                  var timedOut = false;
                  var timer = setTimeout(function() {
                    timedOut = true; img.src = '';
                    resolve({ host: host, time: -1 });
                  }, 2000);
                  img.onload = function() {
                    if (!timedOut) { clearTimeout(timer); resolve({ host: host, time: performance.now() - start }); }
                  };
                  img.onerror = function() {
                    if (!timedOut) { clearTimeout(timer); resolve({ host: host, time: performance.now() - start }); }
                  };
                  img.src = 'https://' + host + '/favicon.ico?_=' + Date.now() + '_' + Math.random().toString(36).slice(2,6);
                });
              }

              /* Click on a server card — slide its city into hero, no label */
              var serverCards = document.querySelectorAll('.server-card');
              serverCards.forEach(function(card, idx) {
                card.addEventListener('click', function() {
                  var s = SERVERS[idx];
                  if (!s || !heroImages[s.host]) return;
                  /* Move golden frame */
                  serverCards.forEach(function(c) { c.classList.remove('server-best'); });
                  card.classList.add('server-best');
                  /* Slide hero bg without label */
                  animateHero(null, heroImages[s.host], false);
                });
              });

              function animateHero(city, image, showLabel) {
                var hero = document.querySelector('.hero');
                if (!hero) return;
                var bg = hero.querySelector('.hero-bg');
                if (!bg) {
                  bg = document.createElement('div');
                  bg.className = 'hero-bg';
                  hero.insertBefore(bg, hero.firstChild);
                }
                var hasExisting = bg.children.length > 0;
                var newEl = document.createElement('div');
                newEl.className = 'hero-bg-slide';
                newEl.style.backgroundImage = "url('" + image + "')";
                bg.appendChild(newEl);

                var tl = gsap.timeline();
                gsap.set(newEl, { x: '100%' });

                var label = null;
                if (showLabel !== false && city) {
                  label = document.createElement('div');
                  label.className = 'hero-city-label';
                  label.innerHTML = 'Our <strong>' + city + '</strong> server fits your location';
                  hero.appendChild(label);
                  gsap.set(label, { x: '150%' });
                }

                if (hasExisting) {
                  var oldEl = bg.children[0];
                  gsap.set(oldEl, { x: '0%' });
                  tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0)
                    .to(newEl, { x: '0%',   duration: 3, ease: 'power2.out' }, 0);
                  if (label) {
                    tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
                  }
                  tl.call(function() { oldEl.remove(); });
                } else {
                  tl.to(newEl, { x: '0%',   duration: 3, ease: 'power2.out' }, 0);
                  if (label) {
                    tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
                  }
                }
              }

              /* Ping all servers, pick best, animate hero */
              var results = [];
              var pending = SERVERS.length;

              /* Populate trial form location dropdown */
              var trialLoc = document.getElementById('trialLocation');
              if (trialLoc) {
                SERVERS.forEach(function(s) {
                  var opt = document.createElement('option');
                  opt.value = s.host;
                  opt.textContent = s.city;
                  trialLoc.appendChild(opt);
                });
              }

              SERVERS.forEach(function(s) {
                pingServer(s.host).then(function(r) {
                  results.push(r);
                  pending--;
                  if (pending === 0) {
                    var valid = results.filter(function(x) { return x.time >= 0; });
                    if (valid.length === 0) return;
                    valid.sort(function(a, b) { return a.time - b.time; });
                    var best = valid[0];
                    var bestServer = SERVERS.filter(function(s) { return s.host === best.host; })[0];
                    /* Preselect best server in trial form */
                    if (trialLoc && bestServer) {
                      for (var i = 0; i < trialLoc.options.length; i++) {
                        if (trialLoc.options[i].value === bestServer.host) {
                          trialLoc.selectedIndex = i;
                          break;
                        }
                      }
                    }
                    if (bestServer && heroImages[best.host]) {
                      /* Highlight the matching server card */
                      var cards = document.querySelectorAll('.server-card');
                      for (var i = 0; i < SERVERS.length && i < cards.length; i++) {
                        if (SERVERS[i].host === best.host) {
                          cards[i].classList.add('server-best');
                          break;
                        }
                      }
                      /* Preload and animate hero */
                      var img = new Image();
                      img.onload = function() { animateHero(bestServer.city, heroImages[best.host]); };
                      img.src = heroImages[best.host];
                    }
                  }
                });
              });

              /* Trial form submission */
              var trialForm = document.getElementById('trialForm');
              if (trialForm) {
                trialForm.addEventListener('submit', function(e) {
                  e.preventDefault();
                  var email = document.getElementById('trialEmail').value.trim();
                  var location = trialLoc.value;
                  if (!email) return;
                  var btn = trialForm.querySelector('.btn-brass');
                  btn.textContent = 'Sending...';
                  btn.disabled = true;
                  fetch('https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ email: email, location: location })
                  }).then(function() {
                    trialForm.style.display = 'none';
                    document.getElementById('trialSuccess').classList.add('visible');
                  }).catch(function() {
                    btn.textContent = 'Send';
                    btn.disabled = false;
                    alert('Something went wrong. Please try again.');
                  });
                });
              }
            })();

            fetch("blog/index.json?_=" + Date.now())
                .then(function (r) {
                    return r.json();
                })
                .then(function (data) {
                    blogState.allPosts = data.posts;
                    renderBlog();
                })
                .catch(function () {
                    document.getElementById("blogGrid").innerHTML =
                        '<div class="blog-empty">Could not load blog posts.</div>';
                });

            document
                .getElementById("blogSearch")
                .addEventListener("input", function () {
                    blogState.searchTerm = this.value;
                    blogState.currentPage = 1;
                    renderBlog();
                });

            /* ---- Scroll-triggered section animations ---- */
            (function () {
                var animated = {};
                var observer = new IntersectionObserver(function (entries) {
                    entries.forEach(function (entry) {
                        if (!entry.isIntersecting) return;
                        var grid = entry.target;
                        if (animated[grid.dataset.section]) return;
                        animated[grid.dataset.section] = true;
                        var items = grid.children;
                        gsap.fromTo(
                            items,
                            { y: 30, opacity: 0 },
                            {
                                y: 0,
                                opacity: 1,
                                duration: 0.7,
                                ease: 'power2.out',
                                stagger: 0.08,
                                overwrite: 'auto'
                            }
                        );
                    });
                }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

                var grids = document.querySelectorAll(
                    '.features-grid, .faq-grid, .pricing-grid, .blog-grid, .final-cta .container'
                );
                grids.forEach(function (g) {
                    g.dataset.section = g.className || 'anon';
                    /* Pre-set children to hidden state so they start invisible */
                    gsap.set(g.children, { y: 30, opacity: 0 });
                    observer.observe(g);
                });
            })();