<template>
  <section id="socialVulnerabilityText">
      <div
    id="title"
    class="text-container title-text"
  >
    <h3 v-html="t('text.components.socialVulnerabilityText.title')"></h3>
    <br>
      <div id="text1" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph1')"></p>
      </div>
      <picture>
        <!-- WebP image sources -->
        <source 
          type="image/webp"
          srcset="
            @/assets/images/responsive_images/security-insecurity-transition-320.webp 320w,
            @/assets/images/responsive_images/security-insecurity-transition-640.webp 640w,
            @/assets/images/responsive_images/security-insecurity-transition-1280.webp 1280w,
            @/assets/images/responsive_images/security-insecurity-transition-1920.webp 1920w"
          sizes="(max-width: 600px) 320px, 
                (max-width: 1200px) 640px, 
                (min-width: 1201px) 1280px, 
                1920px"
        />

        <!-- Fallback to JPG for browsers that don't support WebP -->
        <img
          srcset="
            @/assets/images/responsive_images/security-insecurity-transition-320.jpg 320w,
            @/assets/images/responsive_images/security-insecurity-transition-640.jpg 640w,
            @/assets/images/responsive_images/security-insecurity-transition-1280.jpg 1280w,
            @/assets/images/responsive_images/security-insecurity-transition-1920.jpg 1920w"
          sizes="(max-width: 600px) 320px, 
                (max-width: 1200px) 640px, 
                (min-width: 1201px) 1280px, 
                1920px"
          src="@/assets/images/responsive_images/security-insecurity-transition-1280.jpg"
          loading="lazy"
          class="img"
          alt="Artistic rendering of an agricultural landscape with abundant water blending into a barren landscape where water is scarce."
        />
      </picture>


  <!--     <div id="text2" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph2')"></p>
      </div> -->
    </div> 
  </section>
</template>
  
<script setup>
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();
</script>
  
<style scoped>
  .text-container {
    margin-bottom: 20px; 
  }
  
  #socialVulnerabilityText img {
    display: block;
    margin: 20px auto; /* Center the images and add space around them */
  }
</style>

<style lang="scss">
  #intersectionality-tooltip {
    margin-left: -100px;
  }
  #meta-analysis-tooltip {
    margin-left: -100px;
    z-index: 99;
  }
  #environmental-justice-tooltip {
    margin-left: -160px;
  }
</style>