From 0496071600c6c6ac6ba36163b824b36318410550 Mon Sep 17 00:00:00 2001
From: Mahen <mahennekkers27@gmail.com>
Date: Tue, 26 May 2026 08:44:52 +0700
Subject: [PATCH] feat: add information detail recommendation result.

---
 src/components/dashboards/AspectScoreInfo.tsx | 554 ++++++++++++++++++
 .../dashboards/RadarComparisonChart.tsx       |   2 +-
 src/components/dashboards/ResultDetails.tsx   |  64 +-
 3 files changed, 609 insertions(+), 11 deletions(-)
 create mode 100644 src/components/dashboards/AspectScoreInfo.tsx

diff --git a/src/components/dashboards/AspectScoreInfo.tsx b/src/components/dashboards/AspectScoreInfo.tsx
new file mode 100644
index 0000000..dc891eb
--- /dev/null
+++ b/src/components/dashboards/AspectScoreInfo.tsx
@@ -0,0 +1,554 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  X,
+  Info,
+  Database,
+  Brain,
+  Eye,
+  AlertCircle,
+  ChevronDown,
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface AspectScoreInfoProps {
+  isDark: boolean;
+  aspectScores: Record<string, number>;
+  totalReviews: number;
+  positiveCount: number;
+  negativeCount: number;
+}
+
+const ASPECT_KEYWORD_SAMPLES: Record<string, string[]> = {
+  performa: ["cepat", "kencang", "lancar", "lag", "lemot", "gaming", "render"],
+  layar: [
+    "jernih",
+    "tajam",
+    "cerah",
+    "resolusi",
+    "oled",
+    "refresh rate",
+    "dead pixel",
+  ],
+  baterai: [
+    "awet",
+    "tahan lama",
+    "boros",
+    "cepat habis",
+    "cas",
+    "charging",
+    "mah",
+  ],
+  harga: [
+    "murah",
+    "mahal",
+    "worth it",
+    "terjangkau",
+    "promo",
+    "diskon",
+    "budget",
+  ],
+};
+
+const ASPECT_ICONS: Record<string, string> = {
+  performa: "⚡",
+  layar: "🖥️",
+  baterai: "🔋",
+  harga: "💰",
+};
+
+function ScoreBar({ score, isDark }: { score: number; isDark: boolean }) {
+  const barColor =
+    score >= 80 ? "bg-green-500" : score >= 60 ? "bg-yellow-500" : "bg-red-500";
+  const textColor =
+    score >= 80
+      ? "text-green-500"
+      : score >= 60
+        ? "text-yellow-500"
+        : "text-red-500";
+
+  return (
+    <div className="flex items-center gap-2 w-full">
+      <div
+        className={`flex-1 h-1.5 rounded-full ${isDark ? "bg-gray-700" : "bg-gray-100"}`}
+      >
+        <div
+          className={`h-1.5 rounded-full transition-all duration-700 ${barColor}`}
+          style={{ width: `${score}%` }}
+        />
+      </div>
+      <span
+        className={`text-xs font-mono font-semibold w-9 text-right ${textColor}`}
+      >
+        {score.toFixed(0)}%
+      </span>
+    </div>
+  );
+}
+
+function StatusBadge({ score, isDark }: { score: number; isDark: boolean }) {
+  if (score >= 80)
+    return (
+      <span
+        className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${isDark ? "bg-green-900/40 text-green-400" : "bg-green-50 text-green-600"}`}
+      >
+        ✓ Unggul
+      </span>
+    );
+  if (score >= 60)
+    return (
+      <span
+        className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${isDark ? "bg-yellow-900/40 text-yellow-400" : "bg-yellow-50 text-yellow-600"}`}
+      >
+        ⚠ Perhatian
+      </span>
+    );
+  return (
+    <span
+      className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${isDark ? "bg-red-900/40 text-red-400" : "bg-red-50 text-red-600"}`}
+    >
+      ✗ Lemah
+    </span>
+  );
+}
+
+function Divider({ isDark }: { isDark: boolean }) {
+  return (
+    <div className={`h-px w-full ${isDark ? "bg-gray-700" : "bg-gray-100"}`} />
+  );
+}
+
+function SectionLabel({
+  children,
+  isDark,
+}: {
+  children: React.ReactNode;
+  isDark: boolean;
+}) {
+  return (
+    <p
+      className={`text-[10px] font-bold uppercase tracking-widest mb-3 ${isDark ? "text-gray-500" : "text-gray-400"}`}
+    >
+      {children}
+    </p>
+  );
+}
+
+export default function AspectScoreInfo({
+  isDark,
+  aspectScores,
+  totalReviews,
+  positiveCount,
+  negativeCount,
+}: AspectScoreInfoProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeStep, setActiveStep] = useState<number | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setActiveStep(null);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, close]);
+
+  const generalScore =
+    totalReviews > 0 ? ((positiveCount / totalReviews) * 100).toFixed(1) : "0";
+
+  const steps = [
+    {
+      title: "Ulasan dipindai kata kunci per aspek",
+      description:
+        "Sistem mencari kata-kata tertentu di setiap ulasan, seperti 'awet' untuk baterai atau 'lag' untuk performa. Ulasan yang mengandung kata tersebut akan dianalisis lebih lanjut oleh sistem.",
+    },
+    {
+      title: "Model XGBoost mengklasifikasikan sentimen",
+      description:
+        "Ulasan yang menyebut aspek tersebut kemudian diklasifikasi oleh model prediksi. Apakah bernada positif, negatif, atau netral?",
+    },
+    {
+      title: "Skor dihitung dari rasio positif",
+      description:
+        "Semakin banyak pembeli yang puas terhadap suatu aspek, semakin tinggi skornya. Misalnya jika 8 dari 10 pembeli senang dengan baterai produk ini, maka skor baterainya 80%.",
+    },
+  ];
+
+  const trustReasons = [
+    {
+      icon: Database,
+      title: "Berbasis ulasan nyata pembeli",
+      desc: "Data diambil langsung dari halaman ulasan Tokopedia via scraping, bukan dari spesifikasi produk atau klaim penjual.",
+    },
+    {
+      icon: Brain,
+      title: "Model XGBoost Optimized (akurasi 73%)",
+      desc: "Dilatih dengan pipeline SMOTE + seleksi fitur Chi-Square + Grid Search, divalidasi pada data terpisah.",
+    },
+    {
+      icon: Eye,
+      title: "Cara kerja sistem dapat ditelusuri",
+      desc: "Setiap aspek punya daftar kata kunci tetap yang bisa diaudit. Sistem hanya menghitung proporsi dari apa yang pembeli tulis.",
+    },
+  ];
+
+  const modalContent = (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.18 }}
+          className="fixed inset-0 z-10 flex items-center justify-center p-4"
+          style={{ isolation: "isolate" }}
+        >
+          <div
+            className={`absolute inset-0 backdrop-blur-sm ${isDark ? "bg-black/60" : "bg-black/40"}`}
+            onClick={close}
+            aria-hidden="true"
+          />
+          ``
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 8 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            className={`relative w-full max-w-md max-h-[85vh] overflow-hidden rounded-2xl border shadow-2xl flex flex-col ${
+              isDark
+                ? "bg-gray-800 border-gray-700"
+                : "bg-white border-gray-200"
+            }`}
+            role="dialog"
+            aria-modal="true"
+            aria-label="Transparansi metodologi skor aspek"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className={`shrink-0 flex items-center justify-between px-5 py-4 border-b ${
+                isDark
+                  ? "bg-gray-800 border-gray-700"
+                  : "bg-white border-gray-100"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <Info
+                  className={`w-4 h-4 ${isDark ? "text-blue-400" : "text-primary"}`}
+                />
+                <div>
+                  <p
+                    className={`text-sm font-semibold leading-tight ${isDark ? "text-white" : "text-gray-800"}`}
+                  >
+                    Transparansi Metodologi
+                  </p>
+                  <p
+                    className={`text-[11px] leading-tight ${isDark ? "text-gray-400" : "text-gray-500"}`}
+                  >
+                    Dari mana angka persentase ini berasal?
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={close}
+                aria-label="Tutup"
+                className={`w-7 h-7 rounded-full flex items-center justify-center transition-colors cursor-pointer ${
+                  isDark
+                    ? "hover:bg-gray-700 text-gray-400 hover:text-white"
+                    : "hover:bg-gray-100 text-gray-400 hover:text-gray-700"
+                }`}
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
+              <div>
+                <SectionLabel isDark={isDark}>
+                  Skor aspek pada produk ini
+                </SectionLabel>
+                <div className="space-y-3">
+                  {Object.entries(aspectScores).map(([aspect, score]) => (
+                    <div key={aspect} className="space-y-1.5">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm">
+                            {ASPECT_ICONS[aspect] ?? "📊"}
+                          </span>
+                          <span
+                            className={`text-xs font-medium capitalize ${isDark ? "text-gray-300" : "text-gray-600"}`}
+                          >
+                            {aspect}
+                          </span>
+                        </div>
+                        <StatusBadge score={score} isDark={isDark} />
+                      </div>
+                      <ScoreBar score={score} isDark={isDark} />
+                      <div className="flex flex-wrap gap-1">
+                        {(ASPECT_KEYWORD_SAMPLES[aspect] ?? [])
+                          .slice(0, 4)
+                          .map((kw) => (
+                            <span
+                              key={kw}
+                              className={`text-[10px] px-1.5 py-0.5 rounded font-mono ${
+                                isDark
+                                  ? "bg-gray-700 text-gray-400"
+                                  : "bg-gray-100 text-gray-500"
+                              }`}
+                            >
+                              {kw}
+                            </span>
+                          ))}
+                        <span
+                          className={`text-[10px] px-1 py-0.5 ${isDark ? "text-gray-600" : "text-gray-400"}`}
+                        >
+                          + lainnya
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <Divider isDark={isDark} />
+
+              <div>
+                <SectionLabel isDark={isDark}>
+                  Statistik ulasan produk ini
+                </SectionLabel>
+                <div className="grid grid-cols-3 gap-2">
+                  {[
+                    {
+                      label: "Total",
+                      value: totalReviews,
+                      cls: isDark
+                        ? "bg-gray-700 text-white"
+                        : "bg-gray-50 text-gray-700",
+                    },
+                    {
+                      label: "Positif",
+                      value: `${positiveCount} (${generalScore}%)`,
+                      cls: isDark
+                        ? "bg-green-900/40 text-green-400"
+                        : "bg-green-50 text-green-700",
+                    },
+                    {
+                      label: "Negatif",
+                      value: `${negativeCount} (${(100 - parseFloat(generalScore)).toFixed(1)}%)`,
+                      cls: isDark
+                        ? "bg-red-900/40 text-red-400"
+                        : "bg-red-50 text-red-700",
+                    },
+                  ].map((s) => (
+                    <div
+                      key={s.label}
+                      className={`rounded-lg p-3 text-center ${s.cls}`}
+                    >
+                      <p className="text-sm font-semibold leading-tight">
+                        {s.value}
+                      </p>
+                      <p className="text-[10px] mt-0.5 opacity-75">{s.label}</p>
+                    </div>
+                  ))}
+                </div>
+                <div
+                  className={`flex items-start gap-1.5 mt-2.5 p-2.5 rounded-lg ${isDark ? "bg-gray-700/50" : "bg-amber-50"}`}
+                >
+                  <AlertCircle
+                    className={`w-3.5 h-3.5 shrink-0 mt-0.5 ${isDark ? "text-gray-400" : "text-amber-500"}`}
+                  />
+                  <p
+                    className={`text-[11px] leading-relaxed ${isDark ? "text-gray-400" : "text-amber-700"}`}
+                  >
+                    Aspek yang jarang disebut dalam ulasan cenderung memiliki
+                    skor yang kurang representatif. Semakin banyak ulasan
+                    menyebut aspek tersebut, semakin valid skornya.
+                  </p>
+                </div>
+              </div>
+
+              <Divider isDark={isDark} />
+
+              <div>
+                <SectionLabel isDark={isDark}>Cara skor dihitung</SectionLabel>
+                <div className="space-y-2">
+                  {steps.map((step, i) => (
+                    <button
+                      key={i}
+                      type="button"
+                      onClick={() => setActiveStep(activeStep === i ? null : i)}
+                      className={`w-full text-left rounded-lg p-3 border transition-all duration-200 cursor-pointer ${
+                        activeStep === i
+                          ? isDark
+                            ? "bg-blue-900/30 border-blue-700"
+                            : "bg-blue-50 border-blue-200"
+                          : isDark
+                            ? "border-gray-700 hover:bg-gray-700"
+                            : "bg-gray-50 border-gray-100 hover:bg-gray-100"
+                      }`}
+                    >
+                      <div className="flex items-start gap-2.5">
+                        <span
+                          className={`text-[11px] font-bold w-5 h-5 rounded-full flex items-center justify-center shrink-0 mt-0.5 ${
+                            activeStep === i
+                              ? "bg-blue-500 text-white"
+                              : isDark
+                                ? "bg-gray-600 text-gray-300"
+                                : "bg-gray-200 text-gray-600"
+                          }`}
+                        >
+                          {i + 1}
+                        </span>
+                        <div className="flex-1 min-w-0">
+                          <p
+                            className={`text-xs font-medium ${isDark ? "text-gray-200" : "text-gray-700"}`}
+                          >
+                            {step.title}
+                          </p>
+                          <AnimatePresence>
+                            {activeStep === i && (
+                              <motion.p
+                                initial={{ opacity: 0, height: 0 }}
+                                animate={{ opacity: 1, height: "auto" }}
+                                exit={{ opacity: 0, height: 0 }}
+                                transition={{ duration: 0.18 }}
+                                className={`text-[11px] mt-1.5 leading-relaxed overflow-hidden ${isDark ? "text-gray-400" : "text-gray-500"}`}
+                              >
+                                {step.description}
+                              </motion.p>
+                            )}
+                          </AnimatePresence>
+                        </div>
+                        <ChevronDown
+                          className={`w-3.5 h-3.5 shrink-0 mt-0.5 transition-transform duration-200 ${
+                            activeStep === i ? "rotate-180" : ""
+                          } ${isDark ? "text-gray-500" : "text-gray-400"}`}
+                        />
+                      </div>
+                    </button>
+                  ))}
+                </div>
+
+                <div className="mt-3">
+                  <p
+                    className={`text-[11px] mb-1.5 ${isDark ? "text-gray-500" : "text-gray-400"}`}
+                  >
+                    Formula yang digunakan:
+                  </p>
+                  <div
+                    className={`rounded-lg p-3 font-mono text-[11px] leading-relaxed border ${
+                      isDark
+                        ? "bg-gray-900 text-gray-300 border-gray-700"
+                        : "bg-gray-50 text-gray-700 border-gray-200"
+                    }`}
+                  >
+                    <span
+                      className={isDark ? "text-blue-400" : "text-blue-600"}
+                    >
+                      Skor Aspek
+                    </span>
+                    {" = ("}
+                    <span
+                      className={isDark ? "text-green-400" : "text-green-600"}
+                    >
+                      ulasan positif menyebut aspek
+                    </span>
+                    {" ÷ "}
+                    <span
+                      className={isDark ? "text-yellow-400" : "text-yellow-600"}
+                    >
+                      total ulasan menyebut aspek
+                    </span>
+                    {") × 100%"}
+                  </div>
+                </div>
+              </div>
+
+              <Divider isDark={isDark} />
+
+              <div>
+                <SectionLabel isDark={isDark}>
+                  Mengapa angka ini bisa dipercaya?
+                </SectionLabel>
+                <div className="space-y-3">
+                  {trustReasons.map(({ icon: Icon, title, desc }) => (
+                    <div key={title} className="flex gap-3 items-start">
+                      <div
+                        className={`w-7 h-7 rounded-lg flex items-center justify-center shrink-0 ${isDark ? "bg-blue-900/40" : "bg-blue-50"}`}
+                      >
+                        <Icon
+                          className={`w-3.5 h-3.5 ${isDark ? "text-blue-400" : "text-blue-500"}`}
+                        />
+                      </div>
+                      <div>
+                        <p
+                          className={`text-xs font-medium ${isDark ? "text-gray-200" : "text-gray-700"}`}
+                        >
+                          {title}
+                        </p>
+                        <p
+                          className={`text-[11px] mt-0.5 leading-relaxed ${isDark ? "text-gray-500" : "text-gray-400"}`}
+                        >
+                          {desc}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="h-1" />
+            </div>
+
+            <div
+              className={`shrink-0 px-5 py-3 border-t ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-100"}`}
+            >
+              <button
+                type="button"
+                onClick={close}
+                className={`w-full py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
+                  isDark
+                    ? "bg-gray-700 text-white hover:bg-gray-600"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Mengerti, tutup
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setIsOpen(true)}
+        className={`cursor-pointer flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border transition-all duration-200 mt-3 ${
+          isDark
+            ? "border-gray-700 text-gray-400 hover:bg-blue-900/30 hover:text-blue-400 hover:border-blue-800"
+            : "border-gray-200 text-gray-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200"
+        }`}
+      >
+        <Info className="w-3.5 h-3.5" />
+        <span>Dari mana angka ini berasal?</span>
+      </button>
+
+      {mounted && createPortal(modalContent, document.body)}
+    </>
+  );
+}
diff --git a/src/components/dashboards/RadarComparisonChart.tsx b/src/components/dashboards/RadarComparisonChart.tsx
index 62085e1..adf508e 100644
--- a/src/components/dashboards/RadarComparisonChart.tsx
+++ b/src/components/dashboards/RadarComparisonChart.tsx
@@ -44,7 +44,7 @@ const RadarComparisonChart = ({ data }: RadarProps) => {
 
           {data.map((product, index) => (
             <Radar
-              key={product.name}
+              key={`${product.name}-${index}`}
               name={product.name}
               dataKey={product.name}
               stroke={colors[index % colors.length]}
diff --git a/src/components/dashboards/ResultDetails.tsx b/src/components/dashboards/ResultDetails.tsx
index b18c2c1..4280f4c 100644
--- a/src/components/dashboards/ResultDetails.tsx
+++ b/src/components/dashboards/ResultDetails.tsx
@@ -9,6 +9,7 @@ import {
   ExternalLink,
   Trophy,
 } from "lucide-react";
+import AspectScoreInfo from "./AspectScoreInfo";
 
 export default function ResultDetails({ result }: ResultProps) {
   const {
@@ -22,14 +23,20 @@ export default function ResultDetails({ result }: ResultProps) {
   if (!result || !result.details || result.details.length === 0) return null;
 
   return (
-    <div className="space-y-6">
+    <div className="container space-y-4">
       <div
-        className={`relative group border p-8 rounded-xl ${darkMode ? "bg-gray-800 border-transparent" : "bg-card"} h-100 overflow-hidden transition-all duration-500`}
+        className={`relative group border p-8 rounded-xl ${
+          darkMode ? "bg-gray-800 border-transparent" : "bg-card"
+        } h-100 overflow-hidden transition-all duration-500`}
       >
         {activeProductIndex > 0 && (
           <button
             onClick={prevProduct}
-            className={`${darkMode ? "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-gray-800/30 text-card hover:bg-gray-900 hover:text-card transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300" : "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-secondary text-primary hover:bg-primary hover:text-white transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"}`}
+            className={`${
+              darkMode
+                ? "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-gray-800/30 text-card hover:bg-gray-900 hover:text-card transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"
+                : "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-secondary text-primary hover:bg-primary hover:text-white transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"
+            }`}
             aria-label="Previous Product"
           >
             <ChevronLeft size={24} />
@@ -66,7 +73,9 @@ export default function ResultDetails({ result }: ResultProps) {
                       Produk {index + 1} dari {totalProducts}
                     </span>
                     <h4
-                      className={`${darkMode ? "text-card" : "text-gray-800"} font-bold text-2xl mt-1 line-clamp-2 transition-all duration-500`}
+                      className={`${
+                        darkMode ? "text-card" : "text-gray-800"
+                      } font-bold text-2xl mt-1 line-clamp-2 transition-all duration-500`}
                     >
                       {toTitleCase(item.name)}
                     </h4>
@@ -74,7 +83,9 @@ export default function ResultDetails({ result }: ResultProps) {
                       href={item.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className={`${darkMode ? "text-gray-300" : "text-primary"} text-xs font-semibold inline-flex items-center mt-2 hover:underline gap-1 transition-all duration-500`}
+                      className={`${
+                        darkMode ? "text-gray-300" : "text-primary"
+                      } text-xs font-semibold inline-flex items-center mt-2 hover:underline gap-1 transition-all duration-500`}
                     >
                       Buka di Tokopedia <ExternalLink size={12} />
                     </a>
@@ -86,7 +97,7 @@ export default function ResultDetails({ result }: ResultProps) {
                   </div>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                   <div className="bg-blue-50 p-4 rounded-2xl border border-blue-100 flex items-center gap-4">
                     <div className="p-2 bg-white rounded-xl text-blue-500 shadow-sm shrink-0">
                       <Trophy size={20} />
@@ -115,11 +126,40 @@ export default function ResultDetails({ result }: ResultProps) {
                   </div>
                 </div>
 
-                <div
-                  className={`${darkMode ? "bg-gray-900 text-card border-transparent" : "bg-secondary/50 text-gray-600"} p-5 rounded-2xl border border-blue-50 italic text-sm leading-relaxed mb-4 transition-all duration-500`}
+                {(() => {
+                  const sortedDetails = [...result.details].sort((a, b) => {
+                    if (a.name === result.winning_product) return -1;
+                    if (b.name === result.winning_product) return 1;
+                    return 0;
+                  });
+                  const activeItem = sortedDetails[activeProductIndex];
+                  if (!activeItem) return null;
+
+                  return (
+                    <AspectScoreInfo
+                      isDark={darkMode}
+                      aspectScores={
+                        activeItem.aspect_scores as unknown as Record<
+                          string,
+                          number
+                        >
+                      }
+                      totalReviews={activeItem.total_reviews}
+                      positiveCount={activeItem.positive_count}
+                      negativeCount={activeItem.negative_count}
+                    />
+                  );
+                })()}
+
+                {/* <div
+                  className={`${
+                    darkMode
+                      ? "bg-gray-900 text-card border-transparent"
+                      : "bg-secondary/50 text-gray-600"
+                  } p-5 mt-4 rounded-2xl border border-blue-50 italic text-sm leading-relaxed mb-4 transition-all duration-500`}
                 >
                   &ldquo;{item.description}&rdquo;
-                </div>
+                </div> */}
               </div>
             );
           })}
@@ -127,7 +167,11 @@ export default function ResultDetails({ result }: ResultProps) {
         {activeProductIndex < totalProducts - 1 && (
           <button
             onClick={nextProduct}
-            className={`${darkMode ? "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-gray-800/30 text-card hover:bg-gray-900 hover:text-card transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300" : "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-secondary text-primary hover:bg-primary hover:text-white transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"}`}
+            className={`${
+              darkMode
+                ? "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-gray-800/30 text-card hover:bg-gray-900 hover:text-card transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"
+                : "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full cursor-pointer bg-secondary text-primary hover:bg-primary hover:text-white transition-all z-2 shadow-md animate-in fade-in zoom-in duration-300"
+            }`}
             aria-label="Next Product"
           >
             <ChevronRight size={24} />