{#
    About page - Intro section ("Galta est une agence d'architecture...")

    Parameters:
    - content (array): raw locale content, `introTitle`/`introText`/`introImage` fields
      (`introImagePath` resolved by AboutPageEnricher via enrichMediaReferences())
    - editMode (bool)
#}
<section class="about-intro">
    <div class="about-intro__col about-intro__col--text">
        {% if (content.introTitle is defined and content.introTitle) or editMode|default(false) %}
            <p class="about-intro__title"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="introTitle" data-placeholder="Titre d'introduction"{% endif %}>{{ content.introTitle|default('') }}</p>
        {% endif %}

        <div class="about-intro__body-row">
            <span class="about-intro__divider" aria-hidden="true"></span>
            {% if (content.introText is defined and content.introText) or editMode|default(false) %}
                <div class="about-intro__body"{% if editMode|default(false) %} data-editable="true" data-field="introText" data-placeholder="Texte d'introduction"{% endif %}>{{ content.introText|default('')|raw }}</div>
            {% endif %}
        </div>
    </div>

    <div class="about-intro__col about-intro__col--image">
        <div class="about-intro__image{% if editMode|default(false) and not (content.introImage|default(false) or content.introImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(content|default({}), 'introImage', editMode|default(false)) }}{% if editMode|default(false) %}
            data-editable-image="true"
            data-field="introImage"
            data-media-id="{{ content.introImage|default('') }}" data-media-id-dark="{{ content.introImageDark|default('') }}"{% endif %}>
            {% if editMode|default(false) and not (content.introImage|default(false) or content.introImageDark|default(false)) %}
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter une image</span>
                </span>
            {% endif %}
            {% include 'components/_themed_img.html.twig' with {light: introImagePath|default(''), dark: introImageDarkPath|default(''), alt: '', class: 'about-intro__img'} only %}
        </div>
    </div>
</section>