document.addEventListener('DOMContentLoaded', function () {
const section = document.querySelector('.ozon-features-click');
if (!section) return;const cards = section.querySelectorAll('.feature-box');
if (!cards.length) return;const details = [
{
title: 'Dostava na teritoriji Crne Gore',
text: 'Dostava je dostupna na teritoriji Crne Gore. Cijena dostave iznosi 4,00 €. Za sve porudžbine u vrijednosti preko 50 € dostava je besplatna. Poručeni artikli sa našeg web shopa šalju se ponedjeljkom i četvrtkom.'
},
{
title: 'Podrška kupcima',
text: 'Za sva dodatna pitanja o proizvodima, dostupnosti artikala ili porudžbinama možete nam pisati na marketing@ozondoo.com.'
},
{
title: 'Popusti i posebne ponude',
text: 'Pratite naš web shop i prijavite se na newsletter kako biste bili u toku sa akcijama, popustima i posebnim ponudama.'
},
{
title: 'Lista želja',
text: 'Sačuvajte omiljene proizvode na listi želja kako biste ih lakše pronašli prilikom sljedeće posjete našem web shopu.'
}
];const overlay = document.createElement('div');
overlay.id = 'ozon-features-modal';
overlay.style.cssText = 'display:none;position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:20px;';const panel = document.createElement('div');
panel.setAttribute('role', 'dialog');
panel.setAttribute('aria-modal', 'true');
panel.setAttribute('aria-labelledby', 'ozon-features-title');
panel.style.cssText = 'position:relative;background:#fff;border-radius:12px;padding:35px 28px;max-width:480px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.15);';const closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.textContent = '×';
closeButton.setAttribute('aria-label', 'Zatvori');
closeButton.style.cssText = 'position:absolute;right:15px;top:10px;background:none;border:0;font-size:30px;color:#555;cursor:pointer;';const title = document.createElement('h3');
title.id = 'ozon-features-title';
title.style.cssText = 'color:#20a5ad;margin:0 25px 18px 0;font-size:22px;';const description = document.createElement('p');
description.style.cssText = 'color:#666;font-size:15px;line-height:1.8;margin:0;';panel.append(closeButton, title, description);
overlay.appendChild(panel);
document.body.appendChild(overlay);let previousFocus = null;function closeModal() {
overlay.style.display = 'none';
if (previousFocus) previousFocus.focus();
}function openModal(index) {
if (!details[index]) return;
previousFocus = document.activeElement;
title.textContent = details[index].title;
description.textContent = details[index].text;
overlay.style.display = 'flex';
closeButton.focus();
}closeButton.addEventListener('click', closeModal);overlay.addEventListener('click', function (event) {
if (event.target === overlay) closeModal();
});document.addEventListener('keydown', function (event) {
if (overlay.style.display !== 'flex') return;
if (event.key === 'Escape') closeModal();
if (event.key === 'Tab') {
event.preventDefault();
closeButton.focus();
}
});Array.from(cards).slice(0, 4).forEach(function (card, index) {
card.style.cursor = 'pointer';
card.setAttribute('role', 'button');
card.setAttribute('tabindex', '0');
card.setAttribute('aria-haspopup', 'dialog');card.addEventListener('click', function (event) {
if (event.target.closest('a, button')) return;
openModal(index);
});card.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
openModal(index);
}
});
});
});});
