<%- include('partials/head') %>
<%- include('partials/header') %>

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Testimonials</div>
      <h1>Customer testimonials</h1>
      <p class="section-sub" style="margin-top:6px;">Real words and real fits from people who copped their piece from TOUS CINO.</p>
    </div>
  </section>

  <section class="section testimonials-wrap">
    <div class="container">
      <% if (testimonials.length) { %>
        <div class="testimonial-grid">
          <% testimonials.forEach(function(t){ %>
            <% const parts = (t.customer_name || '?').split(' '); const ini = parts.map(function(w){return w[0];}).slice(0,2).join('').toUpperCase(); %>
            <figure class="testimonial-card">
              <div class="testimonial-media">
                <% if (t.photo) { %>
                  <img src="/public/images/testimonials/<%= t.photo %>" alt="<%= t.customer_name %>" loading="lazy">
                <% } else { %>
                  <div class="testimonial-avatar ini"><%= ini %></div>
                <% } %>
              </div>
              <figcaption>
                <div class="testimonial-stars"><%= '★'.repeat(t.rating) %><span class="off"><%= '★'.repeat(5 - t.rating) %></span></div>
                <blockquote><%= t.text %></blockquote>
                <div class="testimonial-meta">
                  <b class="testimonial-name"><%= t.customer_name %></b>
                  <span class="testimonial-loc"><% if (t.location) { %> <%= t.location %> · <% } %><% if (t.product_name) { %>got the <%= t.product_name %><% } else { %>verified customer<% } %></span>
                </div>
              </figcaption>
            </figure>
          <% }); %>
        </div>
      <% } else { %>
        <div class="empty" style="padding:60px 20px;">
          <h3>Testimonials coming soon</h3>
          <p>Check back shortly for customer stories and photos.</p>
        </div>
      <% } %>
    </div>
  </section>

  <section class="section section-sm">
    <div class="container" style="text-align:center;">
      <h2 style="margin-bottom:10px;">Got your fit?</h2>
      <p class="section-sub" style="margin-bottom:24px;">Show it with the squad and tell us how it went.</p>
      <a class="btn btn-gold" href="/contact"><i class="ic" data-ic="whatsapp"></i> Reach us on WhatsApp</a>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<%- include('partials/scripts') %>