/**
 * Service detail panel – open/close and content switching
 * Keeps design consistent with AS-ENTERIJER site (colors, typography, spacing).
 */
(function () {
    "use strict";

    var SERVICE_DATA = {
        "opremanje": {
            title: "Opremanje po meri",
            intro: "Kompletno opremanje stambenih i poslovnih prostora, od ideje do realizacije. Izbor materijala i završne obrade u skladu sa potrebama i budžetom.",
            content: "<p>Radimo sa različitim tipovima pločastih materijala i dekora; klijentima je omogućen izbor materijala i završne obrade u skladu sa potrebama i budžetom. Koristimo ivericu, MDF i dekor drveta, pouzdan okov.</p><ul class=\"service-detail-list\"><li>Kuhinje, plakari, garderoberi</li><li>Dnevne i spavaće sobe</li><li>Kupatilski nameštaj</li><li>Kancelarijski i poslovni nameštaj</li><li>Vitrine, police, komode</li></ul>",
            gallery: [
                "img/slike/SL 7.jpeg",
                "img/slike/SL 8.jpeg",
                "img/slike/SL 5.jpeg",
                "img/slike/SL 6.jpeg"
            ]
        },
        "3d-vizualizacija": {
            title: "3D vizualizacija",
            intro: "U okviru ponude nudimo 3D vizualizacije u vidu rendera — realističan prikaz prostora, materijala, boja, osvetljenja i detalja.",
            content: "<p>Dobijate jasnu sliku konačnog izgleda pre same izrade. Detaljna dokumentacija i 2D crteži su u ponudi.</p><ul class=\"service-detail-list\"><li>Renderi prostora</li><li>Materijali i boje</li><li>2D crteži u ponudi</li></ul>",
            gallery: [
                "img/slike/SL 4.jpeg",
                "img/slike/SL 8.jpeg",
                "img/slike/SL 7.jpeg"
            ]
        },
        "usluzno-secenje": {
            title: "Uslužno sečenje",
            intro: "Precizno sečenje pločastih materijala za stolare, firme i fizička lica. Savremene mašine, visoka preciznost, kratki rokovi.",
            content: "<p>Sečenje iverice, MDF-a i radnih ploča, rad po krojnim listama, kantovanje, obeležavanje i priprema za montažu.</p><ul class=\"service-detail-list\"><li>Krojne liste</li><li>Kantovanje i sortiranje</li><li>Obeležavanje elemenata</li><li>Priprema za dalju obradu ili montažu</li><li>Minimalni rokovi</li></ul>",
            gallery: [
                "img/slike/usluzno secenje slike 3.jpeg",
                "img/slike/Usluzno secenje5.jpeg",
                "img/slike/SL 1.jpeg",
                "img/slike/SL 2.jpeg"
            ]
        }
    };

    var panel = document.getElementById("service-detail-panel");
    var titleEl = panel && panel.querySelector(".service-detail-title");
    var introEl = panel && panel.querySelector(".service-detail-intro");
    var contentEl = panel && panel.querySelector(".service-detail-content");
    var galleryEl = panel && panel.querySelector(".service-detail-gallery");

    function openService(serviceId) {
        var data = SERVICE_DATA[serviceId];
        if (!data || !panel) return;

        if (titleEl) titleEl.textContent = data.title;
        if (introEl) introEl.textContent = data.intro;
        if (contentEl) contentEl.innerHTML = data.content;

        if (galleryEl) {
            galleryEl.innerHTML = "";
            data.gallery.forEach(function (src) {
                var item = document.createElement("div");
                item.className = "service-detail-gallery-item";
                var img = document.createElement("img");
                img.src = src;
                img.alt = data.title;
                img.loading = "lazy";
                item.appendChild(img);
                galleryEl.appendChild(item);
            });
        }

        panel.classList.add("is-open");
        panel.setAttribute("aria-hidden", "false");
        panel.scrollIntoView({ behavior: "smooth", block: "start" });
    }

    function closeService() {
        if (!panel) return;
        panel.classList.remove("is-open");
        panel.setAttribute("aria-hidden", "true");
        document.getElementById("usluge").scrollIntoView({ behavior: "smooth", block: "start" });
    }

    function init() {
        if (!panel) return;

        document.querySelectorAll(".service-card-arrow").forEach(function (btn) {
            btn.addEventListener("click", function () {
                var id = this.getAttribute("data-service");
                if (id) openService(id);
            });
        });

        var closeBtn = panel.querySelector(".service-detail-close");
        if (closeBtn) closeBtn.addEventListener("click", closeService);
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();
