add more info in spec/fam box

src/components/FamilyInfoBox.vue

 <template>
-  <div class="info-box">
-    <figure v-if="activeFamily">
-      <img :src="activeFamily.image" alt="Family illustration" />
-      <figcaption v-html="activeFamily.caption"></figcaption>
-    </figure>
-    <p>{{ activeFamily.text }}</p>
+  <div class="info-box" v-if="activeFamily">
+    
+      <!-- FAMILY LEVEL -->
+    <div v-if="activeFamily.type === 'family' || !activeFamily.type" class="family-content">
+      <figure>
+        <img :src="activeFamily.image" alt="Fish silhouette" />
+        <figcaption v-if="activeFamily.caption" v-html="activeFamily.caption"></figcaption>
+      </figure>
+      <div class="family-text">
+        <h2 v-if="activeFamily.name">{{ activeFamily.name }}</h2>
+        <p v-if="activeFamily.economicValue"><strong>{{ activeFamily.economicValue }}</strong> in total economic value</p>
+        <p v-if="activeFamily.speciesCount"><strong>{{ activeFamily.speciesCount }}</strong> species that are recreationally fished</p>
+        <p>{{ activeFamily.text }}</p>
+      </div>
+    </div>
+    <!-- SPECIES LEVEL -->
+    <div v-else-if="activeFamily.type === 'species'" class="species-content">
+      <div class="species-header">
+        <img :src="activeFamily.image" alt="Fish silhouette small" class="species-icon" />
+        <span class="family-label">{{ activeFamily.family }}</span>
+      </div>
+      <hr />
+      <h2>{{ activeFamily.name }}</h2>
+      <p class="species-subtitle">Species</p>
+      <p><strong>{{ activeFamily.economicValue }}</strong> in total economic value</p>
+      <p><strong>{{ activeFamily.countryCount }}</strong> countries where it is recreationally fished</p>
+    </div>
+
   </div>
 </template>
 
@@ -21,38 +43,73 @@
   </script>
   
   <style scoped>
-  .info-box {
-    background-color: #f8f9fa;
-    padding: 2rem;
-    border-radius: 12px;
-    margin-bottom: 2rem;
-    margin-top: 2rem;
-    display: flex;
-    gap: 4rem;
-    align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  img {
-  width: 300px;     
-  height: auto;    
-  object-fit: contain; 
+ .info-box {
+  background-color: #f8f9fa;
+  padding: 2rem;
+  border-radius: 12px;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  display: block;
+}
+
+.family-content {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.family-text {
+  max-width: 600px;
+   font-size: 1.4rem;
+}
+
+img {
+  width: 300px;
+  height: auto;
+  object-fit: contain;
   border-radius: 8px;
-  }
-
-  figcaption {
-    margin-top: 0.5rem;
-    font-size: 1.4rem;
-    color: #666;
-    line-height: 1.2;
-    max-width: 350px;
-    text-align: center;
-  }
-  
-  p {
-    margin: 0 ;
-    font-size: 1.4rem;
-    line-height: 1.4;
-  }
+}
+
+figcaption {
+  margin-top: 0.5rem;
+  font-size: 1.15rem;
+  color: #666;
+  text-align: center;
+}
+
+.species-content {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.4rem
+}
+
+.species-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.species-icon {
+  width: 100px;
+}
+
+.family-label {
+  font-size: 1.4rem;
+  color: #333;
+}
+
+.species-subtitle {
+  font-size: 1.4rem;
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.species-content hr {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem
+}
+
+
   </style>
   
\ No newline at end of file

src/components/FishAsFoodCirclePackingViz.vue

@@ -48,7 +48,7 @@
     const darkBlue = bodyCSS.getPropertyValue('--dark-blue');
     const familyInfo = props.text.familyInfo;
     const defaultFamily = props.text.defaultFamily;
-    const activeFamily = ref(defaultFamily); 
+    const activeFamily = ref(props.text.defaultFamily);
     
     // Declare behavior on mounted
     // functions called here
@@ -182,22 +182,37 @@
                     });
 
                     let current = d;
-                    let foundFamily = null;
-
-                    while (current) {
-                    const name = current.data?.name;
-                    if (name && familyInfo[name]) {
-                        foundFamily = name;
-                        break;
-                    }
-                    current = current.parent;
+                    let infoObj = null;
+                    let level = d.depth;
+
+                    if (level === 1 && familyInfo[d.data.name]) {
+                    // family level
+                    const familyData = familyInfo[d.data.name];
+                    infoObj = {
+                        type: "family",
+                        name: d.data.name,
+                        image: familyData.image,
+                        text: familyData.text,
+                        caption: familyData.caption,
+                        economicValue: d3.format("$.1s")(d.value).replace("G", "B"),
+                        speciesCount: d.children ? d.children.length : 0
+                    };
+                    } else if (level === 2) {
+                    // species level
+                    const familyName = d.parent?.data?.name;
+                    const silhouette = familyInfo[familyName]?.image;
+                    infoObj = {
+                        type: "species",
+                        name: d.data.name,
+                        family: familyName,
+                        image: silhouette,
+                        economicValue: d3.format("$.1s")(d.value).replace("G", "B"),
+                        countryCount: d.children ? d.children.length : 0
+                    };
                     }
 
-                    if (foundFamily) {
-                    activeFamily.value = familyInfo[foundFamily];
-                    } else {
-                    activeFamily.value = defaultFamily;
-                    }
+                    activeFamily.value = infoObj || defaultFamily;
+
 
             }