{{include "header.html"}}
{{include "nav.html"}}

<section class="relative h-72 md:h-96 overflow-hidden bg-ink">
  <img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1800&q=80" alt="Inquiry" class="w-full h-full object-cover opacity-50">
  <div class="absolute inset-0 flex items-center justify-center text-white text-center px-6">
    <div>
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Inquiry · Quote in 24 Hours</div>
      <h1 class="font-serif text-4xl md:text-5xl">Tell us your project</h1>
      <p class="text-stone-200 mt-4 max-w-2xl mx-auto">Specs, end use, target lead time, port of destination — we will reply with availability, pricing, and block photos.</p>
    </div>
  </div>
</section>

<section class="max-w-6xl mx-auto px-4 lg:px-8 py-16 grid grid-cols-1 lg:grid-cols-12 gap-10">
  <div class="lg:col-span-7">
    <div class="bg-white border border-stone-200 p-8 lg:p-10 rounded-sm">
      <h2 class="font-serif text-2xl text-ink mb-2">Inquiry form</h2>
      <p class="text-sm text-stone-500 mb-8">Fields marked * are required. Submissions go to <span class="text-ink">sales@stonecraft-global.com</span>.</p>

      {{if .Site}}{{if eq .Site.EnableComment 1}}
      <form id="messageForm" class="space-y-5">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">Your name *</label>
            <input name="nickname" required class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm">
          </div>
          <div>
            <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">Email or phone *</label>
            <input name="phone" required class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm">
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">Company / Project (optional)</label>
            <input name="web_site" class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm">
          </div>
          <div>
            <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">WhatsApp / WeChat (optional)</label>
            <input name="wechat" class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm">
          </div>
        </div>
        <div>
          <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">Your requirement *</label>
          <textarea name="content" rows="6" required placeholder="Briefly describe: material (Carrara / Black Galaxy / Travertine / …), size, finish, total m², target port and lead time, samples needed." class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm"></textarea>
        </div>
        {{if eq .Site.EnableCaptcha 1}}
        <div class="flex gap-3 items-end">
          <div class="flex-1">
            <label class="block text-xs text-stone-500 mb-2 uppercase tracking-wider">Captcha *</label>
            <input name="code" id="code" required class="w-full px-4 py-3 border border-stone-300 bg-white focus:border-accent focus:outline-none text-sm">
          </div>
          <img id="refreshCaptcha" src="/api/public/captcha" class="h-12 cursor-pointer border border-stone-300" alt="captcha" title="Click to refresh">
          <input type="hidden" name="id" id="id">
        </div>
        {{end}}
        <button type="submit" class="w-full md:w-auto px-10 py-4 bg-accent text-white text-sm tracking-wider hover:bg-amber-700 transition rounded-sm uppercase">Send inquiry →</button>
        <div id="messageResult" class="text-sm hidden"></div>
      </form>
      {{else}}
      <div class="text-center py-10 text-stone-500 border border-dashed border-stone-300">Inquiry form is currently disabled. Please contact us directly via the details on the right.</div>
      {{end}}{{end}}
    </div>
  </div>

  <aside class="lg:col-span-5">
    {{$c := index .ThemesExt "contact"}}
    {{if $c}}
    <div class="bg-ink text-white p-8 lg:p-10 rounded-sm">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-3">Direct Contact</div>
      <h3 class="font-serif text-2xl mb-6">Prefer to skip the form?</h3>
      <ul class="space-y-4 text-sm">
        <li><div class="text-stone-400 text-xs uppercase tracking-wider mb-1">Phone</div>{{$c.phone}}</li>
        <li><div class="text-stone-400 text-xs uppercase tracking-wider mb-1">WhatsApp</div>{{$c.whatsapp}}</li>
        <li><div class="text-stone-400 text-xs uppercase tracking-wider mb-1">Email</div>{{$c.email}}</li>
        <li><div class="text-stone-400 text-xs uppercase tracking-wider mb-1">Headquarters</div>{{$c.address}}</li>
        <li><div class="text-stone-400 text-xs uppercase tracking-wider mb-1">Business hours</div>{{$c.hours}}</li>
      </ul>
    </div>
    {{end}}

    <div class="mt-6 bg-accent/10 border border-accent/30 p-6 rounded-sm">
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-2">Response Time</div>
      <p class="text-sm text-stone-700 leading-relaxed">Inquiries received before 18:00 GMT+8 get a reply <strong class="text-ink">within one business day</strong>. For urgent requests, call or WhatsApp directly.</p>
    </div>

    {{$adv := index .ThemesExt "advantages"}}
    {{if $adv}}
    <div class="mt-6 space-y-3">
      {{range $adv}}
      <div class="flex gap-3 p-4 bg-white border border-stone-200 rounded-sm">
        <div class="w-1 bg-accent rounded-sm"></div>
        <div>
          <div class="text-sm font-medium text-ink">{{.title}}</div>
          <div class="text-xs text-stone-500 leading-relaxed mt-1">{{StrSub .desc 90}}</div>
        </div>
      </div>
      {{end}}
    </div>
    {{end}}
  </aside>
</section>

{{$messages := Messages 6}}
{{if $messages}}
<section class="bg-stone-50 border-t border-stone-200 py-16">
  <div class="max-w-6xl mx-auto px-4 lg:px-8">
    <div class="text-xs tracking-[0.3em] text-accent uppercase mb-2">Recent Inquiries</div>
    <h3 class="font-serif text-2xl text-ink mb-8">Recent inquiries (anonymised)</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
      {{range $messages}}
      <div class="bg-white p-6 rounded-sm border border-stone-200">
        <div class="flex justify-between text-xs text-stone-500 mb-2">
          <span>{{.Nickname}}</span>
          <span>{{ParseTime .CreatedAt "Jan 02, 2006"}}</span>
        </div>
        <p class="text-sm text-stone-700 leading-relaxed">{{.Content}}</p>
      </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}

{{include "footer.html"}}
{{include "js.html"}}

<script>
$(function(){
  $('#refreshCaptcha').on('click', function(){
    var src = $(this).attr('src').split('?')[0];
    $(this).attr('src', src + '?_=' + Date.now());
  });
  $('#messageForm').on('submit', function(e){
    e.preventDefault();
    var $form = $(this);
    var $btn = $form.find('button[type=submit]');
    var $result = $('#messageResult');
    var data = {};
    $form.serializeArray().forEach(function(it){ data[it.name] = it.value; });
    data.target_type = 1;
    $btn.prop('disabled', true).text('Sending …');
    $result.removeClass('hidden text-emerald-600 text-rose-600').addClass('text-stone-500').text('Sending your inquiry …');
    $.ajax({
      url: '/api/public/message',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      success: function(resp){
        if (resp && (resp.code === 0 || resp.success)) {
          $result.removeClass('text-stone-500 text-rose-600').addClass('text-emerald-600').text('Thank you! We received your inquiry and will reply within one business day.');
          $form[0].reset();
        } else {
          $result.removeClass('text-stone-500 text-emerald-600').addClass('text-rose-600').text((resp && resp.message) || 'Submission failed. Please try again or contact us by email.');
        }
      },
      error: function(){
        $result.removeClass('text-stone-500 text-emerald-600').addClass('text-rose-600').text('Submission failed. Please try again or contact us by email.');
      },
      complete: function(){
        $btn.prop('disabled', false).text('Send inquiry →');
        $('#refreshCaptcha').trigger('click');
      }
    });
  });
});
</script>