import { useState, useEffect, useRef } from 'react';
import { 
  MessageSquare, Send, Loader2, History, ArrowLeft, Trash2, BarChart, PieChart, 
  TrendingUp, Zap, User, LogOut, Mail, Lock, UserPlus, LogIn, ChevronRight, 
  ChevronDown, Check, Calendar, Clock, DollarSign, Briefcase, Heart, Home, 
  BarChart2, GitBranch, Sliders, Users, AlertTriangle, Award, BookOpen, 
  CheckCircle, Compass, FileText, HelpCircle, Layers, Maximize2, Minimize2, 
  Paperclip, Percent, RefreshCw, Save, Settings, Share2, Star, ThumbsUp, 
  TrendingDown, X, Bell, Clipboard, Eye, Filter, Map, Plus, Target
} from 'lucide-react';

// Mock data for visualizations
const generateMockData = (type) => {
  switch(type) {
    case 'riskReward':
      return [
        { name: 'Option A', risk: 35, reward: 65, size: 100 },
        { name: 'Option B', risk: 60, reward: 85, size: 100 },
        { name: 'Option C', risk: 20, reward: 40, size: 100 },
      ];
    case 'timeline':
      return [
        { name: 'Research', start: 0, duration: 2, category: 'preparation' },
        { name: 'Planning', start: 2, duration: 1, category: 'preparation' },
        { name: 'Implementation', start: 3, duration: 3, category: 'execution' },
        { name: 'Review', start: 6, duration: 1, category: 'evaluation' },
        { name: 'Adjustment', start: 7, duration: 2, category: 'execution' },
      ];
    case 'sensitivity':
      return [
        { factor: 'Risk Tolerance', current: 0, min: -2, max: 2, step: 0.5, impact: 'high' },
        { factor: 'Time Horizon', current: 0, min: -2, max: 2, step: 0.5, impact: 'medium' },
        { factor: 'Financial Stability', current: 0, min: -2, max: 2, step: 0.5, impact: 'high' },
        { factor: 'Career Growth', current: 0, min: -2, max: 2, step: 0.5, impact: 'medium' },
        { factor: 'Work-Life Balance', current: 0, min: -2, max: 2, step: 0.5, impact: 'low' },
      ];
    case 'peerInsights':
      return {
        optionA: 35,
        optionB: 65,
        satisfactionA: 70,
        satisfactionB: 85,
        sampleSize: 124,
        confidence: 'high'
      };
    default:
      return [];
  }
};

// Mock implementation roadmap data
const mockRoadmapData = {
  phases: [
    {
      name: 'Preparation',
      tasks: [
        { name: 'Research market conditions', duration: '1-2 weeks', status: 'pending' },
        { name: 'Consult with financial advisor', duration: '1 day', status: 'pending' },
        { name: 'Review current portfolio', duration: '3 days', status: 'pending' }
      ]
    },
    {
      name: 'Decision Execution',
      tasks: [
        { name: 'Finalize investment amount', duration: '1 day', status: 'pending' },
        { name: 'Complete paperwork', duration: '1 week', status: 'pending' },
        { name: 'Transfer funds', duration: '3-5 business days', status: 'pending' }
      ]
    },
    {
      name: 'Follow-up',
      tasks: [
        { name: 'Set up monitoring system', duration: '1 day', status: 'pending' },
        { name: 'Schedule quarterly review', duration: '30 minutes', status: 'pending' },
        { name: 'Document decision rationale', duration: '1 hour', status: 'pending' }
      ]
    }
  ]
};

// Mock resource links
const mockResourceLinks = [
  { title: 'Understanding Risk Tolerance', url: '#', source: 'Financial Planning Association', type: 'article' },
  { title: 'Investment Strategies for Volatile Markets', url: '#', source: 'Market Analysis Institute', type: 'research' },
  { title: 'Tax Implications of Different Investment Vehicles', url: '#', source: 'Tax Planning Resources', type: 'guide' },
  { title: 'Retirement Calculator', url: '#', source: 'Financial Tools Hub', type: 'tool' },
  { title: 'Historical Market Performance Data', url: '#', source: 'Economic Research Center', type: 'data' }
];

// Decision categories with specialized factors
const decisionCategories = [
  { 
    id: 'career', 
    name: 'Career', 
    icon: <Briefcase />,
    factors: ['Salary & Benefits', 'Growth Potential', 'Work-Life Balance', 'Company Culture', 'Industry Outlook', 'Location', 'Job Security']
  },
  { 
    id: 'financial', 
    name: 'Financial', 
    icon: <DollarSign />,
    factors: ['Return Potential', 'Risk Level', 'Time Horizon', 'Liquidity Needs', 'Tax Implications', 'Diversification Impact', 'Fees & Costs']
  },
  { 
    id: 'personal', 
    name: 'Personal', 
    icon: <Heart />,
    factors: ['Emotional Impact', 'Relationship Effects', 'Health Considerations', 'Personal Values Alignment', 'Time Commitment', 'Social Impact', 'Long-term Happiness']
  },
  { 
    id: 'business', 
    name: 'Business', 
    icon: <BarChart2 />,
    factors: ['Market Opportunity', 'Competitive Advantage', 'Resource Requirements', 'Scalability', 'Regulatory Considerations', 'Team Capabilities', 'ROI Projections']
  },
  { 
    id: 'housing', 
    name: 'Housing', 
    icon: <Home />,
    factors: ['Location Quality', 'Property Value Trends', 'Monthly Costs', 'Space Requirements', 'Commute Impact', 'School Districts', 'Neighborhood Amenities']
  }
];

// Perspective types for multiple perspective analysis
const perspectiveTypes = [
  { id: 'financial', name: 'Financial Advisor', icon: <DollarSign /> },
  { id: 'career', name: 'Career Coach', icon: <Briefcase /> },
  { id: 'industry', name: 'Industry Expert', icon: <BarChart2 /> },
  { id: 'future', name: 'Future Self (5 Years)', icon: <Compass /> },
  { id: 'risk', name: 'Risk Analyst', icon: <AlertTriangle /> }
];

export default function PremiumGUTDecisionMaker() {
  // Authentication states
  const [authState, setAuthState] = useState('login'); // 'login', 'signup', or 'authenticated'
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [name, setName] = useState('');
  const [currentUser, setCurrentUser] = useState(null);
  const [authError, setAuthError] = useState(null);
  
  // App states
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [conversations, setConversations] = useState([]);
  const [currentConversation, setCurrentConversation] = useState({ id: Date.now(), title: 'New Decision', messages: [] });
  const [showHistory, setShowHistory] = useState(false);
  const [error, setError] = useState(null);
  const [showUserMenu, setShowUserMenu] = useState(false);
  
  // Premium features states
  const [activeView, setActiveView] = useState('chat'); // 'chat', 'builder', 'analysis', 'journal', 'roadmap'
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [scenarioData, setScenarioData] = useState({});
  const [builderStep, setBuilderStep] = useState(0);
  const [activePerspective, setActivePerspective] = useState('financial');
  const [showResourcePanel, setShowResourcePanel] = useState(false);
  const [sensitivityFactors, setSensitivityFactors] = useState(generateMockData('sensitivity'));
  const [confidenceScore, setConfidenceScore] = useState(87);
  const [peerInsights, setPeerInsights] = useState(generateMockData('peerInsights'));
  const [implementationPlan, setImplementationPlan] = useState(mockRoadmapData);
  const [resourceLinks, setResourceLinks] = useState(mockResourceLinks);
  const [decisionJournal, setDecisionJournal] = useState([]);
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const [subscriptionTier, setSubscriptionTier] = useState('premium'); // 'basic', 'premium', 'enterprise'
  
  // Check for existing login on initial load
  useEffect(() => {
    const savedUser = localStorage.getItem('gutCurrentUser');
    if (savedUser) {
      try {
        const parsedUser = JSON.parse(savedUser);
        setCurrentUser(parsedUser);
        setAuthState('authenticated');
        setName(parsedUser.name);
        
        // Load user-specific conversations
        loadUserConversations(parsedUser.email);
        
        // Load decision journal
        loadDecisionJournal(parsedUser.email);
      } catch (e) {
        console.error('Error parsing saved user:', e);
        localStorage.removeItem('gutCurrentUser');
      }
    }
  }, []);
  
  // Load user-specific conversations
  const loadUserConversations = (userEmail) => {
    try {
      const savedConversations = localStorage.getItem(`gutConversations_${userEmail}`);
      if (savedConversations) {
        setConversations(JSON.parse(savedConversations));
      } else {
        setConversations([]);
      }
    } catch (e) {
      console.error('Error loading conversations:', e);
      setConversations([]);
    }
  };
  
  // Load decision journal
  const loadDecisionJournal = (userEmail) => {
    try {
      const savedJournal = localStorage.getItem(`gutJournal_${userEmail}`);
      if (savedJournal) {
        setDecisionJournal(JSON.parse(savedJournal));
      } else {
        // Initialize with sample data for demo purposes
        const sampleJournal = [
          {
            id: 'j1',
            title: 'Job Offer Decision',
            category: 'career',
            date: '2023-10-15',
            decision: 'Accepted startup offer',
            outcome: 'Positive',
            notes: 'The risk paid off. Gained valuable experience and equity has appreciated.',
            followUpDate: '2024-04-15'
          },
          {
            id: 'j2',
            title: 'Investment Portfolio Rebalance',
            category: 'financial',
            date: '2023-11-22',
            decision: 'Increased tech allocation by 10%',
            outcome: 'Mixed',
            notes: 'Initial volatility but trending positive now. Need longer timeframe to fully evaluate.',
            followUpDate: '2024-05-22'
          },
          {
            id: 'j3',
            title: 'Relocation Decision',
            category: 'personal',
            date: '2023-08-05',
            decision: 'Moved to Austin',
            outcome: 'Positive',
            notes: 'Better quality of life, though miss friends from previous location. Career opportunities exceeded expectations.',
            followUpDate: '2024-02-05'
          }
        ];
        setDecisionJournal(sampleJournal);
        localStorage.setItem(`gutJournal_${userEmail}`, JSON.stringify(sampleJournal));
      }
    } catch (e) {
      console.error('Error loading decision journal:', e);
      setDecisionJournal([]);
    }
  };
  
  // Save conversations to localStorage whenever they change
  useEffect(() => {
    if (currentUser && currentUser.email) {
      try {
        localStorage.setItem(`gutConversations_${currentUser.email}`, JSON.stringify(conversations));
      } catch (e) {
        console.error('Error saving conversations:', e);
      }
    }
  }, [conversations, currentUser]);
  
  // Save decision journal to localStorage whenever it changes
  useEffect(() => {
    if (currentUser && currentUser.email) {
      try {
        localStorage.setItem(`gutJournal_${currentUser.email}`, JSON.stringify(decisionJournal));
      } catch (e) {
        console.error('Error saving decision journal:', e);
      }
    }
  }, [decisionJournal, currentUser]);
  
  // Authentication functions
  const handleLogin = (e) => {
    e.preventDefault();
    setAuthError(null);
    
    try {
      // In a real app, this would be an API call to your backend
      const users = JSON.parse(localStorage.getItem('gutUsers') || '[]');
      const user = users.find(u => u.email === email);
      
      if (!user) {
        setAuthError('No account found with this email');
        return;
      }
      
      if (user.password !== password) {
        setAuthError('Incorrect password');
        return;
      }
      
      // Login successful
      setCurrentUser(user);
      setAuthState('authenticated');
      setName(user.name);
      
      // Save current user to localStorage
      localStorage.setItem('gutCurrentUser', JSON.stringify(user));
      
      // Load user-specific conversations
      loadUserConversations(user.email);
      
      // Load decision journal
      loadDecisionJournal(user.email);
      
      // Reset form
      setEmail('');
      setPassword('');
    } catch (e) {
      console.error('Login error:', e);
      setAuthError('An error occurred during login');
    }
  };
  
  const handleSignup = (e) => {
    e.preventDefault();
    setAuthError(null);
    
    // Validate form
    if (!name.trim()) {
      setAuthError('Please enter your name');
      return;
    }
    
    if (!email.trim()) {
      setAuthError('Please enter your email');
      return;
    }
    
    if (!password) {
      setAuthError('Please enter a password');
      return;
    }
    
    if (password !== confirmPassword) {
      setAuthError('Passwords do not match');
      return;
    }
    
    try {
      // In a real app, this would be an API call to your backend
      const users = JSON.parse(localStorage.getItem('gutUsers') || '[]');
      
      // Check if email already exists
      if (users.some(u => u.email === email)) {
        setAuthError('An account with this email already exists');
        return;
      }
      
      // Create new user
      const newUser = { 
        name, 
        email, 
        password, 
        createdAt: new Date().toISOString(),
        subscription: {
          tier: 'premium', // Default to premium for demo
          startDate: new Date().toISOString(),
          endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString() // 30 days trial
        }
      };
      users.push(newUser);
      
      // Save updated users list
      localStorage.setItem('gutUsers', JSON.stringify(users));
      
      // Auto-login after signup
      setCurrentUser(newUser);
      setAuthState('authenticated');
      
      // Save current user to localStorage
      localStorage.setItem('gutCurrentUser', JSON.stringify(newUser));
      
      // Initialize empty conversations for new user
      setConversations([]);
      localStorage.setItem(`gutConversations_${email}`, JSON.stringify([]));
      
      // Initialize empty decision journal
      setDecisionJournal([]);
      localStorage.setItem(`gutJournal_${email}`, JSON.stringify([]));
      
      // Reset form
      setName('');
      setEmail('');
      setPassword('');
      setConfirmPassword('');
    } catch (e) {
      console.error('Signup error:', e);
      setAuthError('An error occurred during signup');
    }
  };
  
  const handleLogout = () => {
    setCurrentUser(null);
    setAuthState('login');
    localStorage.removeItem('gutCurrentUser');
    setConversations([]);
    setCurrentConversation({ id: Date.now(), title: 'New Decision', messages: [] });
    setShowUserMenu(false);
    setActiveView('chat');
  };
  
  const toggleAuthState = () => {
    setAuthState(authState === 'login' ? 'signup' : 'login');
    setAuthError(null);
    setEmail('');
    setPassword('');
    setConfirmPassword('');
    setName('');
  };
  
  // Enhanced mock AI response function for fallback
  const getMockResponse = (userMessage) => {
    // Create a more sophisticated response based on keywords in the user message
    const lowerCaseMessage = userMessage.toLowerCase();
    
    // Career decision template
    if (lowerCaseMessage.includes('job') || lowerCaseMessage.includes('career') || lowerCaseMessage.includes('offer') || lowerCaseMessage.includes('position')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're facing a career decision between staying at an established tech company versus joining an AI healthcare startup. This is a complex decision with significant implications for your financial security, career trajectory, and work-life balance.

## Quantitative Assessment

### Financial Projections (5-Year Outlook)
| Factor | Current Company | AI Healthcare Startup |
|--------|----------------|----------------------|
| Base Salary | $120,000 with 3% annual increases | $105,000 with potential for rapid growth |
| Bonus Potential | 10-15% annually, reliable | 5-10% initially, potentially higher later |
| Equity Value | ~$50,000 vested | $200,000-$800,000 (high variability) |
| Risk-Adjusted Total | $725,000 | $650,000-$1.2M |

### Risk Assessment
* **Current Position**: 85% probability of continued stability, 10% probability of limited advancement, 5% probability of downsizing
* **Startup Option**: 30% probability of significant success, 40% probability of moderate success, 30% probability of failure/acquisition with limited returns

## Industry Context Analysis
The traditional tech sector is showing signs of maturation with 7-12% annual growth, while AI healthcare specifically is projected to grow at 28% CAGR over the next decade. However, regulatory hurdles in healthcare create significant execution risks that could delay returns.

## Personal Circumstances Evaluation
Your current mortgage ($2,800/month) and family planning timeline (next 2-3 years) suggest a need for income stability in the short term. Your partner's business is still in growth phase, creating a household income volatility factor that should be considered.

## Trade-off Analysis
**What You Gain with Current Company:**
* Financial predictability during family planning years
* Established work-life boundaries and policies
* Proven career advancement path
* Lower stress during significant life changes

**What You Gain with Startup:**
* Potential for 3-5x greater equity upside
* Accelerated skill development in emerging field
* Greater autonomy and impact scope
* Positioning in high-growth sector for future opportunities

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Financial security (35%): Current company scores higher
2. Long-term growth potential (25%): Startup scores higher
3. Work-life balance (20%): Current company scores higher
4. Professional fulfillment (20%): Startup scores higher

Weighted total: Current company (7.6/10) vs. Startup (7.2/10)

## Risk Mitigation Strategies
If choosing the startup:
* Negotiate a severance package
* Build 9-month emergency fund before transitioning
* Secure written agreement on flexible hours during family planning period
* Maintain active network in established tech companies

## GUT Feeling
When analyzing all factors, your optimal path likely depends on your risk tolerance during this life stage. The data suggests your current position provides more appropriate stability for your near-term family goals, while the startup represents a calculated risk with higher potential returns.

Trust your gut: Your hesitation about the startup during family planning years seems well-founded in the data. The stability of your current position aligns with your immediate life priorities, though maintaining connections to the AI healthcare space through side projects could position you for a transition in 3-4 years when family needs may be more predictable.

GUT`;
    }
    
    // Financial decision template
    else if (lowerCaseMessage.includes('invest') || lowerCaseMessage.includes('buy') || lowerCaseMessage.includes('purchase') || lowerCaseMessage.includes('money')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're considering a significant financial decision regarding property investment versus market investments. This decision impacts your long-term financial security, liquidity needs, and wealth-building strategy.

## Quantitative Assessment

### 10-Year Projection Comparison
| Factor | Real Estate Investment | Market Investment Portfolio |
|--------|------------------------|----------------------------|
| Initial Investment | $80,000 down payment | $80,000 full investment |
| Projected Annual Return | 4.7% appreciation + 2.3% rental yield | 7.2% average (based on diversified portfolio) |
| Liquidity | Low (3-6 months to liquidate) | High (2-3 days for most assets) |
| Tax Implications | Depreciation benefits, 1031 exchange potential | Capital gains tax, dividend taxation |
| Total Projected Value | $215,000-$240,000 | $160,000-$190,000 |
| Risk-Adjusted Value | $195,000 | $175,000 |

### Risk Assessment
* **Real Estate Option**: 65% probability of projected returns, 25% probability of underperformance, 10% probability of significant appreciation
* **Market Portfolio**: 60% probability of projected returns, 25% probability of underperformance, 15% probability of significant outperformance

## Market Context Analysis
The current real estate market in your area shows a price-to-rent ratio of 19, slightly above the historical average of 17, suggesting moderate overvaluation. Interest rates at 4.5% are favorable for financing but projected to rise to 5.5% within 18 months.

The equity markets are trading at a P/E ratio of 22, above the historical average of 16, indicating potential for limited growth in the near term but strong corporate earnings support long-term prospects.

## Personal Financial Situation
Your current debt-to-income ratio of 28% provides adequate flexibility for real estate investment. Your emergency fund covers 4 months of expenses, which is below the recommended 6 months if taking on additional property debt.

## Trade-off Analysis
**What You Gain with Real Estate:**
* Physical asset with utility value
* Potential for leveraged returns
* Inflation hedge characteristics
* Tax advantages through depreciation
* Potential passive income stream

**What You Gain with Market Portfolio:**
* Superior liquidity
* Lower transaction costs (2% vs 8-10%)
* Diversification across sectors and geographies
* Lower time commitment for management
* Easier incremental investment capability

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Long-term appreciation (30%): Both options score similarly
2. Income generation (25%): Real estate scores higher
3. Liquidity needs (20%): Market portfolio scores higher
4. Management simplicity (15%): Market portfolio scores higher
5. Tax efficiency (10%): Real estate scores higher

Weighted total: Real Estate (7.3/10) vs. Market Portfolio (7.1/10)

## Risk Mitigation Strategies
If choosing real estate:
* Increase emergency fund to 8 months before purchasing
* Select property with strong rental demand history
* Budget 5% of property value annually for maintenance
* Consider property management (7-10% of rental income)

## GUT Feeling
The quantitative analysis shows these options are remarkably balanced for your situation. However, your personal comfort with active management and your desire for tangible assets suggest real estate aligns better with your temperament and goals.

Trust your gut: Your interest in real estate isn't just about the numbers—it reflects your desire for concrete investments you can see and influence directly. This psychological comfort with real assets may provide intangible benefits that make real estate the better choice for you, despite the slightly higher management burden.

GUT`;
    }
    
    // Relationship decision template
    else if (lowerCaseMessage.includes('relationship') || lowerCaseMessage.includes('partner') || lowerCaseMessage.includes('marry') || lowerCaseMessage.includes('move')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're considering relocating to be closer to your partner, which involves significant career, social, and lifestyle changes. This decision impacts multiple dimensions of your life with both immediate and long-term consequences.

## Quantitative Assessment

### Comprehensive Life Impact Analysis
| Factor | Current Location | Partner's Location |
|--------|-----------------|-------------------|
| Career Opportunity Index | 85/100 (current trajectory) | 70/100 (new market) |
| Cost of Living Adjustment | Baseline | +15% higher expenses |
| Social Connection Strength | 90/100 (established) | 40/100 (developing) |
| Relationship Proximity Value | 30/100 (distance strain) | 95/100 (daily connection) |
| Overall Life Satisfaction Projection | 68/100 | 74/100 |

### Transition Cost Analysis
* Relocation expenses: $8,000-$12,000
* Income disruption: 2-4 months of adjustment ($14,000-$28,000)
* New housing setup: $5,000-$7,000
* Social rebuilding investment: $3,000-$5,000 (activities, memberships)
* Total transition investment: $30,000-$52,000

## Relationship Context Analysis
Your relationship has demonstrated stability over 2.5 years with effective communication patterns and aligned core values (85% compatibility on major life goals). The distance factor has been the primary stressor, with communication quality declining 35% during separation periods longer than 3 weeks.

## Career Impact Evaluation
Your industry presence in the new location ranks at 65% of your current market, with 15% fewer opportunities at your experience level. However, remote work options have increased by 140% in your field since 2020, potentially mitigating location disadvantages.

## Trade-off Analysis
**What You Gain with Relocation:**
* Daily in-person connection with partner (+65% relationship interaction time)
* Potential for relationship progression to next stages
* New professional network and perspective
* Fresh environment and lifestyle opportunities
* Resolution of distance-related relationship stress

**What You Sacrifice with Relocation:**
* Established professional network strength
* Proximity to family and friends (7 close connections vs. 2)
* Career momentum in current role
* Financial efficiency (15% higher living costs)
* Independence and established routines

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Relationship health (40%): Relocation scores significantly higher
2. Career development (25%): Current location scores moderately higher
3. Social connections (20%): Current location scores higher
4. Financial optimization (15%): Current location scores higher

Weighted total: Current Location (6.8/10) vs. Relocation (7.7/10)

## Risk Mitigation Strategies
If choosing relocation:
* Negotiate remote work arrangement before moving
* Plan quarterly visits back to maintain professional network
* Create structured timeline for career transition
* Establish clear financial partnership terms with significant other
* Develop 90-day social integration plan for new location

## GUT Feeling
The analysis suggests that despite the tangible costs and career adjustments of relocation, the relationship benefits create a higher projected life satisfaction. Your consistent prioritization of relationship factors in our discussion indicates this aligns with your core values.

Trust your gut: The anxiety you feel appears focused on the logistics and career unknowns rather than the relationship decision itself. This suggests your intuition is already aligned with moving forward with the relocation, but needs reassurance about the practical execution.

GUT`;
    }
    
    // General decision template (fallback)
    else {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're facing a complex decision with multiple variables and significant potential impact on your future trajectory. This requires balancing immediate considerations with long-term implications across several life dimensions.

## Quantitative Assessment

### Impact Projection (3-Year Outlook)
| Factor | Option A | Option B |
|--------|----------|----------|
| Financial Impact | Moderate upside (+15-20%) | Higher variability (-10% to +40%) |
| Time Investment | 25-30 hours weekly | 40-50 hours weekly initially, reducing over time |
| Skill Development | Incremental growth in established areas | Accelerated growth in new domains |
| Network Expansion | Limited to current industry | Cross-sector expansion potential |
| Stress/Wellbeing Impact | Minimal adjustment required | Significant adaptation period (6-9 months) |

### Risk Assessment
* **Option A**: 75% probability of moderate success, 20% probability of stagnation, 5% probability of exceptional outcomes
* **Option B**: 40% probability of significant success, 35% probability of moderate success, 25% probability of setbacks requiring course correction

## Contextual Analysis
Current trends in your situation suggest a 7% annual growth in opportunities related to Option B, compared to 3% for Option A. However, the established foundation you have for Option A provides a 35% higher baseline starting advantage.

## Personal Circumstances Evaluation
Your current commitments, energy levels, and support systems align 70% with the requirements of Option A and 55% with Option B. However, your expressed values and long-term aspirations align 60% with Option A and 85% with Option B.

## Trade-off Analysis
**What You Gain with Option A:**
* Greater certainty and predictability
* Lower initial stress and adaptation requirements
* Continued leverage of established strengths
* More immediate positive feedback
* Better work-life balance in the short term

**What You Gain with Option B:**
* Higher ceiling for long-term outcomes
* Development of new capabilities and perspectives
* Expanded identity and self-concept
* Greater alignment with expressed future aspirations
* More diverse opportunities downstream

## Decision Framework
Using a weighted decision matrix with standard life priorities:
1. Long-term fulfillment (30%): Option B scores higher
2. Short-term wellbeing (25%): Option A scores higher
3. Financial security (20%): Both score similarly with different patterns
4. Personal growth (15%): Option B scores higher
5. Relationship impacts (10%): Option A scores moderately higher

Weighted total: Option A (7.2/10) vs. Option B (7.6/10)

## Risk Mitigation Strategies
If choosing Option B:
* Create a 90-day adaptation plan with clear milestones
* Identify specific support resources before beginning
* Establish boundaries to protect core wellbeing needs
* Develop contingency plans for the most challenging aspects
* Schedule regular reassessment points to evaluate progress

## GUT Feeling
The analysis reveals that while Option A offers more comfort and certainty, Option B better aligns with your expressed deeper values and aspirations. The discomfort associated with Option B appears to be primarily related to the transition rather than the destination.

Trust your gut: Your hesitation about Option B seems centered on the fear of change rather than doubts about its alignment with your authentic self. When you envision yourself one year into either path, notice which creates a sense of expansion versus which creates a sense of safety but potential regret.

GUT`;
    }
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    
    setError(null);
    
    // Add user message to current conversation
    const updatedMessages = [
      ...currentConversation.messages,
      { role: 'user', content: input }
    ];
    
    // Update conversation with user message
    const updatedConversation = {
      ...currentConversation,
      messages: updatedMessages,
      title: currentConversation.messages.length === 0 ? input.slice(0, 30) + (input.length > 30 ? '...' : '') : currentConversation.title
    };
    
    setCurrentConversation(updatedConversation);
    setInput('');
    setIsLoading(true);
    
    try {
      // Sophisticated system prompt for detailed analytical responses
      const systemPrompt = `You are GUT, an advanced decision-making AI assistant that provides sophisticated, data-driven analysis combined with intuitive guidance.

Your responses must include TWO distinct sections:

1. ANALYTICAL DECISION BREAKDOWN (80% of your response):
   - Begin with a concise situation analysis
   - Provide quantitative assessments including financial projections, probability estimates, and comparative metrics
   - Include relevant industry/context analysis with specific data points and trends
   - Directly reference the user's personal circumstances and how they affect the decision
   - Present a detailed trade-off analysis comparing what is gained and lost with each option
   - Use a structured decision framework showing how you reached your conclusion
   - Suggest specific risk mitigation strategies for the recommended path
   - Use tables, bullet points, and clear headings to organize information
   - Include specific numbers, percentages, and timeframes wherever possible

2. GUT FEELING (20% of your response):
   - Provide an intuitive summary that synthesizes the analysis
   - Highlight the emotional and values-based aspects of the decision
   - Offer a clear perspective on what the user's hesitation or enthusiasm might indicate
   - End with "Trust your gut:" followed by a final insight about their decision

Your response should feel like a combination of a management consultant's analysis and a trusted mentor's advice. Be specific, data-driven, and personalized to their exact situation. Avoid generic advice.

Sign your response simply with "GUT" at the very end.`;
      
      // Prepare messages for API
      const apiMessages = [
        { role: 'system', content: systemPrompt },
        ...updatedMessages
      ];
      
      let aiResponse;
      
      try {
        // Try to make API request
        const response = await fetch('https://www.sitebrew.ai/api/ahwmkN/genai', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ messages: apiMessages }),
        });
        
        if (!response.ok) {
          throw new Error(`API responded with status: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data && data.message && data.message.content) {
          aiResponse = data.message.content;
        } else {
          throw new Error('Invalid response format from API');
        }
      } catch (apiError) {
        console.error('API Error:', apiError);
        // Fallback to enhanced mock response
        aiResponse = getMockResponse(input);
      }
      
      // Add AI response to conversation
      const finalConversation = {
        ...updatedConversation,
        messages: [
          ...updatedConversation.messages,
          { role: 'assistant', content: aiResponse }
        ]
      };
      
      setCurrentConversation(finalConversation);
      
      // Update conversations list
      const conversationIndex = conversations.findIndex(c => c.id === currentConversation.id);
      if (conversationIndex >= 0) {
        const newConversations = [...conversations];
        newConversations[conversationIndex] = finalConversation;
        setConversations(newConversations);
      } else {
        setConversations([...conversations, finalConversation]);
      }
      
      // For demo purposes, automatically generate scenario data based on the conversation
      if (currentConversation.messages.length === 0) {
        generateScenarioFromConversation(finalConversation);
      }
    } catch (error) {
      console.error('Error in handleSubmit:', error);
      setError('Something went wrong. Please try again.');
      
      // Add error message to conversation
      const errorConversation = {
        ...updatedConversation,
        messages: [
          ...updatedConversation.messages,
          { role: 'assistant', content: "I'm sorry, I couldn't connect with GUT right now. Please try again later." }
        ]
      };
      setCurrentConversation(errorConversation);
    } finally {
      setIsLoading(false);
    }
  };
  
  // Generate scenario data from conversation for demo purposes
  const generateScenarioFromConversation = (conversation) => {
    const userMessage = conversation.messages[0].content.toLowerCase();
    
    if (userMessage.includes('job') || userMessage.includes('career') || userMessage.includes('offer')) {
      setSelectedCategory(decisionCategories.find(c => c.id === 'career'));
      setScenarioData({
        title: 'Career Decision',
        options: ['Current Company', 'AI Healthcare Startup'],
        factors: [
          { name: 'Salary & Benefits', optionA: 8, optionB: 6, weight: 3 },
          { name: 'Growth Potential', optionA: 5, optionB: 9, weight: 4 },
          { name: 'Work-Life Balance', optionA: 7, optionB: 4, weight: 3 },
          { name: 'Company Culture', optionA: 6, optionB: 8, weight: 2 },
          { name: 'Job Security', optionA: 8, optionB: 4, weight: 3 }
        ],
        context: {
          timeframe: '5 years',
          location: 'San Francisco',
          constraints: 'Family planning in 2-3 years, mortgage payments'
        }
      });
    } else if (userMessage.includes('invest') || userMessage.includes('financial') || userMessage.includes('money')) {
      setSelectedCategory(decisionCategories.find(c => c.id === 'financial'));
      setScenarioData({
        title: 'Investment Decision',
        options: ['Real Estate', 'Market Portfolio'],
        factors: [
          { name: 'Return Potential', optionA: 7, optionB: 8, weight: 4 },
          { name: 'Risk Level', optionA: 5, optionB: 7, weight: 3 },
          { name: 'Liquidity', optionA: 3, optionB: 9, weight: 2 },
          { name: 'Tax Advantages', optionA: 8, optionB: 5, weight: 2 },
          { name: 'Management Effort', optionA: 4, optionB: 8, weight: 3 }
        ],
        context: {
          timeframe: '10 years',
          amount: '$80,000',
          constraints: 'Need some liquidity for potential home purchase in 3-5 years'
        }
      });
    } else if (userMessage.includes('relationship') || userMessage.includes('partner') || userMessage.includes('move')) {
      setSelectedCategory(decisionCategories.find(c => c.id === 'personal'));
      setScenarioData({
        title: 'Relocation Decision',
        options: ['Current Location', 'Partner\'s Location'],
        factors: [
          { name: 'Relationship Quality', optionA: 5, optionB: 9, weight: 4 },
          { name: 'Career Opportunities', optionA: 8, optionB: 6, weight: 3 },
          { name: 'Social Connections', optionA: 9, optionB: 4, weight: 2 },
          { name: 'Cost of Living', optionA: 7, optionB: 5, weight: 2 },
          { name: 'Quality of Life', optionA: 6, optionB: 7, weight: 3 }
        ],
        context: {
          timeframe: 'Long-term',
          relationship: '2.5 years',
          constraints: 'Career momentum, established social network'
        }
      });
    } else {
      setSelectedCategory(decisionCategories.find(c => c.id === 'personal'));
      setScenarioData({
        title: 'General Decision',
        options: ['Option A', 'Option B'],
        factors: [
          { name: 'Short-term Impact', optionA: 7, optionB: 5, weight: 3 },
          { name: 'Long-term Potential', optionA: 5, optionB: 8, weight: 4 },
          { name: 'Risk Level', optionA: 3, optionB: 7, weight: 3 },
          { name: 'Alignment with Values', optionA: 6, optionB: 8, weight: 4 },
          { name: 'Resource Requirements', optionA: 7, optionB: 4, weight: 2 }
        ],
        context: {
          timeframe: '3 years',
          constraints: 'Current commitments, energy levels, support systems'
        }
      });
    }
  };
  
  const startNewConversation = () => {
    const newConversation = { id: Date.now(), title: 'New Decision', messages: [] };
    setCurrentConversation(newConversation);
    setShowHistory(false);
    setActiveView('chat');
    setSelectedCategory(null);
    setScenarioData({});
    setBuilderStep(0);
  };
  
  const loadConversation = (conversation) => {
    setCurrentConversation(conversation);
    setShowHistory(false);
    setActiveView('chat');
    
    // For demo purposes, generate scenario data if it doesn't exist
    if (conversation.messages.length > 0) {
      generateScenarioFromConversation(conversation);
    }
  };
  
  const deleteConversation = (id, e) => {
    e.stopPropagation();
    const newConversations = conversations.filter(c => c.id !== id);
    setConversations(newConversations);
    
    if (currentConversation.id === id) {
      startNewConversation();
    }
  };
  
  // Enhanced markdown rendering function
  const renderMarkdown = (content) => {
    return { __html: content
      // Headers
      .replace(/^# (.*$)/gm, '<h1 class="text-xl font-bold mt-4 mb-2">$1</h1>')
      .replace(/^## (.*$)/gm, '<h2 class="text-lg font-bold mt-3 mb-2 text-[#006D77]">$1</h2>')
      .replace(/^### (.*$)/gm, '<h3 class="text-md font-bold mt-2 mb-1">$1</h3>')
      // Bold and italic
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      // Lists
      .replace(/^\* (.*$)/gm, '<li class="ml-4">• $1</li>')
      .replace(/^- (.*$)/gm, '<li class="ml-4">• $1</li>')
      // Tables (simple conversion)
      .replace(/\| (.*) \|/g, '<div class="table-row">$1</div>')
      .replace(/\|---/g, '')
      .replace(/---\|/g, '')
      // Line breaks
      .replace(/\n/g, '<br />')
    };
  };
  
  // Add decision to journal
  const addToJournal = (decision) => {
    const newEntry = {
      id: `j${Date.now()}`,
      title: scenarioData.title || 'Untitled Decision',
      category: selectedCategory?.id || 'personal',
      date: new Date().toISOString().split('T')[0],
      decision: decision,
      outcome: null,
      notes: '',
      followUpDate: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] // 90 days later
    };
    
    setDecisionJournal([newEntry, ...decisionJournal]);
    
    // Show confirmation
    alert('Decision added to your journal. We\'ll remind you to follow up in 90 days to track the outcome.');
  };
  
  // Premium feature: Scenario Builder component
  const ScenarioBuilder = () => {
    const steps = [
      { name: 'Category', icon: <Compass /> },
      { name: 'Options', icon: <GitBranch /> },
      { name: 'Factors', icon: <Sliders /> },
      { name: 'Context', icon: <FileText /> },
      { name: 'Review', icon: <CheckCircle /> }
    ];
    
    const handleCategorySelect = (category) => {
      setSelectedCategory(category);
      setScenarioData({
        ...scenarioData,
        factors: category.factors.map(f => ({ name: f, optionA: 5, optionB: 5, weight: 3 }))
      });
      setBuilderStep(1);
    };
    
    const handleOptionsChange = (e, index) => {
      const newOptions = [...(scenarioData.options || ['Option A', 'Option B'])];
      newOptions[index] = e.target.value;
      setScenarioData({ ...scenarioData, options: newOptions });
    };
    
    const handleFactorChange = (index, field, value) => {
      const newFactors = [...scenarioData.factors];
      newFactors[index][field] = value;
      setScenarioData({ ...scenarioData, factors: newFactors });
    };
    
    const handleContextChange = (field, value) => {
      const newContext = { ...(scenarioData.context || {}) };
      newContext[field] = value;
      setScenarioData({ ...scenarioData, context: newContext });
    };
    
    const handleTitleChange = (e) => {
      setScenarioData({ ...scenarioData, title: e.target.value });
    };
    
    const handleAddFactor = () => {
      const newFactors = [...(scenarioData.factors || [])];
      newFactors.push({ name: '', optionA: 5, optionB: 5, weight: 3 });
      setScenarioData({ ...scenarioData, factors: newFactors });
    };
    
    const handleRemoveFactor = (index) => {
      const newFactors = [...scenarioData.factors];
      newFactors.splice(index, 1);
      setScenarioData({ ...scenarioData, factors: newFactors });
    };
    
    const calculateWeightedScores = () => {
      if (!scenarioData.factors || scenarioData.factors.length === 0) return { optionA: 0, optionB: 0 };
      
      const totals = scenarioData.factors.reduce(
        (acc, factor) => {
          acc.optionA += (factor.optionA * factor.weight);
          acc.optionB += (factor.optionB * factor.weight);
          acc.totalWeight += factor.weight;
          return acc;
        },
        { optionA: 0, optionB: 0, totalWeight: 0 }
      );
      
      return {
        optionA: Math.round((totals.optionA / totals.totalWeight) * 10) / 10,
        optionB: Math.round((totals.optionB / totals.totalWeight) * 10) / 10
      };
    };
    
    const handleCompleteBuilder = () => {
      // In a real app, this would generate an AI analysis based on the scenario data
      // For demo purposes, we'll just switch to the analysis view
      setActiveView('analysis');
    };
    
    return (
      <div className="flex flex-col h-full">
        {/* Steps indicator */}
        <div className="bg-white p-4 border-b">
          <div className="flex justify-between items-center">
            {steps.map((step, index) => (
              <div 
                key={index} 
                className={`flex flex-col items-center ${index < builderStep ? 'text-green-500' : index === builderStep ? 'text-[#006D77]' : 'text-gray-400'}`}
              >
                <div className={`w-8 h-8 rounded-full flex items-center justify-center mb-1 ${
                  index < builderStep ? 'bg-green-100' : index === builderStep ? 'bg-[#006D77] text-white' : 'bg-gray-100'
                }`}>
                  {index < builderStep ? <Check size={16} /> : step.icon}
                </div>
                <span className="text-xs hidden md:block">{step.name}</span>
              </div>
            ))}
          </div>
        </div>
        
        {/* Step content */}
        <div className="flex-1 overflow-y-auto p-4">
          {builderStep === 0 && (
            <div>
              <h2 className="text-xl font-bold mb-4">What type of decision are you making?</h2>
              <p className="text-gray-600 mb-6">Select a category to get specialized factors and analysis for your decision.</p>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {decisionCategories.map(category => (
                  <div 
                    key={category.id}
                    onClick={() => handleCategorySelect(category)}
                    className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:border-[#006D77] hover:shadow-md cursor-pointer transition-all"
                  >
                    <div className="flex items-center mb-2">
                      <div className="w-10 h-10 rounded-full bg-[#006D77] text-white flex items-center justify-center mr-3">
                        {category.icon}
                      </div>
                      <h3 className="font-semibold text-lg">{category.name}</h3>
                    </div>
                    <p className="text-gray-600 text-sm">
                      {category.id === 'career' && 'Job offers, promotions, career changes, education decisions'}
                      {category.id === 'financial' && 'Investments, major purchases, savings strategies, debt management'}
                      {category.id === 'personal' && 'Relationships, relocations, lifestyle changes, personal development'}
                      {category.id === 'business' && 'Strategy, hiring, expansion, product development, partnerships'}
                      {category.id === 'housing' && 'Buying vs renting, location selection, renovation decisions'}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}
          
          {builderStep === 1 && (
            <div>
              <h2 className="text-xl font-bold mb-4">Name your decision and options</h2>
              <p className="text-gray-600 mb-6">Give your decision a clear title and name the options you're considering.</p>
              
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                <div className="mb-4">
                  <label className="block text-gray-700 text-sm font-medium mb-2">
                    Decision Title
                  </label>
                  <input
                    type="text"
                    value={scenarioData.title || ''}
                    onChange={handleTitleChange}
                    placeholder="e.g., Job Offer Decision, Investment Choice"
                    className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                  />
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                      Option A
                    </label>
                    <input
                      type="text"
                      value={(scenarioData.options && scenarioData.options[0]) || 'Option A'}
                      onChange={(e) => handleOptionsChange(e, 0)}
                      placeholder="e.g., Current Job, Real Estate Investment"
                      className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    />
                  </div>
                  <div>
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                      Option B
                    </label>
                    <input
                      type="text"
                      value={(scenarioData.options && scenarioData.options[1]) || 'Option B'}
                      onChange={(e) => handleOptionsChange(e, 1)}
                      placeholder="e.g., New Job Offer, Stock Market Investment"
                      className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    />
                  </div>
                </div>
              </div>
              
              <div className="flex justify-between">
                <button
                  onClick={() => setBuilderStep(0)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Back
                </button>
                <button
                  onClick={() => setBuilderStep(2)}
                  className="px-4 py-2 bg-[#006D77] text-white rounded-md hover:bg-[#00565E]"
                >
                  Continue
                </button>
              </div>
            </div>
          )}
          
          {builderStep === 2 && (
            <div>
              <h2 className="text-xl font-bold mb-4">Rate factors for each option</h2>
              <p className="text-gray-600 mb-6">Score each factor from 1-10 and set its importance (weight) in your decision.</p>
              
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                <div className="mb-4 grid grid-cols-6 gap-4 font-medium text-sm text-gray-700 border-b pb-2">
                  <div className="col-span-2">Factor</div>
                  <div className="col-span-1 text-center">{(scenarioData.options && scenarioData.options[0]) || 'Option A'}</div>
                  <div className="col-span-1 text-center">{(scenarioData.options && scenarioData.options[1]) || 'Option B'}</div>
                  <div className="col-span-1 text-center">Weight</div>
                  <div className="col-span-1"></div>
                </div>
                
                {scenarioData.factors && scenarioData.factors.map((factor, index) => (
                  <div key={index} className="grid grid-cols-6 gap-4 items-center mb-3">
                    <div className="col-span-2">
                      <input
                        type="text"
                        value={factor.name}
                        onChange={(e) => handleFactorChange(index, 'name', e.target.value)}
                        placeholder="Factor name"
                        className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                      />
                    </div>
                    <div className="col-span-1">
                      <input
                        type="range"
                        min="1"
                        max="10"
                        value={factor.optionA}
                        onChange={(e) => handleFactorChange(index, 'optionA', parseInt(e.target.value))}
                        className="w-full accent-[#006D77]"
                      />
                      <div className="text-center text-sm">{factor.optionA}/10</div>
                    </div>
                    <div className="col-span-1">
                      <input
                        type="range"
                        min="1"
                        max="10"
                        value={factor.optionB}
                        onChange={(e) => handleFactorChange(index, 'optionB', parseInt(e.target.value))}
                        className="w-full accent-[#006D77]"
                      />
                      <div className="text-center text-sm">{factor.optionB}/10</div>
                    </div>
                    <div className="col-span-1">
                      <select
                        value={factor.weight}
                        onChange={(e) => handleFactorChange(index, 'weight', parseInt(e.target.value))}
                        className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                      >
                        <option value="1">Low</option>
                        <option value="3">Medium</option>
                        <option value="5">High</option>
                      </select>
                    </div>
                    <div className="col-span-1 text-center">
                      <button
                        onClick={() => handleRemoveFactor(index)}
                        className="text-red-500 hover:text-red-700"
                      >
                        <X size={18} />
                      </button>
                    </div>
                  </div>
                ))}
                
                <button
                  onClick={handleAddFactor}
                  className="mt-2 text-[#006D77] hover:text-[#00565E] flex items-center"
                >
                  <Plus size={16} className="mr-1" /> Add another factor
                </button>
              </div>
              
              <div className="flex justify-between">
                <button
                  onClick={() => setBuilderStep(1)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Back
                </button>
                <button
                  onClick={() => setBuilderStep(3)}
                  className="px-4 py-2 bg-[#006D77] text-white rounded-md hover:bg-[#00565E]"
                >
                  Continue
                </button>
              </div>
            </div>
          )}
          
          {builderStep === 3 && (
            <div>
              <h2 className="text-xl font-bold mb-4">Add context to your decision</h2>
              <p className="text-gray-600 mb-6">Provide additional details that will help GUT understand your specific situation.</p>
              
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                <div className="mb-4">
                  <label className="block text-gray-700 text-sm font-medium mb-2">
                    Timeframe
                  </label>
                  <input
                    type="text"
                    value={(scenarioData.context && scenarioData.context.timeframe) || ''}
                    onChange={(e) => handleContextChange('timeframe', e.target.value)}
                    placeholder="e.g., 5 years, 6 months, immediate"
                    className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                  />
                </div>
                
                <div className="mb-4">
                  <label className="block text-gray-700 text-sm font-medium mb-2">
                    Key Constraints
                  </label>
                  <textarea
                    value={(scenarioData.context && scenarioData.context.constraints) || ''}
                    onChange={(e) => handleContextChange('constraints', e.target.value)}
                    placeholder="e.g., budget limitations, family considerations, time restrictions"
                    className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent h-24"
                  />
                </div>
                
                <div className="mb-4">
                  <label className="block text-gray-700 text-sm font-medium mb-2">
                    Personal Values
                  </label>
                  <textarea
                    value={(scenarioData.context && scenarioData.context.values) || ''}
                    onChange={(e) => handleContextChange('values', e.target.value)}
                    placeholder="e.g., work-life balance, financial security, career growth"
                    className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent h-24"
                  />
                </div>
                
                {selectedCategory && selectedCategory.id === 'career' && (
                  <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                      Current Career Stage
                    </label>
                    <select
                      value={(scenarioData.context && scenarioData.context.careerStage) || ''}
                      onChange={(e) => handleContextChange('careerStage', e.target.value)}
                      className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    >
                      <option value="">Select career stage</option>
                      <option value="early">Early Career (0-5 years)</option>
                      <option value="mid">Mid Career (5-15 years)</option>
                      <option value="senior">Senior Level (15+ years)</option>
                      <option value="executive">Executive</option>
                      <option value="transition">Career Transition</option>
                    </select>
                  </div>
                )}
                
                {selectedCategory && selectedCategory.id === 'financial' && (
                  <div className="mb-4">
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                      Risk Tolerance
                    </label>
                    <select
                      value={(scenarioData.context && scenarioData.context.riskTolerance) || ''}
                      onChange={(e) => handleContextChange('riskTolerance', e.target.value)}
                      className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    >
                      <option value="">Select risk tolerance</option>
                      <option value="conservative">Conservative</option>
                      <option value="moderate">Moderate</option>
                      <option value="aggressive">Aggressive</option>
                      <option value="very_aggressive">Very Aggressive</option>
                    </select>
                  </div>
                )}
              </div>
              
              <div className="flex justify-between">
                <button
                  onClick={() => setBuilderStep(2)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Back
                </button>
                <button
                  onClick={() => setBuilderStep(4)}
                  className="px-4 py-2 bg-[#006D77] text-white rounded-md hover:bg-[#00565E]"
                >
                  Continue
                </button>
              </div>
            </div>
          )}
          
          {builderStep === 4 && (
            <div>
              <h2 className="text-xl font-bold mb-4">Review your decision scenario</h2>
              <p className="text-gray-600 mb-6">Check that all information is correct before generating your analysis.</p>
              
              <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                <div className="mb-6">
                  <h3 className="font-semibold text-lg mb-2">{scenarioData.title || 'Untitled Decision'}</h3>
                  <div className="flex items-center text-sm text-gray-600 mb-2">
                    <Compass size={16} className="mr-1" />
                    <span>Category: {selectedCategory?.name || 'General'}</span>
                  </div>
                  {scenarioData.context && scenarioData.context.timeframe && (
                    <div className="flex items-center text-sm text-gray-600 mb-2">
                      <Clock size={16} className="mr-1" />
                      <span>Timeframe: {scenarioData.context.timeframe}</span>
                    </div>
                  )}
                </div>
                
                <div className="mb-6">
                  <h4 className="font-medium mb-2">Options</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-gray-50 p-3 rounded">
                      <div className="font-medium">{(scenarioData.options && scenarioData.options[0]) || 'Option A'}</div>
                    </div>
                    <div className="bg-gray-50 p-3 rounded">
                      <div className="font-medium">{(scenarioData.options && scenarioData.options[1]) || 'Option B'}</div>
                    </div>
                  </div>
                </div>
                
                <div className="mb-6">
                  <h4 className="font-medium mb-2">Weighted Scores</h4>
                  <div className="grid grid-cols-2 gap-4 mb-2">
                    <div className="bg-gray-50 p-3 rounded text-center">
                      <div className="text-2xl font-bold text-[#006D77]">{calculateWeightedScores().optionA}</div>
                      <div className="text-sm text-gray-600">{(scenarioData.options && scenarioData.options[0]) || 'Option A'}</div>
                    </div>
                    <div className="bg-gray-50 p-3 rounded text-center">
                      <div className="text-2xl font-bold text-[#E29578]">{calculateWeightedScores().optionB}</div>
                      <div className="text-sm text-gray-600">{(scenarioData.options && scenarioData.options[1]) || 'Option B'}</div>
                    </div>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div 
                      className="bg-[#006D77] h-2.5 rounded-full" 
                      style={{ 
                        width: `${(calculateWeightedScores().optionA / (calculateWeightedScores().optionA + calculateWeightedScores().optionB)) * 100}%` 
                      }}
                    ></div>
                  </div>
                </div>
                
                <div className="mb-6">
                  <h4 className="font-medium mb-2">Factors ({scenarioData.factors?.length || 0})</h4>
                  <div className="max-h-60 overflow-y-auto">
                    {scenarioData.factors && scenarioData.factors.map((factor, index) => (
                      <div key={index} className="border-b border-gray-100 py-2 grid grid-cols-6 gap-2 text-sm">
                        <div className="col-span-2 font-medium">{factor.name}</div>
                        <div className="col-span-1 text-center">{factor.optionA}/10</div>
                        <div className="col-span-1 text-center">{factor.optionB}/10</div>
                        <div className="col-span-2 text-gray-600">
                          Weight: {factor.weight === 1 ? 'Low' : factor.weight === 3 ? 'Medium' : 'High'}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                {scenarioData.context && (
                  <div>
                    <h4 className="font-medium mb-2">Context</h4>
                    <div className="bg-gray-50 p-3 rounded text-sm">
                      {scenarioData.context.constraints && (
                        <div className="mb-2">
                          <span className="font-medium">Constraints:</span> {scenarioData.context.constraints}
                        </div>
                      )}
                      {scenarioData.context.values && (
                        <div className="mb-2">
                          <span className="font-medium">Values:</span> {scenarioData.context.values}
                        </div>
                      )}
                      {scenarioData.context.careerStage && (
                        <div className="mb-2">
                          <span className="font-medium">Career Stage:</span> {scenarioData.context.careerStage}
                        </div>
                      )}
                      {scenarioData.context.riskTolerance && (
                        <div className="mb-2">
                          <span className="font-medium">Risk Tolerance:</span> {scenarioData.context.riskTolerance}
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
              
              <div className="flex justify-between">
                <button
                  onClick={() => setBuilderStep(3)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Back
                </button>
                <button
                  onClick={handleCompleteBuilder}
                  className="px-4 py-2 bg-[#006D77] text-white rounded-md hover:bg-[#00565E] flex items-center"
                >
                  <BarChart size={16} className="mr-2" />
                  Generate Analysis
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  };
  
  // Premium feature: Analysis View component
  const AnalysisView = () => {
    const [activeTab, setActiveTab] = useState('overview');
    
    // Mock data for visualizations
    const riskRewardData = generateMockData('riskReward');
    const timelineData = generateMockData('timeline');
    
    // Calculate weighted scores
    const scores = scenarioData.factors ? scenarioData.factors.reduce(
      (acc, factor) => {
        acc.optionA += (factor.optionA * factor.weight);
        acc.optionB += (factor.optionB * factor.weight);
        acc.totalWeight += factor.weight;
        return acc;
      },
      { optionA: 0, optionB: 0, totalWeight: 0 }
    ) : { optionA: 0, optionB: 0, totalWeight: 1 };
    
    const normalizedScores = {
      optionA: Math.round((scores.optionA / scores.totalWeight) * 10) / 10,
      optionB: Math.round((scores.optionB / scores.totalWeight) * 10) / 10
    };
    
    // Determine recommended option
    const recommendedOption = normalizedScores.optionA > normalizedScores.optionB ? 
      (scenarioData.options && scenarioData.options[0]) || 'Option A' : 
      (scenarioData.options && scenarioData.options[1]) || 'Option B';
    
    return (
      <div className="flex flex-col h-full">
        {/* Analysis header */}
        <div className="bg-white p-4 border-b">
          <div className="flex flex-col md:flex-row md:justify-between md:items-center">
            <div>
              <h2 className="text-xl font-bold">{scenarioData.title || 'Decision Analysis'}</h2>
              <div className="flex items-center text-sm text-gray-600 mt-1">
                <div className="flex items-center mr-4">
                  <Compass size={14} className="mr-1" />
                  <span>{selectedCategory?.name || 'General'}</span>
                </div>
                {scenarioData.context && scenarioData.context.timeframe && (
                  <div className="flex items-center">
                    <Clock size={14} className="mr-1" />
                    <span>{scenarioData.context.timeframe}</span>
                  </div>
                )}
              </div>
            </div>
            <div className="mt-3 md:mt-0 flex items-center">
              <div className="bg-[#006D77] text-white px-3 py-1 rounded-md text-sm flex items-center">
                <CheckCircle size={14} className="mr-1" />
                <span>Confidence: {confidenceScore}%</span>
              </div>
              <button 
                onClick={() => setShowResourcePanel(!showResourcePanel)}
                className="ml-3 text-gray-600 hover:text-gray-800"
              >
                <Paperclip size={18} />
              </button>
            </div>
          </div>
          
          {/* Tabs */}
          <div className="flex mt-4 border-b">
            <button
              onClick={() => setActiveTab('overview')}
              className={`px-4 py-2 text-sm font-medium ${
                activeTab === 'overview' ? 'text-[#006D77] border-b-2 border-[#006D77]' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              Overview
            </button>
            <button
              onClick={() => setActiveTab('perspectives')}
              className={`px-4 py-2 text-sm font-medium ${
                activeTab === 'perspectives' ? 'text-[#006D77] border-b-2 border-[#006D77]' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              Perspectives
            </button>
            <button
              onClick={() => setActiveTab('sensitivity')}
              className={`px-4 py-2 text-sm font-medium ${
                activeTab === 'sensitivity' ? 'text-[#006D77] border-b-2 border-[#006D77]' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              Sensitivity
            </button>
            <button
              onClick={() => setActiveTab('implementation')}
              className={`px-4 py-2 text-sm font-medium ${
                activeTab === 'implementation' ? 'text-[#006D77] border-b-2 border-[#006D77]' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              Implementation
            </button>
            <button
              onClick={() => setActiveTab('insights')}
              className={`px-4 py-2 text-sm font-medium ${
                activeTab === 'insights' ? 'text-[#006D77] border-b-2 border-[#006D77]' : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              Peer Insights
            </button>
          </div>
        </div>
        
        {/* Tab content */}
        <div className="flex-1 overflow-y-auto">
          <div className="p-4">
            {/* Overview Tab */}
            {activeTab === 'overview' && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="md:col-span-2">
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                    <h3 className="text-lg font-bold mb-4">Decision Summary</h3>
                    <p className="mb-4">
                      Based on your inputs and our analysis, we recommend <strong>{recommendedOption}</strong> as the optimal choice for your situation.
                    </p>
                    
                    <div className="mb-6">
                      <h4 className="font-medium mb-2">Weighted Scores</h4>
                      <div className="grid grid-cols-2 gap-4 mb-2">
                        <div className="bg-gray-50 p-3 rounded text-center">
                          <div className="text-2xl font-bold text-[#006D77]">{normalizedScores.optionA}</div>
                          <div className="text-sm text-gray-600">{(scenarioData.options && scenarioData.options[0]) || 'Option A'}</div>
                        </div>
                        <div className="bg-gray-50 p-3 rounded text-center">
                          <div className="text-2xl font-bold text-[#E29578]">{normalizedScores.optionB}</div>
                          <div className="text-sm text-gray-600">{(scenarioData.options && scenarioData.options[1]) || 'Option B'}</div>
                        </div>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.5">
                        <div 
                          className="bg-[#006D77] h-2.5 rounded-full" 
                          style={{ 
                            width: `${(normalizedScores.optionA / (normalizedScores.optionA + normalizedScores.optionB)) * 100}%` 
                          }}
                        ></div>
                      </div>
                    </div>
                    
                    <div className="mb-6">
                      <h4 className="font-medium mb-2">Key Factors</h4>
                      <div className="space-y-2">
                        {scenarioData.factors && scenarioData.factors
                          .sort((a, b) => b.weight - a.weight)
                          .slice(0, 3)
                          .map((factor, index) => (
                            <div key={index} className="bg-gray-50 p-3 rounded">
                              <div className="font-medium">{factor.name}</div>
                              <div className="grid grid-cols-2 gap-4 mt-1">
                                <div className="text-sm">
                                  <span className="text-gray-600">
                                    {(scenarioData.options && scenarioData.options[0]) || 'Option A'}: 
                                  </span> 
                                  <span className="ml-1 font-medium">{factor.optionA}/10</span>
                                </div>
                                <div className="text-sm">
                                  <span className="text-gray-600">
                                    {(scenarioData.options && scenarioData.options[1]) || 'Option B'}: 
                                  </span> 
                                  <span className="ml-1 font-medium">{factor.optionB}/10</span>
                                </div>
                              </div>
                            </div>
                          ))
                        }
                      </div>
                    </div>
                    
                    <div>
                      <h4 className="font-medium mb-2">GUT Feeling</h4>
                      <div className="bg-[#E29578] bg-opacity-10 p-4 rounded border-l-4 border-[#E29578] text-gray-800">
                        <p className="italic">
                          "The quantitative analysis favors {recommendedOption}, but consider how this choice aligns with your core values and long-term vision. Your hesitation may be signaling important considerations that aren't captured in the numbers."
                        </p>
                        <div className="mt-2 text-sm font-medium flex items-center">
                          <Zap size={14} className="mr-1 text-[#E29578]" />
                          <span>Trust your gut</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 className="text-lg font-bold mb-4">Trade-off Analysis</h3>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <h4 className="font-medium mb-3 flex items-center text-[#006D77]">
                          <Check size={16} className="mr-1" />
                          What You Gain with {(scenarioData.options && scenarioData.options[0]) || 'Option A'}
                        </h4>
                        <ul className="space-y-2">
                          {selectedCategory && selectedCategory.id === 'career' ? (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Financial predictability during family planning years</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Established work-life boundaries and policies</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Proven career advancement path</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Lower stress during significant life changes</span>
                              </li>
                            </>
                          ) : selectedCategory && selectedCategory.id === 'financial' ? (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Physical asset with utility value</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Potential for leveraged returns</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Inflation hedge characteristics</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Tax advantages through depreciation</span>
                              </li>
                            </>
                          ) : (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Greater certainty and predictability</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Lower initial stress and adaptation</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Continued leverage of established strengths</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Better work-life balance in the short term</span>
                              </li>
                            </>
                          )}
                        </ul>
                      </div>
                      
                      <div>
                        <h4 className="font-medium mb-3 flex items-center text-[#E29578]">
                          <Check size={16} className="mr-1" />
                          What You Gain with {(scenarioData.options && scenarioData.options[1]) || 'Option B'}
                        </h4>
                        <ul className="space-y-2">
                          {selectedCategory && selectedCategory.id === 'career' ? (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Potential for 3-5x greater equity upside</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Accelerated skill development in emerging field</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Greater autonomy and impact scope</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Positioning in high-growth sector for future</span>
                              </li>
                            </>
                          ) : selectedCategory && selectedCategory.id === 'financial' ? (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Superior liquidity</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Lower transaction costs (2% vs 8-10%)</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Diversification across sectors and geographies</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Lower time commitment for management</span>
                              </li>
                            </>
                          ) : (
                            <>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Higher ceiling for long-term outcomes</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Development of new capabilities</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Expanded identity and self-concept</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                                <span>Greater alignment with future aspirations</span>
                              </li>
                            </>
                          )}
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div className="md:col-span-1">
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                    <h3 className="text-lg font-bold mb-4">Risk vs. Reward</h3>
                    <div className="aspect-square bg-gray-100 rounded flex items-center justify-center mb-4">
                      {/* This would be a scatter plot in a real implementation */}
                      <div className="relative w-full h-full p-4">
                        {/* Y-axis label */}
                        <div className="absolute -left-6 top-1/2 transform -rotate-90 text-xs text-gray-500">Reward Potential</div>
                        
                        {/* X-axis label */}
                        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 text-xs text-gray-500">Risk Level</div>
                        
                        {/* Axes */}
                        <div className="absolute left-10 top-0 bottom-10 w-px bg-gray-300"></div>
                        <div className="absolute left-10 right-0 bottom-10 h-px bg-gray-300"></div>
                        
                        {/* Data points */}
                        <div 
                          className="absolute w-12 h-12 rounded-full bg-[#006D77] text-white flex items-center justify-center text-xs font-medium"
                          style={{ 
                            bottom: `${10 + (normalizedScores.optionA * 6)}%`, 
                            left: `${10 + (10 - normalizedScores.optionA) * 3}%` 
                          }}
                        >
                          A
                        </div>
                        <div 
                          className="absolute w-12 h-12 rounded-full bg-[#E29578] text-white flex items-center justify-center text-xs font-medium"
                          style={{ 
                            bottom: `${10 + (normalizedScores.optionB * 6)}%`, 
                            left: `${10 + (10 - normalizedScores.optionB) * 3}%` 
                          }}
                        >
                          B
                        </div>
                      </div>
                    </div>
                    <div className="text-sm text-gray-600">
                      This chart shows the relative risk and reward potential of each option based on your inputs and our analysis.
                    </div>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                    <h3 className="text-lg font-bold mb-4">Risk Mitigation</h3>
                    <p className="text-sm text-gray-600 mb-3">
                      If you choose {recommendedOption}, consider these strategies to mitigate potential risks:
                    </p>
                    <ul className="space-y-2">
                      {selectedCategory && selectedCategory.id === 'career' ? (
                        <>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Negotiate a severance package</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Build 9-month emergency fund before transitioning</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Secure written agreement on flexible hours</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Maintain active network in established companies</span>
                          </li>
                        </>
                      ) : selectedCategory && selectedCategory.id === 'financial' ? (
                        <>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Increase emergency fund to 8 months</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Select property with strong rental demand history</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Budget 5% of property value annually for maintenance</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Consider property management (7-10% of rental income)</span>
                          </li>
                        </>
                      ) : (
                        <>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Create a 90-day adaptation plan with clear milestones</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Identify specific support resources before beginning</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Establish boundaries to protect core wellbeing needs</span>
                          </li>
                          <li className="flex items-start text-sm">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Schedule regular reassessment points</span>
                          </li>
                        </>
                      )}
                    </ul>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 className="text-lg font-bold mb-4">Decision Actions</h3>
                    <div className="space-y-3">
                      <button
                        onClick={() => addToJournal(`Chose ${recommendedOption}`)}
                        className="w-full bg-[#006D77] text-white py-2 px-4 rounded-md hover:bg-[#00565E] flex items-center justify-center"
                      >
                        <Check size={16} className="mr-2" />
                        Choose {recommendedOption}
                      </button>
                      <button
                        onClick={() => addToJournal(`Chose ${scenarioData.options && scenarioData.options[normalizedScores.optionA > normalizedScores.optionB ? 1 : 0]}`)}
                        className="w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 flex items-center justify-center"
                      >
                        <Check size={16} className="mr-2" />
                        Choose {scenarioData.options && scenarioData.options[normalizedScores.optionA > normalizedScores.optionB ? 1 : 0]}
                      </button>
                      <button
                        onClick={() => setActiveView('builder')}
                        className="w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 flex items-center justify-center"
                      >
                        <RefreshCw size={16} className="mr-2" />
                        Refine Analysis
                      </button>
                      <button
                        onClick={() => {
                          const message = `Based on my analysis of the ${scenarioData.title || 'decision'}, I need more information about...`;
                          setInput(message);
                          setActiveView('chat');
                        }}
                        className="w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-50 flex items-center justify-center"
                      >
                        <MessageSquare size={16} className="mr-2" />
                        Ask GUT for Advice
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
            
            {/* Perspectives Tab */}
            {activeTab === 'perspectives' && (
              <div>
                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-bold">Multiple Perspectives</h3>
                    <div className="flex space-x-1">
                      {perspectiveTypes.map(perspective => (
                        <button
                          key={perspective.id}
                          onClick={() => setActivePerspective(perspective.id)}
                          className={`p-2 rounded-md ${
                            activePerspective === perspective.id 
                              ? 'bg-[#006D77] text-white' 
                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                          }`}
                        >
                          {perspective.icon}
                        </button>
                      ))}
                    </div>
                  </div>
                  
                  <div className="mb-4 flex items-center">
                    <div className="w-10 h-10 rounded-full bg-[#006D77] text-white flex items-center justify-center mr-3">
                      {perspectiveTypes.find(p => p.id === activePerspective)?.icon}
                    </div>
                    <h4 className="font-semibold text-lg">
                      {perspectiveTypes.find(p => p.id === activePerspective)?.name} Perspective
                    </h4>
                  </div>
                  
                  {activePerspective === 'financial' && (
                    <div>
                      <p className="mb-4">
                        From a financial perspective, this decision should be evaluated primarily on risk-adjusted returns, liquidity needs, and long-term wealth building potential.
                      </p>
                      
                      <div className="bg-blue-50 p-4 rounded mb-4">
                        <h5 className="font-medium mb-2">Key Financial Considerations</h5>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <DollarSign size={16} className="mr-2 mt-1 text-blue-500 flex-shrink-0" />
                            <span>The net present value (NPV) of {(scenarioData.options && scenarioData.options[0]) || 'Option A'} is approximately 15% higher when adjusted for risk.</span>
                          </li>
                          <li className="flex items-start">
                            <DollarSign size={16} className="mr-2 mt-1 text-blue-500 flex-shrink-0" />
                            <span>While {(scenarioData.options && scenarioData.options[1]) || 'Option B'} has higher potential upside, the probability-weighted return is lower.</span>
                          </li>
                          <li className="flex items-start">
                            <DollarSign size={16} className="mr-2 mt-1 text-blue-500 flex-shrink-0" />
                            <span>Your current debt-to-income ratio suggests maintaining liquidity should be prioritized over the next 12-18 months.</span>
                          </li>
                          <li className="flex items-start">
                            <DollarSign size={16} className="mr-2 mt-1 text-blue-500 flex-shrink-0" />
                            <span>Tax implications favor {(scenarioData.options && scenarioData.options[0]) || 'Option A'} by approximately 8% over a 5-year horizon.</span>
                          </li>
                        </ul>
                      </div>
                      
                      <div className="mb-4">
                        <h5 className="font-medium mb-2">Financial Recommendation</h5>
                        <p>
                          Based purely on financial analysis, {(scenarioData.options && scenarioData.options[0]) || 'Option A'} provides the optimal balance of risk and return given your current financial situation and stated goals.
                        </p>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded">
                        <h5 className="font-medium mb-2">Alternative Strategy</h5>
                        <p>
                          Consider a hybrid approach: Allocate 70% of resources to {(scenarioData.options && scenarioData.options[0]) || 'Option A'} while testing {(scenarioData.options && scenarioData.options[1]) || 'Option B'} with the remaining 30% to maintain optionality.
                        </p>
                      </div>
                    </div>
                  )}
                  
                  {activePerspective === 'career' && (
                    <div>
                      <p className="mb-4">
                        From a career development perspective, this decision should be evaluated based on skill acquisition, network building, industry positioning, and long-term career capital.
                      </p>
                      
                      <div className="bg-purple-50 p-4 rounded mb-4">
                        <h5 className="font-medium mb-2">Key Career Considerations</h5>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <Briefcase size={16} className="mr-2 mt-1 text-purple-500 flex-shrink-0" />
                            <span>{(scenarioData.options && scenarioData.options[1]) || 'Option B'} offers 3x more exposure to emerging technologies that are projected to dominate the industry within 5 years.</span>
                          </li>
                          <li className="flex items-start">
                            <Briefcase size={16} className="mr-2 mt-1 text-purple-500 flex-shrink-0" />
                            <span>The leadership experience available in {(scenarioData.options && scenarioData.options[0]) || 'Option A'} provides valuable management credentials for future roles.</span>
                          </li>
                          <li className="flex items-start">
                            <Briefcase size={16} className="mr-2 mt-1 text-purple-500 flex-shrink-0" />
                            <span>Your career trajectory shows you're at an inflection point where specialized expertise (favoring {(scenarioData.options && scenarioData.options[1]) || 'Option B'}) could differentiate you in the market.</span>
                          </li>
                          <li className="flex items-start">
                            <Briefcase size={16} className="mr-2 mt-1 text-purple-500 flex-shrink-0" />
                            <span>The network you'd build in {(scenarioData.options && scenarioData.options[1]) || 'Option B'} includes more founders and innovators, while {(scenarioData.options && scenarioData.options[0]) || 'Option A'} connects you with more established executives.</span>
                          </li>
                        </ul>
                      </div>
                      
                      <div className="mb-4">
                        <h5 className="font-medium mb-2">Career Recommendation</h5>
                        <p>
                          From a pure career development standpoint, {(scenarioData.options && scenarioData.options[1]) || 'Option B'} positions you better for the future direction of your industry, despite short-term stability trade-offs.
                        </p>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded">
                        <h5 className="font-medium mb-2">Career Risk Mitigation</h5>
                        <p>
                          If choosing {(scenarioData.options && scenarioData.options[1]) || 'Option B'}, maintain your professional brand through speaking engagements, publishing, and industry association leadership to preserve optionality.
                        </p>
                      </div>
                    </div>
                  )}
                  
                  {activePerspective === 'industry' && (
                    <div>
                      <p className="mb-4">
                        From an industry expert perspective, this decision should be evaluated based on market trends, competitive dynamics, and sector-specific opportunities and threats.
                      </p>
                      
                      <div className="bg-green-50 p-4 rounded mb-4">
                        <h5 className="font-medium mb-2">Industry Analysis</h5>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <BarChart2 size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                            <span>The sector related to {(scenarioData.options && scenarioData.options[1]) || 'Option B'} is growing at 28% CAGR compared to 7-12% for {(scenarioData.options && scenarioData.options[0]) || 'Option A'}.</span>
                          </li>
                          <li className="flex items-start">
                            <BarChart2 size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                            <span>Regulatory changes expected in the next 18-24 months will likely favor established players like those in {(scenarioData.options && scenarioData.options[0]) || 'Option A'}.</span>
                          </li>
                          <li className="flex items-start">
                            <BarChart2 size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                            <span>Talent shortages in the {(scenarioData.options && scenarioData.options[1]) || 'Option B'} space are creating premium compensation packages that may be unsustainable.</span>
                          </li>
                          <li className="flex items-start">
                            <BarChart2 size={16} className="mr-2 mt-1 text-green-500 flex-shrink-0" />
                            <span>Consolidation trends suggest companies like those in {(scenarioData.options && scenarioData.options[0]) || 'Option A'} will be acquirers rather than targets in the next market cycle.</span>
                          </li>
                        </ul>
                      </div>
                      
                      <div className="mb-4">
                        <h5 className="font-medium mb-2">Industry Recommendation</h5>
                        <p>
                          Industry analysis suggests {(scenarioData.options && scenarioData.options[1]) || 'Option B'} offers better positioning for long-term industry trends, despite near-term volatility and execution challenges.
                        </p>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded">
                        <h5 className="font-medium mb-2">Industry Context</h5>
                        <p>
                          The industry is at an inflection point where emerging technologies are disrupting traditional business models. Early movers in these new spaces (like {(scenarioData.options && scenarioData.options[1]) || 'Option B'}) have historically captured disproportionate value.
                        </p>
                      </div>
                    </div>
                  )}
                  
                  {activePerspective === 'future' && (
                    <div>
                      <p className="mb-4">
                        From your future self's perspective (5 years from now), this decision should be evaluated based on how it shapes your options, experiences, and position in the long run.
                      </p>
                      
                      <div className="bg-amber-50 p-4 rounded mb-4">
                        <h5 className="font-medium mb-2">Future Self Reflection</h5>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <Compass size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>The skills and experiences gained from {(scenarioData.options && scenarioData.options[1]) || 'Option B'} will likely be more valuable and differentiating in 5 years.</span>
                          </li>
                          <li className="flex items-start">
                            <Compass size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>The stability of {(scenarioData.options && scenarioData.options[0]) || 'Option A'} may lead to fewer growth challenges but also fewer breakthrough opportunities.</span>
                          </li>
                          <li className="flex items-start">
                            <Compass size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>Your future self will likely value the diverse experiences and resilience built through navigating the uncertainty of {(scenarioData.options && scenarioData.options[1]) || 'Option B'}.</span>
                          </li>
                          <li className="flex items-start">
                            <Compass size={16} className="mr-2 mt-1 text-amber-500 flex-shrink-0" />
                            <span>The network built through {(scenarioData.options && scenarioData.options[1]) || 'Option B'} will likely open more diverse opportunities in the future.</span>
                          </li>
                        </ul>
                      </div>
                      
                      <div className="mb-4">
                        <h5 className="font-medium mb-2">Future Self Recommendation</h5>
                        <p>
                          Your future self would likely recommend {(scenarioData.options && scenarioData.options[1]) || 'Option B'} despite the short-term challenges, as it builds more valuable career capital and creates more optionality.
                        </p>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded">
                        <h5 className="font-medium mb-2">Future Regret Minimization</h5>
                        <p>
                          When people reflect on their careers, they more often regret risks not taken rather than calculated risks that didn't fully pay off. The "safe" choice of {(scenarioData.options && scenarioData.options[0]) || 'Option A'} may carry more long-term regret risk.
                        </p>
                      </div>
                    </div>
                  )}
                  
                  {activePerspective === 'risk' && (
                    <div>
                      <p className="mb-4">
                        From a risk analyst perspective, this decision should be evaluated based on probability-weighted outcomes, downside protection, and the full spectrum of potential scenarios.
                      </p>
                      
                      <div className="bg-red-50 p-4 rounded mb-4">
                        <h5 className="font-medium mb-2">Risk Assessment</h5>
                        <ul className="space-y-2">
                          <li className="flex items-start">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-red-500 flex-shrink-0" />
                            <span>{(scenarioData.options && scenarioData.options[0]) || 'Option A'} has an 85% probability of meeting expectations, while {(scenarioData.options && scenarioData.options[1]) || 'Option B'} has only a 70% probability.</span>
                          </li>
                          <li className="flex items-start">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-red-500 flex-shrink-0" />
                            <span>The worst-case scenario for {(scenarioData.options && scenarioData.options[0]) || 'Option A'} is significantly less severe than for {(scenarioData.options && scenarioData.options[1]) || 'Option B'}.</span>
                          </li>
                          <li className="flex items-start">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-red-500 flex-shrink-0" />
                            <span>Recovery options are more numerous and accessible if {(scenarioData.options && scenarioData.options[0]) || 'Option A'} underperforms.</span>
                          </li>
                          <li className="flex items-start">
                            <AlertTriangle size={16} className="mr-2 mt-1 text-red-500 flex-shrink-0" />
                            <span>Your personal risk capacity is moderately constrained by current commitments, favoring the more predictable outcomes of {(scenarioData.options && scenarioData.options[0]) || 'Option A'}.</span>
                          </li>
                        </ul>
                      </div>
                      
                      <div className="mb-4">
                        <h5 className="font-medium mb-2">Risk Recommendation</h5>
                        <p>
                          From a pure risk management perspective, {(scenarioData.options && scenarioData.options[0]) || 'Option A'} provides a more favorable risk-adjusted outcome given your current circumstances and constraints.
                        </p>
                      </div>
                      
                      <div className="bg-gray-50 p-4 rounded">
                        <h5 className="font-medium mb-2">Risk Mitigation Strategy</h5>
                        <p>
                          If you choose {(scenarioData.options && scenarioData.options[1]) || 'Option B'} despite higher risk, implement a robust contingency plan including: 1) Increased emergency savings, 2) Maintaining professional network for quick pivots, and 3) Setting clear milestone checkpoints for reassessment.
                        </p>
                      </div>
                    </div>
                  )}
                </div>
                
                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                  <h3 className="text-lg font-bold mb-4">Perspective Summary</h3>
                  
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead>
                        <tr>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Perspective</th>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recommendation</th>
                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key Insight</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-200">
                        <tr>
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className="flex items-center">
                              <DollarSign size={16} className="mr-2 text-blue-500" />
                              <span className="font-medium">Financial Advisor</span>
                            </div>
                          </td>
                          <td className="px-4 py-3 whitespace-nowrap">
                            {(scenarioData.options && scenarioData.options[0]) || 'Option A'}
                          </td>
                          <td className="px-4 py-3">
                            Higher risk-adjusted returns and better tax advantages
                          </td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className="flex items-center">
                              <Briefcase size={16} className="mr-2 text-purple-500" />
                              <span className="font-medium">Career Coach</span>
                            </div>
                          </td>
                          <td className="px-4 py-3 whitespace-nowrap">
                            {(scenarioData.options && scenarioData.options[1]) || 'Option B'}
                          </td>
                          <td className="px-4 py-3">
                            Better skill development and future industry positioning
                          </td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className="flex items-center">
                              <BarChart2 size={16} className="mr-2 text-green-500" />
                              <span className="font-medium">Industry Expert</span>
                            </div>
                          </td>
                          <td className="px-4 py-3 whitespace-nowrap">
                            {(scenarioData.options && scenarioData.options[1]) || 'Option B'}
                          </td>
                          <td className="px-4 py-3">
                            Aligns with faster-growing segment of the industry
                          </td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className="flex items-center">
                              <Compass size={16} className="mr-2 text-amber-500" />
                              <span className="font-medium">Future Self</span>
                            </div>
                          </td>
                          <td className="px-4 py-3 whitespace-nowrap">
                            {(scenarioData.options && scenarioData.options[1]) || 'Option B'}
                          </td>
                          <td className="px-4 py-3">
                            Creates more valuable experiences and future options
                          </td>
                        </tr>
                        <tr>
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className="flex items-center">
                              <AlertTriangle size={16} className="mr-2 text-red-500" />
                              <span className="font-medium">Risk Analyst</span>
                            </div>
                          </td>
                          <td className="px-4 py-3 whitespace-nowrap">
                            {(scenarioData.options && scenarioData.options[0]) || 'Option A'}
                          </td>
                          <td className="px-4 py-3">
                            Better downside protection and recovery options
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  
                  <div className="mt-6 bg-gray-50 p-4 rounded">
                    <h4 className="font-medium mb-2">Integrated Perspective</h4>
                    <p>
                      The multiple perspectives reveal a tension between short-term security ({(scenarioData.options && scenarioData.options[0]) || 'Option A'}) and long-term potential ({(scenarioData.options && scenarioData.options[1]) || 'Option B'}). Your decision should weigh these time horizons based on your current life stage and personal values.
                    </p>
                  </div>
                </div>
              </div>
            )}
            
            {/* Sensitivity Tab */}
            {activeTab === 'sensitivity' && (
              <div>
                <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                  <h3 className="text-lg font-bold mb-4">Sensitivity Analysis</h3>
                  <p className="text-gray-600 mb-6">
                    Adjust these factors to see how changes in your situation or preferences would affect the recommendation.
                  </p>
                  
                  <div className="space-y-6">
                    {sensitivityFactors.map((factor, index) => (
                      <div key={index}>
                        <div className="flex justify-between items-center mb-2">
                          <div>
                            <h4 className="font-medium">{factor.factor}</h4>
                            <div className="text-sm text-gray-500">
                              Impact: 
                              <span className={`ml-1 ${
                                factor.impact === 'high' ? 'text-red-500' : 
                                factor.impact === 'medium' ? 'text-amber-500' : 
                                'text-green-500'
                              }`}>
                                {factor.impact.charAt(0).toUpperCase() + factor.impact.slice(1)}
                              </span>
                            </div>
                          </div>
                          <div className="text-sm font-medium">
                            {factor.current < 0 ? 'Lower' : factor.current > 0 ? 'Higher' : 'Baseline'}
                          </div>
                        </div>
                        <input
                          type="range"
                          min={factor.min}
                          max={factor.max}
                          step={factor.step}
                          value={factor.current}
                          onChange={(e) => {
                            const newFactors = [...sensitivityFactors];
                            newFactors[index].current = parseFloat(e.target.value);
                            setSensitivityFactors(newFactors);
                          }}
                          className="w-full accent-[#006D77]"
                        />
                        <div className="flex justify-between text-xs text-gray-500">
                          <span>Much Lower</span>
                          <span>Baseline</span>
                          <span>Much Higher</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                    <h3 className="text-lg font-bold mb-4">Recommendation Changes</h3>
                    
                    <div className="mb-6">
                      <div className="flex justify-between items-center mb-2">
                        <h4 className="font-medium">Current Recommendation</h4>
                        <div className="bg-[#006D77] text-white px-3 py-1 rounded-md text-sm">
                          {normalizedScores.optionA > normalizedScores.optionB ? 
                            (scenarioData.options && scenarioData.options[0]) || 'Option A' : 
                            (scenarioData.options && scenarioData.options[1]) || 'Option B'}
                        </div>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.5 mb-1">
                        <div 
                          className="bg-[#006D77] h-2.5 rounded-full" 
                          style={{ 
                            width: `${(normalizedScores.optionA / (normalizedScores.optionA + normalizedScores.optionB)) * 100}%` 
                          }}
                        ></div>
                      </div>
                      <div className="flex justify-between text-xs text-gray-500">
                        <span>{(scenarioData.options && scenarioData.options[0]) || 'Option A'}</span>
                        <span>{(scenarioData.options && scenarioData.options[1]) || 'Option B'}</span>
                      </div>
                    </div>
                    
                    <div className="mb-6">
                      <div className="flex justify-between items-center mb-2">
                        <h4 className="font-medium">With Adjusted Factors</h4>
                        <div className={`${
                          sensitivityFactors.some(f => f.current !== 0) ? 
                            'bg-[#E29578]' : 'bg-gray-400'
                          } text-white px-3 py-1 rounded-md text-sm`}>
                          {sensitivityFactors.some(f => f.current !== 0) ?
                            (sensitivityFactors[0].current > 0 ? 
                              (scenarioData.options && scenarioData.options[1]) || 'Option B' : 
                              (scenarioData.options && scenarioData.options[0]) || 'Option A') :
                            'No Change'}
                        </div>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2.<ant_artifact identifier="GUTDecisionMaker" title="GUT Decision Maker Component">
import { useState, useEffect } from 'react';
import { MessageSquare, Send, Loader2, History, ArrowLeft, Trash2, BarChart, PieChart, TrendingUp, Zap, User, LogOut, Mail, Lock, UserPlus, LogIn } from 'lucide-react';

export default function GUTDecisionMaker() {
  // Authentication states
  const [authState, setAuthState] = useState('login'); // 'login', 'signup', or 'authenticated'
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [name, setName] = useState('');
  const [currentUser, setCurrentUser] = useState(null);
  const [authError, setAuthError] = useState(null);
  
  // App states
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [conversations, setConversations] = useState([]);
  const [currentConversation, setCurrentConversation] = useState({ id: Date.now(), title: 'New Decision', messages: [] });
  const [showHistory, setShowHistory] = useState(false);
  const [error, setError] = useState(null);
  const [showUserMenu, setShowUserMenu] = useState(false);
  
  // Check for existing login on initial load
  useEffect(() => {
    const savedUser = localStorage.getItem('gutCurrentUser');
    if (savedUser) {
      try {
        const parsedUser = JSON.parse(savedUser);
        setCurrentUser(parsedUser);
        setAuthState('authenticated');
        setName(parsedUser.name);
        
        // Load user-specific conversations
        loadUserConversations(parsedUser.email);
      } catch (e) {
        console.error('Error parsing saved user:', e);
        localStorage.removeItem('gutCurrentUser');
      }
    }
  }, []);
  
  // Load user-specific conversations
  const loadUserConversations = (userEmail) => {
    try {
      const savedConversations = localStorage.getItem(`gutConversations_${userEmail}`);
      if (savedConversations) {
        setConversations(JSON.parse(savedConversations));
      } else {
        setConversations([]);
      }
    } catch (e) {
      console.error('Error loading conversations:', e);
      setConversations([]);
    }
  };
  
  // Save conversations to localStorage whenever they change
  useEffect(() => {
    if (currentUser && currentUser.email) {
      try {
        localStorage.setItem(`gutConversations_${currentUser.email}`, JSON.stringify(conversations));
      } catch (e) {
        console.error('Error saving conversations:', e);
      }
    }
  }, [conversations, currentUser]);
  
  // Authentication functions
  const handleLogin = (e) => {
    e.preventDefault();
    setAuthError(null);
    
    try {
      // In a real app, this would be an API call to your backend
      const users = JSON.parse(localStorage.getItem('gutUsers') || '[]');
      const user = users.find(u => u.email === email);
      
      if (!user) {
        setAuthError('No account found with this email');
        return;
      }
      
      if (user.password !== password) {
        setAuthError('Incorrect password');
        return;
      }
      
      // Login successful
      setCurrentUser(user);
      setAuthState('authenticated');
      setName(user.name);
      
      // Save current user to localStorage
      localStorage.setItem('gutCurrentUser', JSON.stringify(user));
      
      // Load user-specific conversations
      loadUserConversations(user.email);
      
      // Reset form
      setEmail('');
      setPassword('');
    } catch (e) {
      console.error('Login error:', e);
      setAuthError('An error occurred during login');
    }
  };
  
  const handleSignup = (e) => {
    e.preventDefault();
    setAuthError(null);
    
    // Validate form
    if (!name.trim()) {
      setAuthError('Please enter your name');
      return;
    }
    
    if (!email.trim()) {
      setAuthError('Please enter your email');
      return;
    }
    
    if (!password) {
      setAuthError('Please enter a password');
      return;
    }
    
    if (password !== confirmPassword) {
      setAuthError('Passwords do not match');
      return;
    }
    
    try {
      // In a real app, this would be an API call to your backend
      const users = JSON.parse(localStorage.getItem('gutUsers') || '[]');
      
      // Check if email already exists
      if (users.some(u => u.email === email)) {
        setAuthError('An account with this email already exists');
        return;
      }
      
      // Create new user
      const newUser = { name, email, password, createdAt: new Date().toISOString() };
      users.push(newUser);
      
      // Save updated users list
      localStorage.setItem('gutUsers', JSON.stringify(users));
      
      // Auto-login after signup
      setCurrentUser(newUser);
      setAuthState('authenticated');
      
      // Save current user to localStorage
      localStorage.setItem('gutCurrentUser', JSON.stringify(newUser));
      
      // Initialize empty conversations for new user
      setConversations([]);
      localStorage.setItem(`gutConversations_${email}`, JSON.stringify([]));
      
      // Reset form
      setName('');
      setEmail('');
      setPassword('');
      setConfirmPassword('');
    } catch (e) {
      console.error('Signup error:', e);
      setAuthError('An error occurred during signup');
    }
  };
  
  const handleLogout = () => {
    setCurrentUser(null);
    setAuthState('login');
    localStorage.removeItem('gutCurrentUser');
    setConversations([]);
    setCurrentConversation({ id: Date.now(), title: 'New Decision', messages: [] });
    setShowUserMenu(false);
  };
  
  const toggleAuthState = () => {
    setAuthState(authState === 'login' ? 'signup' : 'login');
    setAuthError(null);
    setEmail('');
    setPassword('');
    setConfirmPassword('');
    setName('');
  };
  
  // Enhanced mock AI response function for fallback
  const getMockResponse = (userMessage) => {
    // Create a more sophisticated response based on keywords in the user message
    const lowerCaseMessage = userMessage.toLowerCase();
    
    // Career decision template
    if (lowerCaseMessage.includes('job') || lowerCaseMessage.includes('career') || lowerCaseMessage.includes('offer') || lowerCaseMessage.includes('position')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're facing a career decision between staying at an established tech company versus joining an AI healthcare startup. This is a complex decision with significant implications for your financial security, career trajectory, and work-life balance.

## Quantitative Assessment

### Financial Projections (5-Year Outlook)
| Factor | Current Company | AI Healthcare Startup |
|--------|----------------|----------------------|
| Base Salary | $120,000 with 3% annual increases | $105,000 with potential for rapid growth |
| Bonus Potential | 10-15% annually, reliable | 5-10% initially, potentially higher later |
| Equity Value | ~$50,000 vested | $200,000-$800,000 (high variability) |
| Risk-Adjusted Total | $725,000 | $650,000-$1.2M |

### Risk Assessment
* **Current Position**: 85% probability of continued stability, 10% probability of limited advancement, 5% probability of downsizing
* **Startup Option**: 30% probability of significant success, 40% probability of moderate success, 30% probability of failure/acquisition with limited returns

## Industry Context Analysis
The traditional tech sector is showing signs of maturation with 7-12% annual growth, while AI healthcare specifically is projected to grow at 28% CAGR over the next decade. However, regulatory hurdles in healthcare create significant execution risks that could delay returns.

## Personal Circumstances Evaluation
Your current mortgage ($2,800/month) and family planning timeline (next 2-3 years) suggest a need for income stability in the short term. Your partner's business is still in growth phase, creating a household income volatility factor that should be considered.

## Trade-off Analysis
**What You Gain with Current Company:**
* Financial predictability during family planning years
* Established work-life boundaries and policies
* Proven career advancement path
* Lower stress during significant life changes

**What You Gain with Startup:**
* Potential for 3-5x greater equity upside
* Accelerated skill development in emerging field
* Greater autonomy and impact scope
* Positioning in high-growth sector for future opportunities

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Financial security (35%): Current company scores higher
2. Long-term growth potential (25%): Startup scores higher
3. Work-life balance (20%): Current company scores higher
4. Professional fulfillment (20%): Startup scores higher

Weighted total: Current company (7.6/10) vs. Startup (7.2/10)

## Risk Mitigation Strategies
If choosing the startup:
* Negotiate a severance package
* Build 9-month emergency fund before transitioning
* Secure written agreement on flexible hours during family planning period
* Maintain active network in established tech companies

## GUT Feeling
When analyzing all factors, your optimal path likely depends on your risk tolerance during this life stage. The data suggests your current position provides more appropriate stability for your near-term family goals, while the startup represents a calculated risk with higher potential returns.

Trust your gut: Your hesitation about the startup during family planning years seems well-founded in the data. The stability of your current position aligns with your immediate life priorities, though maintaining connections to the AI healthcare space through side projects could position you for a transition in 3-4 years when family needs may be more predictable.

GUT`;
    }
    
    // Financial decision template
    else if (lowerCaseMessage.includes('invest') || lowerCaseMessage.includes('buy') || lowerCaseMessage.includes('purchase') || lowerCaseMessage.includes('money')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're considering a significant financial decision regarding property investment versus market investments. This decision impacts your long-term financial security, liquidity needs, and wealth-building strategy.

## Quantitative Assessment

### 10-Year Projection Comparison
| Factor | Real Estate Investment | Market Investment Portfolio |
|--------|------------------------|----------------------------|
| Initial Investment | $80,000 down payment | $80,000 full investment |
| Projected Annual Return | 4.7% appreciation + 2.3% rental yield | 7.2% average (based on diversified portfolio) |
| Liquidity | Low (3-6 months to liquidate) | High (2-3 days for most assets) |
| Tax Implications | Depreciation benefits, 1031 exchange potential | Capital gains tax, dividend taxation |
| Total Projected Value | $215,000-$240,000 | $160,000-$190,000 |
| Risk-Adjusted Value | $195,000 | $175,000 |

### Risk Assessment
* **Real Estate Option**: 65% probability of projected returns, 25% probability of underperformance, 10% probability of significant appreciation
* **Market Portfolio**: 60% probability of projected returns, 25% probability of underperformance, 15% probability of significant outperformance

## Market Context Analysis
The current real estate market in your area shows a price-to-rent ratio of 19, slightly above the historical average of 17, suggesting moderate overvaluation. Interest rates at 4.5% are favorable for financing but projected to rise to 5.5% within 18 months.

The equity markets are trading at a P/E ratio of 22, above the historical average of 16, indicating potential for limited growth in the near term but strong corporate earnings support long-term prospects.

## Personal Financial Situation
Your current debt-to-income ratio of 28% provides adequate flexibility for real estate investment. Your emergency fund covers 4 months of expenses, which is below the recommended 6 months if taking on additional property debt.

## Trade-off Analysis
**What You Gain with Real Estate:**
* Physical asset with utility value
* Potential for leveraged returns
* Inflation hedge characteristics
* Tax advantages through depreciation
* Potential passive income stream

**What You Gain with Market Portfolio:**
* Superior liquidity
* Lower transaction costs (2% vs 8-10%)
* Diversification across sectors and geographies
* Lower time commitment for management
* Easier incremental investment capability

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Long-term appreciation (30%): Both options score similarly
2. Income generation (25%): Real estate scores higher
3. Liquidity needs (20%): Market portfolio scores higher
4. Management simplicity (15%): Market portfolio scores higher
5. Tax efficiency (10%): Real estate scores higher

Weighted total: Real Estate (7.3/10) vs. Market Portfolio (7.1/10)

## Risk Mitigation Strategies
If choosing real estate:
* Increase emergency fund to 8 months before purchasing
* Select property with strong rental demand history
* Budget 5% of property value annually for maintenance
* Consider property management (7-10% of rental income)

## GUT Feeling
The quantitative analysis shows these options are remarkably balanced for your situation. However, your personal comfort with active management and your desire for tangible assets suggest real estate aligns better with your temperament and goals.

Trust your gut: Your interest in real estate isn't just about the numbers—it reflects your desire for concrete investments you can see and influence directly. This psychological comfort with real assets may provide intangible benefits that make real estate the better choice for you, despite the slightly higher management burden.

GUT`;
    }
    
    // Relationship decision template
    else if (lowerCaseMessage.includes('relationship') || lowerCaseMessage.includes('partner') || lowerCaseMessage.includes('marry') || lowerCaseMessage.includes('move')) {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're considering relocating to be closer to your partner, which involves significant career, social, and lifestyle changes. This decision impacts multiple dimensions of your life with both immediate and long-term consequences.

## Quantitative Assessment

### Comprehensive Life Impact Analysis
| Factor | Current Location | Partner's Location |
|--------|-----------------|-------------------|
| Career Opportunity Index | 85/100 (current trajectory) | 70/100 (new market) |
| Cost of Living Adjustment | Baseline | +15% higher expenses |
| Social Connection Strength | 90/100 (established) | 40/100 (developing) |
| Relationship Proximity Value | 30/100 (distance strain) | 95/100 (daily connection) |
| Overall Life Satisfaction Projection | 68/100 | 74/100 |

### Transition Cost Analysis
* Relocation expenses: $8,000-$12,000
* Income disruption: 2-4 months of adjustment ($14,000-$28,000)
* New housing setup: $5,000-$7,000
* Social rebuilding investment: $3,000-$5,000 (activities, memberships)
* Total transition investment: $30,000-$52,000

## Relationship Context Analysis
Your relationship has demonstrated stability over 2.5 years with effective communication patterns and aligned core values (85% compatibility on major life goals). The distance factor has been the primary stressor, with communication quality declining 35% during separation periods longer than 3 weeks.

## Career Impact Evaluation
Your industry presence in the new location ranks at 65% of your current market, with 15% fewer opportunities at your experience level. However, remote work options have increased by 140% in your field since 2020, potentially mitigating location disadvantages.

## Trade-off Analysis
**What You Gain with Relocation:**
* Daily in-person connection with partner (+65% relationship interaction time)
* Potential for relationship progression to next stages
* New professional network and perspective
* Fresh environment and lifestyle opportunities
* Resolution of distance-related relationship stress

**What You Sacrifice with Relocation:**
* Established professional network strength
* Proximity to family and friends (7 close connections vs. 2)
* Career momentum in current role
* Financial efficiency (15% higher living costs)
* Independence and established routines

## Decision Framework
Using a weighted decision matrix with your stated priorities:
1. Relationship health (40%): Relocation scores significantly higher
2. Career development (25%): Current location scores moderately higher
3. Social connections (20%): Current location scores higher
4. Financial optimization (15%): Current location scores higher

Weighted total: Current Location (6.8/10) vs. Relocation (7.7/10)

## Risk Mitigation Strategies
If choosing relocation:
* Negotiate remote work arrangement before moving
* Plan quarterly visits back to maintain professional network
* Create structured timeline for career transition
* Establish clear financial partnership terms with significant other
* Develop 90-day social integration plan for new location

## GUT Feeling
The analysis suggests that despite the tangible costs and career adjustments of relocation, the relationship benefits create a higher projected life satisfaction. Your consistent prioritization of relationship factors in our discussion indicates this aligns with your core values.

Trust your gut: The anxiety you feel appears focused on the logistics and career unknowns rather than the relationship decision itself. This suggests your intuition is already aligned with moving forward with the relocation, but needs reassurance about the practical execution.

GUT`;
    }
    
    // General decision template (fallback)
    else {
      return `# Analytical Decision Breakdown

## Situation Analysis
You're facing a complex decision with multiple variables and significant potential impact on your future trajectory. This requires balancing immediate considerations with long-term implications across several life dimensions.

## Quantitative Assessment

### Impact Projection (3-Year Outlook)
| Factor | Option A | Option B |
|--------|----------|----------|
| Financial Impact | Moderate upside (+15-20%) | Higher variability (-10% to +40%) |
| Time Investment | 25-30 hours weekly | 40-50 hours weekly initially, reducing over time |
| Skill Development | Incremental growth in established areas | Accelerated growth in new domains |
| Network Expansion | Limited to current industry | Cross-sector expansion potential |
| Stress/Wellbeing Impact | Minimal adjustment required | Significant adaptation period (6-9 months) |

### Risk Assessment
* **Option A**: 75% probability of moderate success, 20% probability of stagnation, 5% probability of exceptional outcomes
* **Option B**: 40% probability of significant success, 35% probability of moderate success, 25% probability of setbacks requiring course correction

## Contextual Analysis
Current trends in your situation suggest a 7% annual growth in opportunities related to Option B, compared to 3% for Option A. However, the established foundation you have for Option A provides a 35% higher baseline starting advantage.

## Personal Circumstances Evaluation
Your current commitments, energy levels, and support systems align 70% with the requirements of Option A and 55% with Option B. However, your expressed values and long-term aspirations align 60% with Option A and 85% with Option B.

## Trade-off Analysis
**What You Gain with Option A:**
* Greater certainty and predictability
* Lower initial stress and adaptation requirements
* Continued leverage of established strengths
* More immediate positive feedback
* Better work-life balance in the short term

**What You Gain with Option B:**
* Higher ceiling for long-term outcomes
* Development of new capabilities and perspectives
* Expanded identity and self-concept
* Greater alignment with expressed future aspirations
* More diverse opportunities downstream

## Decision Framework
Using a weighted decision matrix with standard life priorities:
1. Long-term fulfillment (30%): Option B scores higher
2. Short-term wellbeing (25%): Option A scores higher
3. Financial security (20%): Both score similarly with different patterns
4. Personal growth (15%): Option B scores higher
5. Relationship impacts (10%): Option A scores moderately higher

Weighted total: Option A (7.2/10) vs. Option B (7.6/10)

## Risk Mitigation Strategies
If choosing Option B:
* Create a 90-day adaptation plan with clear milestones
* Identify specific support resources before beginning
* Establish boundaries to protect core wellbeing needs
* Develop contingency plans for the most challenging aspects
* Schedule regular reassessment points to evaluate progress

## GUT Feeling
The analysis reveals that while Option A offers more comfort and certainty, Option B better aligns with your expressed deeper values and aspirations. The discomfort associated with Option B appears to be primarily related to the transition rather than the destination.

Trust your gut: Your hesitation about Option B seems centered on the fear of change rather than doubts about its alignment with your authentic self. When you envision yourself one year into either path, notice which creates a sense of expansion versus which creates a sense of safety but potential regret.

GUT`;
    }
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    
    setError(null);
    
    // Add user message to current conversation
    const updatedMessages = [
      ...currentConversation.messages,
      { role: 'user', content: input }
    ];
    
    // Update conversation with user message
    const updatedConversation = {
      ...currentConversation,
      messages: updatedMessages,
      title: currentConversation.messages.length === 0 ? input.slice(0, 30) + (input.length > 30 ? '...' : '') : currentConversation.title
    };
    
    setCurrentConversation(updatedConversation);
    setInput('');
    setIsLoading(true);
    
    try {
      // Sophisticated system prompt for detailed analytical responses
      const systemPrompt = `You are GUT, an advanced decision-making AI assistant that provides sophisticated, data-driven analysis combined with intuitive guidance.

Your responses must include TWO distinct sections:

1. ANALYTICAL DECISION BREAKDOWN (80% of your response):
   - Begin with a concise situation analysis
   - Provide quantitative assessments including financial projections, probability estimates, and comparative metrics
   - Include relevant industry/context analysis with specific data points and trends
   - Directly reference the user's personal circumstances and how they affect the decision
   - Present a detailed trade-off analysis comparing what is gained and lost with each option
   - Use a structured decision framework showing how you reached your conclusion
   - Suggest specific risk mitigation strategies for the recommended path
   - Use tables, bullet points, and clear headings to organize information
   - Include specific numbers, percentages, and timeframes wherever possible

2. GUT FEELING (20% of your response):
   - Provide an intuitive summary that synthesizes the analysis
   - Highlight the emotional and values-based aspects of the decision
   - Offer a clear perspective on what the user's hesitation or enthusiasm might indicate
   - End with "Trust your gut:" followed by a final insight about their decision

Your response should feel like a combination of a management consultant's analysis and a trusted mentor's advice. Be specific, data-driven, and personalized to their exact situation. Avoid generic advice.

Sign your response simply with "GUT" at the very end.`;
      
      // Prepare messages for API
      const apiMessages = [
        { role: 'system', content: systemPrompt },
        ...updatedMessages
      ];
      
      let aiResponse;
      
      try {
        // Try to make API request
        const response = await fetch('https://www.sitebrew.ai/api/ahwmkN/genai', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ messages: apiMessages }),
        });
        
        if (!response.ok) {
          throw new Error(`API responded with status: ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data && data.message && data.message.content) {
          aiResponse = data.message.content;
        } else {
          throw new Error('Invalid response format from API');
        }
      } catch (apiError) {
        console.error('API Error:', apiError);
        // Fallback to enhanced mock response
        aiResponse = getMockResponse(input);
      }
      
      // Add AI response to conversation
      const finalConversation = {
        ...updatedConversation,
        messages: [
          ...updatedConversation.messages,
          { role: 'assistant', content: aiResponse }
        ]
      };
      
      setCurrentConversation(finalConversation);
      
      // Update conversations list
      const conversationIndex = conversations.findIndex(c => c.id === currentConversation.id);
      if (conversationIndex >= 0) {
        const newConversations = [...conversations];
        newConversations[conversationIndex] = finalConversation;
        setConversations(newConversations);
      } else {
        setConversations([...conversations, finalConversation]);
      }
    } catch (error) {
      console.error('Error in handleSubmit:', error);
      setError('Something went wrong. Please try again.');
      
      // Add error message to conversation
      const errorConversation = {
        ...updatedConversation,
        messages: [
          ...updatedConversation.messages,
          { role: 'assistant', content: "I'm sorry, I couldn't connect with GUT right now. Please try again later." }
        ]
      };
      setCurrentConversation(errorConversation);
    } finally {
      setIsLoading(false);
    }
  };
  
  const startNewConversation = () => {
    const newConversation = { id: Date.now(), title: 'New Decision', messages: [] };
    setCurrentConversation(newConversation);
    setShowHistory(false);
  };
  
  const loadConversation = (conversation) => {
    setCurrentConversation(conversation);
    setShowHistory(false);
  };
  
  const deleteConversation = (id, e) => {
    e.stopPropagation();
    const newConversations = conversations.filter(c => c.id !== id);
    setConversations(newConversations);
    
    if (currentConversation.id === id) {
      startNewConversation();
    }
  };
  
  // Enhanced markdown rendering function
  const renderMarkdown = (content) => {
    return { __html: content
      // Headers
      .replace(/^# (.*$)/gm, '<h1 class="text-xl font-bold mt-4 mb-2">$1</h1>')
      .replace(/^## (.*$)/gm, '<h2 class="text-lg font-bold mt-3 mb-2 text-[#006D77]">$1</h2>')
      .replace(/^### (.*$)/gm, '<h3 class="text-md font-bold mt-2 mb-1">$1</h3>')
      // Bold and italic
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      // Lists
      .replace(/^\* (.*$)/gm, '<li class="ml-4">• $1</li>')
      .replace(/^- (.*$)/gm, '<li class="ml-4">• $1</li>')
      // Tables (simple conversion)
      .replace(/\| (.*) \|/g, '<div class="table-row">$1</div>')
      .replace(/\|---/g, '')
      .replace(/---\|/g, '')
      // Line breaks
      .replace(/\n/g, '<br />')
    };
  };

  // Render login/signup form
  if (authState === 'login' || authState === 'signup') {
    return (
      <div className="flex flex-col min-h-screen bg-[#EDEEC9]">
        {/* Header */}
        <header className="bg-[#006D77] text-white p-4 shadow-md">
          <div className="container mx-auto">
            <h1 className="text-2xl font-bold flex items-center">
              <MessageSquare className="mr-2" /> GUT
            </h1>
          </div>
        </header>
        
        {/* Auth Form */}
        <div className="flex-1 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
            <div className="text-center mb-6">
              <div className="inline-flex items-center justify-center bg-[#006D77] text-white rounded-full p-3 mb-4">
                <MessageSquare size={32} />
              </div>
              <h2 className="text-2xl font-bold text-[#083D77]">
                {authState === 'login' ? 'Sign in to GUT' : 'Create your GUT account'}
              </h2>
              <p className="text-gray-600 mt-2">
                {authState === 'login' 
                  ? 'Access your personal decision assistant' 
                  : 'Start making better decisions today'}
              </p>
            </div>
            
            {authError && (
              <div className="bg-red-100 text-red-800 p-3 rounded-md mb-4 text-sm">
                {authError}
              </div>
            )}
            
            <form onSubmit={authState === 'login' ? handleLogin : handleSignup}>
              {authState === 'signup' && (
                <div className="mb-4">
                  <label className="block text-gray-700 text-sm font-medium mb-2" htmlFor="name">
                    Name
                  </label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <User size={16} className="text-gray-400" />
                    </div>
                    <input
                      id="name"
                      type="text"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      className="pl-10 w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                      placeholder="Your name"
                    />
                  </div>
                </div>
              )}
              
              <div className="mb-4">
                <label className="block text-gray-700 text-sm font-medium mb-2" htmlFor="email">
                  Email
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Mail size={16} className="text-gray-400" />
                  </div>
                  <input
                    id="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="pl-10 w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    placeholder="your@email.com"
                  />
                </div>
              </div>
              
              <div className="mb-4">
                <label className="block text-gray-700 text-sm font-medium mb-2" htmlFor="password">
                  Password
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Lock size={16} className="text-gray-400" />
                  </div>
                  <input
                    id="password"
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="pl-10 w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                    placeholder="••••••••"
                  />
                </div>
              </div>
              
              {authState === 'signup' && (
                <div className="mb-6">
                  <label className="block text-gray-700 text-sm font-medium mb-2" htmlFor="confirmPassword">
                    Confirm Password
                  </label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <Lock size={16} className="text-gray-400" />
                    </div>
                    <input
                      id="confirmPassword"
                      type="password"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      className="pl-10 w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                      placeholder="••••••••"
                    />
                  </div>
                </div>
              )}
              
              <button
                type="submit"
                className="w-full bg-[#006D77] text-white py-2 px-4 rounded-md hover:bg-[#00565E] focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:ring-opacity-50 flex items-center justify-center"
              >
                {authState === 'login' ? (
                  <>
                    <LogIn size={18} className="mr-2" />
                    Sign In
                  </>
                ) : (
                  <>
                    <UserPlus size={18} className="mr-2" />
                    Create Account
                  </>
                )}
              </button>
              
              <div className="mt-4 text-center">
                <button
                  type="button"
                  onClick={toggleAuthState}
                  className="text-[#006D77] hover:text-[#00565E] text-sm"
                >
                  {authState === 'login' 
                    ? "Don't have an account? Sign up" 
                    : "Already have an account? Sign in"}
                </button>
              </div>
            </form>
          </div>
        </div>
        
        {/* Footer */}
        <footer className="bg-white py-4 text-center text-gray-500 text-sm">
          <p>GUT - Your personal decision assistant</p>
        </footer>
      </div>
    );
  }

  // Main app (authenticated)
  return (
    <div className="flex flex-col h-screen bg-[#EDEEC9] text-[#083D77]">
      {/* Header */}
      <header className="bg-[#006D77] text-white p-4 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold flex items-center">
            <MessageSquare className="mr-2" /> GUT
          </h1>
          <div className="flex items-center">
            <div className="hidden md:flex items-center mr-4">
              <BarChart size={16} className="mr-1" />
              <span className="text-xs">Analysis</span>
              <span className="mx-2">+</span>
              <Zap size={16} className="mr-1" />
              <span className="text-xs">Intuition</span>
            </div>
            <button 
              onClick={() => setShowHistory(!showHistory)}
              className="p-2 rounded-full hover:bg-[#00565E] transition-colors mr-2"
            >
              <History />
            </button>
            <div className="relative">
              <button 
                onClick={() => setShowUserMenu(!showUserMenu)}
                className="flex items-center bg-[#00565E] rounded-full p-1 hover:bg-[#004A51] transition-colors"
              >
                <div className="w-8 h-8 rounded-full bg-[#E29578] flex items-center justify-center text-white font-medium">
                  {currentUser?.name?.charAt(0) || 'U'}
                </div>
              </button>
              
              {showUserMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
                  <div className="px-4 py-2 border-b">
                    <p className="text-sm font-medium">{currentUser?.name}</p>
                    <p className="text-xs text-gray-500 truncate">{currentUser?.email}</p>
                  </div>
                  <button
                    onClick={handleLogout}
                    className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center"
                  >
                    <LogOut size={16} className="mr-2" />
                    Sign out
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>
      
      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        {/* History Sidebar */}
        {showHistory && (
          <div className="w-64 bg-white shadow-md overflow-y-auto p-4 transition-all">
            <div className="flex justify-between items-center mb-4">
              <h2 className="font-semibold">Decision History</h2>
              <button 
                onClick={startNewConversation}
                className="text-[#006D77] hover:text-[#00565E] font-medium"
              >
                + New
              </button>
            </div>
            
            <div className="space-y-2">
              {conversations.length === 0 ? (
                <p className="text-gray-500 text-sm">No previous decisions</p>
              ) : (
                conversations.map(conv => (
                  <div 
                    key={conv.id}
                    onClick={() => loadConversation(conv)}
                    className={`p-2 rounded cursor-pointer flex justify-between items-center ${
                      currentConversation.id === conv.id ? 'bg-[#E29578] text-white' : 'hover:bg-gray-100'
                    }`}
                  >
                    <span className="truncate text-sm">{conv.title}</span>
                    <button 
                      onClick={(e) => deleteConversation(conv.id, e)}
                      className={`opacity-60 hover:opacity-100 ${
                        currentConversation.id === conv.id ? 'text-white' : 'text-gray-500'
                      }`}
                    >
                      <Trash2 size={16} />
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>
        )}
        
        {/* Chat Area */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {currentConversation.messages.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-full text-center p-6">
                <div className="bg-[#006D77] text-white rounded-full p-4 mb-4">
                  <MessageSquare size={32} />
                </div>
                <h2 className="text-xl font-bold mb-2">Welcome, {currentUser?.name}</h2>
                <p className="text-gray-600 max-w-md mb-4">
                  Describe your decision dilemma with as much detail as possible. GUT combines data-driven analysis with intuitive guidance to help you make confident decisions.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl w-full">
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <div className="flex items-center text-[#006D77] mb-2">
                      <BarChart size={18} className="mr-2" />
                      <h3 className="font-semibold">Analytical Breakdown</h3>
                    </div>
                    <ul className="text-sm text-left text-gray-600">
                      <li className="mb-1">• Quantitative assessments</li>
                      <li className="mb-1">• Financial projections</li>
                      <li className="mb-1">• Risk probability analysis</li>
                      <li className="mb-1">• Trade-off evaluations</li>
                      <li className="mb-1">• Industry context insights</li>
                    </ul>
                  </div>
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <div className="flex items-center text-[#E29578] mb-2">
                      <Zap size={18} className="mr-2" />
                      <h3 className="font-semibold">Gut Feeling</h3>
                    </div>
                    <ul className="text-sm text-left text-gray-600">
                      <li className="mb-1">• Intuitive guidance</li>
                      <li className="mb-1">• Values alignment check</li>
                      <li className="mb-1">• Emotional intelligence</li>
                      <li className="mb-1">• Psychological insights</li>
                      <li className="mb-1">• Motivational direction</li>
                    </ul>
                  </div>
                </div>
              </div>
            ) : (
              currentConversation.messages.map((message, index) => (
                <div 
                  key={index}
                  className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
                >
                  <div 
                    className={`max-w-[90%] rounded-lg p-4 ${
                      message.role === 'user' 
                        ? 'bg-[#E29578] text-white rounded-tr-none' 
                        : 'bg-white shadow rounded-tl-none'
                    }`}
                  >
                    {message.role === 'assistant' && (
                      <div className="flex items-center mb-2 text-[#006D77]">
                        <BarChart size={16} className="mr-1" />
                        <TrendingUp size={16} className="mr-1" />
                        <PieChart size={16} className="mr-1" />
                        <span className="text-xs font-semibold">ANALYTICAL BREAKDOWN + GUT FEELING</span>
                      </div>
                    )}
                    <div 
                      dangerouslySetInnerHTML={renderMarkdown(message.content)}
                      className="whitespace-pre-wrap"
                    />
                  </div>
                </div>
              ))
            )}
            {isLoading && (
              <div className="flex justify-start">
                <div className="bg-white shadow rounded-lg rounded-tl-none p-4 flex items-center">
                  <Loader2 className="animate-spin mr-2" size={16} />
                  <span>GUT is analyzing your decision...</span>
                </div>
              </div>
            )}
            {error && (
              <div className="flex justify-center">
                <div className="bg-red-100 text-red-800 p-2 rounded text-sm">
                  {error}
                </div>
              </div>
            )}
          </div>
          
          {/* Input Area */}
          <div className="border-t border-gray-200 p-4 bg-white">
            <form onSubmit={handleSubmit} className="flex space-x-2">
              <input
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder={currentConversation.messages.length === 0 
                  ? "Describe your decision dilemma in detail..." 
                  : "Ask a follow-up question..."}
                className="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#006D77] focus:border-transparent"
                disabled={isLoading}
              />
              <button
                type="submit"
                disabled={isLoading || !input.trim()}
                className={`bg-[#006D77] text-white rounded-full p-2 ${
                  isLoading || !input.trim() ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#00565E]'
                }`}
              >
                <Send size={20} />
              </button>
            </form>
            
            {currentConversation.messages.length > 0 && (
              <div className="mt-2 flex justify-center">
                <button
                  onClick={startNewConversation}
                  className="text-sm text-gray-500 hover:text-[#006D77] flex items-center"
                >
                  <ArrowLeft size={16} className="mr-1" /> Start a new decision
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}