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

    const section = document.querySelector(
        'section.s-block--store-branches'
    );

    if (!section) return;

    if (section.querySelector(".custom-branches-intro")) return;

    const intro = document.createElement("div");

    intro.className = "custom-branches-intro";

    intro.innerHTML = `
        <h2>فروعنا</h2>

        <p>
            زورونا في فروع عيني عينك واكتشفوا خدماتنا
            واختروا الفرع الأقرب لكم.
        </p>

        <a
            href="https://ainyainak.sa/%D9%81%D8%B1%D9%88%D8%B9%D9%86%D8%A7/page-626795119"
            class="custom-branches-btn"
        >
            تعرف على فروعنا
        </a>
    `;

    section.insertBefore(intro, section.firstElementChild);



    const style = document.createElement("style");

    style.textContent = `
        .custom-branches-intro {
            text-align: center;
            margin-bottom: 35px;
            padding: 0 20px;
        }

        .custom-branches-intro h2 {
            margin: 0 0 10px;
            font-size: 32px;
            font-weight: 700;
            line-height: 1.4;
        }

        .custom-branches-intro p {
            margin: 0 auto 20px;
            max-width: 650px;
            font-size: 17px;
            line-height: 1.8;
            color: #666;
        }

        .custom-branches-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 13px 30px;
            background-color: #0B3B2E;
            color: #ffffff !important;
            text-decoration: none !important;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5;
            transition: all 0.3s ease;
        }

        .custom-branches-btn:hover {
            background-color: #0B3B2E;
            color: #ffffff !important;
            transform: translateY(-2px);
        }

        @media (max-width: 767px) {

            .custom-branches-intro {
                margin-bottom: 25px;
                padding: 0 15px;
            }

            .custom-branches-intro h2 {
                font-size: 25px;
                margin-bottom: 8px;
            }

            .custom-branches-intro p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .custom-branches-btn {
                width: 100%;
                max-width: 280px;
                padding: 12px 24px;
                font-size: 15px;
            }
        }
    `;

    document.head.appendChild(style);

});