{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Customer Service" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" class="top-icon-btn">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 500px; margin: 0 auto; position: relative;">
        {% include 'main/_subheader.html' with title=_("Customer Service") back="/personal/" %}

        <p style="margin: 0 0 1.5rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6;">{% trans "Our support team is here to help during platform operating hours (10:00 a.m. – 10:00 p.m.). Choose a channel below." %}</p>

        <div style="display: grid; gap: 1rem;">
            <a href="#" style="display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--text-main);">
                <span style="font-size: 1.5rem;">💬</span>
                <div>
                    <div style="font-weight: 700;">{% trans "Online Live Chat" %}</div>
                    <div style="color: var(--text-muted); font-size: 0.85rem;">{% trans "Fastest response during operating hours" %}</div>
                </div>
            </a>
            <a href="mailto:support@odeon.example" style="display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--text-main);">
                <span style="font-size: 1.5rem;">✉️</span>
                <div>
                    <div style="font-weight: 700;">{% trans "Email Support" %}</div>
                    <div style="color: var(--text-muted); font-size: 0.85rem;">support@odeon.example</div>
                </div>
            </a>
            <a href="#" style="display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: var(--text-main);">
                <span style="font-size: 1.5rem;">📞</span>
                <div>
                    <div style="font-weight: 700;">{% trans "Telegram Support" %}</div>
                    <div style="color: var(--text-muted); font-size: 0.85rem;">@odeon_support</div>
                </div>
            </a>
        </div>
    </div>
{% endblock %}