Catalogues

<style>
  .catalog-wrap{display:flex;gap:24px;align-items:flex-start}
  .catalog-sidebar{width:260px;max-width:35%;background:#f5f5f7;border-radius:10px;padding:14px}
  .catalog-title{font-weight:700;margin:0 0 10px}
  .catalog-list{list-style:none;margin:0;padding:0}
  .catalog-list li{margin:0}
  .catalog-btn{
    display:block;width:100%;text-align:left;
    background:#fff;border:1px solid #e5e7eb;border-radius:8px;
    padding:10px 12px;margin:6px 0;cursor:pointer;font:inherit
  }
  .catalog-btn.active{border-color:#111;box-shadow:0 0 0 2px #111 inset;color:#111}
  .viewer{flex:1;min-height:70vh}
  .viewer iframe{width:100%;height:75vh;border:none;border-radius:10px;background:#000}
  .dl-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
  .btn{
    display:inline-block;padding:10px 14px;border:1px solid #111;border-radius:8px;text-decoration:none
  }
  .btn-primary{background:#111;color:#fff;border-color:#111}
  .note{font-size:12px;color:#666;margin-top:6px}
  @media(max-width:900px){
    .catalog-wrap{flex-direction:column}
    .catalog-sidebar{width:100%;max-width:100%}
    .viewer iframe{height:65vh}
  }
</style>

<div class="catalog-wrap" id="pvx-catalogs">
  <!-- القائمة الجانبية -->
  <aside class="catalog-sidebar">
    <h3 class="catalog-title">Catalogues</h3>
    <ul class="catalog-list">
      <li><button class="catalog-btn active"
        data-name="Cladz Catalogue"
        data-url="https://cdn.shopify.com/s/files/1/0962/9715/6937/files/cladz.pdf?v=1755947961">Cladz</button></li>
    </ul>
    <p class="note">اضغط على الكتالوج لعرضه فورًا.</p>
  </aside>

  <!-- منطقة العرض والتحميل -->
  <section class="viewer">
    <h3 id="pvx-name" style="margin-top:0;margin-bottom:10px">Cladz Catalogue</h3>
    <iframe id="pvx-frame" src="https://cdn.shopify.com/s/files/1/0962/9715/6937/files/cladz.pdf?v=1755947961" allowfullscreen></iframe>
    <div class="dl-row">
      <a id="pvx-open" class="btn btn-primary" href="https://cdn.shopify.com/s/files/1/0962/9715/6937/files/cladz.pdf?v=1755947961" target="_blank" rel="noopener">Open / Fullscreen</a>
      <a id="pvx-download" class="btn" href="https://cdn.shopify.com/s/files/1/0962/9715/6937/files/cladz.pdf?v=1755947961" target="_blank" download>Download PDF</a>
    </div>
  </section>
</div>

<script>
  (function(){
    const wrap = document.getElementById('pvx-catalogs');
    const buttons = wrap.querySelectorAll('.catalog-btn');
    const iframe = document.getElementById('pvx-frame');
    const title = document.getElementById('pvx-name');
    const openBtn = document.getElementById('pvx-open');
    const dlBtn = document.getElementById('pvx-download');

    function setCatalog(btn){
      buttons.forEach(b=>b.classList.remove('active'));
      btn.classList.add('active');
      const url = btn.dataset.url;
      const name = btn.dataset.name || btn.textContent.trim();
      title.textContent = name;
      iframe.src = url;
      openBtn.href = url;
      dlBtn.href = url;
      dlBtn.setAttribute('download','');
      dlBtn.textContent = 'Download PDF';
    }

    buttons.forEach(btn=>btn.addEventListener('click',()=>setCatalog(btn)));
    setCatalog(buttons[0]);
  })();
</script>