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

<main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
  <header class="mb-8">
    <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">留言咨询</h1>
    <p class="mt-3 text-[color:var(--muted)]">提交需求后，我们会先确认业务目标、系统边界和上线节奏，再安排顾问联系。</p>
  </header>
  <div class="grid gap-8 lg:grid-cols-[1fr_1fr]">
    <section class="panel">
      <form id="message-form" class="space-y-4">
        <div><label class="form-label">昵称</label><input class="form-input" name="nickname" required></div>
        <div><label class="form-label">邮箱</label><input class="form-input" name="email" type="email" required></div>
        <div><label class="form-label">电话</label><input class="form-input" name="phone"></div>
        <div><label class="form-label">内容</label><textarea class="form-textarea" name="message" rows="6" required></textarea></div>
        {{if .Site.EnableCaptcha}}
        <div>
          <label class="form-label">验证码</label>
          <div class="flex gap-3">
            <input class="form-input w-36" name="code" id="code" required>
            <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==" class="h-11 cursor-pointer rounded-lg border border-[color:var(--border)] object-cover" alt="验证码">
          </div>
        </div>
        {{end}}
        <button id="submit" type="submit" class="btn-primary">提交留言</button>
        <div id="form-message" class="hidden rounded-2xl border p-3 text-sm"></div>
      </form>
    </section>
    <aside class="panel space-y-4">
      <div class="contact-box">电话：{{index (index .ThemesExt "contact") "phone"}}</div>
      <div class="contact-box">邮箱：{{index (index .ThemesExt "contact") "email"}}</div>
      <div class="contact-box">地址：{{index (index .ThemesExt "contact") "address"}}</div>
      <div class="contact-box">服务时间：{{index (index .ThemesExt "contact") "hours"}}</div>
      <div class="contact-box">响应承诺：{{index (index .ThemesExt "contact") "promise"}}</div>
    </aside>
  </div>
</main>

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