{% extends 'base.html' %}
{% block title %}Главная — MatchAgency{% endblock %}
{% block content %}
<section class="grid md:grid-cols-2 gap-8 items-center">
  <div>
    <h1 class="text-3xl md:text-5xl font-semibold leading-tight">Подбор идеальных пар под ключ</h1>
    <p class="mt-4 text-gray-600 text-lg">Фронтенд полностью на API: ни одной локальной таблицы.</p>
    <div class="mt-6 flex gap-3">
      <a href="/profiles/" class="inline-flex items-center rounded-md bg-rose-600 px-4 py-2 text-white font-medium hover:bg-rose-700">Смотреть анкеты</a>
      {% if not api_user %}
        <a href="/login/" class="inline-flex items-center rounded-md border px-4 py-2 font-medium hover:bg-white">Войти</a>
      {% endif %}
    </div>
  </div>
  <div class="rounded-xl bg-white/70 backdrop-blur p-4 md:p-6 shadow">
    <form action="/profiles/" method="get" class="grid sm:grid-cols-2 gap-4">
      <input name="q" placeholder="Ключевые слова (хобби, имя, город)"
             class="w-full rounded-md border px-3 py-2" />
      <select name="gender" class="w-full rounded-md border px-3 py-2">
        <option value="">Пол (любой)</option>
        <option value="female">Женщины</option>
        <option value="male">Мужчины</option>
      </select>
      <input name="age_min" type="number" min="18" max="100" placeholder="От, лет" class="w-full rounded-md border px-3 py-2"/>
      <input name="age_max" type="number" min="18" max="100" placeholder="До, лет" class="w-full rounded-md border px-3 py-2"/>
      <input name="city" placeholder="Город" class="w-full rounded-md border px-3 py-2"/>
      <button class="sm:col-span-2 rounded-md bg-indigo-600 text-white px-4 py-2 hover:bg-indigo-700">Найти</button>
    </form>
  </div>
</section>
{% endblock %}