{% extends "base.html" %}
{% load static civic_tags %}
{% block content %}
<!-- Hero -->
<section class="relative overflow-hidden mesh-dark text-cream">
  <div class="pointer-events-none absolute -left-32 top-10 h-[28rem] w-[28rem] rounded-full bg-emerald/25 blur-[110px]"></div>
  <div class="pointer-events-none absolute -right-24 top-1/3 h-[26rem] w-[26rem] rounded-full bg-gold/10 blur-[100px]"></div>
  <div class="container-x relative grid items-center gap-10 pb-20 pt-12 sm:pt-16 lg:grid-cols-[1.15fr_0.85fr] lg:gap-8 lg:pb-28 lg:pt-20">
    <div class="relative z-10">
      <div class="inline-flex flex-wrap items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] py-1.5 pl-2 pr-4">
        <span class="inline-flex items-center gap-1.5 rounded-full bg-gold px-2.5 py-1 text-[0.62rem] font-extrabold uppercase tracking-[0.12em] text-night">নির্বাচন {{ site.electionYear|bn }}</span>
        <span class="text-[0.72rem] font-medium text-cream/65">{{ site.ward }}</span>
      </div>
      <h1 class="mt-6 text-balance-tight text-[clamp(2.3rem,6.2vw,4.5rem)] font-bold leading-[1.08]">
        মানুষের পাশে <br>
        <span class="bg-gradient-to-r from-gold via-[#f5d79b] to-gold bg-clip-text text-transparent">সবসময়</span>
        <span class="block text-[0.52em] font-semibold text-cream/80">— একটি পরিকল্পিত মহাদানের প্রতিশ্রুতি</span>
      </h1>
      <p class="mt-6 max-w-xl text-[0.95rem] leading-relaxed text-cream/60 sm:text-base">{{ site.heroQuote }}</p>
      <div class="mt-8 flex flex-wrap items-center gap-3">
        <a href="{% url 'core:manifesto' %}" class="inline-flex items-center gap-2 rounded-full bg-gold px-6 py-3 text-sm font-bold text-night transition hover:-translate-y-0.5">ম্যানিফেস্টো পড়ুন →</a>
        <a href="{% url 'core:appointment' %}" class="inline-flex items-center gap-2 rounded-full border border-white/25 px-6 py-3 text-sm font-semibold text-cream transition hover:border-gold hover:text-gold">সাক্ষাতের সময় নিন</a>
      </div>
      <p class="mt-8 text-[0.72rem] text-cream/55">১২,৫০০+ পরিবারের আস্থা · ৯টি ওয়ার্ড · ২৪ বছরের সেবা · স্বচ্ছ হিসাব</p>
    </div>
    <div class="relative mx-auto w-full max-w-[24rem] lg:max-w-none">
      <div class="absolute -inset-3 rounded-[2.4rem] border border-gold/25"></div>
      <div class="relative overflow-hidden rounded-[2rem] border border-white/10 bg-forest-2 shadow-[0_40px_80px_-30px_rgba(0,0,0,.7)]">
        <img src="{% image 'hero' %}" alt="{{ site.name }} — {{ site.role }}" class="aspect-[4/5] w-full object-cover" fetchpriority="high">
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-night/95 via-night/10 to-transparent p-5">
          <p class="inline-flex items-center gap-1.5 rounded-full bg-gold/90 px-2.5 py-1 text-[0.6rem] font-extrabold uppercase tracking-[0.14em] text-night">প্রত্যয়িত প্রার্থী</p>
          <h2 class="mt-2.5 font-display text-2xl font-bold leading-tight">{{ site.name }}</h2>
          <p class="mt-0.5 text-[0.75rem] text-cream/60">{{ site.role }} · {{ site.ward }}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Quick actions -->
<section class="container-x -mt-10 relative z-10">
  <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
    <a href="{% url 'core:appointment' %}" class="card-surface rounded-3xl p-5 hover:-translate-y-1 transition"><p class="font-bold text-forest">অ্যাপয়েন্টমেন্ট</p><p class="mt-1 text-sm text-muted">২ মিনিটে সাক্ষাতের সময় বুক করুন</p></a>
    <a href="{% url 'core:feedback' %}" class="card-surface rounded-3xl p-5 hover:-translate-y-1 transition"><p class="font-bold text-forest">সমস্যা জানান</p><p class="mt-1 text-sm text-muted">ছবিসহ রিপোর্ট, ট্র্যাকিং আইডি পাবেন</p></a>
    <a href="{% url 'core:polls' %}" class="card-surface rounded-3xl p-5 hover:-translate-y-1 transition"><p class="font-bold text-forest">জনমত জরিপ</p><p class="mt-1 text-sm text-muted">ভোট দিন, লাইভ ফলাফল দেখুন</p></a>
    <a href="{% url 'core:campaign' %}" class="card-surface rounded-3xl p-5 hover:-translate-y-1 transition"><p class="font-bold text-forest">স্বেচ্ছাসেবক হোন</p><p class="mt-1 text-sm text-muted">আপনার ওয়ার্ডে যোগ দিন</p></a>
  </div>
</section>

<!-- Stats -->
<section class="container-x py-20">
  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
    {% for s in stats %}
    <div class="card-surface rounded-3xl p-6 text-center">
      <p class="font-display text-[clamp(1.8rem,4vw,2.6rem)] font-bold text-forest tabular-nums">{{ s.value|bn_num }}{{ s.suffix }}</p>
      <p class="mt-1 text-sm font-semibold text-forest">{{ s.label }}</p>
      <p class="mt-1 text-xs text-muted">{{ s.hint }}</p>
    </div>
    {% endfor %}
  </div>
</section>

<!-- About preview -->
<section class="container-x pb-20">
  <div class="grid items-center gap-10 lg:grid-cols-2">
    <div>
      <p class="eyebrow">পরিচিতি</p>
      <h2 class="mt-3 text-[clamp(1.6rem,3.6vw,2.4rem)] font-bold leading-tight text-forest">মহাদান, মাটি আর মানুষ</h2>
      <p class="mt-4 leading-relaxed text-muted">{{ site.intro }}</p>
      <a href="{% url 'core:about' %}" class="mt-6 inline-block text-sm font-semibold text-forest underline-offset-4 hover:underline">বিস্তারিত পরিচিতি →</a>
    </div>
    <ul class="grid gap-3">
      {% for v in values %}
      <li class="card-surface rounded-2xl p-5"><p class="font-bold text-forest">{{ v.title }}</p><p class="mt-1 text-sm text-muted">{{ v.desc }}</p></li>
      {% endfor %}
    </ul>
  </div>
</section>

<!-- Manifesto preview -->
<section class="bg-forest py-20 text-cream">
  <div class="container-x">
    <p class="eyebrow !text-gold">ম্যানিফেস্টো</p>
    <h2 class="mt-3 text-[clamp(1.6rem,3.6vw,2.4rem)] font-bold">৮ স্তম্ভ, ৩২ অঙ্গীকার</h2>
    <div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {% for p in pillars %}
      <a href="{% url 'core:manifesto' %}#{{ p.id }}" class="rounded-3xl border border-white/10 bg-white/[0.03] p-6 transition hover:border-gold/50">
        <p class="text-xs font-bold text-gold">{{ p.number|bn }}</p>
        <p class="mt-2 font-display text-lg font-bold">{{ p.title }}</p>
        <p class="mt-2 text-sm text-cream/65">{{ p.short }}</p>
      </a>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Campaign preview -->
<section class="container-x py-20">
  <p class="eyebrow">প্রচারণা</p>
  <h2 class="mt-3 text-[clamp(1.6rem,3.6vw,2.4rem)] font-bold text-forest">ধাপে ধাপে প্রচারণা</h2>
  <div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    {% for ph in phases %}
    <div class="card-surface rounded-3xl p-6">
      <p class="text-xs font-semibold uppercase tracking-wider text-gold-deep">{{ ph.window }}</p>
      <p class="mt-2 font-bold text-forest">{{ ph.name }}</p>
      <div class="mt-4 h-1.5 overflow-hidden rounded-full bg-forest/10"><div class="h-full rounded-full bg-emerald" style="width: {{ ph.progress }}%"></div></div>
      <p class="mt-2 text-xs text-muted">{{ ph.progress|bn }}% সম্পন্ন</p>
    </div>
    {% endfor %}
  </div>
</section>

<!-- Events -->
<section class="container-x pb-20">
  {% include "partials/section_head.html" with eyebrow="ইভেন্ট" title="আসন্ন ইভেন্ট ও জনসভা" link_href="/events" %}
  <div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
    {% for event in upcoming_events %}{% include "partials/event_card.html" %}{% endfor %}
  </div>
</section>

<!-- Activities -->
<section class="container-x pb-20">
  {% include "partials/section_head.html" with eyebrow="কার্যক্রম" title="বাস্তব কাজের স্বাক্ষর" link_href="/activities" %}
  <div class="grid gap-5 md:grid-cols-3">
    {% for a in activities %}
    <a href="{% url 'core:activity-detail' a.id %}" class="card-surface group overflow-hidden rounded-3xl transition hover:-translate-y-1">
      <img src="{% image a.image %}" alt="{{ a.title }}" class="aspect-[16/10] w-full object-cover" loading="lazy">
      <div class="p-6">
        <p class="text-xs font-semibold uppercase tracking-wider text-gold-deep">{{ a.category }}</p>
        <h3 class="mt-2 font-bold leading-snug text-forest">{{ a.title }}</h3>
        <p class="mt-2 text-sm text-muted">{{ a.summary }}</p>
      </div>
    </a>
    {% endfor %}
  </div>
</section>

<!-- Poll -->
<section class="container-x pb-20">
  <div class="grid gap-8 lg:grid-cols-[1fr_1.1fr] lg:items-center">
    <div>
      <p class="eyebrow">জনমত</p>
      <h2 class="mt-3 text-[clamp(1.6rem,3.6vw,2.4rem)] font-bold text-forest">আপনার মতামত জানতে চাই</h2>
      <p class="mt-3 text-muted">প্রতি ডিভাইস থেকে একবার ভোট দেওয়া যায়। ফলাফল এই পাতায় লাইভ আপডেট হয়।</p>
      <a href="{% url 'core:polls' %}" class="mt-6 inline-block text-sm font-semibold text-forest underline-offset-4 hover:underline">সব জরিপ দেখুন →</a>
    </div>
    {% if poll %}{% include "partials/poll_block.html" with poll=poll %}{% endif %}
  </div>
</section>

<!-- Blog -->
<section class="container-x pb-20">
  {% include "partials/section_head.html" with eyebrow="ব্লগ" title="ভাবনা, বিশ্লেষণ ও আপডেট" link_href="/blog" %}
  <div class="grid gap-5 md:grid-cols-3">
    {% for p in posts %}
    <a href="{% url 'core:blog-detail' p.slug %}" class="card-surface rounded-3xl p-6 transition hover:-translate-y-1">
      <p class="text-xs font-semibold uppercase tracking-wider text-gold-deep">{{ p.category }} · {{ p.readTime|bn }} মিনিট</p>
      <h3 class="mt-3 font-bold leading-snug text-forest">{{ p.title }}</h3>
      <p class="mt-3 text-sm text-muted">{{ p.excerpt }}</p>
    </a>
    {% endfor %}
  </div>
</section>

<!-- Testimonials -->
<section class="bg-cream-2/60 py-20">
  <div class="container-x">
    {% include "partials/section_head.html" with eyebrow="মতামত" title="মানুষের কথা" %}
    <div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
      {% for t in testimonials %}
      <figure class="card-surface rounded-3xl p-6">
        <blockquote class="text-sm leading-relaxed text-forest">“{{ t.quote }}”</blockquote>
        <figcaption class="mt-4 text-xs text-muted"><span class="font-semibold text-forest">{{ t.name }}</span> · {{ t.role }} · {{ t.area }}</figcaption>
      </figure>
      {% endfor %}
    </div>
  </div>
</section>

<!-- CTA band -->
<section class="container-x pb-24">
  <div class="mesh-dark rounded-[2.5rem] p-10 text-cream sm:p-14">
    <h2 class="text-[clamp(1.6rem,3.6vw,2.4rem)] font-bold">আপনার এলাকার কথা শুনতে চাই</h2>
    <p class="mt-3 max-w-2xl text-cream/70">সমস্যা, পরামর্শ বা সাক্ষাৎ — যেকোনো বিষয়ে যোগাযোগ করুন। {{ site.officeHours }}।</p>
    <div class="mt-8 flex flex-wrap gap-3">
      <a href="{% url 'core:appointment' %}" class="rounded-full bg-gold px-6 py-3 text-sm font-bold text-night">সাক্ষাতের সময় নিন</a>
      <a href="{% url 'core:feedback' %}" class="rounded-full border border-white/25 px-6 py-3 text-sm font-semibold text-cream hover:border-gold">সমস্যা জানান</a>
    </div>
  </div>
</section>
{% endblock %}