introduce fun fact toast message with proper styling

app/(core)/components/Funfact.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import funFacts from "../data/facts";
+
+function SparkleIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 3v4M12 17v4M5 12H1M23 12h-4M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8M18.4 18.4l-2.8-2.8M8.4 8.4 5.6 5.6" />
+    </svg>
+  );
+}
+
+function Funfact({ chapterId, setshow }) {
+  const facts = funFacts.find((item) => item.id === chapterId);
+
+  if (!facts) return null;
+
+  return (
+    <div className="fun-fact">
+      <div className="fun-fact-close">
+        <button
+          className="btn-close"
+          onClick={() => {
+            setshow(false);
+          }}
+        >
+          ✕
+        </button>
+      </div>
+
+      <div className="fun-fact-header">
+        <span className="fun-fact-icon">
+          <SparkleIcon />
+        </span>
+        <span className="fun-fact-label">Did you know</span>
+      </div>
+
+      <p className="fun-fact-text">{facts.fact}</p>
+    </div>
+  );
+}
+
+export default Funfact;

app/(core)/components/TopSim.tsx

@@ -3,13 +3,21 @@ import simulations from "../data/chapters";
 import { usePathname } from "next/navigation";
 import useMobile from "../hooks/useMobile";
 import useTranslation from "../hooks/useTranslation.ts";
+import Funfact from "./Funfact.jsx";
+import { useEffect, useState } from "react";
 
 export default function TopSim() {
   const { t, meta } = useTranslation();
   const isCompleted = meta?.completed || false;
   const location = usePathname();
   const idx = simulations.findIndex((sim) => sim.link === location);
   const isMobile = useMobile();
+  const [show, setshow] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setshow(false);
+    }, 5000);
+  }, [simulations[idx].id]);
 
   function getPrevious() {
     if (idx === -1) return "/";
@@ -53,7 +61,11 @@ export default function TopSim() {
           content={t("Next")}
         />
       </div>
-      {!isMobile && <div className="top-nav-sim-filler" />}
+      {!isMobile && idx !== -1 && (
+        <div className={`top-nav-sim-filler ${show ? "show" : "hide"}`}>
+          <Funfact chapterId={simulations[idx].id} setshow={setshow} />
+        </div>
+      )}
     </div>
   );
 }

app/(core)/data/facts.js

@@ -0,0 +1,63 @@
+const funFacts = [
+  {
+    id: 1,
+    fact: "A perfectly elastic ball can bounce forever in a frictionless environment because no kinetic energy is lost.",
+  },
+  {
+    id: 2,
+    fact: "Vector addition depends on both magnitude and direction, which is why two forces can cancel each other completely.",
+  },
+  {
+    id: 3,
+    fact: "Acceleration is the rate of change of velocity, not speed. An object moving in a circle accelerates even at constant speed.",
+  },
+  {
+    id: 4,
+    fact: "On Earth, all objects fall with the same acceleration (9.8 m/s²) if air resistance is ignored.",
+  },
+  {
+    id: 5,
+    fact: "According to Hooke's Law, the restoring force of a spring is proportional to its displacement from equilibrium.",
+  },
+  {
+    id: 6,
+    fact: "For small angles, the period of a simple pendulum depends only on its length and gravity—not on its mass.",
+  },
+  {
+    id: 7,
+    fact: "Projectile motion combines constant horizontal velocity with vertically accelerated motion due to gravity.",
+  },
+  {
+    id: 8,
+    fact: "Increasing the incline angle increases the component of gravity pulling the object down the slope.",
+  },
+  {
+    id: 9,
+    fact: "An object in uniform circular motion constantly changes direction, requiring centripetal acceleration.",
+  },
+  {
+    id: 10,
+    fact: "The three-body problem has no general analytical solution and often exhibits chaotic behavior.",
+  },
+  {
+    id: 11,
+    fact: "The frequency of a horizontal spring-mass system increases when the spring constant increases.",
+  },
+  {
+    id: 12,
+    fact: "The double pendulum is one of the simplest systems that demonstrates deterministic chaos.",
+  },
+  {
+    id: 13,
+    fact: "In an elastic collision, both momentum and kinetic energy are conserved.",
+  },
+  {
+    id: 14,
+    fact: "Physics simulations often stress CPUs more than GPUs because they involve complex mathematical calculations.",
+  },
+  {
+    id: 15,
+    fact: "The number of collisions between two blocks can reveal the digits of π when their masses follow powers of 100.",
+  },
+];
+export default funFacts;