feat: Add user settings for voice and persona

Introduces a new `UserSettings` interface and default settings. This allows users to customize voice preferences (name, style, gender) and persona characteristics within the application. This enhances personalization and user experience by tailoring interactions to individual needs and preferences.

components/ScenarioCard.tsx

@@ -1,6 +1,8 @@
+
 import React from 'react';
 import { Scenario } from '../types';
-import { Mic, MessageSquare } from 'lucide-react';
+import { Mic, MessageSquare, Info } from 'lucide-react';
+import Tooltip from './Tooltip';
 
 interface ScenarioCardProps {
   scenario: Scenario;
@@ -17,12 +19,20 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
     }
   };
 
+  const difficultyExplanations: Record<string, string> = {
+    'Beginner': 'Low-stakes environment with highly structured feedback and clear cognitive distortions.',
+    'Intermediate': 'Moderate social friction requiring nuanced responses and identifying subtle distortions.',
+    'Advanced': 'High-trigger environment with resistant AI personas to test deep emotional regulation.'
+  };
+
   return (
     <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-200 hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group">
       <div className="flex justify-between items-start mb-4">
-        <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border ${getDifficultyColor(scenario.difficulty)}`}>
-          {scenario.difficulty}
-        </span>
+        <Tooltip content={difficultyExplanations[scenario.difficulty]}>
+          <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border cursor-help ${getDifficultyColor(scenario.difficulty)}`}>
+            {scenario.difficulty}
+          </span>
+        </Tooltip>
         <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
           {scenario.category}
         </span>
@@ -34,31 +44,37 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({ scenario, onSelect }) => {
       <div className="mb-6">
         <div className="flex flex-wrap gap-1.5">
           {scenario.cbtFocus.map(focus => (
-            <span key={focus} className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100">
-              {focus}
-            </span>
+            <Tooltip key={focus} content={`Specific CBT protocol targeting: ${focus}`}>
+              <span className="text-[10px] font-medium bg-slate-50 text-slate-500 px-2 py-0.5 rounded border border-slate-100 cursor-help flex items-center gap-1">
+                {focus}
+              </span>
+            </Tooltip>
           ))}
         </div>
       </div>
 
       <div className="grid grid-cols-2 gap-3 mt-auto">
-        <button 
-          onClick={() => onSelect(scenario, 'text')}
-          className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-100 transition-all font-semibold text-xs border border-slate-200"
-        >
-          <MessageSquare size={14} />
-          Chat
-        </button>
-        <button 
-          onClick={() => onSelect(scenario, 'voice')}
-          className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-all font-semibold text-xs shadow-sm shadow-teal-100"
-        >
-          <Mic size={14} />
-          Voice
-        </button>
+        <Tooltip content="Engage in a structured text-based roleplay with real-time feedback." position="bottom">
+          <button 
+            onClick={() => onSelect(scenario, 'text')}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-50 text-slate-600 hover:bg-slate-100 transition-all font-semibold text-xs border border-slate-200"
+          >
+            <MessageSquare size={14} />
+            Chat
+          </button>
+        </Tooltip>
+        <Tooltip content="Practice verbal emotional regulation and vocal expression in real-time." position="bottom">
+          <button 
+            onClick={() => onSelect(scenario, 'voice')}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition-all font-semibold text-xs shadow-sm shadow-teal-100"
+          >
+            <Mic size={14} />
+            Voice
+          </button>
+        </Tooltip>
       </div>
     </div>
   );
 };
 
-export default ScenarioCard;
+export default React.memo(ScenarioCard);