<div role="region" aria-label="Chatbot welcome screen" 
     class="vf-chatbot-welcome"
     data-vf-js-chatbot-welcome
     data-max-questions="{{ welcome_max_suggestions | default(4) }}"
     data-enable-qa-data-loading="{{ enable_qa_data_loading | default(true) }}"
     data-enable-predefined-qa="{{ enable_predefined_qa | default(true) }}"
     data-enable-fallback-responses="{{ enable_fallback_responses | default(true) }}"
     data-qa-data-url="{{ qa_data_url }}">
  <div class="vf-chatbot-welcome__content">
    {% if welcome_logo %}
      <div class="vf-chatbot-welcome__logo">
        <img src="{{ welcome_logo_url }}" alt="{{ welcome_logo_alt | default('AI assistant logo') }}">
      </div>
    {% endif %}
    <h1 class="vf-chatbot-welcome__title">{{ welcome_title | default('AI assistant') }}</h1>
    <div class="vf-chatbot-welcome__message">
      {{ welcome_message | default("Welcome! I'm here to help") }}
    </div>
  </div>
  {% if enable_welcome_suggestions %}
    <div class="vf-chatbot-welcome__suggestions">
      {% if welcome_suggestions_title %}
        <p class="vf-chatbot-welcome__suggestions-title vf-u-margin__bottom--200">{{ welcome_suggestions_title }}</p>
      {% endif %}
      <div class="vf-chatbot-welcome__suggestions-grid" data-vf-js-chatbot-welcome-suggestions-grid>
        <!-- Suggestions will be populated dynamically from qa.json using the template below -->
      </div>
    </div>
  {% endif %}

  <!-- Template for welcome suggestions using vf-chatbot-action-prompt -->
  <template id="welcome-suggestion-template">
    {% render "@vf-chatbot-action-prompt", {
      action_text: "",
      action_url: "#"
    } %}
  </template>
</div>
