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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{$phone := index .Single.Ext "phone"}}
{{$email := index .Single.Ext "email"}}
{{$addr := index .Single.Ext "address"}}
{{$contact := index .ThemesExt "contact"}}

<section class="relative h-72 md:h-[380px] overflow-hidden">
  {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}" class="absolute inset-0 w-full h-full object-cover">{{end}}
  <div class="absolute inset-0 bg-gradient-to-br from-slate-900/90 via-slate-900/85 to-slate-900/40"></div>
  <div class="relative h-full flex items-center">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
      <div class="inline-flex items-center gap-2 px-3 py-1 bg-accent/20 border border-accent/40 rounded text-accent text-xs font-semibold tracking-widest mb-4">
        <span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>CONTACT US · 在线咨询
      </div>
      <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 leading-tight">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-lg text-slate-200 max-w-2xl leading-relaxed">{{.Single.Description}}</p>{{end}}
    </div>
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

    {{/* ===== 左侧：联系信息 ===== */}}
    <div class="lg:col-span-7 space-y-6">

      {{/* 核心电话卡 */}}
      {{if $phone}}
      <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary to-blue-700 text-white p-8 md:p-10 shadow-xl">
        <div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-accent/20 blur-3xl"></div>
        <div class="relative">
          <div class="flex items-center gap-3 text-xs font-semibold text-accent tracking-widest mb-4">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/></svg>
            HOTLINE · 全天候响应
          </div>
          <a href="tel:{{$phone}}" class="group inline-block">
            <div class="text-4xl md:text-5xl font-bold tracking-tight mb-2 group-hover:text-accent transition">{{$phone}}</div>
            <div class="text-sm text-slate-200">咨询热线 · 点击直接拨打</div>
          </a>
          {{if $contact}}{{if $contact.phone_tech}}
          <div class="mt-5 pt-5 border-t border-white/15 flex items-center gap-3">
            <div class="w-9 h-9 rounded bg-white/10 flex items-center justify-center">
              <svg class="w-4 h-4 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
            </div>
            <div>
              <div class="text-xs text-slate-300">技术支持</div>
              <a href="tel:{{$contact.phone_tech}}" class="text-base font-semibold hover:text-accent">{{$contact.phone_tech}}</a>
            </div>
          </div>
          {{end}}{{end}}
        </div>
      </div>
      {{end}}

      {{/* 邮箱 / 地址 / 时间：三联卡 */}}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        {{if $email}}
        <a href="mailto:{{$email}}" class="group bg-white rounded-xl border border-slate-200 hover:border-primary hover:shadow-lg transition p-5 flex items-start gap-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 text-primary flex items-center justify-center shrink-0 group-hover:from-primary group-hover:to-blue-700 group-hover:text-white transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
          </div>
          <div class="min-w-0 flex-1">
            <div class="text-xs text-slate-500 mb-1">邮箱咨询</div>
            <div class="text-sm font-semibold text-slate-900 break-all group-hover:text-primary transition">{{$email}}</div>
            <div class="text-xs text-slate-400 mt-1">商务合作 / 方案咨询</div>
          </div>
        </a>
        {{end}}

        {{if $contact}}{{if $contact.hours}}
        <div class="bg-white rounded-xl border border-slate-200 p-5 flex items-start gap-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-amber-50 to-amber-100 text-accent flex items-center justify-center shrink-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <div class="min-w-0 flex-1">
            <div class="text-xs text-slate-500 mb-1">服务时间</div>
            <div class="text-sm font-semibold text-slate-900">{{$contact.hours}}</div>
            <div class="text-xs text-slate-400 mt-1">紧急情况不休息</div>
          </div>
        </div>
        {{end}}{{end}}

        {{if $addr}}
        <div class="md:col-span-2 bg-white rounded-xl border border-slate-200 p-5 flex items-start gap-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-50 to-emerald-100 text-emerald-700 flex items-center justify-center shrink-0">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </div>
          <div class="min-w-0 flex-1">
            <div class="text-xs text-slate-500 mb-1">公司地址</div>
            <div class="text-sm font-semibold text-slate-900 leading-relaxed">{{$addr}}</div>
          </div>
        </div>
        {{end}}
      </div>

      {{/* 单页正文（如有） */}}
      {{if .Single.Content}}
      <div class="bg-white rounded-xl border border-slate-200 p-6">
        <div class="prose prose-slate prose-sm max-w-none text-slate-700">{{.Single.Content | Str2Html}}</div>
      </div>
      {{end}}
    </div>

    {{/* ===== 右侧：咨询表单 ===== */}}
    <div class="lg:col-span-5">
      {{if .Site}}{{if eq .Site.EnableMessage 1}}
      <div class="lg:sticky lg:top-28 bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
        <div class="bg-gradient-to-br from-primary to-blue-700 text-white px-7 py-6">
          <div class="text-xs font-semibold text-accent tracking-widest mb-2">FREE CONSULTATION · 免费咨询</div>
          <h2 class="text-2xl font-bold mb-2">告诉我们您的需求</h2>
          <p class="text-sm text-slate-200 leading-relaxed">填写下方表单，顾问会在 1 个工作日内回复您。</p>
        </div>

        <form id="message-form" class="p-7 space-y-5">
          <div>
            <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
              <span class="w-1 h-3.5 bg-accent rounded"></span>姓名 <span class="text-rose-500">*</span>
            </label>
            <input type="text" name="nickname" required placeholder="您的称呼" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
          </div>

          <div>
            <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
              <span class="w-1 h-3.5 bg-accent rounded"></span>电话 / 邮箱 <span class="text-rose-500">*</span>
            </label>
            <input type="text" name="email" required placeholder="电话或邮箱，方便我们回复" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
          </div>

          <div>
            <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
              <span class="w-1 h-3.5 bg-accent rounded"></span>需求描述 <span class="text-rose-500">*</span>
            </label>
            <textarea name="message" required rows="5" placeholder="请简述您的业务目标、规模与期望……" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm resize-none"></textarea>
          </div>

          {{if .Site.EnableCaptcha}}
          <div>
            <label class="flex items-center gap-2 text-xs font-semibold text-slate-700 mb-2">
              <span class="w-1 h-3.5 bg-accent rounded"></span>验证码 <span class="text-rose-500">*</span>
            </label>
            <div class="flex gap-3">
              <input type="text" name="code" id="code" required placeholder="请输入" class="flex-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-lg focus:bg-white focus:border-primary focus:ring-0 outline-none transition text-sm">
              <input type="hidden" name="id" id="id">
              <img id="refreshCaptcha" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAtCAMAAABS+V+kAAAAG1BMVEVHcEx6SOl4SOvjPGTjPGR5SOrjPGR5SOrjPGQZmST3AAAAB3RSTlMAgEC/QL+AqElEkgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAn9JREFUWEftVdt2hCAMBFTw/7+4cwniarXtWx/IOYuoWSYzuZjStKnAVGAqMBWYCvx7BeqqEOPyY7i5/OjyS4e90nHdjZ+Wbqe/540mxNxyvMh9MxyzLcX17tBdl/1iC4D3HdD4rWFEoxmxta0Dc1faYbjbNrxGhP3ZI3UdvVeu1RdRxgIZekwShJBknBtOjwdFyLSWuUqQ/tK+r3aR+gD2JikFBOUvYwFMR+6b40nyrigt5yCuEVTQ6bW1BrVlqRX8g3rdg21B/JZbTD9shCJZ4MH1kOYb3gCoriqgmTqSzBwzImJW0RbRtLWomsb7EFevj4KzuhZ5ey4ulZIZLxVAQu45dqHjuYGhckM2aZmMuAE9PDwBtw2h0fcjnDvjFewkpQFUWwNY6VUwknlLlw4WpoGNB0CH4+yOzN+Q2TM7Cvow6qpGEh64O8VgW7L7OPFMV/AJWDpQBS4FOWHfY3kVewFTILlvCacwCIygrL6ZAB2oQ9oTsAGQCAP3AfJeXqqetef6LDUo93lmgoQCi2jQGzAkNnC3F8YVJUw3XGNknnIM8n16RKIhN/IXw/IOrEI+AT9mmTydRcytqDICQ3kFgnAcPERGUas1IXecR2CJMMrIwBictMPxVlsip0ZlD7txsJXxFRIvqZG7LRcKXHBw6V8HjDDO5TtwpNhBPRqBNTuikACJqS2Nwdfd9jmGu4AoOQjwCRzdbbT3YQ2IULSPLkuf0OTruehYVTTNL5+LJ7pTH7ORIYxbzcDX0TrYV9TtyOSR0vg6UeYo940IRZ9lmRKgzh0m4ONs/eNR5xXTIvFLYRs7JLw/VbWb0F+M+f+L//SdCkwFpgJTgX+gwBegpA+1GZ0ezwAAAABJRU5ErkJggg==" alt="点击获取验证码" class="h-[46px] w-[120px] object-cover rounded-lg cursor-pointer border border-slate-200 hover:border-primary transition" title="点击刷新验证码">
            </div>
            <p class="text-xs text-slate-400 mt-2">点击图片刷新验证码</p>
          </div>
          {{end}}

          <button type="submit" id="submit" class="w-full px-6 py-3.5 bg-gradient-to-r from-primary to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition flex items-center justify-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
            提交咨询
          </button>

          <div id="form-message" class="hidden p-3.5 rounded-lg text-sm"></div>

          <div class="text-xs text-slate-400 text-center pt-2 border-t border-slate-100">
            <svg class="w-3.5 h-3.5 inline -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            您的信息将严格保密，不会用于其他用途
          </div>
        </form>
      </div>
      {{else}}
      <div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-xl p-6 text-sm">
        在线咨询功能未开启，请通过左侧电话或邮箱联系我们。
      </div>
      {{end}}{{end}}
    </div>
  </div>
</section>
{{end}}
{{include "js.html"}}
{{if .Site}}{{if eq .Site.EnableMessage 1}}
<script>
$(function () {
  var csrf = '';

  function setFormMessage(type, text) {
    var $el = $('#form-message');
    if (!$el.length) return;
    $el.removeClass('hidden bg-rose-50 text-rose-700 border-rose-200 bg-emerald-50 text-emerald-700 border-emerald-200 border');
    $el.addClass('border');
    if (type === 'success') {
      $el.addClass('bg-emerald-50 text-emerald-700 border-emerald-200');
    } else {
      $el.addClass('bg-rose-50 text-rose-700 border-rose-200');
    }
    $el.html('<span>' + text + '</span>');
  }

  function setSubmitting(submitting) {
    var $btn = $('#submit');
    if (!$btn.length) return;
    if (submitting) {
      $btn.prop('disabled', true).addClass('opacity-70 cursor-not-allowed').html('<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v4M12 16v4M4 12h4M16 12h4M6.34 6.34l2.83 2.83M14.83 14.83l2.83 2.83M6.34 17.66l2.83-2.83M14.83 9.17l2.83-2.83"/></svg>提交中...');
    } else {
      $btn.prop('disabled', false).removeClass('opacity-70 cursor-not-allowed').html('<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>提交咨询');
    }
  }

  function refreshCaptcha() {
    $.ajax({
      url: '/api/public/captcha',
      type: 'POST',
      headers: { 'X-CSRF-Token': csrf },
      dataType: 'json',
      data: '{}',
      success: function (data) {
        if (data.code == 200) {
          $('#id').val(data.data.id);
          $('#refreshCaptcha').attr('src', data.data.imgbase64);
        }
      }
    });
  }

  if ($('#refreshCaptcha').length) {
    $('#refreshCaptcha').on('click', refreshCaptcha);
    refreshCaptcha();
  }

  $('#message-form').on('submit', function (e) {
    e.preventDefault();
    var data = {};
    $(this).serializeArray().forEach(function (f) { data[f.name] = f.value; });
    data.article_id = 0;

    if (!data.nickname || !data.email || !data.message) {
      setFormMessage('error', '请填写姓名、联系方式和需求描述');
      return;
    }

    setSubmitting(true);
    $.ajax({
      url: '/message/create',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      headers: { 'X-CSRF-Token': csrf },
      dataType: 'json',
      data: JSON.stringify(data),
      success: function (res) {
        if (res.code == 200) {
          setFormMessage('success', '提交成功！顾问会在 1 个工作日内与您联系。');
          $('#message-form')[0].reset();
          if ($('#refreshCaptcha').length) refreshCaptcha();
        } else {
          setFormMessage('error', res.msg || '提交失败，请稍后重试');
          if ($('#refreshCaptcha').length) refreshCaptcha();
        }
        setSubmitting(false);
      },
      error: function (xhr) {
        var msg = '提交失败，请检查网络后重试';
        try { var r = JSON.parse(xhr.responseText); if (r && r.msg) msg = r.msg; } catch (e) {}
        setFormMessage('error', msg);
        setSubmitting(false);
      }
    });
  });
});
</script>
{{end}}{{end}}

{{include "footer.html"}}