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

<main>
  <section class="page-hero">
    <div class="container">
      <div class="crumb"><a href="/">Home</a> / Contact</div>
      <h1>Contact TOUS CINO</h1>
      <p>Questions, orders or just want to chat? We're open 24 hours and reply fast.</p>
    </div>
  </section>

  <section class="section-sm">
    <div class="container">
      <div class="values" style="margin-bottom:44px;">
        <a class="value-card reveal" href="tel:<%= site.phone.replace(/\s/g,'') %>" style="display:block;">
          <span class="ico"><i class="ic" data-ic="phone"></i></span><h4>Call us</h4><p><%= site.phone %></p>
        </a>
        <a class="value-card reveal" href="https://wa.me/<%= site.whatsapp %>?text=Hi%20TOUS%20CINO!" target="_blank" rel="noopener" style="display:block;">
          <span class="ico"><i class="ic" data-ic="whatsapp"></i></span><h4>WhatsApp</h4><p>Chat instantly with the team</p>
        </a>
        <a class="value-card reveal" href="mailto:<%= site.email %>" style="display:block;">
          <span class="ico"><i class="ic" data-ic="mail"></i></span><h4>Email</h4><p><%= site.email %></p>
        </a>
        <a class="value-card reveal" href="<%= site.instagram %>" target="_blank" rel="noopener" style="display:block;">
          <span class="ico"><i class="ic" data-ic="instagram"></i></span><h4>Instagram</h4><p>@TOUS_CINO</p>
        </a>
      </div>

      <div class="duo">
        <div>
          <div class="section-kicker">Send a message</div>
          <h2 class="section-title" style="margin-bottom:22px;">We reply fast</h2>
          <form id="contactForm" class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
            <div class="form-grid">
              <div class="form-field"><label for="cName">Name</label><input id="cName" name="name" required></div>
              <div class="form-field"><label for="cPhone">Phone (optional)</label><input id="cPhone" name="phone" type="tel"></div>
            </div>
            <div class="form-field"><label for="cEmail">Email</label><input id="cEmail" name="email" type="email" required></div>
            <div class="form-field"><label for="cSubject">Subject</label><input id="cSubject" name="subject" placeholder="e.g. Order status, product question"></div>
            <div class="form-field"><label for="cBody">Message</label><textarea id="cBody" name="body" rows="5" required placeholder="How can we help?"></textarea></div>
            <button class="btn btn-gold" type="submit"><i class="ic" data-ic="mail"></i> Send message</button>
          </form>
        </div>
        <div>
          <div class="panel" style="background:var(--surface); border:1px solid var(--line-2);">
            <h3><i class="ic" data-ic="map"></i> Visit or get directions</h3>
            <p style="color:var(--ink-2); margin-bottom:16px;"><%= site.address %></p>
            <iframe title="Map to TOUS CINO" src="https://www.google.com/maps?q=<%= encodeURIComponent(site.address) %>&output=embed" width="100%" height="260" style="border:0; border-radius:12px; filter:invert(88%) hue-rotate(180deg);" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            <a class="btn btn-gold btn-block" style="margin-top:16px;" href="<%= site.maps_url %>" target="_blank" rel="noopener"><i class="ic" data-ic="map"></i> Get Directions</a>
          </div>
          <div class="panel" style="background:var(--surface); border:1px solid var(--line-2); margin-top:18px;">
            <h3>Business hours</h3>
            <p style="color:var(--ink-2);"><i class="ic" data-ic="clock"></i> <%= site.business_hours %> — order anytime, we'll confirm within minutes.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<%- include('partials/footer') %>
<script>
(function () {
  'use strict';
  var form = document.getElementById('contactForm');
  if (!form) return;
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var btn = form.querySelector('button[type="submit"]');
    var payload = {
      name: document.getElementById('cName').value,
      email: document.getElementById('cEmail').value,
      phone: document.getElementById('cPhone').value,
      subject: document.getElementById('cSubject').value,
      body: document.getElementById('cBody').value,
    };
    btn.disabled = true;
    btn.textContent = 'Sending...';
    fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (d.ok) {
          TC.toast('Message sent — we\'ll get back to you fast!');
          form.reset();
        } else {
          TC.toast(d.error || 'Could not send message', 'error');
        }
      })
      .catch(function () { TC.toast('Network error — try again', 'error'); })
      .finally(function () { btn.disabled = false; btn.innerHTML = '<i class="ic" data-ic="mail"></i> Send message'; });
  });
})();
</script>
