{% extends 'base.html.twig' %}
{% block title %}{{ 'contact.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'contact.meta_description'|trans }}{% endblock %}

{% block head_extra %}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}

{% block body %}
<section class="py-20">
    <div class="max-w-2xl mx-auto px-4">
        <h1 class="text-4xl font-extrabold text-dark">{{ 'contact.heading'|trans }}</h1>
        <p class="mt-4 text-gray-500 text-lg">{{ 'contact.subtitle'|trans }}</p>

        {% for flash in app.flashes('success') %}
        <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">{{ flash }}</div>
        {% endfor %}
        {% for flash in app.flashes('error') %}
        <div class="mt-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm">{{ flash }}</div>
        {% endfor %}

        <form method="post" action="{{ path('app_contact_submit') }}" class="mt-8 bg-white rounded-2xl p-8 border border-gray-200 space-y-5">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ 'contact.name_label'|trans }}</label>
                <input type="text" id="name" name="name" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ 'contact.email_label'|trans }}</label>
                <input type="email" id="email" name="email" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
            </div>
            <div>
                <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">{{ 'contact.subject_label'|trans }}</label>
                <select id="subject" name="subject"
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
                    <option value="pytanie">{{ 'contact.subject_question'|trans }}</option>
                    <option value="wspolpraca">{{ 'contact.subject_collab'|trans }}</option>
                    <option value="bug">{{ 'contact.subject_bug'|trans }}</option>
                    <option value="inne">{{ 'contact.subject_other'|trans }}</option>
                </select>
            </div>
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">{{ 'contact.message_label'|trans }}</label>
                <textarea id="message" name="message" rows="5" required
                    class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm resize-y"></textarea>
            </div>
            <input type="hidden" name="_token" value="{{ csrf_token('public_form') }}">
            <div class="cf-turnstile" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="flexible"></div>
            <button type="submit" class="w-full px-6 py-3 bg-scout text-white font-bold rounded-full hover:bg-scout/90 transition text-lg">
                {{ 'contact.submit'|trans }}
            </button>
        </form>
    </div>
</section>
{% endblock %}