{% extends "base.html" %}
{% block title %}About Us{% endblock %}

{# About Us — new page (design A/B test). Linked from the modern sidebar. #}

{% block content %}
<div class="jqc-page-head center">
  <div class="jqc-page-title">About Us</div>
  <div class="jqc-page-sub text-center">Janitorial Quality Control by L.T. Services, Inc.</div>
</div>

<div class="row g-4">
  <div class="col-12 col-lg-7">
    <div class="jqc-card h-100">
      <div class="jqc-card-title">
        <span class="jqc-tile-icon"><i class="bi bi-buildings"></i></span>L.T. Services, Inc.
      </div>
      <p class="mb-3">
        L.T. Services, Inc. provides commercial janitorial services to public and private
        facilities. Quality is verified in the field, not assumed — every contract is backed
        by scheduled inspections, documented findings and tracked resolution.
      </p>
      <p class="mb-0 text-muted">
        JQC is our in-house quality control platform. Inspectors work from an offline-capable
        iPad app; managers, contract staff and customers work from this web portal. Both share
        one record of every inspection, issue and photo.
      </p>
    </div>
  </div>

  <div class="col-12 col-lg-5">
    <div class="jqc-card h-100">
      <div class="jqc-card-title">
        <span class="jqc-tile-icon"><i class="bi bi-check2-square"></i></span>What JQC Covers
      </div>
      <div class="jqc-stat-row"><span class="jqc-stat-label"><i class="bi bi-clipboard-check"></i>Facility inspections &amp; scoring</span></div>
      <div class="jqc-stat-row"><span class="jqc-stat-label"><i class="bi bi-calendar2-week"></i>Recurring inspection schedules</span></div>
      <div class="jqc-stat-row"><span class="jqc-stat-label"><i class="bi bi-exclamation-triangle"></i>Issue tracking with SLA deadlines</span></div>
      <div class="jqc-stat-row"><span class="jqc-stat-label"><i class="bi bi-qr-code"></i>QR reporting from any facility</span></div>
      <div class="jqc-stat-row"><span class="jqc-stat-label"><i class="bi bi-bar-chart"></i>Reports, scorecards and exports</span></div>
    </div>
  </div>

  {# ── External resources ────────────────────────────────────────────────
     The features site is a separate property, so it is an absolute URL and
     opens in a new tab (rel="noopener" — never let a new tab reach back into
     this one via window.opener).

     The enrollment form is served by THIS app, so it is linked with url_for()
     rather than the absolute https://jqc.ltservicesinc.com/enrollment. That
     keeps the link on whatever host the user is already using (jqc1, or a
     future brand domain) instead of bouncing them across hosts, and it cannot
     rot if the domain changes. Same page either way. #}
  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="https://jqcfeatures.ltservicesinc.com/"
       target="_blank" rel="noopener">
      <div class="d-flex gap-3 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-stars"></i></span>
        <div>
          <div class="jqc-hub-title">JQC Features</div>
          <div class="jqc-hub-text">
            A summary of everything JQC does — inspections, issue tracking,
            reporting and the mobile app.
          </div>
        </div>
      </div>
      <div class="jqc-hub-open">
        Open <i class="bi bi-box-arrow-up-right ms-1" style="font-size:.8rem;"></i>
      </div>
    </a>
  </div>

  <div class="col-12 col-lg-6">
    <a class="jqc-hub-card" href="{{ url_for('enrollment.form') }}">
      <div class="d-flex gap-3 align-items-start">
        <span class="jqc-tile-icon lg"><i class="bi bi-person-plus"></i></span>
        <div>
          <div class="jqc-hub-title">Enroll More People</div>
          <div class="jqc-hub-text">
            Add colleagues to JQC. Tell us who needs access and what each person
            should be able to do — we set up the accounts and email their
            invitations.
          </div>
        </div>
      </div>
      <div class="jqc-hub-open">Open &rarr;</div>
    </a>
  </div>

  <div class="col-12">
    <div class="jqc-card">
      <div class="jqc-card-title">
        <span class="jqc-tile-icon"><i class="bi bi-envelope"></i></span>Contact &amp; Support
      </div>
      <p class="mb-3">
        Questions about an inspection, an issue on your site, or access to the portal —
        start in the Support Center and we will route it to the right person.
      </p>
      <a href="{{ url_for('ui.support_center') }}" class="btn btn-primary">
        <i class="bi bi-life-preserver me-1"></i>Go to Support
      </a>
    </div>
  </div>
</div>
{% endblock %}