{% extends "public/base.html" %}
{% block title %}Contact · {{ site.site_name }}{% endblock %}
{% block content %}
<div class="mx-auto max-w-7xl px-4 lg:px-6">
  <header class="mb-10 max-w-3xl">
    <p class="kicker">Contact</p>
    <h1 class="mt-1 text-3xl font-extrabold md:text-4xl">Écrivez à la rédaction</h1>
    <p class="mt-2 text-slate-600">Une information, une demande de couverture, un partenariat ou une publicité : nous vous répondons rapidement.</p>
  </header>
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_24rem]">
    <form method="post" class="card grid gap-5 p-6 md:grid-cols-2 md:p-8" novalidate>
      {% csrf_token %}
      <div class="absolute -left-[9999px]" aria-hidden="true">{{ form.website }}</div>
      <c-field :field="form.nom" />
      <c-field :field="form.email" />
      <c-field :field="form.sujet" class="md:col-span-2" />
      <c-field :field="form.message" class="md:col-span-2" />
      <div class="flex items-center justify-between gap-4 md:col-span-2">
        <p class="text-xs text-slate-500">Vos données sont traitées selon notre <a href="{% url 'public:privacy' %}" class="underline">politique de confidentialité</a>.</p>
        <button class="btn btn-primary btn-lg">{% icon "send" %} Envoyer</button>
      </div>
    </form>
    <aside class="space-y-4">
      <div class="rounded-2xl bg-brand-900 p-6 text-white">
        <h2 class="text-lg font-extrabold !text-white">Nos coordonnées</h2>
        <ul class="mt-5 space-y-4 text-sm">
          {% if site.contact_address %}<li class="flex gap-3"><span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-gold-400">{% icon "map-pin" %}</span><span><span class="block text-xs text-brand-300">Adresse</span>{{ site.contact_address }}</span></li>{% endif %}
          {% if site.contact_phone %}<li class="flex gap-3"><span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-gold-400">{% icon "phone" %}</span><span><span class="block text-xs text-brand-300">Téléphone</span><a href="tel:{{ site.contact_phone|cut:' ' }}" class="hover:text-gold-300">{{ site.contact_phone }}</a></span></li>{% endif %}
          {% if site.contact_email %}<li class="flex gap-3"><span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-gold-400">{% icon "mail" %}</span><span><span class="block text-xs text-brand-300">Email</span><a href="mailto:{{ site.contact_email }}" class="hover:text-gold-300">{{ site.contact_email }}</a></span></li>{% endif %}
        </ul>
        {% if site.social_links %}<div class="mt-6 flex gap-2 border-t border-white/10 pt-5">{% for s in site.social_links %}<a href="{{ s.url }}" target="_blank" rel="noopener" class="flex size-9 items-center justify-center rounded-lg bg-white/10 hover:bg-gold-400 hover:text-brand-950" aria-label="{{ s.label }}">{% icon s.key "size-4" %}</a>{% endfor %}</div>{% endif %}
      </div>
      {% include "public/_webtv.html" %}
    </aside>
  </div>
</div>
{% endblock %}