// Detect language 
const getLang = () => {
    const html = document.querySelector("html");
    const lang = html?.getAttribute("lang") || "ar";
    return lang.toLowerCase().includes("en") ? "en" : "ar";
};

const LANG = getLang();
const dict = {
    "من نحن": { ar: "من نحن", en: "About Us" },
    "الدعم والمساعدة": { ar: "الدعم والمساعدة", en: "Support & Help" },
    "السياسات و الخدمات": { ar: "السياسات و الخدمات", en: "Policies & Services" },

    "الشحن والضمان": { ar: "الشحن والضمان", en: "Shipping & Warranty" },
    "التبديل والإسترجاع": { ar: "التبديل والإسترجاع", en: "Exchange & Return" },
    "مصنوع يدوياً بالحب": { ar: "مصنوع يدوياً بالحب", en: "Handmade with Love" }
};

const t = (key) => dict[key]?.[LANG] || key;


const createAccordion = (data, parent, order = 'before') => {
	if (!data || !Array.isArray(data) || data.length === 0 || !parent) return;

	const section = document.createElement('section');
	section.className = 'accordion-section';

	const accorCon = document.createElement('div');
	accorCon.className = 'accordion';

	data.forEach(({ title, content }) => {
		const button = document.createElement('button');
		button.className = 'accordion-button';
		button.innerHTML = `<span class="accor-title">${title}</span> <span class="icon"></span>`;

		const contentDiv = document.createElement('div');
		contentDiv.className = 'accordion-content';
		contentDiv.innerHTML = typeof content === 'string' && content.includes('<') ? content : `<p>${content}</p>`;
		contentDiv.style.maxHeight = null; // reset

		accorCon.append(button, contentDiv);
	});

	section.append(accorCon);

	order === 'before' ? parent.before(section) : parent.after(section);
};

const initAccordion = (parentSelector = '.accordion') => {
	const accordions = document.querySelectorAll(parentSelector);
	if (!accordions.length) return;

	accordions.forEach((accorCon) => {
		const buttons = accorCon.querySelectorAll('.accordion-button');

		buttons.forEach((button) => {
			const contentDiv = button.nextElementSibling;
			if (!contentDiv || !contentDiv.classList.contains('accordion-content')) return;

			contentDiv.style.maxHeight = null;
			button.addEventListener('click', () => {
				const isActive = button.classList.toggle('active');
				buttons.forEach((btn) => {
					const cont = btn.nextElementSibling;
					if (btn !== button) {
				btn.classList.remove('active');
						cont.style.maxHeight = null;
					}
				});
				contentDiv.style.maxHeight = isActive ? `${contentDiv.scrollHeight}px` : null;
			});
		});
	});
};

const validData = [
    {
        title: t('الشحن والضمان'),
        content: LANG === "ar"
            ? `<p>للاطلاع على سياسة الشحن والضمان  
                <a href="https://matchstageing.com/ar/الشحن-والضمان/page-1505892934" class="font-bold">اضغط هنا</a>
               </p>`
            : `<p>To view the shipping & warranty policy 
                <a href="https://matchstageing.com/en/shipping-warranty/page-1505892934" class="font-bold">Click here</a>
               </p>`
    },
    {
        title: t('التبديل والإسترجاع'),
        content: LANG === "ar"
            ? `<p>للإطلاع على سياسة الإستبدال او الإسترجاع 
                <a href="https://matchstageing.com/ar/سياسة-الإستبدال-والإسترجاع/page-307690232" class="font-bold">اضغط هنا</a>
               </p>`
            : `<p>To view the exchange or return policy 
                <a href="https://matchstageing.com/en/exchange-return/page-307690232" class="font-bold">Click here</a>
               </p>`
    },
    {
        title: t('مصنوع يدوياً بالحب'),
        content: LANG === "ar"
            ? `<p>
                صُنع يدويًا بالحب:<br>
                كل عطر من ماتش يُصنع بعناية فائقة… 
               </p>`
            : `<p>
                Handmade with love:<br>
                Every Match perfume is carefully crafted…
               </p>`
    }
];


const footerAccordionData = () => {
    const links = document.querySelector('.footer-list');
    if (!links) return [];

    const items = [...links.children];

    const aboutItem = items[0] ? [items[0]] : [];
    const supportItems = items.slice(1, 3);
    const linkItems = items.slice(3);

    const createListHTML = (arr) => {
        const ul = document.createElement('ul');
        arr.forEach((el) => ul.appendChild(el.cloneNode(true)));
        return ul.outerHTML;
    };

    return [
        { title: t('من نحن'), content: createListHTML(aboutItem) },
        { title: t('الدعم والمساعدة'), content: createListHTML(supportItems) },
        { title: t('السياسات و الخدمات'), content: createListHTML(linkItems) },
    ];
};



document.addEventListener('DOMContentLoaded', () => {
	const footer = document.querySelector('.store-footer__inner .grid div:nth-of-type(2)');
	if (footer) {
		createAccordion(footerAccordionData(), footer, 'after');
	}

	const proForm = document.querySelector('.product-single salla-payments');
	if (proForm) {
		createAccordion(validData, proForm, 'after');
	}
	initAccordion('.accordion');
});