{# Section partial: Contact Information #}
{#
    Parameters:
    - contact_info: dict with enabled, title, email, phone, address, hours, map_embed_url
    - lang: Current language code
    - default_lang: Fallback language
#}

{% macro render_contact_info(contact_info, lang, default_lang) %}
{% if contact_info and contact_info.enabled %}
<section class="py-16 lg:py-24 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            {% set title = contact_info.title.translations.get(lang) or contact_info.title.translations.get(default_lang) or 'Contact' %}
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                {{ title }}
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {% if contact_info.phone %}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
                <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                    <span class="text-purple-600 dark:text-purple-300 text-xl">&#128222;</span>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Phone</h3>
                <a href="tel:{{ contact_info.phone }}" class="text-purple-600 dark:text-purple-400 hover:underline">
                    {{ contact_info.phone }}
                </a>
            </div>
            {% endif %}

            {% if contact_info.email %}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
                <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                    <span class="text-purple-600 dark:text-purple-300 text-xl">&#128231;</span>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Email</h3>
                <a href="mailto:{{ contact_info.email }}" class="text-purple-600 dark:text-purple-400 hover:underline">
                    {{ contact_info.email }}
                </a>
            </div>
            {% endif %}

            {% if contact_info.address %}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
                <div class="w-12 h-12 mx-auto mb-4 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                    <span class="text-purple-600 dark:text-purple-300 text-xl">&#128205;</span>
                </div>
                <h3 class="font-semibold text-gray-900 dark:text-white mb-2">Address</h3>
                <p class="text-gray-600 dark:text-gray-400">{{ contact_info.address }}</p>
            </div>
            {% endif %}
        </div>

        {% if contact_info.hours %}
        <div class="mt-8 text-center">
            <p class="text-gray-600 dark:text-gray-400">
                <span class="font-semibold">Hours:</span> {{ contact_info.hours }}
            </p>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}
{% endmacro %}