{% extends 'base.html' %}
{% load static %}
{% block title %}{{ t.title_contact }} — PickkerMarket{% endblock %}
{% block content %}
<section class="page-hero" style="background-image: url('{% static 'img/onion-web.jpg' %}');">
    <div class="page-hero-inner">
        <h1>{{ t.contact_hero_title }}</h1>
        <p>{{ t.contact_hero_subtitle }}</p>
    </div>
</section>

<section class="content-section">
    <div class="contact-grid">
        <div class="contact-info">
            <h3>{{ t.contact_get_in_touch }}</h3>
            <p>{{ t.contact_intro }}</p>

            <div class="contact-channel">
                <strong>{{ t.contact_support_title }}</strong>
                <p class="contact-channel-desc">{{ t.contact_support_desc }}</p>
                <a href="mailto:{{ contact_support_email }}">{{ contact_support_email }}</a>
            </div>

            <div class="contact-channel">
                <strong>{{ t.contact_direct_title }}</strong>
                <p class="contact-channel-desc">{{ t.contact_direct_desc }}</p>
                <a href="mailto:{{ contact_inquiry_email }}">{{ contact_inquiry_email }}</a>
            </div>

            <div class="contact-channel">
                <strong>{{ t.contact_call_label }}</strong>
                <p class="contact-channel-desc">
                    {% for number in contact_phone_numbers %}<a href="tel:{{ number|cut:' ' }}">{{ number }}</a>{% if not forloop.last %} / {% endif %}{% endfor %}
                </p>
            </div>

            <div class="contact-channel">
                <strong>{{ t.contact_office_title }}</strong>
                <p class="contact-channel-desc">{{ contact_office_address }}</p>
            </div>

            <ul>
                <li><strong>{{ t.contact_hours_label }}</strong>{{ t.contact_hours_value }}</li>
            </ul>
        </div>
        <div class="contact-form-wrap">
            <form class="contact-form" method="post" action="{% url 'market:contact' %}">
                {% csrf_token %}
                <label for="name">{{ t.contact_name_label }}</label>
                <input type="text" id="name" name="name" placeholder="{{ t.contact_name_placeholder }}" value="{{ request.session.picker_user.first_name|default:'' }}" required>

                <label for="email">{{ t.contact_email_field_label }}</label>
                <input type="email" id="email" name="email" placeholder="you@example.com" value="{{ request.session.picker_user.email|default:'' }}" required>

                <label for="message">{{ t.contact_message_label }}</label>
                <textarea id="message" name="message" rows="5" placeholder="{{ t.contact_message_placeholder }}" required></textarea>

                <button type="submit" class="btn-cta">{{ t.contact_send }}</button>
            </form>
        </div>
    </div>
</section>
{% endblock %}