{% extends "base.html" %}
{% load civic_tags %}
{% block content %}
{% include "partials/page_hero.html" with eyebrow="২৪/৭ সহায়তা" title="লাইভ চ্যাট ও বার্তা" description=meta.description crumbs=meta.crumbs %}
<section class="container-x grid gap-8 py-12 lg:grid-cols-[1fr_320px]">
  <div class="card-surface flex min-h-[460px] flex-col rounded-3xl">
    <ul class="flex-1 space-y-3 overflow-y-auto p-6" data-chat-log aria-live="polite"></ul>
    <form class="flex gap-2 border-t border-forest/10 p-4" data-chat-form novalidate>
      <label class="sr-only" for="chat-input">বার্তা</label>
      <input id="chat-input" name="message" maxlength="1000" required placeholder="আপনার প্রশ্ন লিখুন…" class="flex-1 rounded-full border border-forest/15 bg-white px-5 py-3">
      <button class="rounded-full bg-forest px-6 py-3 font-semibold text-cream">পাঠান</button>
    </form>
  </div>
  <aside class="space-y-4">
    <p class="text-sm font-semibold text-forest">প্রস্তাবিত প্রশ্ন</p>
    <div class="flex flex-col gap-2">
      {% for s in suggestions %}<button type="button" class="card-surface rounded-2xl px-4 py-3 text-left text-sm text-forest hover:border-forest/30" data-suggest="{{ s }}">{{ s }}</button>{% endfor %}
    </div>
    <p class="text-xs text-muted">জরুরি হলে ৯৯৯ কল করুন। সরাসরি যোগাযোগ: {{ site.phone }}</p>
  </aside>
</section>
{{ chat_rules|json_script:"chat-rules" }}
{% endblock %}