Sync from GitHub Actions: 75654b613491a09d0e326d3108e71fc8c46837a1

README.md

@@ -1,5 +1,5 @@
 ---
-title: Sentimind Api
+title: Sentimind API
 emoji: 🧠
 colorFrom: blue
 colorTo: indigo

api/core/nlp_handler.py

@@ -28,27 +28,61 @@ EMOTION_TRANSLATIONS = {
     'neutral': 'Netral'
 }
 
+
+MBTI_EXPLANATIONS = {
+    'ISTJ': {'en': "The Logistician. Practical and fact-minded individuals, whose reliability cannot be doubted.", 
+             'id': "Si Organisator. Lo orangnya logis, praktis, dan bisa diandelin banget. Anti ribet-ribet club."},
+    'ISFJ': {'en': "The Defender. Very dedicated and warm protectors, always ready to defend their loved ones.", 
+             'id': "Si Pelindung. Hati lo lembut, setia, dan care banget sama orang terdekat. Temen curhat terbaik."},
+    'INFJ': {'en': "The Advocate. Quiet and mystical, yet very inspiring and tireless idealists.", 
+             'id': "Si Visioner Misterius. Lo peka, idealis, dan suka mikirin makna hidup mendalam. Langka nih!"},
+    'INTJ': {'en': "The Architect. Imaginative and strategic thinkers, with a plan for everything.", 
+             'id': "Si Strategis. Otak lo jalan terus, visioner, dan selalu punya rencana cadangan buat segala hal."},
+    'ISTP': {'en': "The Virtuoso. Bold and practical experimenters, masters of all kinds of tools.", 
+             'id': "Si Pengrajin. Lo cool, santuy, tapi jago banget mecahin masalah teknis secara praktis."},
+    'ISFP': {'en': "The Adventurer. Flexible and charming artists, always ready to explore and experience something new.", 
+             'id': "Si Seniman Bebas. Lo estetik, santai, dan suka banget nge-explore hal baru tanpa banyak drama."},
+    'INFP': {'en': "The Mediator. Poetic, kind and altruistic people, always eager to help a good cause.", 
+             'id': "Si Paling Perasa. Hati lo kayak kapas, puitis, idealis banget, dan selalu mau bikin dunia lebih baik."},
+    'INTP': {'en': "The Logician. Innovative inventors with an unquenchable thirst for knowledge.", 
+             'id': "Si Pemikir Kritis. Lo kepoan parah, logis abis, dan suka banget debat teori sampe pagi."},
+    'ESTP': {'en': "The Entrepreneur. Smart, energetic and very perceptive people, who truly enjoy living on the edge.", 
+             'id': "Si Pemberani. Lo enerjik, spontan, dan jago banget ngambil peluang dalam situasi mepet."},
+    'ESFP': {'en': "The Entertainer. Spontaneous, energetic and enthusiastic people - life is never boring around them.", 
+             'id': "Si Penghibur. Lo asik parah, spontan, dan selalu jadi pusat perhatian di tongkrongan."},
+    'ENFP': {'en': "The Campaigner. Enthusiastic, creative and sociable free spirits, who can always find a reason to smile.", 
+             'id': "Si Semangat 45. Lo kreatif, ramah, dan punya energi positif yang nular ke semua orang."},
+    'ENTP': {'en': "The Debater. Smart and curious thinkers who cannot resist an intellectual challenge.", 
+             'id': "Si Pendebat Ulung. Lo pinter, kritis, dan iseng banget suka mancing debat cuma buat seru-seruan."},
+    'ESTJ': {'en': "The Executive. Excellent administrators, unsurpassed at managing things - or people.", 
+             'id': "Si Bos Tegas. Lo jago ngatur, disiplin, dan gak suka liat ada yang lelet atau berantakan."},
+    'ESFJ': {'en': "The Consul. Extraordinarily caring, social and popular people, always eager to help.", 
+             'id': "Si Paling Gaul. Lo ramah, suka nolong, dan care banget sama harmoni di sirkel pertemanan."},
+    'ENFJ': {'en': "The Protagonist. Charismatic and inspiring leaders, able to mesmerize their listeners.", 
+             'id': "Si Pemimpin Karismatik. Lo jago banget ngomong, inspiratif, dan bisa bikin orang lain nurut sama lo."},
+    'ENTJ': {'en': "The Commander. Bold, imaginative and strong-willed leaders, always finding a way - or making one.", 
+             'id': "Si Jenderal. Lo ambisius, tegas, dan punya bakat alami buat mimpin dan naklukin tantangan."}
+}
+
 class NLPHandler:
+    # ... code before ...
+    # (The existing static methods load_models, translate_to_english, extract_keywords are unchanged)
+    # Re-writing predict_all to include explanation logic
+
     @staticmethod
     def load_models():
         global _model_mbti, _model_emotion
         print(f"📂 Loading models from: {BASE_DIR}")
-        print(f"📁 MBTI path: {MBTI_PATH} (exists: {os.path.exists(MBTI_PATH)})")
-        print(f"📁 Emotion path: {EMOTION_PATH} (exists: {os.path.exists(EMOTION_PATH)})")
         
         if _model_mbti is None and os.path.exists(MBTI_PATH):
             try: 
                 _model_mbti = joblib.load(MBTI_PATH)
-                print("✅ MBTI model loaded successfully")
-            except Exception as e: 
-                print(f"❌ MBTI model load error: {e}")
+            except Exception as e: print(f"❌ MBTI Load Error: {e}")
         
         if _model_emotion is None and os.path.exists(EMOTION_PATH):
             try: 
                 _model_emotion = joblib.load(EMOTION_PATH)
-                print("✅ Emotion model loaded successfully")
-            except Exception as e: 
-                print(f"❌ Emotion model load error: {e}")
+            except Exception as e: print(f"❌ Emotion Load Error: {e}")
 
     @staticmethod
     def translate_to_english(text):
@@ -79,25 +113,40 @@ class NLPHandler:
         NLPHandler.load_models() 
         processed_text = NLPHandler.translate_to_english(raw_text)
         
+        # --- MBTI PREDICTION ---
         mbti_result = "UNKNOWN"
         if _model_mbti:
             try: mbti_result = _model_mbti.predict([processed_text])[0]
             except: pass
         
+        # --- EMOTION PREDICTION & CONFIDENCE ---
         emotion_data = {"id": "Kompleks", "en": "Complex", "raw": "unknown"}
+        confidence_score = 0.0
+        
         if _model_emotion:
             try:
                 pred_label = "neutral"
                 if hasattr(_model_emotion, "predict_proba"):
                     probs = _model_emotion.predict_proba([processed_text])[0]
                     classes = _model_emotion.classes_
+                    
+                    # Neutral dampening logic
                     neutral_indices = [i for i, c in enumerate(classes) if c.lower() == 'neutral']
                     if neutral_indices:
                         idx = neutral_indices[0]
                         if probs[idx] < 0.65: probs[idx] = 0.0
+                        
+                    # RE-NORMALIZE PROBABILITIES
+                    # Agar sisa probabilitas naik proporsional. 
+                    # Misal: [0.1, 0.1, 0.1, 0.0] -> [0.33, 0.33, 0.33, 0.0]
+                    total_prob = np.sum(probs)
+                    if total_prob > 0:
+                        probs = probs / total_prob
+                        
                     if np.sum(probs) > 0:
                         best_idx = np.argmax(probs)
                         pred_label = classes[best_idx]
+                        confidence_score = float(probs[best_idx])
                     else:
                         pred_label = _model_emotion.predict([processed_text])[0]
                 else:
@@ -106,11 +155,40 @@ class NLPHandler:
                 indo_label = EMOTION_TRANSLATIONS.get(pred_label, pred_label.capitalize())
                 emotion_data = {"id": indo_label, "en": pred_label.capitalize(), "raw": pred_label}
             except: pass
-            
+
+        # --- REASONING GENERATION ---
+        mbti_desc = MBTI_EXPLANATIONS.get(mbti_result, {
+            'en': "Complex personality type.", 
+            'id': "Kepribadian yang cukup kompleks."
+        })
+
+        # Emotion Reasoning
+        conf_percent = int(confidence_score * 100)
+        emotion_reasoning = {
+            'en': f"Based on the text pattern, the AI is {conf_percent}% confident this matches '{emotion_data['en']}'.",
+            'id': f"Dari gaya tulisan lo, AI {conf_percent}% yakin mood lo lagi '{emotion_data['id']}'."
+        }
+        if conf_percent < 50 and confidence_score > 0:
+            emotion_reasoning = {
+                'en': f"The sentiment is mixed, but slightly leans towards '{emotion_data['en']}' ({conf_percent}%).",
+                'id': f"Mood lo campur aduk, tapi agak condong ke '{emotion_data['id']}' dikit ({conf_percent}%)."
+            }
+
+        # Keywords Reasoning
+        keywords_reasoning = {
+            'en': "These words appeared most frequently and define the main topic.",
+            'id': "Kata-kata ini paling sering muncul dan jadi inti topik lo."
+        }
+
         return {
             "mbti": mbti_result,
             "emotion": emotion_data,
-            "keywords": NLPHandler.extract_keywords(processed_text) 
+            "keywords": NLPHandler.extract_keywords(processed_text),
+            "reasoning": {
+                "mbti": mbti_desc,
+                "emotion": emotion_reasoning,
+                "keywords": keywords_reasoning
+            }
         }
 
     # --- JALUR RESMI: YOUTUBE DATA API ---

api/data/questions.json

@@ -1,58 +1,42 @@
 [
-  {
-    "id": 1,
-    "text_id": "Saya merasa lebih berenergi setelah bergaul dengan banyak orang.",
-    "text_en": "I feel more energized after socializing with a large group of people.",
-    "dimension": "EI",
-    "direction": 1
-  },
-  {
-    "id": 2,
-    "text_id": "Saya lebih suka fokus pada fakta nyata daripada ide abstrak.",
-    "text_en": "I prefer to focus on real facts rather than abstract ideas.",
-    "dimension": "SN",
-    "direction": 1
-  },
-  {
-    "id": 3,
-    "text_id": "Saya mengambil keputusan berdasarkan logika, bukan perasaan.",
-    "text_en": "I make decisions based on logic rather than feelings.",
-    "dimension": "TF",
-    "direction": 1
-  },
-  {
-    "id": 4,
-    "text_id": "Saya suka membuat rencana detail sebelum melakukan sesuatu.",
-    "text_en": "I like to have a detailed plan before doing anything.",
-    "dimension": "JP",
-    "direction": 1
-  },
-  {
-    "id": 5,
-    "text_id": "Saya sering merasa lelah jika harus bersosialisasi terlalu lama.",
-    "text_en": "I often feel drained if I have to socialize for too long.",
-    "dimension": "EI",
-    "direction": -1
-  },
-  {
-    "id": 6,
-    "text_id": "Saya sering membayangkan masa depan dan kemungkinan-kemungkinannya.",
-    "text_en": "I often imagine the future and its possibilities.",
-    "dimension": "SN",
-    "direction": -1
-  },
-  {
-    "id": 7,
-    "text_id": "Saya mudah tersentuh secara emosional oleh cerita orang lain.",
-    "text_en": "I am easily emotionally moved by other people's stories.",
-    "dimension": "TF",
-    "direction": -1
-  },
-  {
-    "id": 8,
-    "text_id": "Saya lebih suka bertindak spontan daripada mengikuti jadwal kaku.",
-    "text_en": "I prefer to be spontaneous rather than following a rigid schedule.",
-    "dimension": "JP",
-    "direction": -1
-  }
+  { "id": 1, "dimension": "EI", "direction": 1, "text_id": "Saya merasa lebih berenergi setelah berinteraksi dengan banyak orang di pesta.", "text_en": "I feel more energized after interacting with many people at a party." },
+  { "id": 2, "dimension": "SN", "direction": 1, "text_id": "Saya lebih suka fokus pada apa yang nyata dan sedang terjadi saat ini.", "text_en": "I prefer to focus on what is real and happening right now." },
+  { "id": 3, "dimension": "TF", "direction": 1, "text_id": "Saya cenderung mengambil keputusan berdasarkan logika dan nalar.", "text_en": "I tend to make decisions based on logic and reason." },
+  { "id": 4, "dimension": "JP", "direction": 1, "text_id": "Saya suka memiliki jadwal yang terencana dan menaatinya.", "text_en": "I like to have a planned schedule and stick to it." },
+  { "id": 5, "dimension": "EI", "direction": -1, "text_id": "Saya sering merasa perlu menyendiri untuk mengisi ulang energi setelah bersosialisasi.", "text_en": "I often feel the need to be alone to recharge after socializing." },
+  { "id": 6, "dimension": "SN", "direction": -1, "text_id": "Saya sering berimajinasi tentang masa depan dan makna di balik segala sesuatu.", "text_en": "I often imagine the future and the meaning behind things." },
+  { "id": 7, "dimension": "TF", "direction": -1, "text_id": "Saya sering membiarkan hati dan perasaan membimbing keputusan saya.", "text_en": "I often let my heart and feelings guide my decisions." },
+  { "id": 8, "dimension": "JP", "direction": -1, "text_id": "Saya lebih suka fleksibel dan membiarkan hal-hal terjadi secara spontan.", "text_en": "I prefer to be flexible and let things happen spontaneously." },
+  { "id": 9, "dimension": "EI", "direction": 1, "text_id": "Saya mudah memulai percakapan dengan orang asing.", "text_en": "I find it easy to start conversations with strangers." },
+  { "id": 10, "dimension": "SN", "direction": 1, "text_id": "Saya lebih percaya pada pengalaman nyata daripada teori abstrak.", "text_en": "I trust actual experience more than abstract theories." },
+  { "id": 11, "dimension": "TF", "direction": 1, "text_id": "Kejujuran dan kebenaran lebih penting daripada menjaga perasaan orang lain.", "text_en": "Honesty and truth are more important than sparing someone's feelings." },
+  { "id": 12, "dimension": "JP", "direction": 1, "text_id": "Saya merasa gelisah jika tugas belum selesai atau rencana belum dibuat.", "text_en": "I feel uneasy if tasks are not finished or plans are not made." },
+  { "id": 13, "dimension": "EI", "direction": -1, "text_id": "Saya lebih suka mendengarkan daripada menjadi pusat perhatian.", "text_en": "I prefer listening over being the center of attention." },
+  { "id": 14, "dimension": "SN", "direction": -1, "text_id": "Saya sering tersesat dalam pikiran dan ide-ide saya sendiri.", "text_en": "I often get lost in my own thoughts and ideas." },
+  { "id": 15, "dimension": "TF", "direction": -1, "text_id": "Saya sangat peduli dengan keharmonisan dan menghindari konflik.", "text_en": "I care deeply about harmony and avoid conflict." },
+  { "id": 16, "dimension": "JP", "direction": -1, "text_id": "Saya sering mengerjakan sesuatu pada menit-menit terakhir.", "text_en": "I often do things at the last minute." },
+  { "id": 17, "dimension": "EI", "direction": 1, "text_id": "Saya punya lingkaran teman yang sangat luas.", "text_en": "I have a very wide circle of friends." },
+  { "id": 18, "dimension": "SN", "direction": 1, "text_id": "Saya sangat teliti dan memperhatikan detail kecil.", "text_en": "I am very meticulous and pay attention to small details." },
+  { "id": 19, "dimension": "TF", "direction": 1, "text_id": "Saya bisa tetap tenang dan objektif dalam situasi emosional.", "text_en": "I can remain calm and objective in emotional situations." },
+  { "id": 20, "dimension": "JP", "direction": 1, "text_id": "Saya suka membuat daftar tugas (to-do list).", "text_en": "I like making to-do lists." },
+  { "id": 21, "dimension": "EI", "direction": -1, "text_id": "Saya merasa canggung di keramaian.", "text_en": "I feel awkward in crowds." },
+  { "id": 22, "dimension": "SN", "direction": -1, "text_id": "Saya sering berpikir 'bagaimana jika' daripada 'apa adanya'.", "text_en": "I often think 'what if' rather than 'what is'." },
+  { "id": 23, "dimension": "TF", "direction": -1, "text_id": "Saya mudah empati dan merasakan apa yang dirasakan orang lain.", "text_en": "I easily empathize and feel what others are feeling." },
+  { "id": 24, "dimension": "JP", "direction": -1, "text_id": "Saya tidak suka dikekang oleh aturan yang ketat.", "text_en": "I dislike being constrained by strict rules." },
+  { "id": 25, "dimension": "EI", "direction": 1, "text_id": "Saya aktif berpartisipasi dalam diskusi kelompok.", "text_en": "I actively participate in group discussions." },
+  { "id": 26, "dimension": "SN", "direction": 1, "text_id": "Saya lebih suka instruksi yang jelas dan langkah demi langkah.", "text_en": "I prefer clear, step-by-step instructions." },
+  { "id": 27, "dimension": "TF", "direction": 1, "text_id": "Saya lebih sering menganalisis masalah daripada menghibur orang.", "text_en": "I analyze problems more often than I comfort people." },
+  { "id": 28, "dimension": "JP", "direction": 1, "text_id": "Saya merasa puas ketika menyelesaikan pekerjaan jauh sebelum tenggat waktu.", "text_en": "I feel satisfied when finishing work well before the deadline." },
+  { "id": 29, "dimension": "EI", "direction": -1, "text_id": "Saya butuh waktu lama untuk terbuka pada orang baru.", "text_en": "It takes me a long time to open up to new people." },
+  { "id": 30, "dimension": "SN", "direction": -1, "text_id": "Saya sering melihat pola dan hubungan yang tidak dilihat orang lain.", "text_en": "I often see patterns and connections that others miss." },
+  { "id": 31, "dimension": "TF", "direction": -1, "text_id": "Saya sering mengambil keputusan berdasarkan kata hati.", "text_en": "I often make decisions based on my gut feeling." },
+  { "id": 32, "dimension": "JP", "direction": -1, "text_id": "Saya menikmati kejutan dan perubahan rencana.", "text_en": "I enjoy surprises and changes in plans." },
+  { "id": 33, "dimension": "EI", "direction": 1, "text_id": "Saya sering bertindak dulu, berpikir kemudian.", "text_en": "I often act first, think later." },
+  { "id": 34, "dimension": "SN", "direction": 1, "text_id": "Saya fokus pada fakta dan data, bukan opini.", "text_en": "I focus on facts and data, not opinions." },
+  { "id": 35, "dimension": "TF", "direction": 1, "text_id": "Debat intelektual lebih menarik daripada obrolan ringan.", "text_en": "Intellectual debates are more interesting than small talk." },
+  { "id": 36, "dimension": "JP", "direction": 1, "text_id": "Saya suka lingkungan kerja yang teratur dan terstruktur.", "text_en": "I like an organized and structured work environment." },
+  { "id": 37, "dimension": "EI", "direction": -1, "text_id": "Saya lebih produktif saat bekerja sendirian.", "text_en": "I am more productive when working alone." },
+  { "id": 38, "dimension": "SN", "direction": -1, "text_id": "Saya suka berfilsafat tentang makna kehidupan.", "text_en": "I like philosophizing about the meaning of life." },
+  { "id": 39, "dimension": "TF", "direction": -1, "text_id": "Saya sulit bersikap tegas jika itu menyakiti orang lain.", "text_en": "I find it hard to be firm if it hurts others." },
+  { "id": 40, "dimension": "JP", "direction": -1, "text_id": "Saya sering memulai proyek baru tanpa menyelesaikan yang lama.", "text_en": "I often start new projects without finishing old ones." }
 ]

api/index.py

@@ -1,4 +1,5 @@
 from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
 from dotenv import load_dotenv
 from .core.nlp_handler import NLPHandler
 import os
@@ -65,6 +66,24 @@ def health_check():
         "api_key_detected": has_key 
     }
 
+@app.get("/", response_class=HTMLResponse)
+def read_root():
+    return """
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>Sentimind API</title>
+        <style>
+            body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+            iframe { width: 100%; height: 100%; border: none; }
+        </style>
+    </head>
+    <body>
+        <iframe src="https://sentimind.vercel.app"></iframe>
+    </body>
+    </html>
+    """
+
 # --- ROUTE YOUTUBE BARU ---
 @app.get("/api/youtube/{video_id}") 
 def analyze_youtube_video(video_id: str):
@@ -87,6 +106,7 @@ def analyze_youtube_video(video_id: str):
             "mbti_type": result["mbti"],
             "emotion": result["emotion"],
             "keywords": result["keywords"],
+            "reasoning": result["reasoning"],
             "video": data.get("video"),
             "comments": data.get("comments", []),
             "fetched_text": text_for_analysis
@@ -99,5 +119,6 @@ def analyze_youtube_video(video_id: str):
         "mbti_type": result["mbti"],
         "emotion": result["emotion"],
         "keywords": result["keywords"],
+        "reasoning": result["reasoning"],
         "fetched_text": data
     }

api/predict.py

@@ -21,5 +21,6 @@ def predict_endpoint(input_data: UserInput):
         "success": True,
         "mbti_type": result["mbti"],
         "emotion": result["emotion"],
-        "keywords": result["keywords"]
+        "keywords": result["keywords"],
+        "reasoning": result["reasoning"]
     }

src/app/analyzer/page.tsx

@@ -1,7 +1,20 @@
 "use client";
 import { useState } from "react";
 import { useLanguage } from "@/app/providers";
-import { Search, Tag, Smile, BrainCircuit, Lightbulb, BookOpen, MessageSquare, FileText, Youtube, AlertCircle, ThumbsUp, ThumbsDown } from "lucide-react";
+import {
+  Search,
+  Tag,
+  Smile,
+  BrainCircuit,
+  Lightbulb,
+  BookOpen,
+  MessageSquare,
+  FileText,
+  Youtube,
+  AlertCircle,
+  ThumbsUp,
+  ThumbsDown,
+} from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 
 export default function AnalysisPage() {
@@ -46,10 +59,22 @@ export default function AnalysisPage() {
 
       guideTitle: "How to get accurate results?",
       guides: [
-        { icon: MessageSquare, title: "Be Expressive", text: "Write naturally about your feelings, opinions, or daily life experiences." },
-        { icon: BookOpen, title: "Length Matters", text: "Try to write at least 2-3 sentences. Short texts like 'Hello' won't reveal much." },
-        { icon: Lightbulb, title: "Honesty is Key", text: "Don't overthink it. The AI analyzes your subconscious writing style." }
-      ]
+        {
+          icon: MessageSquare,
+          title: "Be Expressive",
+          text: "Write naturally about your feelings, opinions, or daily life experiences.",
+        },
+        {
+          icon: BookOpen,
+          title: "Length Matters",
+          text: "Try to write at least 2-3 sentences. Short texts like 'Hello' won't reveal much.",
+        },
+        {
+          icon: Lightbulb,
+          title: "Honesty is Key",
+          text: "Don't overthink it. The AI analyzes your subconscious writing style.",
+        },
+      ],
     },
     id: {
       title: "Analisis Teks",
@@ -77,20 +102,33 @@ export default function AnalysisPage() {
 
       guideTitle: "Biar Hasilnya Akurat",
       guides: [
-        { icon: MessageSquare, title: "Yang Ekspresif Dong", text: "Tulis aja secara natural soal perasaan atau opini lo. Gak usah jaim." },
-        { icon: BookOpen, title: "Jangan Pendek-pendek", text: "Minimal 2-3 kalimat lah. Kalau cuma 'Halo' doang, AI-nya bakal bingung." },
-        { icon: Lightbulb, title: "Jujur Itu Kunci", text: "Gak usah overthink. AI bakal baca pola penulisan bawah sadar lo." }
-      ]
-    }
+        {
+          icon: MessageSquare,
+          title: "Yang Ekspresif Dong",
+          text: "Tulis aja secara natural soal perasaan atau opini lo. Gak usah jaim.",
+        },
+        {
+          icon: BookOpen,
+          title: "Jangan Pendek-pendek",
+          text: "Minimal 2-3 kalimat lah. Kalau cuma 'Halo' doang, AI-nya bakal bingung.",
+        },
+        {
+          icon: Lightbulb,
+          title: "Jujur Itu Kunci",
+          text: "Gak usah overthink. AI bakal baca pola penulisan bawah sadar lo.",
+        },
+      ],
+    },
   };
 
   const content = t[lang];
 
   // --- HELPER BUAT AMBIL ID YOUTUBE DARI LINK ---
   const extractVideoId = (url: string) => {
-    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+    const regExp =
+      /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
     const match = url.match(regExp);
-    return (match && match[2].length === 11) ? match[2] : null;
+    return match && match[2].length === 11 ? match[2] : null;
   };
 
   const getErrorMessage = () => {
@@ -130,7 +168,9 @@ export default function AnalysisPage() {
       setLoading(true);
       try {
         const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
-        const res = await fetch(`${apiUrl}/api/youtube/${videoId}`, { method: "GET" });
+        const res = await fetch(`${apiUrl}/api/youtube/${videoId}`, {
+          method: "GET",
+        });
         const data = await res.json();
         if (data.success) {
           setResult(data);
@@ -175,7 +215,9 @@ export default function AnalysisPage() {
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>
+  ) => {
     if (e.key === "Enter" && !e.shiftKey) {
       const isMobile = window.innerWidth < 768;
       if (mode === "text" && isMobile) {
@@ -189,20 +231,18 @@ export default function AnalysisPage() {
   const getKeywords = () => {
     if (!result?.keywords) return [];
     if (Array.isArray(result.keywords)) return result.keywords;
-    return lang === 'id' ? result.keywords.id : result.keywords.en;
+    return lang === "id" ? result.keywords.id : result.keywords.en;
   };
 
   const currentKeywords = getKeywords();
 
   return (
     <div className="w-full pt-28 pb-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center font-sans">
-
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         className="w-full max-w-4xl mx-auto text-center space-y-4 z-10"
       >
-
         <div>
           <h1 className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 pb-2">
             {content.title}
@@ -215,20 +255,32 @@ export default function AnalysisPage() {
         {/* --- TOMBOL SWITCH MODE (TEXT vs YOUTUBE) --- */}
         <div className="grid grid-cols-2 gap-3 mt-8 w-full max-w-[340px] mx-auto">
           <button
-            onClick={() => { setMode("text"); setResult(null); setErrorType(null); }}
+            onClick={() => {
+              setMode("text");
+              setResult(null);
+              setErrorType(null);
+            }}
             className={`flex items-center justify-center gap-2 py-2.5 rounded-full font-bold text-sm transition-all border border-transparent
-                ${mode === "text"
-                ? "bg-orange-600 text-white shadow-lg shadow-orange-500/20"
-                : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"}`}
+                ${
+                  mode === "text"
+                    ? "bg-orange-600 text-white shadow-lg shadow-orange-500/20"
+                    : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"
+                }`}
           >
             <FileText size={16} /> {content.modeText}
           </button>
           <button
-            onClick={() => { setMode("youtube"); setResult(null); setErrorType(null); }}
+            onClick={() => {
+              setMode("youtube");
+              setResult(null);
+              setErrorType(null);
+            }}
             className={`flex items-center justify-center gap-2 py-2.5 rounded-full font-bold text-sm transition-all border border-transparent
-                ${mode === "youtube"
-                ? "bg-[#FF0000] text-white shadow-lg shadow-[#FF0000]/20"
-                : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"}`}
+                ${
+                  mode === "youtube"
+                    ? "bg-[#FF0000] text-white shadow-lg shadow-[#FF0000]/20"
+                    : "bg-gray-100 dark:bg-white/5 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-white/10"
+                }`}
           >
             <Youtube size={16} /> {content.modeYoutube}
           </button>
@@ -236,17 +288,19 @@ export default function AnalysisPage() {
 
         <div className="liquid-glass p-1.5 shadow-2xl mt-6 max-w-3xl mx-auto w-full">
           <div className="bg-white/50 dark:bg-black/20 rounded-xl p-4 backdrop-blur-sm">
-
             {/* AREA INPUT */}
             <div className="min-h-[140px] flex flex-col justify-center">
               {mode === "text" ? (
                 <textarea
                   value={inputText}
-                  onChange={(e) => { setInputText(e.target.value); setErrorType(null); }}
+                  onChange={(e) => {
+                    setInputText(e.target.value);
+                    setErrorType(null);
+                  }}
                   onKeyDown={handleKeyDown}
                   placeholder={content.placeholder}
                   className="w-full bg-transparent outline-none text-base md:text-lg h-full resize-none placeholder:text-gray-400 dark:text-white text-gray-900"
-                  style={{ minHeight: '140px' }}
+                  style={{ minHeight: "140px" }}
                 />
               ) : (
                 <div className="py-2 px-2 w-full">
@@ -257,14 +311,18 @@ export default function AnalysisPage() {
                     <input
                       type="text"
                       value={youtubeUrl}
-                      onChange={(e) => { setYoutubeUrl(e.target.value); setErrorType(null); }}
+                      onChange={(e) => {
+                        setYoutubeUrl(e.target.value);
+                        setErrorType(null);
+                      }}
                       onKeyDown={handleKeyDown}
                       placeholder={content.ytPlaceholder}
                       className="w-full bg-white/50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl py-4 pl-12 pr-4 text-lg font-medium focus:border-[#FF0000] focus:ring-2 focus:ring-[#FF0000]/20 focus:outline-none transition-all text-gray-800 dark:text-white placeholder:text-gray-400"
                     />
                   </div>
                   <p className="text-xs text-left mt-3 ml-1 text-gray-500 dark:text-gray-400 flex items-center gap-1 pl-1">
-                    <Lightbulb size={12} className="text-yellow-500" /> {content.ytTip}
+                    <Lightbulb size={12} className="text-yellow-500" />{" "}
+                    {content.ytTip}
                   </p>
                 </div>
               )}
@@ -272,17 +330,19 @@ export default function AnalysisPage() {
 
             {/* ERROR MSG */}
             <AnimatePresence>
-                {currentErrorMsg && (
-                <motion.div 
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-3 text-red-600 dark:text-red-400 overflow-hidden"
+              {currentErrorMsg && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: "auto", opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  className="mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-3 text-red-600 dark:text-red-400 overflow-hidden"
                 >
-                    <AlertCircle size={20} className="shrink-0" />
-                    <span className="text-sm font-bold text-left">{currentErrorMsg}</span>
+                  <AlertCircle size={20} className="shrink-0" />
+                  <span className="text-sm font-bold text-left">
+                    {currentErrorMsg}
+                  </span>
                 </motion.div>
-                )}
+              )}
             </AnimatePresence>
 
             <div className="flex justify-end mt-4 pt-2 border-t border-gray-500/10">
@@ -290,11 +350,17 @@ export default function AnalysisPage() {
                 onClick={handleAnalyze}
                 disabled={loading}
                 className={`flex items-center gap-2 text-white px-6 py-2 rounded-lg font-bold transition-all disabled:opacity-50 shadow-lg text-sm md:text-base
-                  ${mode === "youtube"
-                    ? "bg-[#FF0000] hover:bg-red-700 hover:shadow-[#FF0000]/30"
-                    : "bg-orange-600 hover:bg-orange-700 hover:shadow-orange-500/30"}`}
+                  ${
+                    mode === "youtube"
+                      ? "bg-[#FF0000] hover:bg-red-700 hover:shadow-[#FF0000]/30"
+                      : "bg-orange-600 hover:bg-orange-700 hover:shadow-orange-500/30"
+                  }`}
               >
-                {loading ? content.btnLoading : (mode === "youtube" ? content.btnYoutube : content.btnAnalyze)}
+                {loading
+                  ? content.btnLoading
+                  : mode === "youtube"
+                  ? content.btnYoutube
+                  : content.btnAnalyze}
                 {!loading && <Search className="w-4 h-4" />}
               </button>
             </div>
@@ -303,192 +369,246 @@ export default function AnalysisPage() {
 
         {/* HASIL */}
         <AnimatePresence>
-            {result && (
-            <motion.div 
-                initial={{ opacity: 0, y: 100 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 100 }}
-                transition={{ type: "spring", damping: 20 }}
-                className="w-full max-w-3xl mx-auto mt-6 space-y-4 text-left"
+          {result && (
+            <motion.div
+              initial={{ opacity: 0, y: 100 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 100 }}
+              transition={{ type: "spring", damping: 20 }}
+              className="w-full max-w-3xl mx-auto mt-6 space-y-4 text-left"
             >
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 {/* MBTI */}
-                <div className="liquid-glass p-4 border-t-4 border-orange-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full">
-                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
+                <div className="liquid-glass p-5 border-t-4 border-orange-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full group hover:bg-white/80 dark:hover:bg-white/5 transition-all">
+                  <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
                     <BrainCircuit size={12} /> {content.resMBTI}
-                    </h3>
-                    <div className="flex-1 flex items-center justify-center">
-                    <div className="text-3xl font-black text-orange-600">{result.mbti_type}</div>
+                  </h3>
+                  <div className="flex-1 flex flex-col items-center justify-center gap-2">
+                    <div className="text-4xl font-black text-orange-600 tracking-tight">
+                      {result.mbti_type}
                     </div>
+                    {/* Reasoning MBTI */}
+                    {result.reasoning && (
+                      <p className="text-xs text-center text-gray-600 dark:text-gray-300 leading-relaxed px-2 font-medium">
+                        {result.reasoning.mbti?.[lang] ||
+                          "Analisis kepribadian mendalam."}
+                      </p>
+                    )}
+                  </div>
                 </div>
+
                 {/* EMOTION */}
-                <div className="liquid-glass p-4 border-t-4 border-green-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full">
-                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
+                <div className="liquid-glass p-5 border-t-4 border-green-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl flex flex-col h-full group hover:bg-white/80 dark:hover:bg-white/5 transition-all">
+                  <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-2">
                     <Smile size={12} /> {content.resSentiment}
-                    </h3>
-                    <div className="flex-1 flex items-center justify-center">
-                    <div className="text-xl font-bold capitalize text-green-600 dark:text-green-400 truncate px-2 text-center">
-                        {result.emotion ? (result.emotion[lang] || result.emotion.id || result.emotion) : result.sentiment}
-                    </div>
+                  </h3>
+                  <div className="flex-1 flex flex-col items-center justify-center gap-2">
+                    <div className="text-2xl font-bold capitalize text-green-600 dark:text-green-400 truncate px-2 text-center">
+                      {result.emotion
+                        ? result.emotion[lang] ||
+                          result.emotion.id ||
+                          result.emotion
+                        : result.sentiment}
                     </div>
+                    {/* Reasoning Emotion */}
+                    {result.reasoning && (
+                      <p className="text-xs text-center text-gray-600 dark:text-gray-300 leading-relaxed px-2 font-medium">
+                        {result.reasoning.emotion?.[lang] ||
+                          "Analisis sentimen teks."}
+                      </p>
+                    )}
+                  </div>
                 </div>
+
                 {/* KEYWORDS */}
-                <div className="liquid-glass p-4 border-t-4 border-blue-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl h-full flex flex-col">
-                    <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-3">
+                <div className="liquid-glass p-5 border-t-4 border-blue-500 bg-white/60 dark:bg-black/40 backdrop-blur-md rounded-xl h-full flex flex-col group hover:bg-white/80 dark:hover:bg-white/5 transition-all">
+                  <h3 className="text-[10px] font-bold uppercase tracking-widest opacity-60 flex justify-center gap-2 items-center text-gray-800 dark:text-gray-200 mb-3">
                     <Tag size={12} /> {content.resKeywords}
-                    </h3>
+                  </h3>
+                  <div className="flex-1 flex flex-col items-center justify-center gap-3">
                     <div className="flex flex-wrap gap-2 justify-center items-center w-full">
-                    {currentKeywords.slice(0, 3).map((k: string, i: number) => (
-                        <span key={i} className="bg-orange-100 dark:bg-orange-900/30 px-3 py-1 rounded-full text-xs font-bold text-orange-700 dark:text-orange-200 border border-orange-200 dark:border-orange-800/50 capitalize">
-                        {k}
-                        </span>
-                    ))}
+                      {currentKeywords
+                        .slice(0, 3)
+                        .map((k: string, i: number) => (
+                          <span
+                            key={i}
+                            className="bg-orange-100 dark:bg-orange-900/30 px-3 py-1.5 rounded-full text-xs font-bold text-orange-700 dark:text-orange-200 border border-orange-200 dark:border-orange-800/50 capitalize shadow-sm"
+                          >
+                            {k}
+                          </span>
+                        ))}
                     </div>
+                    {/* Reasoning Keywords */}
+                    {result.reasoning && (
+                      <p className="text-[10px] text-center text-gray-500 dark:text-gray-400 mt-1 italic">
+                        {result.reasoning.keywords?.[lang] ||
+                          "Kata kunci dominan."}
+                      </p>
+                    )}
+                  </div>
                 </div>
-                </div>
+              </div>
 
-                {/* PREVIEW CONTENT - YouTube Style */}
-                {(result.video || result.fetched_text) && (
+              {/* PREVIEW CONTENT - YouTube Style */}
+              {(result.video || result.fetched_text) && (
                 <div className="space-y-4">
-
-                    {/* YouTube Video Card with Thumbnail */}
-                    {result.video && (
+                  {/* YouTube Video Card with Thumbnail */}
+                  {result.video && (
                     <div className="liquid-glass overflow-hidden rounded-2xl border border-gray-200 dark:border-white/10">
-                        {/* Thumbnail */}
-                        {result.video.thumbnail && (
+                      {/* Thumbnail */}
+                      {result.video.thumbnail && (
                         <div className="relative aspect-video bg-black">
-                            <img
+                          <img
                             src={result.video.thumbnail}
                             alt={result.video.title}
                             className="w-full h-full object-cover"
-                            />
-                            <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded font-medium">
+                          />
+                          <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded font-medium">
                             YouTube
-                            </div>
+                          </div>
                         </div>
-                        )}
+                      )}
 
-                        {/* Video Info */}
-                        <div className="p-5 bg-white/60 dark:bg-black/40">
+                      {/* Video Info */}
+                      <div className="p-5 bg-white/60 dark:bg-black/40">
                         <h4 className="text-lg font-bold text-gray-900 dark:text-white leading-tight mb-2">
-                            {result.video.title}
+                          {result.video.title}
                         </h4>
 
                         <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400 mb-4">
-                            <span className="font-medium text-gray-700 dark:text-gray-300">{result.video.channel}</span>
-                            <span>•</span>
-                            <span>{Number(result.video.viewCount).toLocaleString()} views</span>
-                            <span>•</span>
-                            <span className="flex items-center gap-1">
-                            <ThumbsUp size={14} /> {Number(result.video.likeCount).toLocaleString()}
-                            </span>
+                          <span className="font-medium text-gray-700 dark:text-gray-300">
+                            {result.video.channel}
+                          </span>
+                          <span>•</span>
+                          <span>
+                            {Number(result.video.viewCount).toLocaleString()}{" "}
+                            views
+                          </span>
+                          <span>•</span>
+                          <span className="flex items-center gap-1">
+                            <ThumbsUp size={14} />{" "}
+                            {Number(result.video.likeCount).toLocaleString()}
+                          </span>
                         </div>
 
                         {/* Description */}
                         <div className="bg-gray-100 dark:bg-white/5 p-4 rounded-xl">
-                            <div className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
-                            {showFullDesc ? result.video.description : result.video.description?.slice(0, 250)}
-                            {result.video.description?.length > 250 && !showFullDesc && '...'}
-                            </div>
-                            {result.video.description?.length > 250 && (
+                          <div className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+                            {showFullDesc
+                              ? result.video.description
+                              : result.video.description?.slice(0, 250)}
+                            {result.video.description?.length > 250 &&
+                              !showFullDesc &&
+                              "..."}
+                          </div>
+                          {result.video.description?.length > 250 && (
                             <button
-                                onClick={() => setShowFullDesc(!showFullDesc)}
-                                className="mt-2 text-sm font-bold text-blue-600 hover:text-blue-700"
+                              onClick={() => setShowFullDesc(!showFullDesc)}
+                              className="mt-2 text-sm font-bold text-blue-600 hover:text-blue-700"
                             >
-                                {showFullDesc ? 'Show less' : 'Show more'}
+                              {showFullDesc ? "Show less" : "Show more"}
                             </button>
-                            )}
-                        </div>
+                          )}
                         </div>
+                      </div>
                     </div>
-                    )}
+                  )}
 
-                    {/* Comments Section - YouTube Style */}
-                    {result.comments && result.comments.length > 0 && (
+                  {/* Comments Section - YouTube Style */}
+                  {result.comments && result.comments.length > 0 && (
                     <div className="liquid-glass p-5 bg-white/60 dark:bg-black/40 rounded-2xl border border-gray-200 dark:border-white/10">
-                        <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                      <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                         <MessageSquare size={16} />
                         {result.comments.length} Comments
-                        </h3>
-
-                        <div className="space-y-4">
-                        {(showAllComments ? result.comments : result.comments.slice(0, 5)).map((comment: any, idx: number) => (
-                            <div key={idx} className="flex gap-3">
+                      </h3>
+
+                      <div className="space-y-4">
+                        {(showAllComments
+                          ? result.comments
+                          : result.comments.slice(0, 5)
+                        ).map((comment: any, idx: number) => (
+                          <div key={idx} className="flex gap-3">
                             {/* Avatar */}
                             {comment.authorImage ? (
-                                <img
+                              <img
                                 src={comment.authorImage}
                                 alt={comment.author}
                                 className="w-10 h-10 rounded-full shrink-0 object-cover"
-                                />
+                              />
                             ) : (
-                                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
-                                {comment.author?.charAt(0).toUpperCase() || 'A'}
-                                </div>
+                              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
+                                {comment.author?.charAt(0).toUpperCase() || "A"}
+                              </div>
                             )}
 
                             {/* Comment Content */}
                             <div className="flex-1 min-w-0">
-                                <div className="flex items-center gap-2 mb-1">
+                              <div className="flex items-center gap-2 mb-1">
                                 <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
-                                    {comment.author}
+                                  {comment.author}
                                 </span>
                                 <span className="text-xs text-gray-400">
-                                    {comment.publishedAt && new Date(comment.publishedAt).toLocaleDateString()}
+                                  {comment.publishedAt &&
+                                    new Date(
+                                      comment.publishedAt
+                                    ).toLocaleDateString()}
                                 </span>
-                                </div>
-                                <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
+                              </div>
+                              <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                                 {comment.text}
-                                </p>
-                                <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+                              </p>
+                              <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                                 <span className="flex items-center gap-1 hover:text-gray-700 cursor-pointer">
-                                    <ThumbsUp size={14} /> {comment.likeCount || 0}
+                                  <ThumbsUp size={14} />{" "}
+                                  {comment.likeCount || 0}
                                 </span>
                                 <span className="flex items-center gap-1 hover:text-gray-700 cursor-pointer">
-                                    <ThumbsDown size={14} />
+                                  <ThumbsDown size={14} />
                                 </span>
                                 {comment.replyCount > 0 && (
-                                    <span className="text-blue-600 font-medium">
+                                  <span className="text-blue-600 font-medium">
                                     {comment.replyCount} replies
-                                    </span>
+                                  </span>
                                 )}
-                                </div>
-                            </div>
+                              </div>
                             </div>
+                          </div>
                         ))}
-                        </div>
+                      </div>
 
-                        {result.comments.length > 5 && (
+                      {result.comments.length > 5 && (
                         <button
-                            onClick={() => setShowAllComments(!showAllComments)}
-                            className="mt-4 w-full py-3 text-sm font-bold text-blue-600 hover:text-blue-700 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 rounded-xl transition-colors"
+                          onClick={() => setShowAllComments(!showAllComments)}
+                          className="mt-4 w-full py-3 text-sm font-bold text-blue-600 hover:text-blue-700 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 rounded-xl transition-colors"
                         >
-                            {showAllComments ? '▲ Show Less' : `▼ View all ${result.comments.length} comments`}
+                          {showAllComments
+                            ? "▲ Show Less"
+                            : `▼ View all ${result.comments.length} comments`}
                         </button>
-                        )}
+                      )}
                     </div>
-                    )}
+                  )}
 
-                    {/* Fallback for transcript-only data */}
-                    {!result.video && result.fetched_text && (
+                  {/* Fallback for transcript-only data */}
+                  {!result.video && result.fetched_text && (
                     <div className="liquid-glass p-5 bg-white/60 dark:bg-black/40 rounded-2xl border border-gray-200 dark:border-white/10">
-                        <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+                      <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
                         <FileText size={16} /> Transcript
-                        </h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
+                      </h3>
+                      <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
                         {result.fetched_text}
-                        </p>
+                      </p>
                     </div>
-                    )}
+                  )}
                 </div>
-                )}
+              )}
             </motion.div>
-            )}
+          )}
         </AnimatePresence>
 
         {/* GUIDES */}
         {!result && (
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.3 }}
@@ -500,8 +620,10 @@ export default function AnalysisPage() {
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
               {content.guides.map((item, idx) => (
-                <div key={idx} className="group p-6 border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 rounded-xl hover:shadow-lg transition-all duration-300">
-
+                <div
+                  key={idx}
+                  className="group p-6 border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 rounded-xl hover:shadow-lg transition-all duration-300"
+                >
                   <div className="p-2.5 bg-orange-100 dark:bg-orange-500/20 w-fit rounded-lg mb-4 text-orange-600 dark:text-orange-400 group-hover:scale-110 transition-transform duration-300">
                     <item.icon className="w-5 h-5" />
                   </div>
@@ -518,8 +640,7 @@ export default function AnalysisPage() {
             </div>
           </motion.div>
         )}
-
       </motion.div>
     </div>
   );
-}
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Sparkles, BrainCircuit, Search, BookOpen } from "lucide-react"; 
+import { Sparkles, BrainCircuit, Search, BookOpen } from "lucide-react";
 import { useLanguage } from "@/app/providers";
 import { Button } from "@/components/ui/button";
 import { motion, Variants } from "framer-motion";
@@ -18,10 +18,19 @@ export default function Home() {
       btnStart: "Start Analysis",
       btnLibrary: "Explore Types",
       features: [
-        { title: "MBTI Prediction", desc: "Predicts one of 16 personality types based on your writing style." },
-        { title: "Sentiment Analysis", desc: "Detects the dominant emotional tone and mood in your text." },
-        { title: "Keyword Extraction", desc: "Highlights key topics and patterns from your daily conversations." }
-      ]
+        {
+          title: "MBTI Prediction",
+          desc: "Predicts one of 16 personality types based on your writing style.",
+        },
+        {
+          title: "Sentiment Analysis",
+          desc: "Detects the dominant emotional tone and mood in your text.",
+        },
+        {
+          title: "Keyword Extraction",
+          desc: "Highlights key topics and patterns from your daily conversations.",
+        },
+      ],
     },
     id: {
       badge: "Profil Kepribadian AI",
@@ -31,11 +40,20 @@ export default function Home() {
       btnStart: "Mulai Analisis",
       btnLibrary: "Kamus MBTI",
       features: [
-        { title: "Prediksi MBTI", desc: "Tebak satu dari 16 tipe kepribadian based on gaya tulisan lo." },
-        { title: "Analisis Sentimen", desc: "Cek vibes tulisan lo, apakah lagi positif banget atau malah gloomy." },
-        { title: "Ekstraksi Kata Kunci", desc: "Highlight topik-topik yang sering lo bahas tanpa sadar." }
-      ]
-    }
+        {
+          title: "Prediksi MBTI",
+          desc: "Tebak satu dari 16 tipe kepribadian based on gaya tulisan lo.",
+        },
+        {
+          title: "Analisis Sentimen",
+          desc: "Cek vibes tulisan lo, apakah lagi positif banget atau malah gloomy.",
+        },
+        {
+          title: "Ekstraksi Kata Kunci",
+          desc: "Highlight topik-topik yang sering lo bahas tanpa sadar.",
+        },
+      ],
+    },
   };
 
   const content = t[lang];
@@ -43,89 +61,115 @@ export default function Home() {
 
   const containerVariants: Variants = {
     hidden: { opacity: 0 },
-    visible: { 
+    visible: {
       opacity: 1,
-      transition: { 
+      transition: {
         staggerChildren: 0.15,
-        delayChildren: 0.1
-      }
-    }
+        delayChildren: 0.1,
+      },
+    },
   };
 
   const itemVariants: Variants = {
     hidden: { y: 20, opacity: 0 },
-    visible: { 
-      y: 0, 
+    visible: {
+      y: 0,
       opacity: 1,
-      transition: { type: "spring", stiffness: 100 }
-    }
+      transition: { type: "spring", stiffness: 100 },
+    },
   };
 
   return (
-    <motion.div 
+    <motion.div
       initial="hidden"
       animate="visible"
       variants={containerVariants}
       className="flex flex-col items-center justify-start pt-28 md:pt-32 font-sans gap-8 w-full min-h-screen"
     >
-      
       <div className="flex flex-col items-center justify-center text-center gap-4 relative w-full px-4 max-w-4xl mx-auto">
-        
         {/* Badge */}
-        <motion.div variants={itemVariants} className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50/50 dark:bg-orange-950/30 text-orange-600 dark:text-orange-400 text-xs font-medium border border-orange-200 dark:border-orange-800">
+        <motion.div
+          variants={itemVariants}
+          className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50/50 dark:bg-orange-950/30 text-orange-600 dark:text-orange-400 text-xs font-medium border border-orange-200 dark:border-orange-800"
+        >
           <Sparkles className="w-3 h-3" />
           <span>{content.badge}</span>
         </motion.div>
 
         {/* Title */}
-        <motion.h1 variants={itemVariants} className="text-5xl md:text-7xl font-black tracking-tighter text-gray-900 dark:text-white leading-[1.1] pb-2">
-          {content.titleLine1} <span className="text-transparent bg-clip-text bg-gradient-to-br from-orange-500 to-amber-600">{content.titleLine2}</span>
+        <motion.h1
+          variants={itemVariants}
+          className="text-5xl md:text-7xl font-black tracking-tighter text-gray-900 dark:text-white leading-[1.1] pb-2"
+        >
+          {content.titleLine1}{" "}
+          <span className="text-transparent bg-clip-text bg-gradient-to-br from-orange-500 to-amber-600">
+            {content.titleLine2}
+          </span>
         </motion.h1>
 
-        <motion.p variants={itemVariants} className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl leading-relaxed">
+        <motion.p
+          variants={itemVariants}
+          className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl leading-relaxed"
+        >
           {content.desc}
         </motion.p>
 
         {/* Action Buttons */}
-        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-8 w-full">
-          
-          <Button asChild size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg shadow-sm cursor-pointer bg-orange-600 hover:bg-orange-700 text-white border-transparent">
-             <Link href="/analyzer">
-                <Search className="w-4 h-4 mr-2" />
-                {content.btnStart}
-             </Link>
-          </Button>
-          
-          <Button asChild variant="outline" size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg border-gray-200 dark:border-white/10 hover:bg-gray-100 dark:hover:bg-white/5 bg-transparent cursor-pointer">
-             <Link href="/types">
-                <BookOpen className="w-4 h-4 mr-2" />
-                {content.btnLibrary}
-             </Link>
+        <motion.div
+          variants={itemVariants}
+          className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-6 w-full"
+        >
+          <Button
+            asChild
+            size="lg"
+            className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg shadow-sm cursor-pointer bg-orange-600 hover:bg-orange-700 text-white border-transparent"
+          >
+            <Link href="/analyzer">
+              <Search className="w-4 h-4 mr-2" />
+              {content.btnStart}
+            </Link>
           </Button>
 
+          <Button
+            asChild
+            variant="outline"
+            size="lg"
+            className="w-full sm:w-auto h-12 px-8 text-base font-semibold rounded-lg border-gray-200 dark:border-white/10 hover:bg-gray-100 dark:hover:bg-white/5 bg-transparent cursor-pointer"
+          >
+            <Link href="/types">
+              <BookOpen className="w-4 h-4 mr-2" />
+              {content.btnLibrary}
+            </Link>
+          </Button>
         </motion.div>
 
         {/* Features Grid */}
-        <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-20 pb-20 w-full text-left">
+        <motion.div
+          variants={itemVariants}
+          className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8 pb-12 w-full text-left"
+        >
           {content.features.map((item, i) => {
             const Icon = icons[i];
             return (
-              <motion.div 
-                key={i} 
+              <motion.div
+                key={i}
                 whileHover={{ y: -5 }}
                 className="group p-6 border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 rounded-xl hover:shadow-lg transition-all duration-300"
               >
                 <div className="p-2.5 bg-orange-100 dark:bg-orange-500/20 w-fit rounded-lg mb-4 text-orange-600 dark:text-orange-400 group-hover:scale-110 transition-transform duration-300">
                   <Icon className="w-5 h-5" />
                 </div>
-                <h3 className="text-sm font-bold mb-2 text-gray-900 dark:text-white tracking-tight">{item.title}</h3>
-                <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">{item.desc}</p>
+                <h3 className="text-sm font-bold mb-2 text-gray-900 dark:text-white tracking-tight">
+                  {item.title}
+                </h3>
+                <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
+                  {item.desc}
+                </p>
               </motion.div>
             );
           })}
         </motion.div>
-
       </div>
     </motion.div>
   );
-}
+}

src/app/quiz/page.tsx

@@ -4,7 +4,14 @@ import { useState, useEffect } from "react";
 import { useLanguage } from "@/app/providers";
 import Link from "next/link";
 import { mbtiDatabase } from "@/data/mbti";
-import { CheckCircle2, Clock, ShieldCheck } from "lucide-react";
+import {
+  CheckCircle2,
+  Clock,
+  ShieldCheck,
+  ChevronLeft,
+  ChevronRight,
+  Send,
+} from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 
 type Question = {
@@ -13,10 +20,12 @@ type Question = {
   text_en: string;
 };
 
+const QUESTIONS_PER_PAGE = 5;
+
 export default function QuizPage() {
   const { lang } = useLanguage();
   const [questions, setQuestions] = useState<Question[]>([]);
-  const [step, setStep] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
   const [answers, setAnswers] = useState<Record<string, number>>({});
   const [result, setResult] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
@@ -33,11 +42,15 @@ export default function QuizPage() {
       retry: "Retake Quiz",
       submitError: "Failed to calculate result.",
       infoTitle: "Things to know",
+      prev: "Previous",
+      next: "Next",
+      submit: "Submit Quiz",
+      progress: "Page",
       infos: [
-        { icon: Clock, text: "Takes less than 2 minutes to complete." },
-        { icon: CheckCircle2, text: "Answer instinctively, don't overthink." },
-        { icon: ShieldCheck, text: "No right or wrong answers." }
-      ]
+        { icon: Clock, text: "Takes about 5 minutes." },
+        { icon: CheckCircle2, text: "Answer instinctively." },
+        { icon: ShieldCheck, text: "No right or wrong answers." },
+      ],
     },
     id: {
       loading: "Lagi nyiapin soal...",
@@ -50,12 +63,16 @@ export default function QuizPage() {
       retry: "Ulangi Tes",
       submitError: "Gagal ngitung hasil nih.",
       infoTitle: "Info Penting",
+      prev: "Sebelumnya",
+      next: "Lanjut",
+      submit: "Lihat Hasil",
+      progress: "Halaman",
       infos: [
-        { icon: Clock, text: "Gak sampe 2 menit kok, santai." },
-        { icon: CheckCircle2, text: "Jawab spontan aja, gak usah mikir keras." },
-        { icon: ShieldCheck, text: "Gak ada jawaban bener atau salah." }
-      ]
-    }
+        { icon: Clock, text: "Sekitar 5 menitan." },
+        { icon: CheckCircle2, text: "Jawab spontan aja." },
+        { icon: ShieldCheck, text: "Gak ada jawaban salah." },
+      ],
+    },
   };
 
   const content = t[lang];
@@ -70,25 +87,44 @@ export default function QuizPage() {
       });
   }, []);
 
-  const handleAnswer = (val: number) => {
-    const currentQ = questions[step];
-    setAnswers((prev) => ({ ...prev, [currentQ.id]: val }));
+  const totalPages = Math.ceil(questions.length / QUESTIONS_PER_PAGE);
+  const currentQuestions = questions.slice(
+    currentPage * QUESTIONS_PER_PAGE,
+    (currentPage + 1) * QUESTIONS_PER_PAGE
+  );
+
+  const handleAnswer = (qId: number, val: number) => {
+    setAnswers((prev) => ({ ...prev, [qId]: val }));
+  };
+
+  const isPageComplete = currentQuestions.every(
+    (q) => answers[q.id] !== undefined
+  );
 
-    if (step < questions.length - 1) {
-      setStep(step + 1);
+  const handleNext = () => {
+    if (currentPage < totalPages - 1) {
+      setCurrentPage(currentPage + 1);
+      window.scrollTo({ top: 0, behavior: "smooth" });
     } else {
-      submitAnswers({ ...answers, [currentQ.id]: val });
+      submitAnswers();
     }
   };
 
-  const submitAnswers = async (finalAnswers: Record<string, number>) => {
+  const handlePrev = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const submitAnswers = async () => {
     setLoading(true);
     try {
       const apiUrl = process.env.NEXT_PUBLIC_API_URL || "";
       const res = await fetch(`${apiUrl}/api/quiz`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ answers: finalAnswers }),
+        body: JSON.stringify({ answers: answers }),
       });
       const data = await res.json();
       setResult(data.mbti);
@@ -99,31 +135,34 @@ export default function QuizPage() {
     }
   };
 
-  if (loading) return (
-    <div className="pt-40 flex items-center justify-center font-bold text-orange-600 animate-pulse">
-      {content.loading}
-    </div>
-  );
+  if (loading && !result)
+    return (
+      <div className="pt-40 flex items-center justify-center font-bold text-orange-600 animate-pulse">
+        {content.loading}
+      </div>
+    );
 
   if (result) {
     const data = mbtiDatabase[result];
-    const contentData = lang === 'en' ? data?.en : data?.id;
+    const contentData = lang === "en" ? data?.en : data?.id;
 
     return (
       <div className="w-full pt-28 pb-12 flex flex-col justify-center items-center font-sans relative px-4">
-        <motion.div 
+        <motion.div
           initial={{ scale: 0.9, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
-          transition={{ type: "spring", duration: 0.6 }}
           className="liquid-glass p-8 md:p-12 text-center bg-white/40 dark:bg-black/20 border border-white/20 max-w-2xl w-full rounded-3xl shadow-2xl"
         >
-
           <h2 className="text-sm font-bold opacity-60 uppercase tracking-widest text-gray-800 dark:text-gray-200 mb-4">
             {content.result}
           </h2>
 
-          <div className={`p-6 rounded-2xl border-2 bg-white/50 dark:bg-black/40 backdrop-blur-md mb-8 ${data?.color || 'border-gray-500'}`}>
-            <motion.div 
+          <div
+            className={`p-6 rounded-2xl border-2 bg-white/50 dark:bg-black/40 backdrop-blur-md mb-8 ${
+              data?.color || "border-gray-500"
+            }`}
+          >
+            <motion.div
               initial={{ scale: 0 }}
               animate={{ scale: 1 }}
               transition={{ delay: 0.3, type: "spring" }}
@@ -144,7 +183,7 @@ export default function QuizPage() {
               href={`/types/${result}`}
               className="px-8 py-3 bg-orange-600 text-white rounded-xl font-bold hover:bg-orange-700 transition-all shadow-lg hover:shadow-orange-500/30"
             >
-              {lang === 'en' ? "Read Full Profile" : "Baca Profil Lengkap"}
+              {lang === "en" ? "Read Full Profile" : "Baca Profil Lengkap"}
             </Link>
 
             <button
@@ -154,7 +193,6 @@ export default function QuizPage() {
               {content.retry}
             </button>
           </div>
-
         </motion.div>
       </div>
     );
@@ -162,17 +200,14 @@ export default function QuizPage() {
 
   if (questions.length === 0) return null;
 
-  const currentQuestionText = lang === 'en' ? questions[step].text_en : questions[step].text_id;
-
   return (
     <div className="w-full pt-28 pb-12 px-4 sm:px-6 lg:px-8 font-sans flex flex-col items-center">
       <div className="max-w-3xl w-full z-10">
-
         {/* HEADER */}
-        <motion.div 
+        <motion.div
           initial={{ y: -20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
-          className="text-center mb-12"
+          className="text-center mb-8"
         >
           <h1 className="text-4xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 pb-2 mb-2">
             {content.title}
@@ -182,98 +217,166 @@ export default function QuizPage() {
           </p>
         </motion.div>
 
-        {/* CARD SOAL */}
-        <AnimatePresence mode="wait">
-          <motion.div 
-            key={step}
-            initial={{ x: 50, opacity: 0 }}
-            animate={{ x: 0, opacity: 1 }}
-            exit={{ x: -50, opacity: 0 }}
-            transition={{ duration: 0.3 }}
-            className="liquid-glass p-6 md:p-10 bg-white/50 dark:bg-black/30 backdrop-blur-md shadow-2xl border border-white/20 rounded-3xl"
-          >
-            <div className="flex justify-between items-end mb-6 border-b border-gray-500/10 pb-4">
-              <span className="text-xs font-bold uppercase tracking-widest opacity-50 text-gray-700 dark:text-gray-300">
-                {content.questionLabel}
-              </span>
-              <span className="text-2xl font-black text-orange-600">
-                {step + 1} <span className="text-sm font-medium text-gray-400">/ {questions.length}</span>
-              </span>
-            </div>
-
-            <h2 className="text-xl md:text-3xl font-bold mb-12 text-center leading-snug min-h-[100px] flex items-center justify-center text-gray-900 dark:text-white">
-              {currentQuestionText}
-            </h2>
+        {/* PROGRESS BAR */}
+        <div className="w-full mb-8">
+          <div className="flex justify-between text-xs font-bold text-gray-500 mb-2 uppercase tracking-wide">
+            <span>
+              {content.progress} {currentPage + 1} / {totalPages}
+            </span>
+            <span>{Math.round((currentPage / totalPages) * 100)}%</span>
+          </div>
+          <div className="w-full h-2 bg-gray-200 dark:bg-white/10 rounded-full overflow-hidden">
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: `${((currentPage + 1) / totalPages) * 100}%` }}
+              className="h-full bg-orange-500 rounded-full"
+            />
+          </div>
+        </div>
 
-            <div className="relative">
-              <div className="hidden md:flex justify-between absolute -top-8 w-full text-xs font-bold opacity-60 px-2">
-                <span className="text-red-500">{content.disagree}</span>
-                <span className="text-green-500">{content.agree}</span>
+        {/* QUESTIONS LIST (PAGINATED) */}
+        <div className="space-y-8">
+          {currentQuestions.map((q, idx) => (
+            <motion.div
+              key={q.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: idx * 0.1 }}
+              className="liquid-glass p-6 md:p-8 bg-white/50 dark:bg-black/30 backdrop-blur-md shadow-lg border border-white/20 rounded-3xl"
+            >
+              <div className="mb-6">
+                <span className="text-xs font-bold uppercase tracking-widest opacity-50 text-gray-700 dark:text-gray-300 block mb-2">
+                  {content.questionLabel}{" "}
+                  {currentPage * QUESTIONS_PER_PAGE + idx + 1}
+                </span>
+                <h3 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white leading-snug">
+                  {lang === "en" ? q.text_en : q.text_id}
+                </h3>
               </div>
 
-              <div className="flex justify-between items-center gap-2 md:gap-4">
-                {[-3, -2, -1, 0, 1, 2, 3].map((val) => (
-                  <motion.button
-                    key={val}
-                    whileHover={{ scale: 1.2 }}
-                    whileTap={{ scale: 0.9 }}
-                    onClick={() => handleAnswer(val)}
-                    className={`
-                      group relative rounded-full border-2 transition-all duration-300 flex items-center justify-center shadow-sm
-                      ${val === 0
-                        ? 'w-10 h-10 md:w-12 md:h-12 border-gray-300 text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10'
-                        : 'w-12 h-12 md:w-16 md:h-16'
-                      }
-                      ${val < 0
-                        ? 'border-red-400/50 text-red-500 hover:bg-red-500 hover:border-red-500 hover:text-white'
-                        : val > 0
-                          ? 'border-green-400/50 text-green-500 hover:bg-green-500 hover:border-green-500 hover:text-white'
-                          : ''
-                      }
-                    `}
-                    title={`${val}`}
-                  >
-                    <span className={`
-                      absolute rounded-full transition-all duration-300
-                      ${Math.abs(val) === 3 ? 'w-3 h-3 md:w-4 md:h-4' : ''}
-                      ${Math.abs(val) === 2 ? 'w-2.5 h-2.5 md:w-3 md:h-3' : ''}
-                      ${Math.abs(val) === 1 ? 'w-2 h-2 md:w-2 md:h-2' : ''}
-                      ${val === 0 ? 'w-1.5 h-1.5 bg-gray-400' : 'bg-current'}
-                      group-hover:bg-white
-                    `}></span>
-                    <span className="md:hidden absolute -bottom-6 text-[10px] font-bold opacity-0 group-hover:opacity-100 transition-opacity text-gray-500">
-                      {val === -3 ? 'Sgt Tdk' : val === 3 ? 'Sgt Iya' : val}
-                    </span>
-                  </motion.button>
-                ))}
-              </div>
+              {/* SCALE INPUT */}
+              <div className="relative pt-6">
+                <div className="hidden md:flex justify-between absolute top-0 w-full text-[10px] font-bold opacity-60 px-2 uppercase tracking-wider">
+                  <span className="text-red-500">{content.disagree}</span>
+                  <span className="text-green-500">{content.agree}</span>
+                </div>
 
-              <div className="flex justify-between mt-6 text-[10px] font-bold opacity-60 uppercase md:hidden tracking-wider">
-                <span className="text-red-500">{content.disagree}</span>
-                <span className="text-green-500">{content.agree}</span>
+                <div className="flex justify-between items-center gap-2">
+                  {[-3, -2, -1, 0, 1, 2, 3].map((val) => (
+                    <button
+                      key={val}
+                      onClick={() => handleAnswer(q.id, val)}
+                      className={`
+                                        group relative rounded-full transition-all duration-200 flex items-center justify-center
+                                        ${
+                                          val === 0
+                                            ? "w-8 h-8 md:w-10 md:h-10 border-2 border-gray-300 text-gray-400"
+                                            : "w-10 h-10 md:w-14 md:h-14 border-2"
+                                        }
+                                        ${
+                                          answers[q.id] === val
+                                            ? "scale-110 ring-4 ring-orange-200 dark:ring-orange-900"
+                                            : "hover:scale-105"
+                                        }
+                                        ${
+                                          val < 0
+                                            ? `border-red-400 text-red-500 ${
+                                                answers[q.id] === val
+                                                  ? "bg-red-500 text-white"
+                                                  : "hover:bg-red-50"
+                                              }`
+                                            : val > 0
+                                            ? `border-green-400 text-green-500 ${
+                                                answers[q.id] === val
+                                                  ? "bg-green-500 text-white"
+                                                  : "hover:bg-green-50"
+                                              }`
+                                            : `${
+                                                answers[q.id] === val
+                                                  ? "bg-gray-400 text-white border-gray-400"
+                                                  : ""
+                                              }`
+                                        }
+                                    `}
+                    >
+                      <span
+                        className={`
+                                        rounded-full transition-all
+                                        ${
+                                          Math.abs(val) === 3
+                                            ? "w-3 h-3 md:w-4 md:h-4"
+                                            : ""
+                                        }
+                                        ${
+                                          Math.abs(val) === 2
+                                            ? "w-2.5 h-2.5 md:w-3 md:h-3"
+                                            : ""
+                                        }
+                                        ${
+                                          Math.abs(val) === 1
+                                            ? "w-2 h-2 md:w-2 md:h-2"
+                                            : ""
+                                        }
+                                        ${
+                                          val === 0
+                                            ? "w-1.5 h-1.5"
+                                            : "bg-current"
+                                        }
+                                        ${
+                                          answers[q.id] === val
+                                            ? "bg-white"
+                                            : val === 0
+                                            ? "bg-gray-400"
+                                            : "bg-current"
+                                        }
+                                    `}
+                      ></span>
+                    </button>
+                  ))}
+                </div>
+                <div className="flex justify-between mt-3 text-[10px] font-bold opacity-60 uppercase md:hidden tracking-wider">
+                  <span className="text-red-500">{content.disagree}</span>
+                  <span className="text-green-500">{content.agree}</span>
+                </div>
               </div>
-            </div>
-          </motion.div>
-        </AnimatePresence>
+            </motion.div>
+          ))}
+        </div>
 
-        {/* INFO SECTION */}
-        {!result && (
-          <motion.div 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 0.6 }}
-            transition={{ delay: 0.5 }}
-            className="mt-12 flex flex-col md:flex-row justify-center gap-6 md:gap-12 text-sm text-gray-600 dark:text-gray-400"
+        {/* NAVIGATION BUTTONS */}
+        <div className="flex justify-between items-center mt-12 gap-4 pb-20">
+          <button
+            onClick={handlePrev}
+            disabled={currentPage === 0}
+            className="flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/5 transition-all"
           >
-            {content.infos.map((info, idx) => (
-              <div key={idx} className="flex items-center gap-2 justify-center">
-                <info.icon size={16} />
-                <span>{info.text}</span>
-              </div>
-            ))}
-          </motion.div>
-        )}
+            <ChevronLeft size={20} /> {content.prev}
+          </button>
 
+          <button
+            onClick={handleNext}
+            disabled={!isPageComplete}
+            className={`
+                    flex items-center gap-2 px-8 py-3 rounded-xl font-bold text-white transition-all shadow-lg
+                    ${
+                      isPageComplete
+                        ? "bg-orange-600 hover:bg-orange-700 hover:shadow-orange-500/30 transform hover:-translate-y-1"
+                        : "bg-gray-400 cursor-not-allowed opacity-50"
+                    }
+                `}
+          >
+            {currentPage === totalPages - 1 ? (
+              <>
+                {content.submit} <Send size={18} />
+              </>
+            ) : (
+              <>
+                {content.next} <ChevronRight size={20} />
+              </>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
-}
+}

src/components/Navbar.tsx

@@ -24,14 +24,15 @@ export default function Navbar() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  const getLinkVariant = (path: string) => pathname === path ? "secondary" : "ghost";
+  const getLinkVariant = (path: string) =>
+    pathname === path ? "secondary" : "ghost";
 
   const navLinks = [
-    { href: "/", label: lang === 'en' ? "Home" : "Beranda" },
-    { href: "/analyzer", label: lang === 'en' ? "Analyzer" : "Analisis" },
-    { href: "/quiz", label: lang === 'en' ? "Mini Test" : "Tes Mini" },
-    { href: "/types", label: lang === 'en' ? "Types" : "Tipe" },
-    { href: "/chat", label: lang === 'en' ? "Chat" : "Chat" },
+    { href: "/", label: lang === "en" ? "Home" : "Beranda" },
+    { href: "/analyzer", label: lang === "en" ? "Analyzer" : "Analisis" },
+    { href: "/quiz", label: lang === "en" ? "MBTI Quiz" : "Kuis MBTI" },
+    { href: "/types", label: lang === "en" ? "Types" : "Tipe" },
+    { href: "/chat", label: lang === "en" ? "Chat" : "Chat" },
   ];
 
   return (
@@ -42,20 +43,21 @@ export default function Navbar() {
           flex justify-between items-center px-4 py-3
           /* GANTI BAGIAN TRANSISI DI SINI: */
           transition-all duration-700 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] will-change-[width,top,background]
-          ${isScrolled
-            /* SCROLLED STATE: 
+          ${
+            isScrolled
+              ? /* SCROLLED STATE: 
                - top-4: Turun dikit
                - w-[92%]: Lebar di layar kecil
-               - md:w-[64rem]: KUNCI ANIMASI! Kita set lebar fix (setara max-w-5xl) biar width-nya yang animasi, bukan max-width.
-               - rounded-[12px]: Jadi kotak tumpul (sebelumnya rounded-full)
+               - md:w-[48rem]: KUNCI ANIMASI! Pake w-[48rem] (sama dengan max-w-3xl) biar transisi width-nya mulus.
+                 Jangan pake max-w-3xl karena bakal crash sama transisi width.
+               - rounded-[12px]: Jadi kotak tumpul
             */
-            ? "top-4 w-[92%] md:w-[64rem] rounded-[12px] bg-white/80 dark:bg-black/80 backdrop-blur-md border border-gray-200 dark:border-white/10 shadow-sm"
-            /* DEFAULT STATE:
+                "top-4 w-[92%] md:w-[48rem] rounded-[12px] bg-white/40 dark:bg-black/40 backdrop-blur-xl border border-gray-200 dark:border-white/10 shadow-sm"
+              : /* DEFAULT STATE:
                - top-0: Nempel atas
                - w-full: Lebar penuh
-               - rounded-none: Kotak
             */
-            : "top-0 w-full bg-transparent border-b border-transparent"
+                "top-0 w-full bg-transparent border-b border-transparent"
           }
         `}
       >
@@ -77,11 +79,13 @@ export default function Navbar() {
               asChild
               variant={getLinkVariant(link.href)}
               size="sm"
-              className={`cursor-pointer text-sm font-medium ${pathname === link.href ? "text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30" : "text-gray-600 dark:text-gray-400"}`}
+              className={`cursor-pointer text-sm font-medium ${
+                pathname === link.href
+                  ? "text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30"
+                  : "text-gray-600 dark:text-gray-400"
+              }`}
             >
-              <Link href={link.href}>
-                {link.label}
-              </Link>
+              <Link href={link.href}>{link.label}</Link>
             </Button>
           ))}
         </div>
@@ -103,7 +107,13 @@ export default function Navbar() {
             size="icon"
             className="w-9 h-9 rounded-full text-gray-500"
           >
-            {!mounted ? <div className="w-4 h-4" /> : theme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+            {!mounted ? (
+              <div className="w-4 h-4" />
+            ) : theme === "dark" ? (
+              <Sun className="w-4 h-4" />
+            ) : (
+              <Moon className="w-4 h-4" />
+            )}
           </Button>
 
           {/* Mobile Menu Button */}
@@ -113,7 +123,11 @@ export default function Navbar() {
               size="icon"
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             >
-              {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              {isMobileMenuOpen ? (
+                <X className="w-5 h-5" />
+              ) : (
+                <Menu className="w-5 h-5" />
+              )}
             </Button>
           </div>
         </div>
@@ -124,8 +138,16 @@ export default function Navbar() {
         <div className="fixed inset-0 z-40 bg-white dark:bg-black pt-24 px-6 animate-in slide-in-from-top-10 fade-in duration-200">
           <div className="flex flex-col gap-2">
             {navLinks.map((link) => (
-              <Link key={link.href} href={link.href} onClick={() => setIsMobileMenuOpen(false)}>
-                <Button variant="ghost" size="lg" className="w-full justify-start text-lg font-medium">
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                <Button
+                  variant="ghost"
+                  size="lg"
+                  className="w-full justify-start text-lg font-medium"
+                >
                   {link.label}
                 </Button>
               </Link>
@@ -135,4 +157,4 @@ export default function Navbar() {
       )}
     </>
   );
-}
+}