{% extends 'home/base.html' %}

{% block title %}Pricing & Plans – PEZAJOB{% endblock %}

{% block extra_head %}
<style>
  .plan-tabs { display: flex; justify-content: center; gap: 0; background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 40px; width: fit-content; margin-left: auto; margin-right: auto; flex-wrap: wrap; }
  .plan-tab-btn { padding: 10px 24px; border-radius: 8px; border: none; background: none; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
  .plan-tab-btn.active { background: var(--primary); color: var(--white); box-shadow: 0 4px 12px rgba(44,62,80,0.15); }
  .plans-panel { display: none; }
  .plans-panel.active { display: block; }
  .plans-grid { display: grid; gap: 24px; margin: 0 auto; }
  .plans-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
  .plans-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
  .plans-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 1280px; }
  .plan-card { background: var(--white); border: 2px solid var(--border); border-radius: 20px; padding: 32px 26px; position: relative; transition: transform 0.2s, box-shadow 0.2s; height: 100%; display: flex; flex-direction: column; }
  .plan-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(44,62,80,0.08); }
  .plan-card.featured { border-color: var(--secondary); background: var(--primary); color: var(--white); }
  .featured-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--secondary); color: var(--primary); font-size: 0.72rem; font-weight: 700; padding: 4px 16px; border-radius: 20px; white-space: nowrap; }
  .plan-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; color: var(--primary); }
  .plan-card.featured .plan-name { color: var(--white); }
  .plan-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; flex-grow: 0; }
  .plan-card.featured .plan-desc { color: rgba(255,255,255,0.75); }
  .plan-price { font-size: 2.4rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 4px; }
  .plan-card.featured .plan-price { color: var(--secondary); }
  .plan-price-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 20px; }
  .plan-card.featured .plan-price-label { color: rgba(255,255,255,0.65); }
  .plan-divider { border: none; border-top: 1.5px solid var(--border); margin: 0 0 16px; opacity: 0.5; }
  .plan-card.featured .plan-divider { border-color: rgba(255,255,255,0.15); }
  .plan-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--text-light); margin-bottom: 10px; }
  .plan-feature i { color: #27ae60; font-size: 0.8rem; margin-top: 3px; flex-shrink: 0; }
  .plan-feature.unavailable i { color: #ccc; }
  .plan-card.featured .plan-feature { color: rgba(255,255,255,0.9); }
  .plan-card.featured .plan-feature i { color: var(--secondary); }
  .plan-cta { width: 100%; margin-top: auto; padding-top: 20px; text-align: center; }
  .section-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; }
  .section-intro h2 { color: var(--primary); font-size: 1.35rem; margin-bottom: 12px; }
  .services-cta { background: linear-gradient(135deg, var(--primary), #3d6b8f); color: var(--white); border-radius: 20px; padding: 48px 40px; text-align: center; margin-top: 56px; }
  .services-cta h2 { font-size: 1.5rem; margin-bottom: 12px; }
  .services-cta p { opacity: 0.9; max-width: 640px; margin: 0 auto 24px; line-height: 1.7; font-size: 0.95rem; }
  @media(max-width:1100px){ .plans-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
  @media(max-width:900px){ .plans-grid.cols-3, .plans-grid.cols-2 { grid-template-columns: 1fr; max-width: 440px; } .plans-grid.cols-4 { grid-template-columns: 1fr; max-width: 440px; } }
</style>
{% endblock %}

{% block content %}
<section class="page-header">
  <div class="container page-header-content">
    <h1>Pricing & Plans</h1>
    <p>Flexible plans for professionals and employers across Zambia</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="plan-tabs" role="tablist">
      <button class="plan-tab-btn active" type="button" data-panel="seekers" role="tab">Job Seekers</button>
      <button class="plan-tab-btn" type="button" data-panel="recruitment" role="tab">Employer Plans</button>
      <button class="plan-tab-btn" type="button" data-panel="talent" role="tab">Talent Database</button>
    </div>

    <!-- Job seekers -->
    <div id="panel-seekers" class="plans-panel active" role="tabpanel">
      <div class="section-intro">
        <h2>Professional Membership</h2>
        <p>Build your profile, get discovered by employers, and manage your job search on PEZAJOB.</p>
      </div>
      <div class="plans-grid cols-2">
        {% for plan in seeker_plans %}
        {% include 'subscriptions/partials/plan_card.html' with plan=plan register_type='seeker' %}
        {% endfor %}
      </div>
    </div>

    <!-- Employer recruitment -->
    <div id="panel-recruitment" class="plans-panel" role="tabpanel">
      <div class="section-intro">
        <h2>Employer Recruitment Plans</h2>
        <p>Post jobs, promote your brand, and manage candidates - from occasional hiring to enterprise-scale recruitment.</p>
      </div>
      <div class="plans-grid cols-4">
        {% for plan in recruitment_plans %}
        {% include 'subscriptions/partials/plan_card.html' with plan=plan register_type='company' %}
        {% endfor %}
      </div>
    </div>

    <!-- Talent database -->
    <div id="panel-talent" class="plans-panel" role="tabpanel">
      <div class="section-intro">
        <h2>Talent Database Access</h2>
        <p>Find qualified professionals faster with direct access to PEZAJOB Zambia's growing talent database. Search, connect, and build your talent pipeline with flexible plans designed for your hiring needs.</p>
      </div>
      <div class="plans-grid cols-3">
        {% for plan in talent_plans %}
        {% include 'subscriptions/partials/plan_card.html' with plan=plan register_type='company' %}
        {% endfor %}
      </div>
    </div>

    <!-- Recruitment services CTA -->
    <div class="services-cta">
      <h2>Need More Support?</h2>
      <p>If you would rather leave the recruitment process to the experts, our Recruitment Services can manage everything from candidate sourcing and screening to interviews, assessments, and final placement - helping you hire the right talent while saving time and resources.</p>
      <a href="{% url 'home:contact' %}" class="btn btn-primary btn-lg">Get in Touch</a>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function(){
  const tabs = document.querySelectorAll('.plan-tab-btn');
  const panels = document.querySelectorAll('.plans-panel');
  tabs.forEach(tab => {
    tab.addEventListener('click', function(){
      const id = this.dataset.panel;
      tabs.forEach(t => t.classList.remove('active'));
      panels.forEach(p => p.classList.remove('active'));
      this.classList.add('active');
      const panel = document.getElementById('panel-' + id);
      if (panel) panel.classList.add('active');
    });
  });
  const hash = window.location.hash.replace('#', '');
  const tabMap = { talent: 'talent', recruitment: 'recruitment', seekers: 'seekers', 'panel-talent': 'talent', 'panel-recruitment': 'recruitment', 'panel-seekers': 'seekers' };
  const panelId = tabMap[hash];
  if (panelId) {
    const tab = document.querySelector('.plan-tab-btn[data-panel="' + panelId + '"]');
    if (tab) tab.click();
  }
})();
</script>
{% endblock %}