document.addEventListener('DOMContentLoaded', function () {
const inner = document.querySelector('.store-footer__inner');
const container = inner?.querySelector('.container');
if (!inner || !container) return;
/* 0) إزالة أي صف شعار قديم فوق */
inner.querySelectorAll('.pn-footer-logo-row').forEach(n => n.remove());
/* 1) شريط (الشعار يمين) + (تابعنا) + (الاشتراك يسار) */
if (!inner.querySelector('.pn-follow-wrap')) {
const wrap = document.createElement('div');
wrap.className = 'pn-follow-wrap pn-follow--below'; // فاصل
wrap.innerHTML = `
`;
container.insertAdjacentElement('afterend', wrap); // نزلناه تحت الأعمدة
// اجعل عرض الشريط مطابق لعرض .container
const syncFollowWidth = () => {
const w = container.clientWidth;
wrap.style.maxWidth = w ? w + 'px' : '';
wrap.style.margin = '0 auto';
};
syncFollowWidth();
window.addEventListener('resize', syncFollowWidth);
window.addEventListener('orientationchange', syncFollowWidth);
// زر الاشتراك (مؤقت)
wrap.querySelector('#pn-sub-btn').addEventListener('click', () => {
const v = wrap.querySelector('input').value.trim();
if (!v) return alert('رجاءً أدخل بريدك الإلكتروني');
alert('تم استلام بريدك: ' + v);
});
}
/* 2) أعمدة الفوتر */
const makeCol = (title, itemsHTML) => {
const col = document.createElement('div');
col.className = 'pn-footer-col pn-footer-col--panel';
const btn = document.createElement('button');
btn.className = 'pn-acc__head'; btn.type = 'button';
btn.setAttribute('aria-expanded','false');
btn.innerHTML = `${title}
`;
const panel = document.createElement('div');
panel.className = 'pn-acc__panel'; panel.hidden = true; panel.innerHTML = itemsHTML;
col.append(btn, panel);
return { col, btn, panel };
};
const designersHTML = `
`;
const catsHTML = `
`;
const serviceHTML = `
`;
const aboutHTML = `
`;
container.innerHTML = '';
const A = makeCol('أبرز المصممين', designersHTML);
const B = makeCol('أبرز الفئات', catsHTML);
const C = makeCol('خدمة العملاء', serviceHTML);
const D = makeCol('نبذة عن بروجكت نوز', aboutHTML);
container.append(A.col, B.col, C.col, D.col);
container.style.direction = 'rtl';
container.style.alignItems = 'start';
/* 3) وضعيات الاستجابة */
const applyLayout = () => {
const w = window.innerWidth;
const body = document.body;
body.classList.remove('pn-mode-desktop','pn-mode-tablet','pn-mode-mobile');
if (w >= 1024) {
body.classList.add('pn-mode-desktop');
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(4, 1fr)';
container.style.gap = '28px';
[A,B,C,D].forEach(({btn,panel}) => { btn.setAttribute('aria-expanded','true'); panel.hidden = false; });
} else if (w >= 768) {
body.classList.add('pn-mode-tablet');
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(2, 1fr)';
container.style.gap = '20px';
[A,B,C,D].forEach(({btn,panel}) => { btn.setAttribute('aria-expanded','false'); panel.hidden = true; });
} else {
body.classList.add('pn-mode-mobile');
container.style.display = 'grid';
container.style.gridTemplateColumns = '1fr';
container.style.gap = '14px';
[A,B,C,D].forEach(({btn,panel}) => { btn.setAttribute('aria-expanded','false'); panel.hidden = true; });
}
};
container.addEventListener('click', (e) => {
const head = e.target.closest('.pn-acc__head');
if (!head) return;
if (document.body.classList.contains('pn-mode-desktop')) return;
const expanded = head.getAttribute('aria-expanded') === 'true';
head.setAttribute('aria-expanded', String(!expanded));
const panel = head.nextElementSibling;
if (panel) panel.hidden = expanded;
});
applyLayout();
window.addEventListener('resize', applyLayout);
window.addEventListener('orientationchange', applyLayout);
});