// تعديل الشريط الاعلاني
const div_Alert_Text = document.createElement('div');
const Alert_Advertisement = document.querySelector('.salla-advertisement')


div_Alert_Text.innerHTML =
  `
<div class="salla-advertisement relative z-50"
        style="background-color:#000000;color:#a40606;/* margin-top: 82px; */">
        <div class="container center-between py-2.5">
            <h2 class="flex-1 font-bold text-center text-sm">
                <i class="inline-block align-middle mr-2 text-base sicon-bell"></i>
                <a href="https://rijal-albaria.com/category/qqEWKQ" target="_self">
                    سيتم إيقاف الشحن ابتداءً من يوم 14 مارس جميع الطلبات التي سيتم استلامها بداية من هذا التاريخ سيتم
                    شحنها بعد العيد مباشرة
                </a>
            </h2>
            <a href="#" class="px-1 ad-close sicon-cancel" aria-label="close-alert"></a>
        </div>
    </div>
`
Alert_Advertisement.prepend(div_Alert_Text)

// إنشاء وإضافة شريط معلومات الاتصال
function createContactInfoBar() {
    // العثور على السيكشن باستخدام سليكتور .map
    const mapSection = document.querySelector('.map');
    const mapOuter = mapSection.querySelector('.map-outer');
    
    // إنشاء عنصر شريط المعلومات
    const contactBar = document.createElement('div');
    contactBar.className = 'contact-info-bar';
    contactBar.style.cssText = `
        background: linear-gradient(135deg, #8B4513, #A0522D);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: -80px;
        margin-top: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        position: relative;
        z-index: 10;
        overflow: hidden;
        font-family: 'Cairo', sans-serif;
    `;

    // إنشاء عنصر رقم التواصل (معدل)
    const phoneItem = document.createElement('div');
    phoneItem.className = 'contact-item';
    phoneItem.style.cssText = `
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Cairo', sans-serif;
    `;

    phoneItem.innerHTML = `
        <div style="
            background: rgba(255,255,255,0.2);
            padding: 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        ">
            <i class="fa fa-phone" style="font-size: 20px; color: white;"></i>
        </div>
        <div>
            <div style="font-size: 14px; opacity: 0.9; margin-bottom: 10px; line-height: 1.2; font-family: 'Cairo', sans-serif;">رقم التواصل</div>
            <div style="font-size: 18px; font-weight: 600; font-family: 'Cairo', sans-serif;">+966 114835750</div>
        </div>
    `;

    // إنشاء عنصر العنوان
    const addressItem = document.createElement('div');
    addressItem.className = 'contact-item';
    addressItem.style.cssText = `
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        font-size: 16px;
        font-weight: 500;
        flex: 1;
        justify-content: center;
        font-family: 'Cairo', sans-serif;
    `;

    addressItem.innerHTML = `
        <div style="
            background: rgba(255,255,255,0.2);
            padding: 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        ">
            <i class="fa fa-map-marker" style="font-size: 20px; color: white;"></i>
        </div>
        <div style="text-align: center;">
            <div style="font-size: 14px; opacity: 0.9; margin-bottom:10px; line-height: 1.2; font-family: 'Cairo', sans-serif;">العنوان</div>
            <div style="font-size: 16px; font-weight: 600; line-height: 1.4; font-family: 'Cairo', sans-serif;">
                الطريق الدائري الغربي الفرعي<br>
                السعودي الغربي، الرياض
            </div>
        </div>
    `;

    // إنشاء عنصر البريد الإلكتروني (معدل)
    const emailItem = document.createElement('div');
    emailItem.className = 'contact-item';
    emailItem.style.cssText = `
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Cairo', sans-serif;
    `;

    emailItem.innerHTML = `
        <div style="
            background: rgba(255,255,255,0.2);
            padding: 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        ">
            <i class="fa fa-envelope" style="font-size: 20px; color: white;"></i>
        </div>
        <div>
            <div style="font-size: 14px; opacity: 0.9; margin-bottom:10px; line-height: 1.2; font-family: 'Cairo', sans-serif;">البريد الإلكتروني</div>
            <div style="font-size: 16px; font-weight: 600; font-family: 'Cairo', sans-serif;">RIJAL.ALBARIAH@GMAIL.COM</div>
        </div>
    `;

    // العناصر الزخرفية
    const decorative1 = document.createElement('div');
    decorative1.style.cssText = `
        position: absolute;
        top: -50px;
        right: -50px;
        width: 100px;
        height: 100px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    `;

    const decorative2 = document.createElement('div');
    decorative2.style.cssText = `
        position: absolute;
        bottom: -30px;
        left: -30px;
        width: 60px;
        height: 60px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    `;

    // إضافة العناصر إلى الشريط
    contactBar.appendChild(phoneItem);
    contactBar.appendChild(addressItem);
    contactBar.appendChild(emailItem);
    contactBar.appendChild(decorative1);
    contactBar.appendChild(decorative2);

    // إضافة الشريط إلى الصفحة
    mapOuter.insertAdjacentElement('beforebegin', contactBar);

    // إضافة الخطوط والستايلات
    addCairoFont();
    addResponsiveStyles();
}

// إضافة خط Cairo و Font Awesome
function addCairoFont() {
    const cairoLink = document.createElement('link');
    cairoLink.href = 'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap';
    cairoLink.rel = 'stylesheet';
    document.head.appendChild(cairoLink);
    
    const fontAwesome = document.createElement('link');
    fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
    fontAwesome.rel = 'stylesheet';
    document.head.appendChild(fontAwesome);
}

// ستايلات متجاوبة
function addResponsiveStyles() {
    const style = document.createElement('style');
    style.textContent = `
        @media (max-width: 768px) {
            .contact-info-bar {
                flex-direction: column !important;
                text-align: center !important;
                margin-bottom: -60px !important;
                padding: 20px !important;
                gap: 25px !important;
            }
            .contact-item {
                justify-content: flex-start !important;
                width: 100%;
                text-align: right !important;
                background: rgba(255,255,255,0.1);
                padding: 15px;
                border-radius: 10px;
            }
            .contact-item div:last-child div {
                line-height: 1.2 !important;
            }
        }
    `;
    document.head.appendChild(style);
}