{#
  Home Page Introduction Component

  Interactive full-screen intro with:
  - GSAP trail effect (mouse/touch)
  - Scroll-triggered mountain SVG transition
  - Bilingual support (FR/EN)
  - Inline editing support
#}

{% set homeIntroSection = contentModel.sections|filter(s => s.id == 'home-intro')|first %}

<section class="home-intro" data-section="home-intro" data-home-intro data-altitude="{{ homeIntroSection.fields.altitude|default('2500') }}">
    <div class="home-intro__content">
        <h1 class="home-intro__title"{% if editMode|default(false) %}
            data-editable="true"
            data-editor-type="simple-multiline"
            data-section-id="home-intro"
            data-field="title"{% endif %}>
            {{ homeIntroSection.fields.title|default('Agence d’architecture')|raw }}
        </h1>

        <p class="home-intro__subtitle"{% if editMode|default(false) %}
            data-editable="true"
            data-editor-type="simple-multiline"
            data-section-id="home-intro"
            data-field="subtitle"{% endif %}>
            {{ homeIntroSection.fields.subtitle|default('ancrée dans les territoires alpins.') }}
        </p>
    </div>

    {# Trail images container (populated dynamically via JS) #}
    <div class="home-intro__trail-container" data-trail-container aria-hidden="true">
        {# Trail images data passed via data attribute for JS consumption #}
        {% if trailImages is defined and trailImages is not empty %}
            <div data-trail-images="{{ trailImages|map(i => {
                url: asset(i.path),
                alt: i.originalFilename|default('')
            })|json_encode|e('html_attr') }}" style="display:none;"></div>
        {% endif %}
    </div>

    {# Mountain illustration — houses, ridge line and cable car, growing into the next brown section #}
    {# <img src="{{ asset('build/images/home/hero.svg') }}" alt="" class="home-intro__mountain" aria-hidden="true"> #}
</section>