{% extends 'shared/base.html' %}
{% block title %}Piramal Seva Setu | A bridge between intent and impact{% endblock %}
{% block content %}
<section class="hero home-hero">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-7">
        <div class="eyebrow mb-3">Piramal Finance × India Is Us</div>
        <h1 class="fw-bold mb-4">Your intent can create impact.</h1>
        <p class="lead text-muted mb-4">Discover meaningful ways to give your time through <strong>Seva Bhaav</strong>, support causes through <strong>Seva Daan</strong>, and see how every act of seva adds up.</p>
        <div class="d-flex flex-wrap gap-2">
          <a class="btn btn-primary btn-lg" href="{{ url_for('seva_bhaav.list_activities') }}">Explore Volunteering</a>
          <a class="btn btn-outline-dark btn-lg" href="{{ url_for('seva_daan.list_causes') }}">Explore Causes</a>
          {% if not current_user.is_authenticated %}<a class="btn btn-link btn-lg" href="{{ url_for('auth.login') }}">Employee Login →</a>{% endif %}
        </div>
      </div>
      <div class="col-lg-5">
        <div class="impact-card home-pillar-card bg-white p-4 p-lg-5">
          <div class="eyebrow">Two ways to participate</div>
          <hr>
          <div class="pillar-row"><span class="pillar-icon">🤝</span><div><h3>Seva Bhaav</h3><p class="text-muted mb-0">Give your time, energy and skills.</p></div></div>
          <div class="pillar-row mt-4"><span class="pillar-icon">💜</span><div><h3>Seva Daan</h3><p class="text-muted mb-0">Give what you can. Help create what matters.</p></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-4"><div><div class="eyebrow">Seva Bhaav</div><h2 class="fw-bold">Upcoming volunteering opportunities</h2></div><a class="section-link" href="{{ url_for('seva_bhaav.list_activities') }}">View all →</a></div>
    <div class="row g-4">
      {% for activity in activities %}
      <div class="col-md-6 col-lg-4">
        <div class="card seva-card home-card">
          {% set img = (activity.images|selectattr('is_primary')|list|first) or (activity.images|first) %}
          {% if img %}<img src="{{ img.file_path }}" class="card-img-top" alt="{{ img.alt_text or activity.title }}">{% else %}<div class="placeholder-art">🤝</div>{% endif %}
          <div class="card-body">
            <div class="small text-muted mb-2">{{ activity.cause_category.name }} · {{ activity.city.name }}</div>
            <h5>{{ activity.title }}</h5>
            <p class="text-muted">{{ activity.short_impact_statement or (activity.description or '')[:120] }}</p>
            <div class="d-flex justify-content-between align-items-center mt-auto pt-2"><span class="small text-muted">{{ activity.start_datetime.strftime('%d %b %Y') }}</span><a class="btn btn-sm btn-outline-primary" href="{{ url_for('seva_bhaav.detail', activity_id=activity.id) }}">View More</a></div>
          </div>
        </div>
      </div>
      {% else %}<div class="col-12"><div class="p-5 bg-white rounded-4 text-center text-muted">Published activities will appear here as soon as the admin makes them live.</div></div>{% endfor %}
    </div>
  </div>
</section>

<section class="section-pad soft-section">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-4"><div><div class="eyebrow">Seva Daan</div><h2 class="fw-bold">Causes you can support</h2></div><a class="section-link" href="{{ url_for('seva_daan.list_causes') }}">View all →</a></div>
    <div class="row g-4">
      {% for cause in causes %}
      <div class="col-md-6 col-lg-4"><div class="card seva-card home-card">
        {% set img = cause.images|first %}{% if img %}<img src="{{ img.file_path }}" class="card-img-top" alt="{{ img.alt_text or cause.name }}">{% else %}<div class="placeholder-art">💜</div>{% endif %}
        <div class="card-body"><div class="small text-muted mb-2">{{ cause.cause_category.name }}</div><h5>{{ cause.name }}</h5><p class="text-muted">{{ (cause.problem_statement or '')[:140] }}</p>{% if cause.fundraising_target %}<div class="small text-muted mb-3">Target: ₹{{ '{:,.0f}'.format(cause.fundraising_target) }}</div>{% endif %}<div class="mt-auto"><a class="btn btn-sm btn-outline-primary" href="{{ url_for('seva_daan.detail', cause_id=cause.id) }}">View More</a></div></div>
      </div></div>
      {% else %}<div class="col-12"><div class="p-5 bg-white rounded-4 text-center text-muted">Published Seva Daan causes will appear here.</div></div>{% endfor %}
    </div>
  </div>
</section>

<section class="section-pad leadership-section">
  <div class="container">
    <div class="text-center mx-auto mb-5 section-intro">
      <div class="eyebrow">Leadership voices</div>
      <h2 class="fw-bold">Why Seva matters</h2>
      <p class="text-muted mb-0">This section is ready for approved testimonials from Piramal leaders. Placeholder copy is shown until final quotes and names are provided.</p>
    </div>
    <div class="row g-4">
      {% for item in testimonials %}
      <div class="col-lg-4">
        <article class="testimonial-card h-100">
          <div class="quote-mark">“</div>
          <p class="testimonial-copy">{{ item.quote }}</p>
          <div class="testimonial-person"><div class="leader-avatar">{{ item.name[:1] }}</div><div><strong>{{ item.name }}</strong><div class="small text-muted">{{ item.role }}</div></div></div>
        </article>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section-pad leaderboard-section">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-lg-5">
        <div class="eyebrow">Seva leaderboard</div>
        <h2 class="fw-bold">Celebrating participation.</h2>
        <p class="text-muted">The leaderboard is calculated from Hearts earned through recorded participation. As employees complete activities and earn Hearts, the ranking updates automatically.</p>
        {% if current_user.is_authenticated %}<a class="btn btn-outline-primary" href="{{ url_for('impact.dashboard') }}">View My Impact</a>{% else %}<a class="btn btn-outline-primary" href="{{ url_for('auth.login') }}">Employee Login</a>{% endif %}
      </div>
      <div class="col-lg-7">
        <div class="leaderboard-card">
          <div class="leaderboard-head"><span>Top Seva Champions</span><span class="small">Hearts</span></div>
          {% for person in leaderboard %}
          <div class="leaderboard-row">
            <div class="rank-badge rank-{{ loop.index }}">{{ loop.index }}</div>
            <div class="leader-avatar compact">{{ person.full_name[:1] }}</div>
            <div class="flex-grow-1"><strong>{{ person.full_name }}</strong><div class="small text-muted">{{ person.employee_code }}</div></div>
            <div class="heart-score">♥ {{ person.hearts|int }}</div>
          </div>
          {% else %}
          <div class="leaderboard-empty"><div class="empty-heart">♡</div><strong>The leaderboard is ready.</strong><p class="text-muted mb-0">It will populate automatically after employees complete activities and earn Hearts.</p></div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad employee-cta"><div class="container"><div class="employee-cta-inner"><div class="row align-items-center g-4"><div class="col-lg-8"><div class="eyebrow">For Piramal Finance employees</div><h2 class="fw-bold">Participate, manage your Seva and see your impact.</h2><p class="text-muted mb-0">Employee actions such as nomination, manager approval, attendance, Hearts and personal impact remain inside the authenticated employee portal.</p></div><div class="col-lg-4 text-lg-end"><a class="btn btn-primary btn-lg" href="{{ url_for('employee.dashboard') if current_user.is_authenticated else url_for('auth.login') }}">{{ 'Open Employee Portal' if current_user.is_authenticated else 'Employee Login' }}</a></div></div></div></div></section>
{% endblock %}