const templates = {
  header: `
  <header class="site-header" id="top">
    <div class="container header-inner">
      <a class="logo" href="index.html" aria-label="Aquafix home">
        <img src="images/Aqua Fix Finallogo-web.svg" alt="Aquafix Logo" style="height: 120px; width: auto;">
      </a>

      <nav class="main-nav" id="mainNav" aria-label="Primary">
        <a href="index.html">Home</a>
        <a href="about.html">About Us</a>
        <a href="supply.html">What We Supply</a>
        <a href="products.html">Products</a>
        <a href="contact.html">Contact Us</a>
      </nav>

      <a href="contact.html" class="btn btn-navy header-cta">Request a Quote</a>

      <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
    </div>
  </header>
  `,

  cta: `
  <section class="section section-navy cta-section">
    <div class="container cta-container">
      <p class="cta-text">Whether you're specifying a vessel, commercial building, healthcare facility or industrial plant, our team can help you select the right piping, valve and fitting solutions for your application.</p>
      <a href="contact.html" class="btn btn-cyan cta-btn">Get in Touch</a>
    </div>
  </section>
  `,

  footer: `
  <footer class="site-footer">
    <div class="container footer-inner">
      <div class="footer-brand" style="display: flex; align-items: center; gap: 24px;">
        <a class="logo" href="#top" aria-label="Aquafix home">
          <img src="images/Aqua Fix Finallogo_footer.svg" alt="Aquafix Logo" style="height: 200px; width: auto;">
        </a>
        <div class="footer-brand-text">
          <p class="footer-tag" style="margin-top:0;">Big on quality, built on trust</p>
          <p class="footer-addr">Dubai Industrial City, Dubai, UAE</p>
        </div>
      </div>
      <nav class="footer-nav" aria-label="Footer">
        <a href="index.html">Home</a>
        <a href="about.html">About Us</a>
        <a href="supply.html">What We Supply</a>
        <a href="products.html">Products</a>
        <a href="contact.html">Contact Us</a>
      </nav>
    </div>
    <div class="footer-bottom">
      <div class="container footer-bottom-inner">
        <p>© 2026 Aquafix Ship &amp; Boats Spare Parts Trading LLC. All rights reserved.</p>
        <p>Web designed by <a href="https://www.bytesflow.com" target="_blank" rel="noopener">Bytesflow Technologies</a>
        </p>
      </div>
    </div>
  </footer>
  `,

  floating: `
  <!-- ============ FLOATING WIDGETS ============ -->
  <div class="floating-widgets">
    <a href="https://wa.me/971529494782" target="_blank" rel="noopener" class="float-btn float-whatsapp" aria-label="Chat on WhatsApp">
      <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" fill="currentColor">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.888-.788-1.489-1.761-1.663-2.06-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.575-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.029 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.052 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
      </svg>
    </a>
    <button id="backToTop" class="float-btn float-top" aria-label="Back to top">
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 19V5M5 12l7-7 7 7"/>
      </svg>
    </button>
  </div>
  `,

  modal: `
  <div class="modal-overlay" id="quoteModal" hidden>
    <div class="modal-content">
      <button class="modal-close" id="closeQuoteModal" aria-label="Close modal">&times;</button>
      <h3>Get a Quote</h3>
      <p class="modal-desc">Please fill out the details below to request a quote.</p>
      <form class="contact-form" id="quoteForm">
        <div class="form-row">
          <input type="text" name="product" id="quoteProductInput" readonly style="background-color: #f1f5f9; cursor: not-allowed; color: var(--slate); font-weight: 600;" title="Selected Product">
          <input type="number" name="quantity" placeholder="Quantity in Tonnes" min="1" required>
        </div>
        <div class="form-row">
          <input type="text" name="name" placeholder="Your Name" required>
          <input type="email" name="email" placeholder="Email" required>
        </div>
        <input type="tel" name="phone" placeholder="Phone">
        <textarea name="message" rows="4" placeholder="Additional details..." required></textarea>
        <button type="submit" class="btn btn-navy btn-full">Request Quote</button>
        <p class="form-success" id="quoteSuccess" hidden>Request sent! We will contact you soon.</p>
      </form>
    </div>
  </div>
  `,

  contact: `
  <!-- ============ GET IN TOUCH ============ -->
  <section class="section section-tint" id="contact">
    <div class="container">
      <div class="section-head">
        <h2>Get in Touch</h2>
        <span class="accent-bar center"></span>
      </div>
      <div class="contact-grid">
        <div class="contact-info">
          <div class="info-block">
            <div class="info-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                <path d="M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z" fill="none" stroke="currentColor" stroke-width="1.8" />
                <circle cx="12" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.8" />
              </svg>
            </div>
            <div>
              <h3>Address</h3>
              <p>P1 / Block R-17R, Saih Shuaib 2,<br>Dubai Industrial City, Dubai, UAE</p>
            </div>
          </div>

          <div class="info-block">
            <div class="info-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                <path d="M6 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L16 14l5 2v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
              </svg>
            </div>
            <div>
              <h3>Phone</h3>
              <p>
                <a href="tel:+971529494782">+971 52 949 4782</a><br>
                <a href="tel:+971528681929">+971 52 868 1929</a><br>
                <a href="tel:+97104398 4978">+971 04 398 4978</a>
              </p>
            </div>
          </div>

          <div class="info-block">
            <div class="info-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.8" />
                <path d="m3 7 9 6 9-6" fill="none" stroke="currentColor" stroke-width="1.8" />
              </svg>
            </div>
            <div>
              <h3>Email</h3>
              <p>
                <a href="mailto:Sales@aquafixpipingsystem.com">Sales@aquafixpipingsystem.com</a><br>
                <a href="mailto:Silam@aquafixpipingsystem.com">Silam@aquafixpipingsystem.com</a>
              </p>
            </div>
          </div>
        </div>

        <div class="contact-form-wrap">
          <h3>Send Us an Enquiry</h3>
          <form class="contact-form" id="enquiryForm" novalidate>
            <div class="form-row">
              <input type="text" name="company" placeholder="Company Name" required>
              <input type="email" name="email" placeholder="Email" required>
            </div>
            <div class="form-row">
              <select name="category" aria-label="Product Category">
                <option value="" disabled selected>Product Category (Optional)</option>
                <option value="Pipes">Pipes</option>
                <option value="Fittings">Fittings</option>
                <option value="Valves">Valves</option>
                <option value="Drainage Systems">Drainage Systems</option>
                <option value="Marine Spare Parts">Marine Spare Parts</option>
                <option value="Other">Other</option>
              </select>
              <select name="material" aria-label="Material">
                <option value="" disabled selected>Material (Optional)</option>
                <option value="PVC">PVC</option>
                <option value="CPVC">CPVC</option>
                <option value="PPR">PPR</option>
                <option value="PP">PP</option>
                <option value="HDPE">HDPE</option>
                <option value="Stainless Steel">Stainless Steel</option>
                <option value="Carbon Steel">Carbon Steel</option>
                <option value="Copper">Copper</option>
                <option value="Brass">Brass</option>
                <option value="Thermoplastic">Thermoplastic</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <input type="tel" name="phone" placeholder="Phone">
            <textarea name="message" rows="5" placeholder="Message" required></textarea>
            <button type="submit" class="btn btn-navy">Send Enquiry</button>
            <p class="form-success" id="formSuccess" hidden>Thank you — your enquiry has been noted. Our team will be in touch shortly.</p>
          </form>
        </div>
      </div>
    </div>
  </section>
  `
};

function loadTemplates() {
  const elements = ['header', 'cta', 'footer', 'modal', 'contact'];
  elements.forEach(id => {
    const el = document.getElementById('template-' + id);
    if (el) {
      el.innerHTML = templates[id];
    }
  });

  // Inject floating widgets directly into body
  document.body.insertAdjacentHTML('beforeend', templates.floating);
}

// Load templates immediately before DOMContentLoaded fires
loadTemplates();
