<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Certificate of Compliance &amp; Conformity</title>
  <link rel="stylesheet" href="certificate.css">
</head>
<body>
  <main class="certificate-page" aria-label="Certificate of Compliance and Conformity">
    <section class="certificate-sheet">
      <div class="ornamental-border" aria-hidden="true"></div>

      <header class="certificate-header">
        <h1>Certificate</h1>
        <p class="certificate-kicker">of Compliance &amp; Conformity</p>
        <p class="certificate-type">{{CATEGORY}}</p>
      </header>

      <table class="certificate-details" aria-label="Certificate details">
        <thead>
          <tr>
            <th scope="col">Particulars</th>
            <th scope="col">Details</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Reference No.</th>
            <td>{{REFERENCE_NO}}</td>
          </tr>
          <tr>
            <th scope="row">Door Certificate No.</th>
            <td>{{DOOR_CERTIFICATE_NO}}</td>
          </tr>
          <tr>
            <th scope="row">Date</th>
            <td>{{DATE}}</td>
          </tr>
          <tr>
            <th scope="row">Client</th>
            <td>{{CLIENT}}</td>
          </tr>
          <tr>
            <th scope="row">Project / Site</th>
            <td>{{PROJECT_SITE}}</td>
          </tr>
          <tr>
            <th scope="row">Area</th>
            <td>{{AREA}}</td>
          </tr>
          <tr>
            <th scope="row">Manufacturing Date</th>
            <td>{{MANUFACTURING_DATE}}</td>
          </tr>
          <tr>
            <th scope="row">Fire Rating</th>
            <td>{{FIRE_RATING}}</td>
          </tr>
          <tr>
            <th scope="row">Standards Complied</th>
            <td>{{STANDARDS_COMPLIED}}</td>
          </tr>
          <tr>
            <th scope="row">Validity Period</th>
            <td>{{VALIDITY_PERIOD}}</td>
          </tr>
          <tr>
            <th scope="row">Current Status</th>
            <td>{{CURRENT_STATUS}}</td>
          </tr>
        </tbody>
      </table>

      <p class="certificate-note"><strong>Note:</strong> This is a system-generated document and hence does not require any signature.</p>

      <div class="certificate-verification">
        <div class="qr-slot" aria-label="Verification QR code">{{QR_CODE}}</div>
        <img class="seal" src="{{SEAL_IMAGE}}" alt="SAMCON Associates seal">
      </div>
      <footer class="certificate-footer">
  <div class="footer-title">
    <span></span>
    <strong>SAMCON Associates (Pvt) Ltd :</strong>
    <span></span>
  </div>
  <div class="footer-grid">
    <div class="footer-item address">
      <span class="footer-icon" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C8.69 2 6 4.69 6 8c0 5 6 14 6 14s6-9 6-14c0-3.31-2.69-6-6-6z" fill="#fff"/>
          <circle cx="12" cy="8" r="2.5" fill="var(--gold)"/>
        </svg>
      </span>
      <p>Plot No: 149C- Quaid-e-Azam Business Park Sheikhupura , Punjab Pakistan</p>
    </div>

    <div class="footer-item">
      <span class="footer-icon" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="7" y="2" width="10" height="18" rx="2" stroke="#fff" stroke-width="1.8"/>
          <circle cx="12" cy="17" r="1.2" fill="#fff"/>
        </svg>
      </span>
      <p>+923006036859</p>
    </div>
    <div class="footer-item email">
      <span class="footer-icon" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="2" y="5" width="20" height="14" rx="2" stroke="#fff" stroke-width="1.8"/>
          <polyline points="2,5 12,13 22,5" stroke="#fff" stroke-width="1.8" fill="none"/>
        </svg>
      </span>
      <p>info@samcon.com.pk</p>
    </div>
  </div>
      </footer>
    </section>
  </main>
  <script>
  (function () {
    var body = document.body;
    if (!body.classList || body.classList.contains('certificate-export')) {
      return;
    }

    var forceFit = body.classList.contains('certificate-fit');
    var fitBreakpoint = 860;
    var sheetWidth = 210 / 25.4 * 96;
    var sheetHeight = 297 / 25.4 * 96;

    function fitCertificate() {
      var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 360;
      var shouldFit = forceFit || viewportWidth <= fitBreakpoint;
      if (!shouldFit) {
        body.classList.remove('certificate-fit');
        body.style.removeProperty('--certificate-fit-width');
        body.style.removeProperty('--certificate-fit-scale');
        body.style.removeProperty('--certificate-fit-height');
        return;
      }

      var fitWidth = Math.max(240, Math.min(760, Math.floor(viewportWidth - 16)));
      var scale = Math.min(1, fitWidth / sheetWidth);
      body.classList.add('certificate-fit');
      body.style.setProperty('--certificate-fit-width', Math.ceil(sheetWidth * scale) + 'px');
      body.style.setProperty('--certificate-fit-scale', scale.toFixed(4));
      body.style.setProperty('--certificate-fit-height', Math.ceil(sheetHeight * scale) + 'px');
    }

    fitCertificate();
    window.addEventListener('resize', fitCertificate);
  })();
  </script>
</body>
</html>
