(function () {
'use strict';

/* =========================
   Move Language to Header
========================= */

function moveLanguage() {

    const lang = document.querySelector('[data-salla="footer-language-switcher"]');
    const header = document.querySelector('.flex.items-center.justify-end.w-1\\/3');

    if (!lang || !header) return;

    if (!document.getElementById('header-lang-switch')) {

        const clone = lang.cloneNode(true);
        clone.id = 'header-lang-switch';

        header.prepend(clone);

        lang.style.display = 'none';
    }
}

moveLanguage();

new MutationObserver(moveLanguage).observe(document.body, {
    childList: true,
    subtree: true
});


/* =========================
   Lip Oil Shades
========================= */

const isArabic = window.location.pathname.startsWith('/ar');

const shades = [

{
    name: "Warm Beige",
    color: "#C79C7B",
    url: isArabic
        ? "https://rubyclaire.co/ar/ليب-أويل-وورم-بيج-نيود-دافئ/p579277126"
        : "https://rubyclaire.co/en/lip-oil-warm-beige/p579277126"
},

{
    name: "Bare Sand",
    color: "#D9B79A",
    url: isArabic
        ? "https://rubyclaire.co/ar/ليب-أويل-بير-ساند-نيود-شفاف/p729061384"
        : "https://rubyclaire.co/en/lip-oil-bare-sand/p729061384"
},

{
    name: "Rose Bud",
    color: "#C86F84",
    url: isArabic
        ? "https://rubyclaire.co/ar/ليب-أويل-روز-باد-وردي-كلاسيكي/p292535809"
        : "https://rubyclaire.co/en/lip-oil-rose-bud/p292535809"
},

{
    name: "Pink Clouds",
    color: "#F7A8C5",
    url: isArabic
        ? "https://rubyclaire.co/ar/ليب-أويل-بينك-كلاود-وردي-ناعم/p146754803"
        : "https://rubyclaire.co/en/lip-oil-pink-clouds/p146754803"
},

{
    name: "Plush Dream",
    color: "#A56A7D",
    url: isArabic
        ? "https://rubyclaire.co/ar/ليب-أويل-بلاش-دريمز-خوخي-دافئ/p2100789057"
        : "https://rubyclaire.co/en/lip-oil-plush-dream/p2100789057"
}

];

function renderShades() {

    const path = window.location.pathname.toLowerCase();

    const isLipPage = [
        "lip",
        "lip-oil",
        "lip-oils",
        "ليب",
        "اويل",
        "أويل",
        "شفاه",
        "ملمع"
    ].some(word => path.includes(word));

    if (!isLipPage) return;

    if (document.getElementById("lip-shades")) return;

    const target =
        document.querySelector("#product-form") ||
        document.querySelector(".product-form") ||
        document.querySelector(".product-single__info") ||
        document.querySelector(".product-single");

    if (!target) return;

    const currentPath = window.location.pathname;

    const wrapper = document.createElement("div");
    wrapper.id = "lip-shades";
    wrapper.style.margin = "20px 0";
      wrapper.innerHTML = `
        <div style="
            font-size:15px;
            font-weight:600;
            margin-bottom:12px;
        ">
            Shade
        </div>

        <div style="
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            align-items:center;
        ">

        ${shades.map(shade => {

            const active =
                currentPath === new URL(shade.url).pathname;

            return `
                <a
                    href="${shade.url}"
                    title="${shade.name}"
                    aria-label="${shade.name}"

                    style="
                        width:34px;
                        height:34px;
                        border-radius:50%;
                        background:${shade.color};
                        display:block;
                        box-sizing:border-box;
                        border:${active ? "3px solid #000" : "2px solid #ddd"};
                        transition:.25s;
                    ">
                </a>
            `;

        }).join("")}

        </div>
    `;

    target.appendChild(wrapper);

}

document.addEventListener("DOMContentLoaded", function () {

    renderShades();

    new MutationObserver(renderShades).observe(document.body, {
        childList: true,
        subtree: true
    });

});


/* =========================
   Button Style
========================= */

function styleButtons() {

    document.querySelectorAll("button").forEach(btn => {

        const svg = btn.querySelector("svg");
        if (!svg) return;

        btn.style.background = "#F7B6C8";
        btn.style.border = "1.5px solid #E58DAA";
        btn.style.color = "#000";
        btn.style.boxShadow = "none";
        btn.style.transition = ".25s";

        svg.style.stroke = "#000";
        svg.style.fill = "none";

    });

}
  document.addEventListener("DOMContentLoaded", function () {

    setTimeout(styleButtons, 800);

    new MutationObserver(styleButtons).observe(document.body, {
        childList: true,
        subtree: true
    });

});


/* =========================
   Optional Hover Effect
========================= */

document.addEventListener("mouseover", function (e) {

    const btn = e.target.closest("button");

    if (!btn) return;

    btn.style.opacity = ".92";

});

document.addEventListener("mouseout", function (e) {

    const btn = e.target.closest("button");

    if (!btn) return;

    btn.style.opacity = "1";

});


})();