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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / About Us</div>
      <h1>About TOUS CINO</h1>
      <p><%= site.slogan %>. We're an online store for modern accessories, gadgets, cosmetics and drip from different brands.</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="duo">
        <div class="reveal">
          <div class="section-kicker">Our story</div>
          <h2 class="section-title" style="font-family:var(--font-serif);">Everyone's Sense of Freeness</h2>
          <p style="color:var(--ink-2); margin-top:16px;">TOUS CINO was born out of one idea — everyone deserves the freedom to express themselves through what they wear, carry and use. From the latest gadgets to jewellery, kicks and signature scents, we bring you a curated mix from different brands so your look is never boxed in.</p>
          <p style="color:var(--ink-2); margin-top:14px;">Based in Sunnyside, Pretoria, we operate 24 hours a day, 7 days a week. Every product in our catalogue is a real item we carry — no stock photos, no AI images, no placeholders. If it's on our store, it's genuinely ours.</p>
          <ul class="feature-list">
            <li><span class="ico"><i class="ic" data-ic="check"></i></span><span><b>Authentic catalogue</b> — every listing uses the real product photo.</span></li>
            <li><span class="ico"><i class="ic" data-ic="check"></i></span><span><b>Always open</b> — shop and message us any time of day.</span></li>
            <li><span class="ico"><i class="ic" data-ic="check"></i></span><span><b>Community first</b> — find us on Facebook and Instagram as @TOUS_CINO.</span></li>
          </ul>
        </div>
        <div class="duo-visual reveal brand-visual">
          <img src="/public/images/brand/logo.jpeg" alt="TOUS CINO">
        </div>
      </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="section-head reveal">
        <div class="section-kicker">Store details</div>
        <h2 class="section-title">Find us</h2>
      </div>
      <div class="values">
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="map"></i></span><h4>Address</h4><p><%= site.address %></p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="phone"></i></span><h4>Call or WhatsApp</h4><p><a href="tel:<%= site.phone.replace(/\s/g,'') %>"><%= site.phone %></a></p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="mail"></i></span><h4>Email</h4><p><a href="mailto:<%= site.email %>"><%= site.email %></a></p></div>
        <div class="value-card reveal"><span class="ico"><i class="ic" data-ic="clock"></i></span><h4>Hours</h4><p><%= site.business_hours %></p></div>
      </div>
      <div style="text-align:center; margin-top:40px;">
        <a class="btn btn-gold" href="<%= site.maps_url %>" target="_blank" rel="noopener"><i class="ic" data-ic="map"></i> Get Directions on Google Maps</a>
      </div>
    </div>
  </section>
</main>

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