(function () {
    const debug = (...args) => {
        try { console.log('[Salla Custom JS]', ...args); } catch (e) {}
    };

    function getLabel(textAr, textEn) {
        const isArabic = document.documentElement.lang === 'ar' || document.dir === 'rtl';
        return isArabic ? textAr : textEn;
    }

    function init() {
        debug('Execution started');

        try {
            const buyNowBtn = document.querySelector('a[aria-label="Buy Now Button"]');
            if (buyNowBtn) {
                buyNowBtn.href = "https://o2organics.com/ar/%D9%81%D9%88%D8%B7-%D8%B5%D8%AD%D9%8A%D8%A9/c1869029752";
                debug('Buy Now link updated');
            }
        } catch (e) { debug('Buy Now error', e); }

        try {
            const isArabic = document.documentElement.lang === 'ar' || document.dir === 'rtl';
            const image = document.querySelector('.contact-section img');
            if (isArabic && image) {
                image.style.cssText += ';right:auto!important;left:0!important;transform:scaleX(-1)!important;';
                debug('RTL image adjusted');
            }
        } catch (e) { debug('Image error', e); }

        try {
            const mkyLink = document.querySelector('a[aria-label="Go To MKY Communications"]');
            if (mkyLink) {
                mkyLink.style.display = "none";
                debug('MKY link hidden');
            }
        } catch (e) { debug('MKY error', e); }

        try {
            const aboutUsForm = document.querySelector('[data-page-id="1710081791"]');
            if (aboutUsForm) {
                aboutUsForm.style.display = "none";
                debug('About Us form hidden');

                const customFormContainer = document.createElement('div');
                customFormContainer.innerHTML = `
    <div id="custom-contact-form">
        <style>
            #custom-contact-form {
                max-width: 600px;
                margin: 40px auto;
                padding: 30px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                font-weight: 500;
                color: #2c3e50;
            }
            .form-group input, 
            .form-group textarea {
                width: 100%;
                padding: 14px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-size: 16px;
                transition: all 0.3s;
            }
            .form-group input:focus, 
            .form-group textarea:focus {
                border-color: #3498db;
                outline: none;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            }
            .submit-btn {
                background: #3498db;
                color: white;
                border: none;
                padding: 15px 25px;
                border-radius: 8px;
                font-size: 18px;
                font-weight: 600;
                cursor: pointer;
                width: 100%;
                transition: all 0.3s;
            }
            .submit-btn:hover {
                background: #2980b9;
                transform: translateY(-2px);
            }
            .error-message {
                color: #e74c3c;
                font-size: 14px;
                margin-top: 5px;
                display: none;
            }
        </style>

        <form id="contactForm">
            <div class="form-group">
                <label for="name">${getLabel('الاسم الكامل', 'Full Name')}</label>
                <input type="text" id="name" name="name" placeholder="${getLabel('ادخل اسمك الكامل', 'Enter your full name')}">
                <div class="error-message" id="nameError">${getLabel('الرجاء إدخال الاسم', 'Please enter your name')}</div>
            </div>

            <div class="form-group">
                <label for="phone">${getLabel('رقم الجوال', 'Phone Number')}</label>
                <input type="text" id="phone" name="phone" placeholder="${getLabel('ادخل رقم جوالك', 'Enter your phone number')}">
                <div class="error-message" id="phoneError">${getLabel('الرجاء إدخال رقم الجوال', 'Please enter your phone number')}</div>
            </div>

            <div class="form-group">
                <label for="email">${getLabel('البريد الإلكتروني', 'Email Address')}</label>
                <input type="email" id="email" name="email" placeholder="${getLabel('ادخل بريدك الإلكتروني', 'Enter your email address')}">
                <div class="error-message" id="emailError">${getLabel('الرجاء إدخال بريد إلكتروني صحيح', 'Please enter a valid email address')}</div>
            </div>

            <div class="form-group">
                <label for="quantity">${getLabel('كمية الشراء المتوقعة', 'Expected Purchase Quantity')}</label>
                <input type="number" id="quantity" name="quantity" placeholder="${getLabel('ادخل الكمية المتوقعة', 'Enter expected quantity')}">
                <div class="error-message" id="quantityError">${getLabel('الرجاء إدخال الكمية', 'Please enter quantity')}</div>
            </div>

            <div class="form-group">
                <label for="message">${getLabel('رسالتك', 'Your Message')}</label>
                <textarea id="message" name="message" placeholder="${getLabel('اكتب رسالتك هنا', 'Type your message here')}" rows="5"></textarea>
                <div class="error-message" id="messageError">${getLabel('الرجاء إدخال الرسالة', 'Please enter your message')}</div>
            </div>

            <button type="submit" class="submit-btn">${getLabel('إرسال', 'Send Message')}</button>
        </form>
    </div>
`;

                aboutUsForm.parentNode.insertBefore(customFormContainer, aboutUsForm.nextSibling);

                setTimeout(() => {
                    const form = document.getElementById("contactForm");
                    form.addEventListener("submit", async function (e) {
                        e.preventDefault();

                        const name = document.getElementById("name").value.trim();
                        const phone = document.getElementById("phone").value.trim();
                        const email = document.getElementById("email").value.trim();
                        const quantity = document.getElementById("quantity").value.trim();
                        const message = document.getElementById("message").value.trim();

                        // Hide errors
                        ["name", "phone", "email", "quantity", "message"].forEach(id => {
                            document.getElementById(id + "Error").style.display = "none";
                        });

                        let isValid = true;
                        if (!name) { document.getElementById("nameError").style.display = "block"; isValid = false; }
                        if (!phone) { document.getElementById("phoneError").style.display = "block"; isValid = false; }
                        if (!email || !email.includes("@")) { document.getElementById("emailError").style.display = "block"; isValid = false; }
                        if (!quantity || isNaN(quantity)) { document.getElementById("quantityError").style.display = "block"; isValid = false; }
                        if (!message) { document.getElementById("messageError").style.display = "block"; isValid = false; }

                        if (!isValid) return;

                        const data = { name, phone, email, quantity, message };

                        try {
                            await fetch("https://script.google.com/macros/s/AKfycbw17o7vBJK4Y0NIk01mkGSwSvGC1BQmVVxwd2hOt7oKbEwkcD7WA4aA7GP3vBZG-9Ao/exec", {
                                method: "POST",
                                mode: 'no-cors',
                                body: JSON.stringify(data),
                                headers: {
                                    "Content-Type": "application/json"
                                }
                            });

                            alert(getLabel("تم إرسال الرسالة بنجاح!", "Message sent successfully!"));
                            form.reset();
                        } catch (err) {
                            console.error("Send Error:", err);
                            alert(getLabel("حدث خطأ أثناء إرسال الرسالة.", "There was an error sending your message."));
                        }
                    });
                }, 100);
            }
        } catch (e) { debug('Form error', e); }
    }

    const observer = new MutationObserver(() => {
        const foundElements =
            document.querySelector('a[aria-label="Buy Now Button"]') &&
            document.querySelector('.contact-section img') &&
            document.querySelector('a[aria-label="Go To MKY Communications"]') &&
            document.querySelector('[data-page-id="1710081791"]');

        if (foundElements) {
            observer.disconnect();
            init();
        }
    });

    observer.observe(document, { childList: true, subtree: true });
    setTimeout(() => { observer.disconnect(); init(); }, 3000);
})();