{% load wagtailcore_tags wagtailimages_tags %}

<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
    <!-- Imagem do Card -->
    {% if value.image %}
        <div class="aspect-square overflow-hidden">
            {% image value.image width-400 height-400 class="w-full h-full object-cover" %}
        </div>
    {% endif %}

    <!-- Conteúdo do Card -->
    <div class="p-6">
        <!-- Título -->
        <h3 class="text-xl font-bold text-gray-900 mb-2">
            {{ value.title }}
        </h3>

        <!-- Subtítulo/Cargo -->
        {% if value.subtitle %}
            <p class="text-sm text-primary-600 font-medium mb-3">
                {{ value.subtitle }}
            </p>
        {% endif %}

        <!-- Descrição -->
        {% if value.description %}
            <div class="text-gray-600 mb-4 prose prose-sm">
                {{ value.description|richtext }}
            </div>
        {% endif %}

        <!-- Link/Botão -->
        {% if value.link_url %}
            <a href="{{ value.link_url }}" 
               target="{{ value.link_target|default:'_self' }}"
               class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium transition-colors duration-200">
                {{ value.link_text|default:"Saiba mais" }}
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </a>
        {% endif %}
    </div>
</div>