(function() {
    'use strict';

    var path = window.location.pathname;
    if (path.indexOf('/tutorials') !== 0) return;

    var parts = path.replace(/^\/tutorials\/?/, '').split('/');
    if (parts.length < 2 || !parts[1]) return;

    var section = parts[0];
    var slug = parts[1];

    var steps = document.querySelectorAll('.tut-step');
    if (!steps.length) return;

    var style = document.createElement('style');
    style.textContent = '.tut-screenshot{margin-top:12px;border:1px solid #E5E7EB;border-radius:8px;overflow:hidden;cursor:pointer;max-height:220px;position:relative;transition:max-height .3s ease}.tut-screenshot::after{content:"\\1F50D اضغط للتكبير";position:absolute;bottom:0;left:0;right:0;padding:8px;text-align:center;font-size:11px;color:#6B7280;background:linear-gradient(transparent,#fff 80%)}.tut-screenshot.expanded{max-height:none}.tut-screenshot.expanded::after{content:"اضغط للتصغير";background:#F9FAFB;position:static;display:block;padding:8px;border-top:1px solid #E5E7EB}.tut-screenshot img{width:100%;display:block;border-radius:8px 8px 0 0}';
    document.head.appendChild(style);

    var basePath = '/assets/tutorials/' + section + '/' + slug + '/';

    steps.forEach(function(stepEl, idx) {
        var imgPath = basePath + 'step-' + (idx + 1) + '.png';
        var img = new Image();
        img.onload = function() {
            var wrapper = document.createElement('div');
            wrapper.className = 'tut-screenshot';
            wrapper.onclick = function() { this.classList.toggle('expanded'); };
            wrapper.appendChild(img);
            stepEl.appendChild(wrapper);
        };
        img.src = imgPath;
        img.alt = 'لقطة شاشة - خطوة ' + (idx + 1);
    });
})();
