(() => {

    const addShadowStyle = (selector, id, css) => {
        const el = document.querySelector(selector);

        if (el?.shadowRoot && !el.shadowRoot.querySelector(`#${id}`)) {
            const style = document.createElement("style");
            style.id = id;
            style.textContent = css;
            el.shadowRoot.appendChild(style);
        }
    };

    const injectStyles = () => {
        addShadowStyle(
            '[component-name="before-after"]',
            "custom-before-after-style",
            `
            .title{font-size:19px!important}
            .comparison-wrapper,.has-shadow{box-shadow:none!important}
            .comparison-wrapper{border-radius:8px!important}
            .label{
                top:1rem!important;
                bottom:auto!important;
                padding:2px 10px!important;
                border-radius:2px!important;
                font-size:15px!important;
            }`
        );

        addShadowStyle(
            '[component-name="video-scroll-cards"]',
            "custom-video-style",
            `
            .section-title{
                font-size:19px!important;
                text-align:center!important;
            }
            .video-card{
                aspect-ratio:9/15!important;
                border-radius:5px!important;
                flex:0 0 120px!important;
            }`
        );
    };

    const insertTamaraWidget = () => {
        const target = document.querySelector('.index .s-product-card-entry[id="1428106672"]');

        if (!target || document.querySelector(".newwidjet")) return;

        target.insertAdjacentHTML("afterend", `
            <div class="box-tamara newwidjet">
                <div class="tamara-box">
                    <div class="tamara-first">
                        <strong>68 ر.س</strong><br>لكل دفعة
                    </div>

                    <div class="tamara-content">
                        أو قسم فاتورتك بقيمة <strong>68 ر.س</strong> على 4 دفعات
                        بدون رسوم تأخير، متوافقة مع الشريعة الإسلامية
                    </div>

                    <div class="tamara-logo">
                        <img src="https://cdn.assets.salla.network/themes/1034648396/1.168.0/images/tamara_installment.png">
                    </div>
                </div>
            </div>
        `);
    };

    injectStyles();
    insertTamaraWidget();

    new MutationObserver(() => {
        injectStyles();
        insertTamaraWidget();
    }).observe(document.body, {
        childList: true,
        subtree: true
    });

    const header = document.querySelector("header.store-header .inner.bg-inherit .flex.items-stretch");

    if (header) {
        header.insertAdjacentHTML("afterend", `
            <div class="danlogo">
                <div class="sleekylogo">
                    <a class="logo" href="https://getsleeky.com/">
                        <img src="https://cdn.files.salla.network/homepage/2024244525/1f4bc276-abe8-48d2-82f0-b842623837fc_1437x645.webp" loading="eager">
                        <h1 class="sr-only">sleeky</h1>
                    </a>
                </div>
            </div>
        `);
    }

    window.addEventListener("load", () => {
        document.querySelector(".copyright-text p")?.insertAdjacentHTML(
            "afterend",
            `
            <div>
                <span class="dev-link">
                    :designed by
                    <a href="https://wa.me/message/IZLDUASX6U3SC1">ddandesign</a>
                </span>
            </div>
            `
        );
    });

})();