{% extends "base.html" %}
{% load static %}
{% block title %}Alumni Network & Success Stories | HAEGL DCET Coaching{% endblock %}
{% block content %}

<section class="page-header">
  <div class="container" style="display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;">
    <div style="max-width: 680px;">
      <h1>HAEGL Alumni &amp; Achievers Network</h1>
      <p class="lead">Celebrating diploma graduates who cracked Karnataka DCET and advanced to top engineering institutions.</p>
    </div>
    <div class="alumni-header-stat" style="background: #ffffff; border-radius: 14px; padding: 1.25rem 2.2rem; text-align: center; flex-shrink: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.2); min-width: 210px;">
      <span id="guided-counter" style="display: block; font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--primary, #c41e3a); line-height: 1.05; margin-bottom: 0.35rem; letter-spacing: -0.02em;">500+</span>
      <span style="display: block; font-size: 0.95rem; font-weight: 700; color: #475569;">Engineers Guided</span>
    </div>
  </div>
</section>

<section class="section alt">
  <div class="container">

    <h2 class="section-title">Alumni Spotlight</h2>
    {% if achievements %}
    <div class="alumni-grid">
      {% for a in achievements %}
      <article class="card alumni-card">
        <div class="alumni-avatar">
          {% if a.photo %}
          <img src="{{ a.photo.url }}" alt="{{ a.student_name }}" loading="lazy">
          {% else %}
          <span>{{ a.student_name|slice:":1" }}</span>
          {% endif %}
        </div>
        <div class="alumni-meta">
          <h3>{{ a.student_name }}</h3>
          <div class="alumni-work-info">
            <span class="alumni-work-prefix">Currently at</span>
            <span class="alumni-company-highlight">{{ a.company_name }}</span>
          </div>
        </div>
      </article>
      {% endfor %}
    </div>
    {% else %}
    {% include "includes/empty.html" with message="Alumni records for this batch will be added soon." %}
    {% endif %}

    <div class="about-cta-container" style="margin-top: 4.5rem;">
      <h2>Are You a HAEGL Alumnus?</h2>
      <p>Stay connected with your mentors, mentor current DCET aspirants, and join our growing network of engineers across Karnataka.</p>
      <div class="about-cta-actions">
        <a class="btn btn-primary" href="{% url 'enquiries:contact' %}">Connect with Us</a>
      </div>
    </div>
  </div>
</section>

<script>
  (function() {
    function runCounter() {
      var counterEl = document.getElementById("guided-counter");
      if (!counterEl) return;
      var start = 500;
      var end = 5000;
      var duration = 1800;
      var startTime = null;

      function step(timestamp) {
        if (!startTime) startTime = timestamp;
        var progress = Math.min((timestamp - startTime) / duration, 1);
        var ease = 1 - Math.pow(1 - progress, 3);
        var current = Math.floor(start + (end - start) * ease);
        counterEl.textContent = current.toLocaleString('en-IN') + '+';
        if (progress < 1) {
          window.requestAnimationFrame(step);
        } else {
          counterEl.textContent = end.toLocaleString('en-IN') + '+';
        }
      }

      window.requestAnimationFrame(step);
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", function() {
        setTimeout(runCounter, 100);
      });
    } else {
      setTimeout(runCounter, 100);
    }
  })();
</script>
{% endblock %}