{% 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-10 py-14 lg:grid-cols-[1fr_1.1fr]">
  <div class="space-y-6">
    <div class="card-surface space-y-4 rounded-3xl p-6">
      <p><span class="text-xs font-semibold uppercase tracking-wider text-muted">ফোন</span><br><a href="tel:{{ site_contact.phoneHref }}" class="text-lg font-bold text-forest">{{ site_contact.phone }}</a></p>
      <p><span class="text-xs font-semibold uppercase tracking-wider text-muted">ইমেইল</span><br><a href="mailto:{{ site_contact.email }}" class="font-semibold text-forest">{{ site_contact.email }}</a></p>
      <p><span class="text-xs font-semibold uppercase tracking-wider text-muted">কার্যালয়</span><br><span class="text-forest">{{ site_contact.office }}</span></p>
      <p><span class="text-xs font-semibold uppercase tracking-wider text-muted">সময়</span><br><span class="text-forest">{{ site_contact.officeHours }}</span><br><span class="text-sm text-muted">{{ site_contact.officeHoursNote }}</span></p>
    </div>
    <div class="overflow-hidden rounded-3xl border border-forest/10 bg-white shadow-soft">
      <iframe src="{{ map_url }}" title="কার্যালয়ের ম্যাপ" class="h-56 w-full border-0" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
  </div>
  <form class="card-surface space-y-4 rounded-3xl p-6" data-api-form="/api/contact/" data-success-target="contact-msg" novalidate>
    <div class="grid gap-4 sm:grid-cols-2">
      <label class="block"><span class="text-sm font-semibold text-forest">নাম *</span><input name="name" required minlength="3" maxlength="80" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block"><span class="text-sm font-semibold text-forest">মোবাইল</span><input name="phone" inputmode="tel" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block sm:col-span-2"><span class="text-sm font-semibold text-forest">ইমেইল</span><input name="email" type="email" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block sm:col-span-2"><span class="text-sm font-semibold text-forest">বিষয় *</span><input name="subject" required minlength="3" maxlength="140" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></label>
      <label class="block sm:col-span-2"><span class="text-sm font-semibold text-forest">বার্তা *</span><textarea name="message" required minlength="10" maxlength="2000" rows="5" class="mt-1.5 w-full rounded-xl border border-forest/15 bg-white px-4 py-3" data-field></textarea></label>
    </div>
    <button type="submit" class="rounded-full bg-forest px-8 py-3.5 font-semibold text-cream">বার্তা পাঠান</button>
    <p id="contact-msg" class="text-sm" role="status" aria-live="polite"></p>
  </form>
</section>
{% endblock %}