<div class="wm-screen">
  <div class="wm-topbar">
    <button class="btn-icon btn-icon-sm" onclick="window.location.href='vendor-details.html?id='+getId()"><i class="bi bi-arrow-left"></i></button>
    <div class="flex-grow-1">
      <h5 class="title">Packages & Pricing</h5>
      <div class="subtitle" id="pSub"></div>
    </div>
  </div>

  <div class="wm-wrap">
    <div class="wm-glass p-3 mb-3">
      <div class="d-flex justify-content-between align-items-center">
        <div><div class="fw-bold">Starting Price</div><div class="text-muted" style="font-size:0.75rem">Transparent, no hidden charges</div></div>
        <div class="fs-3 fw-bold text-gradient" id="startPrice"></div>
      </div>
    </div>

    <div id="packages"></div>

    <button class="btn btn-gradient btn-lg w-100 mt-3" onclick="window.location.href='inquiry.html?id='+getId()"><i class="bi bi-chat-dots me-1"></i>Request Custom Quote</button>
  </div>

  {{> weddings-bottom-nav}}
</div>




<script>
  const id = new URLSearchParams(location.search).get('id') || 'v1';
  const v = wmVendor(id);
  function getId() { return id; }
  document.getElementById('pSub').textContent = v.name;
  document.getElementById('startPrice').textContent = fmtPrice(v.starts);

  const pkgs = [
    { name: 'Essential', price: v.starts, desc: 'Perfect for an intimate celebration', items: ['Basic setup & coordination', '4 hours coverage', 'Standard service package', 'Email support'] },
    { name: 'Signature', price: Math.round(v.starts * 1.8), desc: 'Our most popular choice', featured: true, items: ['Full-day coverage', 'Premium setup & styling', 'Dedicated event manager', 'Priority scheduling', 'WhatsApp support'] },
    { name: 'Royal', price: Math.round(v.starts * 3), desc: 'A complete luxury experience', items: ['Everything in Signature', 'Custom theme design', 'Additional staff & equipment', 'On-site backup team', '24/7 concierge'] }
  ];

  const box = document.getElementById('packages');
  pkgs.forEach(p => {
    const div = document.createElement('div');
    div.className = 'wm-pkg mb-3 position-relative';
    div.classList.toggle('featured', !!p.featured);
    div.innerHTML = `
      ${p.featured ? '<div class="pkg-badge"><i class="bi bi-star-fill me-1"></i>Most Popular</div>' : ''}
      <div class="pkg-name mb-1">${p.name}</div>
      <div class="text-muted mb-2" style="font-size:0.78rem">${p.desc}</div>
      <div class="pkg-price mb-2">${fmtPrice(p.price)} <small>onwards</small></div>
      <ul class="mb-3">
        ${p.items.map(it => `<li><i class="bi bi-check-circle-fill"></i>${it}</li>`).join('')}
      </ul>
      <button class="btn ${p.featured ? 'btn-gradient' : 'btn-outline-primary'} w-100" onclick="window.location.href='inquiry.html?id='+'${id}'"><i class="bi bi-send me-1"></i>Select ${p.name}</button>`;
    box.appendChild(div);
  });
</script>
