{% extends 'wali/base_wali.html' %}

{% block title %}Kontak Pengurus{% endblock %}
{% block desktop_title %}Kontak Pengurus{% endblock %}
{% block header_label %}Kontak{% endblock %}
{% block header_title %}Kontak Pengurus{% endblock %}
{% block header_subtitle %}Hubungi kami jika ada pertanyaan{% endblock %}

{% block content %}

<!-- Main Contact Card -->
<section class="rounded-3xl bg-surface-container-lowest p-spacing-lg shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col items-center text-center gap-4">
    <div class="w-16 h-16 rounded-full bg-primary/10 text-primary flex items-center justify-center">
        <span class="material-symbols-outlined text-[32px]">headset_mic</span>
    </div>
    <div>
        <h3 class="font-headline-md text-headline-md text-on-surface">Pusat Bantuan Pondok</h3>
        <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Silakan hubungi kami jika Anda memiliki pertanyaan atau kendala terkait santri.</p>
    </div>

    {% set no_wa = profil.get('wa_putra_teks') if profil and profil.get('wa_putra_teks') else '628123456789' %}
    {% set no_wa_format = no_wa | replace('0', '62', 1) if no_wa.startswith('0') else no_wa %}

    <div class="flex flex-col gap-2 w-full">
        <a href="https://wa.me/{{ no_wa_format }}" target="_blank"
           class="w-full h-11 rounded-full bg-[#25D366] text-white font-label-lg text-label-lg flex items-center justify-center gap-2 no-underline shadow-md hover:opacity-90 active:scale-[0.98] transition-all">
            <i class="fab fa-whatsapp text-lg"></i>
            Chat WhatsApp
        </a>
        <a href="tel:{{ no_wa }}"
           class="w-full h-11 rounded-full bg-primary-container text-on-primary font-label-lg text-label-lg flex items-center justify-center gap-2 no-underline shadow-md hover:opacity-90 active:scale-[0.98] transition-all">
            <span class="material-symbols-outlined text-[18px]">call</span>
            Hubungi via Telepon
        </a>
    </div>
</section>

<!-- Info Lainnya -->
<section class="flex flex-col gap-spacing-xs">
    <h3 class="font-label-lg text-label-lg text-on-surface-variant uppercase tracking-wider px-1">Informasi Lainnya</h3>

    <div class="rounded-3xl bg-surface-container-lowest shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] overflow-hidden divide-y divide-surface-variant/50">
        <!-- Admin / TU -->
        <a href="https://wa.me/{{ no_wa_format }}" target="_blank" class="flex items-center gap-3 p-spacing-md no-underline hover:bg-surface-container-low transition-colors">
            <div class="w-10 h-10 rounded-xl bg-[#25D366]/10 text-[#25D366] flex items-center justify-center flex-shrink-0">
                <span class="material-symbols-outlined text-[20px]">person</span>
            </div>
            <div class="flex flex-col min-w-0 flex-1">
                <span class="font-label-lg text-label-lg text-on-surface">Admin Pendaftaran / TU</span>
                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ profil.get('wa_putra_teks') if profil else '-' }}</span>
            </div>
            <span class="material-symbols-outlined text-[18px] text-on-surface-variant/50 flex-shrink-0">chevron_right</span>
        </a>

        <!-- Email -->
        <a href="mailto:{{ profil.get('email_pondok') if profil else 'info@pondok.com' }}" class="flex items-center gap-3 p-spacing-md no-underline hover:bg-surface-container-low transition-colors">
            <div class="w-10 h-10 rounded-xl bg-error/10 text-error flex items-center justify-center flex-shrink-0">
                <span class="material-symbols-outlined text-[20px]">mail</span>
            </div>
            <div class="flex flex-col min-w-0 flex-1">
                <span class="font-label-lg text-label-lg text-on-surface">Email Resmi</span>
                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ profil.get('email_pondok') if profil else 'Belum diatur' }}</span>
            </div>
            <span class="material-symbols-outlined text-[18px] text-on-surface-variant/50 flex-shrink-0">chevron_right</span>
        </a>

        <!-- Alamat -->
        <div class="flex items-center gap-3 p-spacing-md">
            <div class="w-10 h-10 rounded-xl bg-tertiary-fixed/30 text-tertiary flex items-center justify-center flex-shrink-0">
                <span class="material-symbols-outlined text-[20px]">location_on</span>
            </div>
            <div class="flex flex-col min-w-0 flex-1">
                <span class="font-label-lg text-label-lg text-on-surface">Alamat Pondok</span>
                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ profil.get('alamat_pondok') if profil else 'Belum diatur' }}</span>
            </div>
        </div>
    </div>
</section>

{% endblock %}