{# Widget Image optimisé avec styles et responsive #}
{% set maxHeight = maxHeight|default('600px') %}
{% set objectFit = objectFit|default('contain') %}
{% set borderRadius = borderRadius|default('0') %}
{% set layout = layout|default('full') %}
{% set shadow = shadow|default('none') %}
{% set hoverEffect = hoverEffect|default('none') %}

{# Calcul de la largeur max selon le layout #}
{% set maxWidth = 'auto' %}
{% if layout == 'small' %}
    {% set maxWidth = '600px' %}
{% elseif layout == 'medium' %}
    {% set maxWidth = '900px' %}
{% elseif layout == 'contained' %}
    {% set maxWidth = '1200px' %}
{% endif %}

{# Calcul de l'ombre portée #}
{% set boxShadow = 'none' %}
{% if shadow == 'light' %}
    {% set boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)' %}
{% elseif shadow == 'medium' %}
    {% set boxShadow = '0 4px 16px rgba(0, 0, 0, 0.15)' %}
{% elseif shadow == 'strong' %}
    {% set boxShadow = '0 8px 24px rgba(0, 0, 0, 0.2)' %}
{% endif %}

<div class="section section-image" style="margin: {{ margin|default('40px auto') }}; max-width: {{ maxWidth }}; padding: {{ padding|default('0 20px') }};">
    {% if src %}
        {# Wrapper pour garantir l'arrondi avec object-fit #}
        <div class="image-wrapper image-hover-{{ hoverEffect }}" style="
            position: relative;
            overflow: hidden;
            border-radius: {{ borderRadius }};
            box-shadow: {{ boxShadow }};
            {% if maxHeight != 'none' %}height: {{ maxHeight }};{% endif %}
            width: 100%;
            margin: 0 auto;
            transition: transform 0.3s ease, box-shadow 0.3s ease;">

            <img src="{{ src }}"
                 alt="{{ alt }}"
                 loading="lazy"
                 class="image-widget-img"
                 style="width: 100%;
                        height: 100%;
                        object-fit: {{ objectFit }};
                        display: block;
                        border-radius: {{ borderRadius }};">
        </div>

        {% if caption %}
            <p class="image-caption" style="text-align: center;
                                            font-style: italic;
                                            color: #666;
                                            margin-top: 12px;
                                            font-size: 0.9em;
                                            line-height: 1.5;">
                {{ caption }}
            </p>
        {% endif %}
    {% endif %}
</div>

{# Inline CSS pour les effets hover (évite le besoin de CSS externe) #}
{% if hoverEffect != 'none' %}
<style>
    .image-wrapper.image-hover-zoom:hover {
        transform: scale(1.05);
        {% if shadow != 'none' %}
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        {% endif %}
    }
    .image-wrapper.image-hover-lift:hover {
        transform: translateY(-8px);
        {% if shadow != 'none' %}
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
        {% endif %}
    }
</style>
{% endif %}

{# Responsive - Adaptation mobile #}
<style>
    @media (max-width: 768px) {
        .section-image {
            margin: 24px auto !important;
            padding: 0 15px !important;
        }
        .image-widget-img {
            {% if maxHeight != 'none' %}
            max-height: calc({{ maxHeight }} * 0.7) !important;
            {% endif %}
        }
    }
</style>