<h1 class='my-heading'>Just some HTML</h1><?php echo 'The year is ' . date('Y'); ?>

.mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.mod { background: #fff; border: 1px solid var(--g200); border-radius: 18px; padding: 40px; transition: all .2s; display: flex; flex-direction: column; cursor: pointer; }
.mod:hover, .mod.active { box-shadow: var(--sh); border-color: transparent; }
.mod .ico { width: 42px; height: 42px; margin-bottom: 20px; }
.mod .ico svg { width: 100%; height: 100%; fill: none; stroke: var(--magenta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mod h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.mod p { font-size: 14px; color: var(--g500); line-height: 1.7; margin-bottom: 18px; flex: 1; }
.mod .more { color: var(--magenta); font-weight: 600; font-size: 13px; letter-spacing: .3px; align-self: flex-start; border-bottom: 2px solid var(--magenta); padding-bottom: 3px; }
.mod-panel { display: none; }
.mod-panel.active { display: block; }

window.switchMod = function(key, btn) {
  const tabs = document.querySelectorAll('.mod-tab');
  tabs.forEach(t => t.classList.remove('active'));
  btn.classList.add('active');
  
  // W uproszczeniu na potrzeby Bricks podmieniamy prosty kontener tekstowy lub panel:
  const panel = document.getElementById('panel-sprzedaz');
  if(panel) {
    if(key === 'magazyn') {
      panel.innerHTML = "<h4>Szczegóły modułu: Magazyn WMS</h4><p>Pełna kontrola dokumentacji WZ, PZ, MM oraz automatyczne zamykanie aukcji przy braku towaru.</p>";
    } else {
      panel.innerHTML = "<h4>Szczegóły modułu: Sprzedaż wielokanałowa</h4><p>Automatyczna dwukierunkowa integracja zamówień, obsługa statusów, wiadomości od kupujących i asystent AI.</p>";
    }
  }
};