{% extends 'home/base.html' %}
{% load static humanize %}
{% block title %}PEZAJOB – Connecting Zambia's Talent With Opportunity{% endblock %}
{% block meta_description %}Find jobs, browse top employers, and connect with talent on PEZAJOB - Zambia's trusted career platform.{% endblock %}
{% block extra_css %}
<style>/* Homepage extras – overrides handled in style.css */
    @media(max-width:1000px){.categories-grid{grid-template-columns:repeat(3,1fr);}
    .steps-grid{grid-template-columns:repeat(2,1fr)}.testimonials-grid{grid-template-columns:1fr 1fr;}}
    @media(max-width:600px){.categories-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:1fr}.testimonials-grid{grid-template-columns:1fr;}}</style>
{% endblock %}
{% block extra_head %}<link rel="stylesheet" href="{% static 'css/company-card.css' %}?v=1" /><link rel="stylesheet" href="{% static 'css/seeker-card.css' %}?v=1" /><link rel="stylesheet" href="{% static 'css/coverflow.css' %}?v=20261024" />{% endblock %}
{% block content %}
<!-- ================ NAVBAR ================ -->


<!-- ================ HERO ================ -->
<!-- ── HERO: Clean Banner Slideshow ── -->
<section class="hero hero-clean">
  <div class="hero-slideshow" aria-hidden="true">
    <div class="hero-slide active" style="background-image:url('{% static 'images/banner1.jpg' %}')"></div>
    <div class="hero-slide" style="background-image:url('{% static 'images/Banner2.jpg' %}')"></div>
    <div class="hero-slide" style="background-image:url('{% static 'images/Banner3.jpg' %}')"></div>
    <div class="hero-slide" style="background-image:url('{% static 'images/Banner4.jpg' %}')"></div>
  </div>
  <!-- Slide Dots -->
  <div class="slide-dots" aria-label="Slideshow navigation">
    <button class="slide-dot active" data-slide="0" aria-label="Slide 1"></button>
    <button class="slide-dot" data-slide="1" aria-label="Slide 2"></button>
    <button class="slide-dot" data-slide="2" aria-label="Slide 3"></button>
    <button class="slide-dot" data-slide="3" aria-label="Slide 4"></button>
  </div>
</section>

<!-- ── SEARCH BAR (below banner) ── -->
<form
  method="get"
  action="{% url 'jobs:list' %}"
  class="homepage-search-bar"
  id="homepageSearchForm"
  data-action-jobs="{% url 'jobs:list' %}"
  data-action-companies="{% url 'companies:list' %}"
  data-action-talent="{% url 'seekers:list' %}"
>
  <div class="container">
    <p class="hsb-heading">Search for Jobs | Talent | Companies</p>
    <div class="hsb-inner">
      <div class="hsb-field hsb-field-type" id="homepageSearchTypeField">
        <i class="fas fa-filter hsb-icon" id="homepageSearchTypeIcon" aria-hidden="true"></i>
        <div class="hsb-dropdown" id="homepageSearchTypeDropdown">
          <button type="button" class="hsb-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="Search type">
            <span class="hsb-dropdown-label is-hint" id="homepageSearchTypeLabel">Search for Jobs, Companies, Talent</span>
            <i class="fas fa-chevron-down hsb-dropdown-chevron" aria-hidden="true"></i>
          </button>
          <ul class="hsb-dropdown-menu" role="listbox" aria-label="Search type">
            <li role="presentation">
              <button type="button" class="hsb-dropdown-option is-active" data-value="jobs" data-label="Jobs" role="option" aria-selected="true">
                <i class="fas fa-briefcase" aria-hidden="true"></i>
                <span><strong>Jobs</strong></span>
              </button>
            </li>
            <li role="presentation">
              <button type="button" class="hsb-dropdown-option" data-value="companies" data-label="Companies" role="option" aria-selected="false">
                <i class="fas fa-building" aria-hidden="true"></i>
                <span><strong>Companies</strong></span>
              </button>
            </li>
            <li role="presentation">
              <button type="button" class="hsb-dropdown-option" data-value="talent" data-label="Talent" role="option" aria-selected="false">
                <i class="fas fa-user-tie" aria-hidden="true"></i>
                <span><strong>Talent</strong></span>
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="hsb-field hsb-field-query">
        <span class="hsb-query-group">
          <i class="fas fa-search hsb-icon"></i>
          <input type="text" name="q" id="homepageSearchQuery" placeholder="Job title or keyword" class="hsb-input" />
        </span>
      </div>
      <div class="hsb-field hsb-field-company" id="homepageCompanyField">
        <i class="fas fa-building hsb-icon"></i>
        <input type="text" name="company" id="homepageSearchCompany" placeholder="Company name" class="hsb-input" />
      </div>
      <div class="hsb-field hsb-field-industry is-hidden" id="homepageIndustryField">
        <i class="fas fa-industry hsb-icon"></i>
        <input type="text" name="industry" id="homepageSearchIndustry" placeholder="Industry" class="hsb-input" disabled />
      </div>
      <div class="hsb-field hsb-field-location">
        <i class="fas fa-map-marker-alt hsb-icon"></i>
        <div class="hsb-dropdown" id="homepageLocationDropdown">
          <input type="hidden" name="location" id="homepageSearchLocation" value="">
          <button type="button" class="hsb-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="Location">
            <span class="hsb-dropdown-label" id="homepageLocationLabel">All Locations</span>
            <i class="fas fa-chevron-down hsb-dropdown-chevron" aria-hidden="true"></i>
          </button>
          <ul class="hsb-dropdown-menu hsb-dropdown-menu-scroll" role="listbox" aria-label="Location">
            <li role="presentation"><button type="button" class="hsb-dropdown-option hsb-dropdown-option-simple is-active" data-value="" data-label="All Locations" role="option" aria-selected="true"><span><strong>All Locations</strong></span></button></li>
            {% for town in search_locations %}
            <li role="presentation"><button type="button" class="hsb-dropdown-option hsb-dropdown-option-simple" data-value="{{ town }}" data-label="{{ town }}" role="option" aria-selected="false"><span><strong>{{ town }}</strong></span></button></li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <button type="submit" class="btn btn-primary hsb-btn"><i class="fas fa-search"></i> Search</button>
    </div>
    <div class="hsb-stats">
      <span><i class="fas fa-briefcase"></i> <strong>{{ stats.jobs|intcomma }}</strong> Active Jobs</span>
      <span class="hsb-stat-dot"></span>
      <span><i class="fas fa-building"></i> <strong>{{ stats.companies|intcomma }}</strong> Companies</span>
      <span class="hsb-stat-dot"></span>
      <span><i class="fas fa-users"></i> <strong>{{ stats.seekers|intcomma }}</strong> Professionals</span>
    </div>
  </div>
</form>


<!-- ================ JOB CATEGORIES ================ -->
<section class="section">
  <div class="container"><div class="cat-frame ds-card">
    <div class="section-header reveal">
      <div class="section-tag">Browse By Category</div>
      <h2>Explore Top Job Categories</h2>
      <p>Find opportunities across all major industries in Zambia</p>
    </div>
    <div class="categories-grid reveal" id="catGrid">
      {% for category in job_categories|slice:":8" %}
      <a class="category-card" href="{% url 'jobs:list' %}?category={{ category.slug }}">
        <span class="category-icon"><i class="fas {{ category.icon|default:'fa-briefcase' }}"></i></span>
        <span class="category-text">
          <span class="category-name">{{ category.name }}</span>
          <span class="category-count{% if not category.job_count %} is-empty{% endif %}">{% if category.job_count %}{{ category.job_count }} open job{{ category.job_count|pluralize }}{% else %}Browse{% endif %}</span>
        </span>
      </a>
      {% empty %}
      <a class="category-card" href="{% url 'jobs:list' %}">
        <span class="category-icon"><i class="fas fa-briefcase"></i></span>
        <span class="category-text"><span class="category-name">All categories</span><span class="category-count">Browse jobs</span></span>
      </a>
      {% endfor %}
    </div>
    <div class="text-center cat-more-wrap">
      <a href="{% url 'jobs:categories' %}" class="btn btn-outline">View all {{ job_categories|length }} categories <i class="fas fa-arrow-right"></i></a>
    </div>
  </div></div>
</section>

<!-- ================ LATEST JOBS ================ -->
<section class="section section-alt section-latest-jobs">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Latest Opportunities</div>
      <h2>Latest Job Listings</h2>
      <p>Fresh opportunities added daily from top Zambian employers</p>
    </div>
    <div class="jobs-grid stagger-reveal">
      {% for job in latest_jobs %}
        {% include 'jobs/partials/job_card.html' with job=job compact=True %}
      {% empty %}
      <p class="text-center" style="grid-column:1/-1;color:var(--text-muted);">No jobs listed yet. Check back soon!</p>
      {% endfor %}
    </div>
    <div class="text-center mt-40">
      <a href="{% url 'jobs:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-briefcase"></i> View All Jobs</a>
    </div>
  </div>
</section>

<!-- ================ FEATURED COMPANIES 3D CAROUSEL ================ -->
<section class="section" style="overflow:hidden;">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Top Employers</div>
      <h2>Featured Companies</h2>
      <p>Companies currently hiring on PEZAJOB</p>
    </div>
  </div>

<div class="container" style="position:relative;">
  <!-- Company Slider (5 cards per page) -->
  <div class="fslider" id="fc-company-grid">
    <div class="fslider-viewport" id="fc-company-viewport">
      <div class="fslider-track" id="fc-company-track">
        {% for company in featured_companies %}
        {% include 'home/partials/company_grid_card.html' %}
        {% empty %}
        <p style="padding:40px;color:var(--text-muted);">Featured companies coming soon.</p>
        {% endfor %}
      </div>
    </div>
    <div class="cflow-nav">
      <button class="cflow-btn" id="fc-company-prev"><i class="fas fa-chevron-left"></i></button>
      <div class="cflow-dots" id="fc-company-dots"></div>
      <button class="cflow-btn" id="fc-company-next"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>

  <div class="text-center" style="margin-top:32px;">
    <a href="{% url 'companies:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-building"></i> View All Companies</a>
  </div>
</div>
</section>

<!-- ================ FEATURED TALENT 3D CAROUSEL ================ -->
<section class="section section-alt" style="overflow:hidden;">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Talent</div>
      <h2>Featured Candidates</h2>
      <p>Professionals available to join your team</p>
    </div>
  </div>

  <div class="container" style="position:relative;">
  <!-- Candidate Slider (3 cards per page) -->
  <div class="fslider" id="fc-talent-grid">
    <div class="fslider-viewport" id="fc-talent-viewport">
      <div class="fslider-track" id="fc-talent-track">
        {% for seeker in featured_seekers %}
        {% include 'seekers/partials/talent_grid_card.html' with show_full_seeker_details=show_full_seeker_details %}
        {% empty %}
        <p style="padding:40px;color:var(--text-muted);">Featured candidates coming soon.</p>
        {% endfor %}
      </div>
    </div>
    <div class="cflow-nav">
      <button class="cflow-btn" id="fc-talent-prev"><i class="fas fa-chevron-left"></i></button>
      <div class="cflow-dots" id="fc-talent-dots"></div>
      <button class="cflow-btn" id="fc-talent-next"><i class="fas fa-chevron-right"></i></button>
    </div>
  </div>

  <div class="text-center" style="margin-top:32px;">
    <a href="{% url 'seekers:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-users"></i> Browse All Talent</a>
  </div>
  </div>
</section>


<!-- ================ EXPLORE OUR SERVICES ================ -->
<section class="section srv-showcase">
  <div class="container">
    <div class="srv-showcase-grid">

      <!-- LEFT: Switching image slideshow -->
      <div class="srv-img-col reveal">
        <div class="srv-img-stack">
          <div class="srv-img-slide active">
            <picture>
              <source srcset="{% static 'images/slide-cv.webp' %}" type="image/webp" />
              <img src="{% static 'images/slide-cv.jpg' %}" alt="CV Writing Services" width="1000" height="1313" loading="lazy" decoding="async" />
            </picture>
          </div>
          <div class="srv-img-slide">
            <picture>
              <source srcset="{% static 'images/slide-linkedin.webp' %}" type="image/webp" />
              <img src="{% static 'images/slide-linkedin.jpg' %}" alt="LinkedIn Profile Writing" width="1000" height="1157" loading="lazy" decoding="async" />
            </picture>
          </div>
          <div class="srv-img-slide">
            <picture>
              <source srcset="{% static 'images/slide-training.webp' %}" type="image/webp" />
              <img src="{% static 'images/slide-training.jpg' %}" alt="Employee Training" width="1000" height="1157" loading="lazy" decoding="async" />
            </picture>
          </div>
          <!-- Dot indicators -->
          <div class="srv-img-dots">
            <button class="srv-img-dot active" data-idx="0"></button>
            <button class="srv-img-dot" data-idx="1"></button>
            <button class="srv-img-dot" data-idx="2"></button>
          </div>
        </div>
      </div>

      <!-- RIGHT: Services text -->
      <div class="srv-text-col reveal" data-delay="100">
        <div class="section-tag" style="margin-bottom:18px;">What We Do</div>
        <h2 class="srv-showcase-title">Explore Our <span style="color:var(--secondary);">Services</span></h2>
        <p class="srv-showcase-sub">Our services include:</p>

        <ul class="srv-list">
          <li class="srv-list-item">
            <div class="srv-list-icon"><i class="fas fa-users"></i></div>
            <div>
              <strong>Recruitment &amp; Staffing (Temporary &amp; Permanent)</strong>
              <p>We source, assess, and place qualified candidates for various roles, ensuring the right talent for your business needs.</p>
            </div>
          </li>
          <li class="srv-list-item">
            <div class="srv-list-icon"><i class="fas fa-briefcase"></i></div>
            <div>
              <strong>HR Outsourced Management</strong>
              <p>We offer HR solutions, including contract drafting, policy development, employee relations, payroll management and compliance management.</p>
            </div>
          </li>
          <li class="srv-list-item">
            <div class="srv-list-icon"><i class="fas fa-compass"></i></div>
            <div>
              <strong>Career Clarity Coaching</strong>
              <p>Gain direction and confidence in your career choices with our personalised coaching, designed to help you identify the right path for long-term success.</p>
            </div>
          </li>
          <li class="srv-list-item">
            <div class="srv-list-icon"><i class="fas fa-chalkboard-teacher"></i></div>
            <div>
              <strong>Training &amp; Development Programs</strong>
              <p>Customised corporate training sessions, workshops, and seminars on leadership, employee engagement, compliance, and skills development.</p>
            </div>
          </li>
          <li class="srv-list-item">
            <div class="srv-list-icon"><i class="fas fa-bullhorn"></i></div>
            <div>
              <strong>Job Vacancy Advertisement &amp; Listing</strong>
              <p>We promote job openings on our platform and social media, ensuring visibility among qualified professionals to attract suitable candidates.</p>
            </div>
          </li>
        </ul>

        <a href="{% url 'home:services' %}" class="btn btn-primary btn-lg srv-learn-btn">
          <i class="fas fa-arrow-right"></i> Learn More About Our Services
        </a>
      </div>

    </div>
  </div>
</section>

<!-- ================ HOW IT WORKS ================ -->
<section class="section how-it-works">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Simple Process</div>
      <h2>How PEZAJOB Works</h2>
      <p>Job seekers and employers can get started in a few simple steps</p>
    </div>

    <div class="hiw-tabs reveal" role="tablist" aria-label="How PEZAJOB works">
      <button type="button" class="hiw-tab active" role="tab" aria-selected="true" aria-controls="hiw-panel-seekers" id="hiw-tab-seekers" data-hiw-tab="seekers">
        <i class="fas fa-user-graduate"></i> For Job Seekers
      </button>
      <button type="button" class="hiw-tab" role="tab" aria-selected="false" aria-controls="hiw-panel-companies" id="hiw-tab-companies" data-hiw-tab="companies">
        <i class="fas fa-building"></i> For Companies
      </button>
    </div>

    <div class="hiw-panel active reveal" id="hiw-panel-seekers" role="tabpanel" aria-labelledby="hiw-tab-seekers">
      <div class="steps-grid">
        <div class="step reveal" data-delay="0">
          <div class="step-num">1</div>
          <div class="step-icon"><i class="fas fa-user-plus"></i></div>
          <h3>Create Your Profile</h3>
          <p>Sign up and build a professional profile showcasing your skills, experience and qualifications.</p>
        </div>
        <div class="step reveal" data-delay="100">
          <div class="step-num">2</div>
          <div class="step-icon"><i class="fas fa-search"></i></div>
          <h3>Explore Opportunities</h3>
          <p>Browse thousands of job listings filtered by location, salary, industry and experience level.</p>
        </div>
        <div class="step reveal" data-delay="200">
          <div class="step-num">3</div>
          <div class="step-icon"><i class="fas fa-paper-plane"></i></div>
          <h3>Apply With One Click</h3>
          <p>Submit your application instantly with your pre-built profile and tailored cover letter.</p>
        </div>
        <div class="step reveal" data-delay="300">
          <div class="step-num">4</div>
          <div class="step-icon"><i class="fas fa-trophy"></i></div>
          <h3>Get Hired!</h3>
          <p>Connect with employers, attend interviews, and land your dream job in Zambia.</p>
        </div>
      </div>
    </div>

    <div class="hiw-panel reveal" id="hiw-panel-companies" role="tabpanel" aria-labelledby="hiw-tab-companies" hidden>
      <div class="steps-grid">
        <div class="step reveal" data-delay="0">
          <div class="step-num">1</div>
          <div class="step-icon"><i class="fas fa-building"></i></div>
          <h3>Register Your Company</h3>
          <p>Create your employer account and set up a company profile with logo, description, and contact details.</p>
        </div>
        <div class="step reveal" data-delay="100">
          <div class="step-num">2</div>
          <div class="step-icon"><i class="fas fa-briefcase"></i></div>
          <h3>Post Job Openings</h3>
          <p>Publish roles with salary, requirements, and attachments so qualified candidates can find and apply.</p>
        </div>
        <div class="step reveal" data-delay="200">
          <div class="step-num">3</div>
          <div class="step-icon"><i class="fas fa-users"></i></div>
          <h3>Review Applications</h3>
          <p>Manage applicants from your dashboard, track your hiring pipeline, and message shortlisted candidates.</p>
        </div>
        <div class="step reveal" data-delay="300">
          <div class="step-num">4</div>
          <div class="step-icon"><i class="fas fa-user-check"></i></div>
          <h3>Hire Talent</h3>
          <p>Shortlist from applications or search the CV library to discover and hire the right people faster.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================ BLOG & PODCAST ================ -->
<section class="section section-alt">
  <div class="container">

    <!-- Blog Preview -->
    <div class="section-header reveal" style="margin-bottom:44px;">
      <div class="section-tag">Career Insights</div>
      <h2>Latest from the Blog</h2>
      <p>Career advice, tips and industry news for Zambian job seekers and employers</p>
    </div>

    <div class="news-grid">
      {% if featured_blog %}
      {% include 'home/partials/news_card.html' with post=featured_blog %}
      {% endif %}
      {% for post in latest_blog_posts|slice:":2" %}
      {% include 'home/partials/news_card.html' with post=post %}
      {% endfor %}
    </div>

    <div class="text-center" style="margin-top:40px;">
      <a href="{% url 'blog:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-book-open"></i> View All Articles</a>
    </div>

  </div>
</section>

<!-- ================ PODCAST PREVIEW ================ -->
<section class="section podcast-preview-section" style="padding:80px 0;">
  <div class="container">
    <div class="section-header reveal" style="margin-bottom:44px;">
      <div class="section-tag"><i class="fas fa-microphone"></i> Career Talks Podcast</div>
      <h2>Latest Podcast Episodes</h2>
      <p>Real conversations with Zambia's top employers, coaches and leaders</p>
    </div>

    <div class="pod-grid">
      {% if featured_podcast %}
      <a href="{{ featured_podcast.get_absolute_url }}" class="pod-ep-card pod-ep-featured reveal" {% include 'podcast/partials/player_data_attrs.html' with episode=featured_podcast %}>
        <div class="pod-ep-cover">
          {% if featured_podcast.cover_image_url %}<img loading="lazy" decoding="async" src="{{ featured_podcast.cover_image_url }}" alt="{{ featured_podcast.title }}" class="pod-ep-img" />{% endif %}
          <div class="pod-ep-overlay"></div>
          <div class="pod-play-btn"><i class="fas fa-play"></i></div>
          <span class="pod-ep-num">EP. {{ featured_podcast.episode_number }}</span>
        </div>
        <div class="pod-ep-body">
          <div class="pod-ep-meta"><i class="fas fa-clock"></i> {{ featured_podcast.duration_display }} &nbsp;·&nbsp; <i class="fas fa-calendar"></i> {{ featured_podcast.published_at|date:"M j, Y" }}</div>
          <h3 class="pod-ep-title">{{ featured_podcast.title }}</h3>
          <p class="pod-ep-desc">{{ featured_podcast.description|truncatewords:35 }}</p>
          {% if featured_podcast.guest_name %}<div class="pod-ep-guest"><span>{{ featured_podcast.guest_name }}</span></div>{% endif %}
        </div>
      </a>
      {% endif %}
      <div class="pod-side-stack">
        {% for episode in latest_podcast_episodes %}
        <a href="{{ episode.get_absolute_url }}" class="pod-mini-card reveal" data-delay="{{ forloop.counter0|add:1 }}00" {% include 'podcast/partials/player_data_attrs.html' with episode=episode %}>
          <div class="pod-mini-thumb">
            {% if episode.cover_image_url %}<img loading="lazy" decoding="async" src="{{ episode.cover_image_url }}" alt="Ep {{ episode.episode_number }}" />{% endif %}
            <div class="pod-mini-play"><i class="fas fa-play"></i></div>
          </div>
          <div class="pod-mini-body">
            <span class="pod-ep-num-sm">EP. {{ episode.episode_number }}</span>
            <div class="pod-mini-title">{{ episode.title }}</div>
            <div class="pod-mini-meta"><i class="fas fa-clock"></i> {{ episode.duration_display }} &nbsp;·&nbsp; {{ episode.published_at|date:"M j, Y" }}</div>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>

    <div class="text-center" style="margin-top:40px;">
      <a href="{% url 'podcast:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-headphones"></i> Browse All Episodes</a>
    </div>

  </div>
</section>

<!-- ================ TESTIMONIALS ================ -->
<section class="section testimonials">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-tag">Success Stories</div>
      <h2>What Our Users Say</h2>
      <p>Real stories from job seekers and employers who found success on PEZAJOB</p>
    </div>
    <div class="testimonials-grid">
      {% for t in home_testimonials %}
      <div class="testimonial-card reveal"{% if not forloop.first %} data-delay="{{ forloop.counter0 }}00"{% endif %}>
        <div class="testimonial-stars">{% for i in "12345"|make_list %}{% if forloop.counter <= t.rating %}<i class="fas fa-star"></i>{% endif %}{% endfor %}</div>
        <p class="testimonial-text">"{{ t.story|truncatewords:35 }}"</p>
        <div class="testimonial-author">
          <div class="testimonial-avatar">{{ t.avatar_initials }}</div>
          <div><div class="testimonial-name">{{ t.full_name }}</div><div class="testimonial-role">{{ t.role }}{% if t.company %} at {{ t.company }}{% endif %}</div></div>
        </div>
      </div>
      {% empty %}
      <p style="grid-column:1/-1;text-align:center;color:var(--text-muted);">Success stories coming soon.</p>
      {% endfor %}
    </div>
<div style="text-align:center;margin-top:40px;">
      <a href="{% url 'testimonials:list' %}" class="btn btn-primary btn-lg"><i class="fas fa-heart"></i> Read All Success Stories</a>
    </div>
  </div>
</section>


<!-- ================ CTA SECTION ================ -->
<section class="cta-section">
  <div class="container" style="position:relative;z-index:1">
    <div class="section-tag" style="margin-bottom:24px">Get Started Today</div>
    <h2>Ready to Take the Next Step?</h2>
    <p>Join {{ stats.seekers|intcomma }} professionals and {{ stats.companies|intcomma }} companies on PEZAJOB</p>
    <div class="cta-btns">
      <a href="{% url 'accounts:register' %}" class="btn btn-secondary btn-lg"><i class="fas fa-user-plus"></i> Create Free Account</a>
      <a href="{% url 'jobs:list' %}" class="btn btn-outline-white btn-lg"><i class="fas fa-briefcase"></i> Browse All Jobs</a>
    </div>
  </div>
</section>












<!-- ── Services Image Switcher ── -->


<!-- ── Banner Slideshow Script ── -->
{% endblock %}
{% block extra_js %}
<script>
(function () {
  const form = document.getElementById('homepageSearchForm');
  const typeDropdown = document.getElementById('homepageSearchTypeDropdown');
  const typeField = document.getElementById('homepageSearchTypeField');
  const typeLabel = document.getElementById('homepageSearchTypeLabel');
  const queryInput = document.getElementById('homepageSearchQuery');
  const companyField = document.getElementById('homepageCompanyField');
  const companyInput = document.getElementById('homepageSearchCompany');
  const industryField = document.getElementById('homepageIndustryField');
  const industryInput = document.getElementById('homepageSearchIndustry');
  const typeIcon = document.getElementById('homepageSearchTypeIcon');
  const locationDropdown = document.getElementById('homepageLocationDropdown');
  const locationInput = document.getElementById('homepageSearchLocation');
  const locationLabel = document.getElementById('homepageLocationLabel');
  if (!form || !typeDropdown) return;

  const DEFAULT_TYPE_LABEL = 'Search for Jobs, Companies, Talent';

  const config = {
    jobs: {
      action: form.dataset.actionJobs,
      placeholder: 'Job title or keyword',
      showCompany: true,
      showIndustry: false,
      icon: 'fa-briefcase',
    },
    companies: {
      action: form.dataset.actionCompanies,
      placeholder: 'Company name or industry',
      showCompany: false,
      showIndustry: false,
      icon: 'fa-building',
    },
    talent: {
      action: form.dataset.actionTalent,
      placeholder: 'Profession or skills',
      showCompany: false,
      showIndustry: true,
      icon: 'fa-user-tie',
    },
  };

  function closeDropdown(dropdown) {
    if (!dropdown) return;
    dropdown.classList.remove('open');
    const trigger = dropdown.querySelector('.hsb-dropdown-trigger');
    if (trigger) trigger.setAttribute('aria-expanded', 'false');
  }

  function closeAllDropdowns() {
    document.querySelectorAll('.hsb-dropdown.open').forEach(closeDropdown);
  }

  function initDropdown(dropdown, onSelect) {
    const trigger = dropdown.querySelector('.hsb-dropdown-trigger');
    const options = dropdown.querySelectorAll('.hsb-dropdown-option');
    if (!trigger) return;

    trigger.addEventListener('click', (event) => {
      event.preventDefault();
      event.stopPropagation();
      const willOpen = !dropdown.classList.contains('open');
      closeAllDropdowns();
      if (willOpen) {
        dropdown.classList.add('open');
        trigger.setAttribute('aria-expanded', 'true');
      }
    });

    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        options.forEach((item) => {
          item.classList.remove('is-active');
          item.setAttribute('aria-selected', 'false');
        });
        option.classList.add('is-active');
        option.setAttribute('aria-selected', 'true');
        if (onSelect) onSelect(option);
        closeDropdown(dropdown);
      });
    });
  }

  function applySearchType(type, pickedLabel) {
    const settings = config[type] || config.jobs;
    form.action = settings.action;
    if (queryInput) queryInput.placeholder = settings.placeholder;
    if (typeIcon) typeIcon.className = `fas ${settings.icon} hsb-icon`;
    if (companyField && companyInput) {
      companyField.classList.toggle('is-hidden', !settings.showCompany);
      companyInput.disabled = !settings.showCompany;
      if (!settings.showCompany) companyInput.value = '';
    }
    if (industryField && industryInput) {
      industryField.classList.toggle('is-hidden', !settings.showIndustry);
      industryInput.disabled = !settings.showIndustry;
      if (!settings.showIndustry) industryInput.value = '';
    }
    if (typeLabel) {
      if (pickedLabel) {
        typeLabel.textContent = pickedLabel;
        typeLabel.classList.remove('is-hint');
      } else {
        typeLabel.textContent = DEFAULT_TYPE_LABEL;
        typeLabel.classList.add('is-hint');
      }
    }
    if (typeField) {
      typeField.classList.toggle('is-selected', Boolean(pickedLabel));
    }
  }

  initDropdown(typeDropdown, (option) => {
    applySearchType(option.dataset.value || 'jobs', option.dataset.label || 'Jobs');
  });

  if (locationDropdown) {
    initDropdown(locationDropdown, (option) => {
      const value = option.dataset.value || '';
      const label = option.dataset.label || option.textContent.trim();
      if (locationInput) locationInput.value = value;
      if (locationLabel) locationLabel.textContent = label;
    });
  }

  document.addEventListener('mousedown', (event) => {
    if (!event.target.closest('.hsb-dropdown')) closeAllDropdowns();
  });
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') closeAllDropdowns();
  });

  applySearchType('jobs');

  if (typeIcon) typeIcon.className = 'fas fa-filter hsb-icon';
})();
</script>
<script>
  // Show scroll-top button
  const scrollBtn = document.getElementById('scroll-top');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 500) { scrollBtn.style.display='flex'; scrollBtn.style.opacity='1'; scrollBtn.style.alignItems='center'; scrollBtn.style.justifyContent='center'; }
    else { scrollBtn.style.opacity='0'; setTimeout(()=>{ if(scrollBtn.style.opacity==='0')scrollBtn.style.display='none'; },300); }
  });
  scrollBtn.addEventListener('click', () => window.scrollTo({top:0,behavior:'smooth'}));
</script>
<script>
/* ══════════════════════════════════════════════════════════
   PEZAJOB - Coverflow 3D Carousel Engine
   Centre card faces forward; siblings tilt away with depth
══════════════════════════════════════════════════════════ */

function initCoverflow(trackId, prevId, nextId, dotsId) {
  const track   = document.getElementById(trackId);
  const prevBtn = document.getElementById(prevId);
  const nextBtn = document.getElementById(nextId);
  const dotsWrap= document.getElementById(dotsId);
  if (!track) return;

  const cards   = Array.from(track.querySelectorAll('.cflow-card'));
  const total   = cards.length;
  const isTalent = trackId === 'fc-talent-track';
  let current   = 0;
  let autoTimer = null;

  function wrapIndex(idx) {
    if (total <= 0) return 0;
    return ((idx % total) + total) % total;
  }

  /* Shortest circular distance - makes first/last neighbours wrap visually */
  function wrappedDiff(i) {
    let diff = i - current;
    if (total <= 1) return 0;
    if (total === 2) return diff === 0 ? 0 : (current === 0 ? 1 : -1);
    const half = total / 2;
    if (diff > half) diff -= total;
    if (diff < -half) diff += total;
    return diff;
  }

  /* ── Layout constants (recalculated on resize) ── */
  function cfg() {
    const vw = window.innerWidth;
    if (vw <= 480) return { cardW: Math.min(vw * 0.78, 280), cardH: 390, tilt: 30, zOff: 80,  xOff: 0.66, fade: 0.45, gap: 22 };
    if (vw <= 700) return { cardW: Math.min(vw * 0.66, 300), cardH: 400, tilt: 32, zOff: 90,  xOff: 0.70, fade: 0.40, gap: 28 };
    if (vw <= 900) return { cardW: 290,                       cardH: 410, tilt: 34, zOff: 100, xOff: 0.74, fade: 0.38, gap: 34 };
    return              { cardW: 310,                          cardH: 420, tilt: 34, zOff: 110, xOff: 0.80, fade: 0.35, gap: 40 };
  }

  /* ── Apply 3D transforms to every card ── */
  function render(animate) {
    const c = cfg();
    const trans = animate ? 'transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.6s ease, box-shadow 0.6s ease, filter 0.6s ease' : 'none';

    cards.forEach((card, i) => {
      card.style.width       = c.cardW + 'px';
      card.style.height      = c.cardH + 'px';
      card.style.minHeight   = c.cardH + 'px';
      card.style.maxHeight   = c.cardH + 'px';
      card.style.transition  = trans;

      const diff   = wrappedDiff(i);
      const absDiff = Math.abs(diff);

      /* How many positions away - cap at 3 for z/opacity */
      const depthLevel = Math.min(absDiff, 3);

      /* X offset: stagger each card by xOff fraction of cardWidth */
      const xPx = diff * c.cardW * c.xOff;

      /* Rotation: tilt away from centre */
      const rotY = diff === 0 ? 0 : (diff > 0 ? c.tilt : -c.tilt);

      /* Z: pull side cards back */
      const zPx = diff === 0 ? 0 : -(c.zOff * depthLevel);

      /* Uniform scale - all cards same size; depth via z/opacity/tilt only */
      const scale = 1;

      /* Opacity */
      const opacity = diff === 0 ? 1 : Math.max(c.fade, 1 - 0.22 * depthLevel);

      /* Blur side cards slightly */
      const blur = diff === 0 ? 0 : Math.min(2, 0.8 * depthLevel);

      /* Hide cards that are too far away */
      const maxVisible = window.innerWidth <= 600 ? 2 : 3;
      const visible = absDiff <= maxVisible;

      card.style.transform   = `perspective(1200px) translateX(${xPx}px) translateZ(${zPx}px) rotateY(${rotY}deg) scale(${scale})`;
      card.style.opacity     = visible ? opacity : 0;
      card.style.pointerEvents = diff === 0 ? 'auto' : (visible ? 'auto' : 'none');
      card.style.filter      = blur > 0 ? `blur(${blur}px)` : '';
      card.style.zIndex      = diff === 0 ? 100 : (10 - absDiff);
      card.classList.toggle('cflow-active', diff === 0);

      /* Shadow: richer on centre card */
      card.style.boxShadow = diff === 0
        ? '0 24px 64px rgba(44,62,80,0.22), 0 0 0 2.5px var(--secondary)'
        : `0 ${6 + depthLevel * 4}px ${20 + depthLevel * 10}px rgba(44,62,80,${0.07 + depthLevel * 0.02})`;
    });

    /* Track height matches fixed card height */
    track.style.minHeight = c.cardH + 24 + 'px';

    /* Dots */
    if (dotsWrap) {
      dotsWrap.querySelectorAll('.cflow-dot').forEach((d, i) => d.classList.toggle('active', i === current));
    }
    if (prevBtn) prevBtn.disabled = false;
    if (nextBtn) nextBtn.disabled = false;
  }

  function go(idx) {
    if (total === 0) return;
    current = wrapIndex(idx);
    render(true);
    resetAuto();
  }

  /* Click side cards to centre; click active card to open profile (candidates) */
  cards.forEach((card, i) => {
    card.addEventListener('click', () => {
      const diff = wrappedDiff(i);
      if (diff !== 0) {
        go(i);
        return;
      }
      const profileUrl = card.dataset.profileUrl;
      if (profileUrl) {
        window.location.href = profileUrl;
      }
    });
  });

  /* Dots */
  function buildDots() {
    if (!dotsWrap) return;
    dotsWrap.innerHTML = '';
    for (let i = 0; i < total; i++) {
      const d = document.createElement('button');
      d.className = 'cflow-dot' + (i === 0 ? ' active' : '');
      d.addEventListener('click', () => go(i));
      dotsWrap.appendChild(d);
    }
  }

  /* Buttons */
  if (prevBtn) prevBtn.addEventListener('click', () => go(current - 1));
  if (nextBtn) nextBtn.addEventListener('click', () => go(current + 1));

  /* Auto-advance - infinite loop */
  function startAuto() {
    if (total <= 1) return;
    autoTimer = setInterval(() => go(current + 1), 3800);
  }
  function resetAuto() { clearInterval(autoTimer); startAuto(); }

  /* Touch / swipe */
  let tx = 0;
  track.addEventListener('touchstart', e => { tx = e.touches[0].clientX; clearInterval(autoTimer); }, { passive: true });
  track.addEventListener('touchend', e => {
    const dx = e.changedTouches[0].clientX - tx;
    if (Math.abs(dx) > 40) go(dx < 0 ? current + 1 : current - 1);
    else startAuto();
  });

  /* Mouse drag */
  let mx = 0, dragging = false;
  track.addEventListener('mousedown', e => { mx = e.clientX; dragging = true; clearInterval(autoTimer); });
  document.addEventListener('mouseup', e => {
    if (!dragging) return;
    dragging = false;
    const dx = e.clientX - mx;
    if (Math.abs(dx) > 50) go(dx < 0 ? current + 1 : current - 1);
    else startAuto();
  });

  /* Pause on hover */
  const section = document.getElementById(trackId.replace('-track', ''));
  if (section) {
    section.addEventListener('mouseenter', () => clearInterval(autoTimer));
    section.addEventListener('mouseleave', resetAuto);
  }

  /* Keyboard */
  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft')  go(current - 1);
    if (e.key === 'ArrowRight') go(current + 1);
  });

  /* Resize */
  let rTimer;
  window.addEventListener('resize', () => {
    clearTimeout(rTimer);
    rTimer = setTimeout(() => render(false), 120);
  });

  buildDots();
  requestAnimationFrame(() => { render(false); startAuto(); });
}

/* ══════════════════════════════════════════════════════════
   PEZAJOB — Paged grid slider (Featured Companies)
   Shows N cards per page (5 desktop, fewer on smaller screens);
   Next/Prev and dots move a whole page at a time.
══════════════════════════════════════════════════════════ */
function initGridSlider(viewportId, trackId, prevId, nextId, dotsId) {
  const viewport = document.getElementById(viewportId);
  const track    = document.getElementById(trackId);
  const prevBtn  = document.getElementById(prevId);
  const nextBtn  = document.getElementById(nextId);
  const dotsWrap = document.getElementById(dotsId);
  if (!viewport || !track) return;

  const cards = Array.from(track.children).filter(el => el.classList && el.classList.contains('grid-card'));
  const total = cards.length;
  if (total === 0) return;

  function perPage() {
    const first = cards[0];
    const style = getComputedStyle(track);
    const gap = parseFloat(style.columnGap || style.gap || '0') || 0;
    const cardW = first.getBoundingClientRect().width;
    if (!cardW) return 1;
    return Math.max(1, Math.round((viewport.clientWidth + gap) / (cardW + gap)));
  }

  function pageCount() { return Math.max(1, Math.ceil(total / perPage())); }

  function currentPage() {
    return Math.round(viewport.scrollLeft / Math.max(1, viewport.clientWidth));
  }

  function goToPage(i) {
    const pages = pageCount();
    const idx = ((i % pages) + pages) % pages;
    viewport.scrollTo({ left: idx * viewport.clientWidth, behavior: 'smooth' });
  }

  function buildDots() {
    if (!dotsWrap) return;
    dotsWrap.innerHTML = '';
    const pages = pageCount();
    if (pages <= 1) { if (prevBtn) prevBtn.style.display = 'none'; if (nextBtn) nextBtn.style.display = 'none'; return; }
    if (prevBtn) prevBtn.style.display = '';
    if (nextBtn) nextBtn.style.display = '';
    for (let i = 0; i < pages; i++) {
      const d = document.createElement('button');
      d.className = 'cflow-dot' + (i === currentPage() ? ' active' : '');
      d.setAttribute('aria-label', `Show companies page ${i + 1}`);
      d.addEventListener('click', () => goToPage(i));
      dotsWrap.appendChild(d);
    }
  }

  function syncDots() {
    if (!dotsWrap) return;
    const active = currentPage();
    dotsWrap.querySelectorAll('.cflow-dot').forEach((d, i) => d.classList.toggle('active', i === active));
  }

  if (prevBtn) prevBtn.addEventListener('click', () => goToPage(currentPage() - 1));
  if (nextBtn) nextBtn.addEventListener('click', () => goToPage(currentPage() + 1));

  let scrollTimer;
  viewport.addEventListener('scroll', () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(syncDots, 80);
  }, { passive: true });

  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(buildDots, 150);
  });

  buildDots();
}

document.addEventListener('DOMContentLoaded', () => {
  initGridSlider('fc-company-viewport', 'fc-company-track', 'fc-company-prev', 'fc-company-next', 'fc-company-dots');
  initGridSlider('fc-talent-viewport', 'fc-talent-track', 'fc-talent-prev', 'fc-talent-next', 'fc-talent-dots');
});
</script>
<script>
(function(){
  const slides = document.querySelectorAll('.srv-img-slide');
  const dots   = document.querySelectorAll('.srv-img-dot');
  if (!slides.length) return;

  let current = 0, timer;

  function goTo(i) {
    slides[current].classList.remove('active');
    dots[current].classList.remove('active');
    current = (i + slides.length) % slides.length;
    slides[current].classList.add('active');
    dots[current].classList.add('active');
  }

  function start() {
    timer = setInterval(() => goTo(current + 1), 3500);
  }

  dots.forEach(d => {
    d.addEventListener('click', () => {
      clearInterval(timer);
      goTo(+d.dataset.idx);
      start();
    });
  });

  // Touch swipe
  let tx = 0;
  const stack = document.querySelector('.srv-img-stack');
  if (stack) {
    stack.addEventListener('touchstart', e => { tx = e.touches[0].clientX; clearInterval(timer); }, { passive: true });
    stack.addEventListener('touchend', e => {
      const dx = e.changedTouches[0].clientX - tx;
      if (Math.abs(dx) > 40) goTo(dx < 0 ? current + 1 : current - 1);
      start();
    });
  }

  start();
})();
</script>
<script>
(function(){
  const slides = document.querySelectorAll('.hero-slide');
  const dots   = document.querySelectorAll('.slide-dot');
  let current  = 0;
  let timer    = null;
  const INTERVAL = 5000;

  function goTo(index) {
    slides[current].classList.remove('active');
    dots[current].classList.remove('active');
    current = (index + slides.length) % slides.length;
    slides[current].classList.add('active');
    dots[current].classList.add('active');
  }

  function next() { goTo(current + 1); }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(next, INTERVAL);
  }

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      goTo(+dot.dataset.slide);
      startTimer();
    });
  });

  let touchStartX = 0;
  const hero = document.querySelector('.hero');
  hero.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; }, {passive:true});
  hero.addEventListener('touchend', e => {
    const diff = touchStartX - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 50) { goTo(diff > 0 ? current + 1 : current - 1); startTimer(); }
  }, {passive:true});

  hero.addEventListener('mouseenter', () => clearInterval(timer));
  hero.addEventListener('mouseleave', startTimer);

  document.addEventListener('visibilitychange', () => {
    document.hidden ? clearInterval(timer) : startTimer();
  });

  startTimer();
})();

(function () {
  const tabs = document.querySelectorAll('[data-hiw-tab]');
  const panels = document.querySelectorAll('.hiw-panel');
  if (!tabs.length || !panels.length) return;

  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      const target = tab.getAttribute('data-hiw-tab');
      tabs.forEach(function (t) {
        const isActive = t === tab;
        t.classList.toggle('active', isActive);
        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });
      panels.forEach(function (panel) {
        const isActive = panel.id === 'hiw-panel-' + target;
        panel.classList.toggle('active', isActive);
        panel.hidden = !isActive;
      });
    });
  });
})();
</script>
<script src="{% static 'js/spa-nav.js' %}" defer></script>
{% endblock %}