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

<script setup>
// Lazy load components using dynamic imports
import { defineAsyncComponent } from 'vue';

const VizTitle = defineAsyncComponent(() =>  import('../components/VizTitle.vue'));
const BeeswarmChart = defineAsyncComponent(() => import('../components/BeeswarmChart.vue'));
const NarrativeIntro = defineAsyncComponent(() => import('../components/NarrativeIntro.vue'));
const InteractiveDendrogram = defineAsyncComponent(() => import('../components/InteractiveDendrogram.vue'));
const MapsSection = defineAsyncComponent(() => import('../components/MapsSection.vue'));
const ConclusionSection = defineAsyncComponent(() => import('../components/ConclusionSection.vue'));
const AboutTheTeam = defineAsyncComponent(() => import('../components/AboutTheTeam.vue'));
const ReferencesSection = defineAsyncComponent(() => import('../components/ReferencesSection.vue'));
const AuthorshipSection = defineAsyncComponent(() => import('../components/AuthorshipSection.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://labs.waterdata.usgs.gov/visualizations/headshots/megan_hines_square.jpg" },
  ];
</script>

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

  .section-component {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .end {
    margin-bottom: 80px;
  }
  #bees {
    margin-top: 0px;
  }
</style>