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

<main>
  <section class="hero">
    <div class="hero-bg"></div>
    <div class="container hero-inner">
      <div class="hero-kicker reveal">TOUS CINO — Est. 2026</div>
      <h1 class="hero-title reveal">EVERYONE'S <span class="gold">SENSE</span> OF FREENESS</h1>
      <p class="hero-sub reveal">Modern accessories, gadgets, cosmetics and drip from different brands. Premium picks, curated for the culture — shipped from Pretoria to you, 24/7.</p>
      <div class="hero-cta reveal">
        <a class="btn btn-gold" href="/gadgets">Shop now <i class="ic" data-ic="arrow"></i></a>
        <a class="btn btn-dark" href="/about">Our story</a>
      </div>
      <div class="hero-stats reveal">
        <div class="hero-stat"><b>100%</b><span>Real products</span></div>
        <div class="hero-stat"><b>24/7</b><span>Open 24 hours</span></div>
        <div class="hero-stat"><b><%= site.free_shipping_threshold %></b><span>Free ship threshold</span></div>
      </div>
    </div>
  </section>

  <div class="marquee">
    <div class="marquee-track" id="marqueeTrack">
      <span><b>Gadgets</b> • Jewelry • <b>Shoes</b> • Fragrances • Accessories • <b>Drip</b> • Cosmotics •</span>
      <span><b>Gadgets</b> • Jewelry • <b>Shoes</b> • Fragrances • Accessories • <b>Drip</b> • Cosmotics •</span>
    </div>
  </div>

  <section class="section">
    <div class="container">
      <div class="section-head reveal">
        <div class="section-kicker">Shop by category</div>
        <h2 class="section-title">Find your vibe</h2>
      </div>
      <div class="cat-grid">
        <a class="cat-tile cat-gadgets reveal" href="/gadgets">
          <div class="cat-bg"></div>
          <div class="cat-glyph"><i class="ic" data-ic="gadgets"></i></div>
          <div class="cat-tile-body"><h3>Gadgets</h3><p>Smart tech & audio</p></div>
        </a>
        <a class="cat-tile cat-jewelry reveal" href="/jewelry">
          <div class="cat-bg"></div>
          <div class="cat-glyph"><i class="ic" data-ic="jewelry"></i></div>
          <div class="cat-tile-body"><h3>Jewelry</h3><p>Chains, rings & flex</p></div>
        </a>
        <a class="cat-tile cat-shoes reveal" href="/shoes">
          <div class="cat-bg"></div>
          <div class="cat-glyph"><i class="ic" data-ic="shoes"></i></div>
          <div class="cat-tile-body"><h3>Shoes</h3><p>Kicks & sneakers</p></div>
        </a>
        <a class="cat-tile cat-fragrances reveal" href="/fragrances">
          <div class="cat-bg"></div>
          <div class="cat-glyph"><i class="ic" data-ic="fragrances"></i></div>
          <div class="cat-tile-body"><h3>Fragrances</h3><p>Scents that stay</p></div>
        </a>
      </div>
    </div>
  </section>

  <% if (featured.length) { %>
  <section class="section" style="padding-top:0;">
    <div class="container">
      <div class="section-head reveal">
        <div class="section-kicker">Hand-picked</div>
        <h2 class="section-title">Featured drops</h2>
      </div>
      <div class="product-grid">
        <% featured.forEach(function(p){ %><div class="reveal"><%- include('partials/product-card', { p, money }) %></div><% }); %>
      </div>
    </div>
  </section>
  <% } %>

  <section class="section" style="padding-top:0;">
    <div class="container">
      <div class="section-head reveal">
        <div class="section-kicker">Fresh in</div>
        <h2 class="section-title">New arrivals</h2>
        <p class="section-sub">The latest uploads, live on the storefront. Every item is a real product from our catalogue.</p>
      </div>
      <div class="product-grid">
        <% if (newArrivals.length) { newArrivals.forEach(function(p){ %><div class="reveal"><%- include('partials/product-card', { p, money }) %></div><% }); } %>
      </div>
      <% if (!newArrivals.length) { %>
      <div class="panel" style="background:var(--surface); border:1px solid var(--line-2); text-align:center; padding:44px 20px; border-radius:var(--radius);">
        <div class="ico" style="font-size:40px; margin-bottom:14px;"><img src="/public/images/brand/logo.jpeg" alt="" style="width:64px;height:64px;object-fit:cover;border-radius:18px;margin:0 auto;"></div>
        <h3 style="margin-bottom:8px;">Catalogue being curated</h3>
        <p style="color:var(--muted); max-width:460px; margin:0 auto 22px;">We're dropping fresh products right now. Want first dibs when they land? Message us and we'll keep you posted.</p>
        <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
          <a class="btn btn-gold" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO%2C%20notify%20me%20when%20new%20products%20drop!" target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Notify me on WhatsApp</a>
          <a class="btn btn-dark" href="/contact">Contact us</a>
        </div>
      </div>
      <% } %>
      <% if (newArrivals.length) { %>
      <div style="text-align:center; margin-top:40px;">
        <a class="btn btn-outline" href="/gadgets">View all products <i class="ic" data-ic="arrow"></i></a>
      </div>
      <% } %>
    </div>
  </section>

  <section class="section" style="background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);">
    <div class="container">
      <div class="duo">
        <div class="duo-visual reveal brand-visual">
          <img src="/public/images/brand/logo.jpeg" alt="TOUS CINO">
        </div>
        <div class="reveal">
          <div class="section-kicker">The TOUS CINO promise</div>
          <h2 class="section-title" style="font-family:var(--font-serif);">Curated. Real. Yours.</h2>
          <p style="color:var(--ink-2); margin-top:16px;">We hand-pick modern accessories, gadgets, cosmetics and drip from different brands so you never have to settle. Every upload is a genuine product — photographed and listed by us, with prices confirmed before you buy.</p>
          <ul class="feature-list">
            <li><span class="ico"><i class="ic" data-ic="shield"></i></span><span><b>Secure checkout</b> — encrypted payments via PayFast or cash on delivery.</span></li>
            <li><span class="ico"><i class="ic" data-ic="truck"></i></span><span><b>Fast delivery</b> — nationwide shipping from Sunnyside, Pretoria.</span></li>
            <li><span class="ico"><i class="ic" data-ic="headset"></i></span><span><b>Real humans</b> — call, WhatsApp or DM us anytime. We're open 24 hours.</span></li>
          </ul>
          <div style="display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;">
            <a class="btn btn-gold" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO!" target="_blank" rel="noopener"><i class="ic" data-ic="whatsapp"></i> Chat with us</a>
            <a class="btn btn-dark" href="<%= site.maps_url %>" target="_blank" rel="noopener"><i class="ic" data-ic="map"></i> Find the store</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="section-head reveal">
        <div class="section-kicker">Why shop with us</div>
        <h2 class="section-title">Built different</h2>
      </div>
      <div class="values">
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="box"></i></span><h4>Real products only</h4><p>No stock photos, no AI images — every listing is one of our actual items.</p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="truck"></i></span><h4>Doorstep delivery</h4><p>Shipping across South Africa with live order tracking.</p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="shield"></i></span><h4>Secure payments</h4><p>PayFast card payments or cash on delivery — your choice.</p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="clock"></i></span><h4>Open 24 hours</h4><p>Shop any time. We're always online and always reachable.</p></div>
      </div>
    </div>
  </section>

  <section class="section" style="padding-top:0;">
    <div class="container">
      <div class="section-head reveal" style="display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;">
        <div>
          <div class="section-kicker">What the streets say</div>
          <h2 class="section-title">Customer reviews</h2>
          <p class="section-sub">Real feedback from people who copped from TOUS CINO.</p>
        </div>
      </div>

      <div class="review-summary reveal" id="reviewSummary" hidden>
        <div class="rs-score"><b id="rsAvg">0.0</b><div class="rs-stars" id="rsStars"></div></div>
        <div class="rs-count" id="rsCount">based on 0 review(s)</div>
      </div>

      <div class="review-grid" id="reviewGrid"></div>
    </div>
  </section>

  <% if (testimonials.length) { %>
  <section class="section testimonials-wrap" style="padding-top:0; background:linear-gradient(180deg, var(--bg) 0%, #18101f 100%);">
    <div class="container">
      <div class="section-head" style="text-align:center; margin-bottom:44px;">
        <div class="section-kicker">Real customers. Real drips</div>
        <h2 class="section-title">To the ones who copped</h2>
        <p class="section-sub">Get your moment featured here — share your fit with the squad.</p>
      </div>

      <div class="testimonial-grid">
        <% testimonials.forEach(function(t, i){ %>
          <% 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>

      <div style="text-align:center; margin-top:40px;">
        <a class="btn btn-gold" href="/testimonials">View all testimonials</a>
      </div>
    </div>
  </section>
  <% } %>

  <!-- Review modal -->
  <div class="modal-overlay" id="reviewModal" hidden>
    <div class="modal">
      <button class="modal-close" id="reviewModalClose" aria-label="Close"><i class="ic" data-ic="close"></i></button>
      <h3 style="font-size:22px; margin-bottom:6px;">Leave a review</h3>
      <p style="color:var(--muted); font-size:13.5px; margin-bottom:18px;">Share your TOUS CINO experience — we read everything.</p>
      <form id="reviewForm">
        <div class="form-field">
          <label>Your rating</label>
          <div class="star-picker" id="starPicker">
            <% for (let i = 1; i <= 5; i++) { %><button type="button" class="sp-star" data-v="<%= i %>" aria-label="<%= i %> stars"><i class="ic" data-ic="star"></i></button><% } %>
          </div>
        </div>
        <div class="form-grid">
          <div class="form-field"><label for="rvName">Your name</label><input id="rvName" required <% if (user) { %>value="<%= user.name %>"<% } %>></div>
          <div class="form-field"><label for="rvCity">City (optional)</label><input id="rvCity" placeholder="e.g. Pretoria"></div>
        </div>
        <div class="form-field"><label for="rvTitle">Review title</label><input id="rvTitle" placeholder="e.g. Absolute drip"></div>
        <div class="form-field"><label for="rvBody">Your review</label><textarea id="rvBody" rows="4" required></textarea></div>
        <button class="btn btn-gold btn-block" type="submit">Submit review</button>
      </form>
    </div>
  </div>
</main>

<%- include('partials/footer') %>
<script>window.REVIEWS = <%- JSON.stringify(reviews || []) %>;</script>
<%- include('partials/scripts', { pageJs: 'reviews.js' }) %>
