{% extends "base.html" %}
{% load civic_tags %}
{% block content %}
{% include "partials/page_hero.html" with eyebrow="পরিচিতি" title=site.name description=site.intro crumbs=meta.crumbs %}
<section class="container-x grid gap-10 py-16 lg:grid-cols-[1fr_1fr]">
  <div>
    <h2 class="text-2xl font-bold text-forest">শিক্ষা</h2>
    <ol class="mt-6 space-y-5 border-l border-forest/15 pl-6">
      {% for e in bio.education %}
      <li class="relative"><span class="absolute -left-[31px] top-1 h-3 w-3 rounded-full bg-gold"></span><p class="text-xs font-semibold text-gold-deep">{{ e.year|bn }}</p><p class="font-bold text-forest">{{ e.title }}</p><p class="text-sm text-muted">{{ e.org }} · {{ e.detail }}</p></li>
      {% endfor %}
    </ol>
    <h2 class="mt-12 text-2xl font-bold text-forest">অভিজ্ঞতা</h2>
    <ol class="mt-6 space-y-5 border-l border-forest/15 pl-6">
      {% for e in bio.experience %}
      <li class="relative"><span class="absolute -left-[31px] top-1 h-3 w-3 rounded-full bg-emerald"></span><p class="text-xs font-semibold text-gold-deep">{{ e.year|bn }}</p><p class="font-bold text-forest">{{ e.title }}</p><p class="text-sm text-muted">{{ e.org }} · {{ e.detail }}</p></li>
      {% endfor %}
    </ol>
  </div>
  <div>
    <h2 class="text-2xl font-bold text-forest">দক্ষতা</h2>
    <ul class="mt-6 space-y-4">
      {% for s in bio.skills %}
      <li><div class="flex justify-between text-sm font-semibold text-forest"><span>{{ s.label }}</span><span>{{ s.value|bn }}%</span></div><div class="mt-1.5 h-2 overflow-hidden rounded-full bg-forest/10"><div class="h-full rounded-full bg-emerald" style="width: {{ s.value }}%"></div></div></li>
      {% endfor %}
    </ul>
    <h2 class="mt-12 text-2xl font-bold text-forest">সক্ষমতা</h2>
    <ul class="mt-6 space-y-3">
      {% for c in bio.capacities %}<li class="card-surface rounded-2xl p-4 text-sm text-forest">{{ c }}</li>{% endfor %}
    </ul>
    <h2 class="mt-12 text-2xl font-bold text-forest">সাধারণ প্রশ্ন</h2>
    <div class="mt-6 space-y-3">
      {% for f in faqs %}
      <details class="card-surface group rounded-2xl p-5"><summary class="cursor-pointer font-semibold text-forest">{{ f.q }}</summary><p class="mt-3 text-sm leading-relaxed text-muted">{{ f.a }}</p></details>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}