{% extends 'home/base.html' %}
{% load static %}
{% block title %}About Us – PEZAJOB{% endblock %}
{% block extra_css %}
<style>.about-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 80px 0; }
    .about-hero-text h1 { font-size: 2.6rem; font-family: 'Quicksand', sans-serif; color: var(--primary); margin-bottom: 20px; line-height: 1.2; }
    .about-hero-text h1 span { color: var(--secondary); }
    .about-hero-text p { font-size: 1rem; color: var(--text-light); line-height: 1.85; margin-bottom: 16px; }
    .about-img-wrap { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); }
    .about-logo-panel { display: flex; align-items: center; justify-content: center; min-height: 340px; border-radius: 20px; background: var(--brand-navy); }
    .about-logo-panel img { width: 46%; max-width: 220px; border-radius: 50%; box-shadow: 0 0 0 4px var(--secondary); }
    .about-img-wrap img { width: 100%; display: block; }
    .mission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .mission-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; transition: var(--transition); }
    .mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .mission-icon { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),#1a252f); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.6rem; color: var(--secondary); }
    .mission-card h3 { color: var(--primary); margin-bottom: 12px; font-size: 1.1rem; }
    .mission-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.75; }
    .stats-band { background: var(--primary); padding: 60px 0; }
    .stats-band-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; text-align: center; }
    .stat-b .num { font-size: 2.8rem; font-weight: 700; color: var(--secondary); font-family: 'Quicksand', sans-serif; }
    .stat-b .label { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-top: 4px; }
    .team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
    .team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: center; transition: var(--transition); }
    .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .team-card img { width: 100%; height: 200px; object-fit: cover; object-position: top; }
    .team-card-body { padding: 20px; }
    .team-name { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; font-family: 'Quicksand', sans-serif; }
    .team-role { font-size: 0.8rem; color: var(--secondary); font-weight: 600; margin-bottom: 12px; }
    .team-social { display: flex; justify-content: center; gap: 10px; }
    .team-social a { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; transition: var(--transition); }
    .team-social a:hover { background: var(--primary); color: var(--white); }
    .value-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
    .value-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(209,207,10,0.12); display: flex; align-items: center; justify-content: center; color: var(--secondary); font-size: 1.2rem; flex-shrink: 0; }
    .value-text h4 { color: var(--primary); font-size: 1rem; margin-bottom: 6px; }
    .value-text p { font-size: 0.87rem; color: var(--text-light); line-height: 1.7; }
    @media(max-width:900px){.about-hero-inner{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}.stats-band-grid{grid-template-columns:repeat(2,1fr)}.mission-grid{grid-template-columns:1fr}}
    @media(max-width:580px){.team-grid{grid-template-columns:1fr}.stats-band-grid{grid-template-columns:repeat(2,1fr)}}</style>
{% endblock %}
{% block content %}
<!-- PAGE HEADER -->
<section class="page-header">
  <div class="container">
    <div class="page-header-content">
      <h1>About PEZAJOB</h1>
      <p>A recruitment platform built for Zambians</p>
      <div class="breadcrumb">
        <a href="{% url 'home:index' %}">Home</a>
        <i class="fas fa-chevron-right"></i>
        <span>About</span>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT HERO -->
<section style="background:var(--white)">
  <div class="container">
    <div class="about-hero-inner">
      <div class="about-hero-text reveal-left">
        <h1>A job platform built for <span>Zambia</span></h1>
        <p>PEZAJOB connects job seekers and employers in Zambia. Job seekers can search vacancies, apply online and follow the progress of their applications. Employers can post jobs, review applicants and search for candidates.</p>
        <p>Alongside the job board we offer CV writing, LinkedIn profile writing, career coaching, HR outsourcing, training and recruitment services.</p>
        <p>PEZAJOB currently lists {{ stats.jobs }} open job{{ stats.jobs|pluralize }} from {{ stats.companies }} compan{{ stats.companies|pluralize:"y,ies" }}, and has {{ stats.seekers }} job seeker{{ stats.seekers|pluralize }} registered.</p>
        <div style="display:flex;gap:14px;margin-top:28px;flex-wrap:wrap">
          <a href="{% url 'accounts:register' %}" class="btn btn-primary">Create a free account</a>
          <a href="{% url 'home:contact' %}" class="btn btn-outline">Contact us</a>
        </div>
      </div>
      <div class="about-logo-panel reveal-right"><img src="{% static 'images/Logo_circle_clean.png' %}" alt="PEZAJOB" /></div>
    </div>
  </div>
</section>

<!-- STATS -->
<section class="stats-band">
  <div class="container">
    <div class="stats-band-grid">
      <div class="stat-b"><div class="num counter" data-target="{{ stats.jobs }}">{{ stats.jobs }}</div><div class="label">Active Jobs Listed</div></div>
      <div class="stat-b"><div class="num counter" data-target="{{ stats.companies }}">{{ stats.companies }}</div><div class="label">Registered Companies</div></div>
      <div class="stat-b"><div class="num counter" data-target="{{ stats.seekers }}">{{ stats.seekers }}</div><div class="label">Job Seekers</div></div>
    </div>
  </div>
</section>

<!-- MISSION / VISION -->
<section class="section" style="background:var(--bg)">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Our Purpose</span>
      <h2 class="section-title">Mission, Vision & Values</h2>
    </div>
    <div class="mission-grid">
      <div class="mission-card reveal">
        <div class="mission-icon"><i class="fas fa-bullseye"></i></div>
        <h3>Our Mission</h3>
        <p>To give every Zambian fair access to quality employment, and to help employers find the right people for their teams.</p>
      </div>
      <div class="mission-card reveal">
        <div class="mission-icon"><i class="fas fa-eye"></i></div>
        <h3>Our Vision</h3>
        <p>To be a dependable place for Zambians to find work and for employers to find staff, with clear listings and fair access for everyone.</p>
      </div>
      <div class="mission-card reveal">
        <div class="mission-icon"><i class="fas fa-heart"></i></div>
        <h3>Our Values</h3>
        <p>Honesty in how jobs and companies are presented. Practical tools that solve real hiring problems. Equal access for every Zambian job seeker.</p>
      </div>
    </div>
  </div>
</section>

<!-- WHY PEZAJOB -->
<section class="section" style="background:var(--white)">
  <div class="container" style="max-width:860px">
    <div>
      <span class="section-tag">Why PEZAJOB</span>
      <h2 style="font-size:2rem;color:var(--primary);margin:12px 0 28px">Made for the Zambian job market</h2>
      <div class="value-item">
        <div class="value-icon"><i class="fas fa-map-marker-alt"></i></div>
        <div class="value-text"><h4>Local focus</h4><p>Locations, industries and job categories are set up for Zambia, so searching by town or profession returns relevant results.</p></div>
      </div>
      <div class="value-item">
        <div class="value-icon"><i class="fas fa-mobile-alt"></i></div>
        <div class="value-text"><h4>Works on a phone</h4><p>Built for smartphones, because most Zambians use the internet on their phones. Plans can be paid for with mobile money.</p></div>
      </div>
      <div class="value-item">
        <div class="value-icon"><i class="fas fa-list-check"></i></div>
        <div class="value-text"><h4>Clear listings</h4><p>Each job shows the company, location, salary, requirements and how to apply. Employers can also review and shortlist applicants online.</p></div>
      </div>
      <div class="value-item">
        <div class="value-icon"><i class="fas fa-book-open"></i></div>
        <div class="value-text"><h4>Career support</h4><p>Job seekers can read career advice on our blog and podcast, and use our CV writing and coaching services.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section style="background:var(--brand-navy);padding:80px 0;text-align:center">
  <div class="container">
    <h2 style="color:var(--white);font-size:2rem;margin-bottom:14px;font-family:'Quicksand', sans-serif">Ready to Join the Movement?</h2>
    <p style="color:rgba(255,255,255,0.7);margin-bottom:32px">Join {{ stats.seekers }} job seekers and {{ stats.companies }} companies already using PEZAJOB.</p>
    <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap">
      <a href="{% url 'accounts:register' %}" class="btn btn-secondary" style="padding:14px 32px">Create Free Account</a>
      <a href="{% url 'jobs:list' %}" class="btn" style="background:rgba(255,255,255,0.1);color:var(--white);border:2px solid rgba(255,255,255,0.3);padding:14px 32px">Browse Jobs</a>
    </div>
  </div>
</section>



<button class="scroll-top" id="scrollTop"><i class="fas fa-arrow-up"></i></button>
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/app.js' %}"></script>
<script src="{% static 'js/podcast-player.js' %}"></script>
<script src="{% static 'js/spa-nav.js' %}" defer></script>
{% endblock %}