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

{% block title %}Success Stories – PEZAJOB{% endblock %}

{% block content %}
<section class="page-header">
  <div class="container page-header-content">
    <h1>Success Stories</h1>
    <p>Real people. Real careers. Real results on PEZAJOB.</p>
  </div>
</section>

<section class="section">
  <div class="container">
    {% if featured_testimonial %}
    <div style="background:var(--primary);color:#fff;border-radius:20px;padding:40px;margin-bottom:40px;">
      <div style="font-size:0.75rem;font-weight:700;color:var(--secondary);margin-bottom:12px;">FEATURED STORY</div>
      <p style="font-size:1.1rem;line-height:1.85;font-style:italic;margin-bottom:24px;">"{{ featured_testimonial.story }}"</p>
      <div style="font-weight:700;">{{ featured_testimonial.full_name }}</div>
      <div style="opacity:0.75;font-size:0.88rem;">{{ featured_testimonial.role }}{% if featured_testimonial.company %} · {{ featured_testimonial.company }}{% endif %}</div>
    </div>
    {% endif %}

    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;">
      {% for t in testimonials %}
      <div style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px;">
        <div style="color:#f9a825;margin-bottom:12px;">{% for i in "12345"|make_list %}{% if forloop.counter <= t.rating %}<i class="fas fa-star"></i>{% endif %}{% endfor %}</div>
        <p style="color:var(--text-light);line-height:1.75;margin-bottom:16px;font-size:0.92rem;">"{{ t.story|truncatewords:40 }}"</p>
        <div style="font-weight:700;color:var(--primary);">{{ t.full_name }}</div>
        <div style="font-size:0.82rem;color:var(--text-muted);">{{ t.role }}</div>
      </div>
      {% endfor %}
    </div>

    {% include 'home/partials/list_pagination.html' %}

    <div class="text-center" style="margin-top:40px;">
      <a href="{% url 'testimonials:submit' %}" class="btn btn-primary btn-lg">Share Your Story</a>
    </div>
  </div>
</section>
{% endblock %}