<template>
  <section id="visualization">
    <VizTitle class="section-component"/>
    <BeeswarmChart class="section-component" /> 
    <NarrativeIntro class="section-component"/>
    <InteractiveDendrogram class="section-component"/>
    <MapsSection class="section-component"/>
    <ConclusionSection class="section-component"/>
    <AboutTheTeam :data="circleData" class="section-components" />
    <ReferencesSection class="section-component" />
    <AuthorshipSection class="section-component" />
  </section>
</template>

<script setup>
  import VizTitle from '.././components/VizTitle.vue'
  import NarrativeIntro from '.././components/NarrativeIntro.vue'
  import BeeswarmChart from '../components/BeeswarmChart.vue'
  import InteractiveDendrogram from '.././components/InteractiveDendrogram.vue'
  import MapsSection from '.././components/MapsSection.vue'
  import ConclusionSection from '.././components/ConclusionSection.vue'
  import AboutTheTeam from '../components/AboutTheTeam.vue'
  import ReferencesSection from '.././components/References.vue'
  import AuthorshipSection from '.././components/Authorship.vue'

  const circleData = [
    { name: "Oronde Drakes", link: "https://www.usgs.gov/staff-profiles/oronde-drakes", image: "https://hazards.colorado.edu/api/v2/uploads/avatar/oronde_drakes2-1556849997156.JPG" },
    { name: "Diana Restrepo-Osorio", link: "https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/Copy%20of%20Restrepo-Osorio_Diana%20L_PA-02473_1702473_027_8x12.jpg?itok=64YcJ9wy" },
    { name: "Kathryn Powlen", link: "https://www.usgs.gov/staff-profiles/kathryn-a-powlen", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/KPowlen_photo.jpg?itok=IufjVCBr" },
    { name: "Megan Hines", link: "https://www.usgs.gov/staff-profiles/megan-k-hines", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/thumbnails/image/Hines_Megan_USGS.jpg?itok=mOifmPnR" },
  ];
</script>

<style lang="scss" scoped>
  .visualization {
    padding: 0rem 0rem 0rem 0rem;
  }

  .section-component {
    margin-top: 40px;
    margin-bottom: 30px;
  }
</style>