{jv:include file='header.html' /}

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">CONTACT</span>
      <h1 class="page-hero-title">{jv:typename}</h1>
      <p class="page-hero-sub">{jv:description}</p>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b>7x24</b><span>{jv:lang name='stat_service' /}</span></div>
      <div class="ph-stat"><b>17</b><span>{jv:lang name='stat_lang_support' /}</span></div>
      <div class="ph-stat"><b>200+</b><span>{jv:lang name='stat_countries' /}</span></div>
      <div class="ph-stat"><b>4</b><span>{jv:lang name='contact_offices' /}</span></div>
    </div>
  </div>
</section>

<nav class="crumb crumb-dark" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span><span class="cur">{jv:typename}</span>
  </div>
</nav>

<div class="container" style="padding: 40px 0 64px;">

  <div class="contact-grid" style="margin-bottom:56px">
    <div class="contact-info-card">
      <div class="contact-info-row">
        <span class="ic" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>
        <div>
          <h4>{jv:lang name='contact_phone_title' /}</h4>
          <p>{jv:global name='company_phone' /}</p>
        </div>
      </div>
      <div class="contact-info-row">
        <span class="ic" style="background:linear-gradient(135deg,#f59e0b,#d97706)"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span>
        <div>
          <h4>{jv:lang name='contact_email_title' /}</h4>
          <p>{jv:global name='company_email' /}</p>
        </div>
      </div>
      <div class="contact-info-row">
        <span class="ic" style="background:linear-gradient(135deg,#06b6d4,#0891b2)"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></span>
        <div>
          <h4>{jv:lang name='contact_work_hours_title' /}</h4>
          <p>{jv:global name='company_work_hours' /}</p>
        </div>
      </div>
      <div class="contact-info-row">
        <span class="ic" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed)"><svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></span>
        <div>
          <h4>{jv:lang name='contact_join_us_title' /}</h4>
          <p>{jv:global name='company_hr_email' /}</p>
        </div>
      </div>
      <div class="contact-info-row">
        <span class="ic" style="background:linear-gradient(135deg,#ef4444,#dc2626)"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
        <div>
          <h4>{jv:lang name='contact_address_title' /}</h4>
          <p>{jv:global name='company_address' /}</p>
        </div>
      </div>
    </div>

    <div class="contact-form-panel">
      <h3>{jv:lang name='contact_send_inquiry' /}</h3>
      <form action="{jv:url}contact/submit" method="post">
        <div class="form-row">
          <div class="form-group"><label>{jv:lang name='contact_name_company' /} *</label><input type="text" name="name" placeholder="{jv:lang name='contact_placeholder_name' /}" required></div>
          <div class="form-group"><label>{jv:lang name='contact_phone_label' /} *</label><input type="tel" name="phone" placeholder="{jv:lang name='contact_placeholder_phone' /}" required></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>{jv:lang name='contact_inquiry_type' /}</label><select name="type"><option>{jv:lang name='contact_product_inquiry' /}</option><option>{jv:lang name='contact_business' /}</option><option>{jv:lang name='contact_tech_support' /}</option><option>{jv:lang name='contact_join_us_title' /}</option><option>{jv:lang name='contact_other' /}</option></select></div>
          <div class="form-group"><label>{jv:lang name='contact_email_label' /}</label><input type="email" name="email" placeholder="{jv:lang name='contact_placeholder_email' /}"></div>
        </div>
        <div class="form-group"><label>{jv:lang name='contact_description' /} *</label><textarea name="description" placeholder="{jv:lang name='contact_placeholder_desc' /}" required></textarea></div>
        <button type="submit" class="contact-submit-btn">{jv:lang name='contact_submit' /}</button>
      </form>
    </div>
  </div>

  <div class="biz-section" style="margin-bottom:0">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='contact_offices' /}</div>
      </div>
    </div>
    <div class="office-grid">
      <div class="office-card">
        <div class="office-ic"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
        <h4>{jv:lang name='contact_office_beijing' /}</h4>
        <p>{jv:lang name='contact_office_beijing_addr' /}</p>
      </div>
      <div class="office-card">
        <div class="office-ic"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
        <h4>{jv:lang name='contact_office_shanghai' /}</h4>
        <p>{jv:lang name='contact_office_shanghai_addr' /}</p>
      </div>
      <div class="office-card">
        <div class="office-ic"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
        <h4>{jv:lang name='contact_office_shenzhen' /}</h4>
        <p>{jv:lang name='contact_office_shenzhen_addr' /}</p>
      </div>
      <div class="office-card">
        <div class="office-ic"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
        <h4>{jv:lang name='contact_office_hangzhou' /}</h4>
        <p>{jv:lang name='contact_office_hangzhou_addr' /}</p>
      </div>
    </div>
  </div>

</div>
{jv:include file='footer.html' /}