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

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">CAREERS</span>
      <h1 class="page-hero-title">{jv:typename}</h1>
      <p class="page-hero-sub">{jv:lang name='jobs_banner_subtitle' /}</p>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b id="jobCount">0</b><span>{jv:lang name='jobs_hot_positions' /}</span></div>
      <div class="ph-stat"><b>50+</b><span>{jv:lang name='jobs_team_members' /}</span></div>
      <div class="ph-stat"><b>{jv:lang name='jobs_salary_14' /}</b><span>{jv:lang name='jobs_salary_treatment' /}</span></div>
      <div class="ph-stat"><b>6</b><span>{jv:lang name='jobs_benefit_team_title' /}</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="biz-card" style="margin-bottom:56px;line-height:1.95;color:var(--text-2);font-size:15px">{jv:content}</div>

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='jobs_section_benefit_title' /}</div>
        <div class="biz-section-sub">{jv:lang name='jobs_section_benefit_subtitle' /}</div>
      </div>
    </div>
    <div class="benefit-grid-biz">
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#f59e0b,#d97706)"><svg class="ico" viewBox="0 0 24 24"><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_salary_title' /}</h4><p>{jv:lang name='jobs_benefit_salary_body' /}</p></div>
      </div>
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#ef4444,#dc2626)"><svg class="ico" viewBox="0 0 24 24"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_insurance_title' /}</h4><p>{jv:lang name='jobs_benefit_insurance_body' /}</p></div>
      </div>
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#06b6d4,#0891b2)"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_flexible_title' /}</h4><p>{jv:lang name='jobs_benefit_flexible_body' /}</p></div>
      </div>
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)"><svg class="ico" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_growth_title' /}</h4><p>{jv:lang name='jobs_benefit_growth_body' /}</p></div>
      </div>
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#8b5cf6,#7c3aed)"><svg class="ico" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_team_title' /}</h4><p>{jv:lang name='jobs_benefit_team_body' /}</p></div>
      </div>
      <div class="benefit-card-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#10b981,#059669)"><svg class="ico" viewBox="0 0 24 24"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg></div>
        <div><h4>{jv:lang name='jobs_benefit_care_title' /}</h4><p>{jv:lang name='jobs_benefit_care_body' /}</p></div>
      </div>
    </div>
  </div>

  <div class="biz-section">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='jobs_section_hot_title' /}</div>
        <div class="biz-section-sub">{jv:lang name='jobs_section_hot_subtitle' /}</div>
      </div>
    </div>
    <div class="job-filter-biz">
      <a class="active" data-filter="backend">{jv:lang name='jobs_filter_backend' /}</a>
      <a data-filter="frontend">{jv:lang name='jobs_filter_frontend' /}</a>
      <a data-filter="fullstack">{jv:lang name='jobs_filter_fullstack' /}</a>
      <a data-filter="ops">{jv:lang name='jobs_filter_ops' /}</a>
      <a data-filter="design">{jv:lang name='jobs_filter_design' /}</a>
    </div>

    <div class="job-list-biz" id="jobList">
      {jv:joblist}
      <div class="job-card-biz" data-cat="{jv:category}">
        <div class="job-card-head">
          <div class="left">
            <div class="job-title">{jv:title}{jv:if condition='badge=="urgent"'}<span class="badge-biz badge-urgent">{jv:lang name='jobs_badge_urgent' /}</span>{/jv:if}{jv:if condition='badge=="hot"'}<span class="badge-biz badge-hot">{jv:lang name='jobs_badge_hot' /}</span>{/jv:if}</div>
            <div class="job-meta">
              <span><svg class="ico" 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>{jv:location}</span>
              <span><svg class="ico" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>{jv:experience}</span>
              <span><svg class="ico" viewBox="0 0 24 24"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>{jv:education}</span>
              <span><svg class="ico" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>{jv:headcount_text}</span>
            </div>
            <div class="job-tags">{jv:tags_html}</div>
          </div>
          <div style="display:flex;align-items:center;gap:16px;flex-shrink:0">
            <div class="job-salary">{jv:salary_text}</div>
            <button class="job-apply" data-job-id="{jv:id}" data-job-title="{jv:title}">{jv:lang name='jobs_btn_apply' /}</button>
            <button type="button" class="job-toggle" aria-label="{jv:lang name='jobs_toggle_detail' /}"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>
          </div>
        </div>
        <div class="job-detail">
          <h5>{jv:lang name='jobs_section_responsibilities' /}</h5>
          <div style="font-size:14px;color:var(--text-2);line-height:1.8">{jv:responsibilities_html}</div>
          <h5 style="margin-top:14px">{jv:lang name='jobs_section_requirements' /}</h5>
          <div style="font-size:14px;color:var(--text-2);line-height:1.8">{jv:requirements_html}</div>
        </div>
      </div>
      {/jv:joblist}
    </div>
  </div>

  <div class="biz-section" style="margin-bottom:0">
    <div class="biz-section-head">
      <div>
        <div class="biz-section-title">{jv:lang name='jobs_apply_section_title' /}</div>
        <div class="biz-section-sub">{jv:lang name='jobs_apply_section_subtitle' /}</div>
      </div>
    </div>
    <div class="apply-methods-biz">
      <div class="apply-method-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#3b82f6,#1d4ed8)"><svg class="ico" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></div>
        <div class="label">{jv:lang name='jobs_apply_method_email' /}</div>
        <div class="val">hr@nexus.com</div>
        <div class="hint">{jv:lang name='jobs_apply_method_email_subject' /}</div>
      </div>
      <div class="apply-method-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#10b981,#059669)"><svg class="ico" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
        <div class="label">{jv:lang name='jobs_apply_method_wechat' /}</div>
        <div class="val">NEXUS-HR</div>
        <div class="hint">{jv:lang name='jobs_apply_method_wechat_note' /}</div>
      </div>
      <div class="apply-method-biz">
        <div class="benefit-ic" style="background:linear-gradient(135deg,#f59e0b,#d97706)"><svg class="ico" 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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
        <div class="label">{jv:lang name='jobs_apply_method_phone' /}</div>
        <div class="val">010-8888-6666</div>
        <div class="hint">{jv:lang name='jobs_apply_method_phone_hours' /}</div>
      </div>
    </div>
  </div>
</div>

<div id="jobApplyModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:14px;padding:32px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
      <h3 style="font-size:22px;font-weight:700">{jv:lang name='jobs_modal_title' /}</h3>
      <button type="button" id="jobApplyClose" style="background:none;border:none;font-size:24px;cursor:pointer;color:#999;line-height:1">&times;</button>
    </div>
    <p style="font-size:14px;color:#64748b;margin-bottom:16px">{jv:lang name='jobs_modal_subtitle_position' /}<strong id="jobApplyTitle" style="color:#1e3a8a"></strong></p>
    <form id="jobApplyForm" method="post" action="{jv:url}job/apply">
      <input type="hidden" name="job_id" id="jobApplyId" value="">
      <input type="hidden" name="job_title" id="jobApplyTitleHidden" value="">
      <div class="form-group"><label>{jv:lang name='jobs_form_name_label' /}</label><input type="text" name="applicant_name" required placeholder="{jv:lang name='jobs_form_name_placeholder' /}"></div>
      <div class="form-group"><label>{jv:lang name='jobs_form_email_label' /}</label><input type="email" name="applicant_email" required placeholder="{jv:lang name='jobs_form_email_placeholder' /}"></div>
      <div class="form-group"><label>{jv:lang name='jobs_form_phone_label' /}</label><input type="tel" name="applicant_phone" required placeholder="{jv:lang name='jobs_form_phone_placeholder' /}"></div>
      <div class="form-group"><label>{jv:lang name='jobs_form_resume_label' /}</label><div class="resume-upload-box" style="border:2px dashed #cbd5e1;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:#f8fafc" id="resumeUploadBox"><input type="file" name="resume" id="resumeFileInput" required accept=".doc,.docx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf" style="display:none"><svg id="resumeIco" style="width:40px;height:40px;color:#64748b;margin-bottom:8px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><div id="resumeFileLabel" style="font-size:14px;color:#475569;font-weight:600">{jv:lang name='jobs_form_resume_default_label' /}</div><div style="font-size:12px;color:#94a3b8;margin-top:4px">{jv:lang name='jobs_form_resume_hint' /}</div></div></div>
      <button type="submit" class="contact-submit-btn">{jv:lang name='jobs_form_submit' /}</button>
    </form>
    <div id="jobApplyResult" style="display:none;text-align:center;padding:20px 0">
      <div style="font-size:48px;color:#10b981;margin-bottom:12px">&#10003;</div>
      <p style="font-size:16px;font-weight:600;color:#0f172a">{jv:lang name='jobs_result_success_title' /}</p>
      <p style="font-size:14px;color:#64748b;margin-top:4px">{jv:lang name='jobs_result_success_body' /}</p>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var jobCards = document.querySelectorAll('.job-card-biz');
  var jobCountEl = document.getElementById('jobCount');
  if (jobCountEl) jobCountEl.textContent = jobCards.length;

  var modal = document.getElementById('jobApplyModal');
  var closeBtn = document.getElementById('jobApplyClose');
  var form = document.getElementById('jobApplyForm');
  var resultDiv = document.getElementById('jobApplyResult');
  var titleEl = document.getElementById('jobApplyTitle');
  var idInput = document.getElementById('jobApplyId');
  var titleInput = document.getElementById('jobApplyTitleHidden');

  var resumeBox = document.getElementById('resumeUploadBox');
  var resumeInput = document.getElementById('resumeFileInput');
  var resumeLabel = document.getElementById('resumeFileLabel');
  var allowedExts = ['doc', 'docx', 'pdf'];

  var I18N = {
    onlyDocPdf: '{jv:lang name='jobs_js_only_doc_pdf' /}',
    fileTooLarge: '{jv:lang name='jobs_js_file_too_large' /}',
    chooseResumeFirst: '{jv:lang name='jobs_js_choose_resume_first' /}',
    submitting: '{jv:lang name='jobs_js_submitting' /}',
    submitApply: '{jv:lang name='jobs_js_submit_apply' /}',
    submitFail: '{jv:lang name='jobs_js_submit_fail' /}',
    networkError: '{jv:lang name='jobs_js_network_error' /}',
    resumeDefaultLabel: '{jv:lang name='jobs_form_resume_default_label' /}'
  };

  function setResumeState(file) {
    if (!file) {
      resumeLabel.textContent = I18N.resumeDefaultLabel;
      resumeBox.style.background = '#f8fafc';
      resumeBox.style.borderColor = '#cbd5e1';
      resumeBox.style.color = '';
      return;
    }
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
    if (allowedExts.indexOf(ext) === -1) {
      alert(I18N.onlyDocPdf);
      resumeInput.value = '';
      return false;
    }
    if (file.size > 20 * 1024 * 1024) {
      alert(I18N.fileTooLarge);
      resumeInput.value = '';
      return false;
    }
    resumeLabel.textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
    resumeBox.style.background = '#ecfdf5';
    resumeBox.style.borderColor = '#10b981';
    resumeBox.style.color = '#047857';
    return true;
  }
  if (resumeBox) {
    resumeBox.addEventListener('click', function() { resumeInput.click(); });
    resumeBox.addEventListener('mouseenter', function() { resumeBox.style.borderColor = '#3b82f6'; resumeBox.style.background = '#eff6ff'; });
    resumeBox.addEventListener('mouseleave', function() { if (!resumeInput.files.length) { resumeBox.style.borderColor = '#cbd5e1'; resumeBox.style.background = '#f8fafc'; } });
  }
  if (resumeInput) {
    resumeInput.addEventListener('change', function() {
      if (this.files.length) setResumeState(this.files[0]);
      else setResumeState(null);
    });
  }

  document.querySelectorAll('.job-apply').forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      e.stopPropagation();
      var jobId = this.getAttribute('data-job-id');
      var jobTitle = this.getAttribute('data-job-title');
      titleEl.textContent = jobTitle;
      idInput.value = jobId;
      titleInput.value = jobTitle;
      form.style.display = '';
      resultDiv.style.display = 'none';
      form.reset();
      setResumeState(null);
      modal.style.display = 'flex';
    });
  });

  jobCards.forEach(function(card) {
    var head = card.querySelector('.job-card-head');
    var toggle = card.querySelector('.job-toggle');
    function toggleCard() { card.classList.toggle('is-open'); }
    if (head) head.addEventListener('click', function(e) {
      if (e.target.closest('.job-apply')) return;
      toggleCard();
    });
    if (toggle) toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      toggleCard();
    });
  });

  if (closeBtn) {
    closeBtn.addEventListener('click', function() {
      modal.style.display = 'none';
    });
  }
  modal.addEventListener('click', function(e) {
    if (e.target === modal) modal.style.display = 'none';
  });

  if (form) {
    var submitBtn = form.querySelector('button[type="submit"]');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (!resumeInput.files.length) {
        alert(I18N.chooseResumeFirst);
        return;
      }
      var file = resumeInput.files[0];
      var ext = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
      if (allowedExts.indexOf(ext) === -1) {
        alert(I18N.onlyDocPdf);
        return;
      }
      submitBtn.disabled = true;
      submitBtn.textContent = I18N.submitting;
      var formData = new FormData(form);
      var actionUrl = form.getAttribute('action');
      fetch(actionUrl, { method: 'POST', body: formData })
        .then(function(r) { return r.json(); })
        .then(function(data) {
          submitBtn.disabled = false;
          submitBtn.textContent = I18N.submitApply;
          if (data.success) {
            form.style.display = 'none';
            resultDiv.style.display = 'block';
            form.reset();
            setResumeState(null);
          } else {
            alert(data.message || I18N.submitFail);
          }
        })
        .catch(function() {
          submitBtn.disabled = false;
          submitBtn.textContent = I18N.submitApply;
          alert(I18N.networkError);
        });
    });
  }

  var filterBtns = document.querySelectorAll('.job-filter-biz a');
  function applyFilter(filter) {
    filterBtns.forEach(function(b) { b.classList.toggle('active', b.getAttribute('data-filter') === filter); });
    jobCards.forEach(function(card) {
      card.style.display = card.getAttribute('data-cat') === filter ? '' : 'none';
    });
  }
  applyFilter('backend');
  filterBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      applyFilter(this.getAttribute('data-filter'));
    });
  });
});
</script>
{jv:include file='footer.html' /}