import React, { useState, useMemo, useCallback } from 'react';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
import { TrendingUp, Shield, Star, Users, CheckCircle, AlertTriangle, Zap, Globe, Code, Database, Layers, ChevronDown, ChevronUp, Download, Share2, Search, Filter } from 'lucide-react';

// Mock data based on research report
const PLATFORM_DATA = [
  {
    id: 'dify',
    name: 'Dify',
    logo: '🔷',
    color: '#3b82f6',
    overall_score: 92,
    market_share: 28,
    ease_of_use: 4.5,
    community_size: 100000,
    pricing_free: true,
    pricing_paid: 59,
    sentiment: { positive: 78, neutral: 18, negative: 4 },
    capabilities: { visual_builder: 95, multi_agent: 85, rag: 90, llmops: 95, integrations: 75, enterprise: 88 },
    description: 'Open-source LLMOps platform for production-ready agentic workflow development with visual orchestration, observability, and deployment.',
    strengths: ['Unified LLMOps approach', 'Production-ready monitoring', 'Flexible hybrid deployment', '50+ pre-built tools', 'Clear enterprise upgrade path'],
    weaknesses: ['Learning curve for LLMOps features', 'Pricing opacity for enterprise', 'Smaller third-party ecosystem vs LangChain'],
    best_for: ['Teams building multiple AI apps', 'Organizations needing observability', 'Mid-market B2B firms'],
    features: {
      'Visual Workflow Builder': 5,
      'Multi-Agent Support': 4,
      'RAG Integration': 5,
      'LLMOps/Monitoring': 5,
      'Plugin System': 4,
      'API/MCP Support': 5,
      'Human Approval': 4,
      'Code Export': 3,
      'Cloud Deployment': 5,
      'Self-Host Option': 5
    }
  },
  {
    id: 'crewai',
    name: 'CrewAI',
    logo: '👥',
    color: '#10b981',
    overall_score: 88,
    market_share: 22,
    ease_of_use: 4.3,
    community_size: 45900,
    pricing_free: true,
    pricing_paid: 99,
    sentiment: { positive: 82, neutral: 15, negative: 3 },
    capabilities: { visual_builder: 75, multi_agent: 98, rag: 70, llmops: 80, integrations: 80, enterprise: 85 },
    description: 'Open-source framework for orchestrating role-playing, autonomous AI agents that work together seamlessly on complex tasks.',
    strengths: ['Multi-agent specialization', 'Role-based agent design', 'Rapid prototyping', '100k+ certified developers', 'Gradual hardening path'],
    weaknesses: ['Python-only', 'Common case optimization', 'Hosted features require paid tiers'],
    best_for: ['Multi-agent systems', 'Complex task decomposition', 'Enterprise compliance workflows'],
    features: {
      'Visual Workflow Builder': 3,
      'Multi-Agent Support': 5,
      'RAG Integration': 3,
      'LLMOps/Monitoring': 4,
      'Plugin System': 4,
      'API/MCP Support': 5,
      'Human Approval': 5,
      'Code Export': 5,
      'Cloud Deployment': 4,
      'Self-Host Option': 5
    }
  },
  {
    id: 'autogen',
    name: 'AutoGen',
    logo: '💬',
    color: '#8b5cf6',
    overall_score: 85,
    market_share: 18,
    ease_of_use: 3.8,
    community_size: 35000,
    pricing_free: true,
    pricing_paid: 0,
    sentiment: { positive: 72, neutral: 22, negative: 6 },
    capabilities: { visual_builder: 70, multi_agent: 95, rag: 80, llmops: 85, integrations: 75, enterprise: 95 },
    description: "Microsoft's conversation-driven multi-agent framework, converged into Microsoft Agent Framework for enterprise production.",
    strengths: ['Microsoft/Azure backing', 'Enterprise-grade architecture', 'Python + .NET support', 'Standards compliance (MCP, A2A)', 'Type safety'],
    weaknesses: ['Version confusion (v0.2 vs v0.4)', 'Azure ecosystem dependency', 'Learning curve for enterprise features'],
    best_for: ['Azure enterprise integration', '.NET shops', 'Complex multi-agent conversations'],
    features: {
      'Visual Workflow Builder': 3,
      'Multi-Agent Support': 5,
      'RAG Integration': 4,
      'LLMOps/Monitoring': 4,
      'Plugin System': 4,
      'API/MCP Support': 5,
      'Human Approval': 4,
      'Code Export': 5,
      'Cloud Deployment': 5,
      'Self-Host Option': 5
    }
  },
  {
    id: 'n8n',
    name: 'n8n',
    logo: '⚡',
    color: '#f59e0b',
    overall_score: 90,
    market_share: 32,
    ease_of_use: 4.7,
    community_size: 150000,
    pricing_free: true,
    pricing_paid: 24,
    sentiment: { positive: 85, neutral: 12, negative: 3 },
    capabilities: { visual_builder: 95, multi_agent: 60, rag: 65, llmops: 80, integrations: 98, enterprise: 82 },
    description: 'Workflow automation platform with AI agent capabilities, combining 500+ integrations with AI nodes for reliable production automation.',
    strengths: ['500+ integrations', 'Execution-based pricing transparency', 'Human-in-the-loop approvals', 'DevOps maturity', 'Hybrid deployment'],
    weaknesses: ['Not true autonomous agents', 'Execution costs at scale', 'Workflow-centric vs agent-centric'],
    best_for: ['Business process automation', 'Multi-step workflows with approvals', 'Integration-heavy scenarios'],
    features: {
      'Visual Workflow Builder': 5,
      'Multi-Agent Support': 3,
      'RAG Integration': 3,
      'LLMOps/Monitoring': 4,
      'Plugin System': 5,
      'API/MCP Support': 4,
      'Human Approval': 5,
      'Code Export': 3,
      'Cloud Deployment': 5,
      'Self-Host Option': 5
    }
  },
  {
    id: 'langflow',
    name: 'Langflow',
    logo: '🔮',
    color: '#ec4899',
    overall_score: 84,
    market_share: 15,
    ease_of_use: 4.6,
    community_size: 28000,
    pricing_free: true,
    pricing_paid: 0,
    sentiment: { positive: 80, neutral: 16, negative: 4 },
    capabilities: { visual_builder: 98, multi_agent: 80, rag: 95, llmops: 70, integrations: 70, enterprise: 75 },
    description: 'Low-code visual AI builder for agentic and RAG applications with Python code export and built-in API/MCP servers.',
    strengths: ['Developer-friendly visual builder', 'Python code export', 'Rapid prototyping', 'Full LLM/vector DB support', 'DataStax backing'],
    weaknesses: ['Less enterprise features vs Dify', 'Pricing clarity (DataStax cloud)', 'Newer platform ecosystem'],
    best_for: ['Rapid LLM prototyping', 'RAG application development', 'Visual development with code export'],
    features: {
      'Visual Workflow Builder': 5,
      'Multi-Agent Support': 4,
      'RAG Integration': 5,
      'LLMOps/Monitoring': 3,
      'Plugin System': 4,
      'API/MCP Support': 5,
      'Human Approval': 3,
      'Code Export': 5,
      'Cloud Deployment': 4,
      'Self-Host Option': 5
    }
  }
];

const FEATURE_CATEGORIES = [
  { name: 'Core Capabilities', features: ['Visual Workflow Builder', 'Multi-Agent Support', 'RAG Integration'] },
  { name: 'Operations', features: ['LLMOps/Monitoring', 'Plugin System', 'API/MCP Support'] },
  { name: 'Enterprise', features: ['Human Approval', 'Code Export', 'Cloud Deployment', 'Self-Host Option'] }
];

const CAPABILITY_DATA = PLATFORM_DATA.map(p => ({
  subject: p.name,
  A: p.capabilities.visual_builder,
  B: p.capabilities.multi_agent,
  C: p.capabilities.rag,
  D: p.capabilities.llmops,
  E: p.capabilities.integrations,
  F: p.capabilities.enterprise,
  fullMark: 100
}));

const PRICING_DATA = PLATFORM_DATA.map(p => ({
  name: p.name,
  free: p.pricing_free ? 0 : 1,
  paid: p.pricing_paid,
  color: p.color
}));

export default function App() {
  const [selectedPlatforms, setSelectedPlatforms] = useState(['dify', 'crewai', 'autogen', 'n8n', 'langflow']);
  const [expandedCards, setExpandedCards] = useState<string[]>([]);
  const [featureFilter, setFeatureFilter] = useState('');
  const [activeTab, setActiveTab] = useState<'overview' | 'features' | 'details'>('overview');

  const togglePlatform = useCallback((id: string) => {
    setSelectedPlatforms(prev => 
      prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]
    );
  }, []);

  const toggleCard = useCallback((id: string) => {
    setExpandedCards(prev =>
      prev.includes(id) ? prev.filter(c => c !== id) : [...prev, id]
    );
  }, []);

  const filteredPlatforms = useMemo(() => 
    PLATFORM_DATA.filter(p => selectedPlatforms.includes(p.id)),
    [selectedPlatforms]
  );

  const filteredFeatures = useMemo(() => {
    if (!featureFilter) return FEATURE_CATEGORIES;
    return FEATURE_CATEGORIES.map(cat => ({
      ...cat,
      features: cat.features.filter(f => f.toLowerCase().includes(featureFilter.toLowerCase()))
    })).filter(cat => cat.features.length > 0);
  }, [featureFilter]);

  const renderStarRating = (rating: number) => {
    return (
      <div className="flex gap-1">
        {[1, 2, 3, 4, 5].map(star => (
          <span key={star} className={star <= rating ? 'text-amber-400' : 'text-slate-600'}>★</span>
        ))}
      </div>
    );
  };

  const getRatingColor = (score: number) => {
    if (score >= 4.5) return 'text-emerald-400';
    if (score >= 3.5) return 'text-amber-400';
    return 'text-red-400';
  };

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-slate-200 p-4 md:p-6 lg:p-8">
      {/* Header */}
      <header className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
            <Globe className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-xl md:text-2xl font-bold text-white">Competitive Analysis</h1>
            <p className="text-sm text-slate-400">AI Agent Platforms Comparison</p>
          </div>
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800/50 border border-slate-700 hover:border-blue-500 transition-colors">
            <Download className="w-4 h-4" />
            <span className="text-sm">Export</span>
          </button>
          <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 transition-colors">
            <Share2 className="w-4 h-4" />
            <span className="text-sm">Share</span>
          </button>
        </div>
      </header>

      {/* Tabs */}
      <div className="flex gap-2 mb-6 border-b border-slate-700 pb-2">
        {(['overview', 'features', 'details'] as const).map(tab => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeTab === tab 
                ? 'bg-blue-600 text-white' 
                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
            }`}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
          </button>
        ))}
      </div>

      {/* Platform Selector */}
      <div className="flex flex-wrap gap-2 mb-6 p-3 rounded-xl bg-slate-800/30 border border-slate-700/50">
        {PLATFORM_DATA.map(platform => (
          <label
            key={platform.id}
            className={`flex items-center gap-2 px-3 py-2 rounded-full cursor-pointer transition-all ${
              selectedPlatforms.includes(platform.id)
                ? 'bg-slate-700/80 border-blue-500'
                : 'bg-slate-800/50 border-slate-600'
            } border`}
          >
            <input
              type="checkbox"
              checked={selectedPlatforms.includes(platform.id)}
              onChange={() => togglePlatform(platform.id)}
              className="accent-blue-500 w-4 h-4"
            />
            <span className="text-sm">{platform.logo}</span>
            <span className="text-sm font-medium">{platform.name}</span>
          </label>
        ))}
      </div>

      {/* Overview Tab */}
      {activeTab === 'overview' && (
        <>
          {/* KPI Row */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div className="p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <div className="flex items-center gap-2 mb-2">
                <Star className="w-4 h-4 text-amber-400" />
                <span className="text-xs text-slate-400 uppercase tracking-wide">Avg Overall Score</span>
              </div>
              <div className="text-3xl font-bold text-white">
                {filteredPlatforms.length > 0 
                  ? Math.round(filteredPlatforms.reduce((sum, p) => sum + p.overall_score, 0) / filteredPlatforms.length)
                  : 0}
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-emerald-400">
                <TrendingUp className="w-3 h-3" />
                <span>Top performers</span>
              </div>
            </div>
            <div className="p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <div className="flex items-center gap-2 mb-2">
                <Globe className="w-4 h-4 text-blue-400" />
                <span className="text-xs text-slate-400 uppercase tracking-wide">Total Market Share</span>
              </div>
              <div className="text-3xl font-bold text-white">
                {filteredPlatforms.reduce((sum, p) => sum + p.market_share, 0)}%
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-slate-400">
                <span>Of AI agent platform market</span>
              </div>
            </div>
            <div className="p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <div className="flex items-center gap-2 mb-2">
                <Users className="w-4 h-4 text-purple-400" />
                <span className="text-xs text-slate-400 uppercase tracking-wide">Total Community</span>
              </div>
              <div className="text-3xl font-bold text-white">
                {(filteredPlatforms.reduce((sum, p) => sum + p.community_size, 0) / 1000).toFixed(0)}K
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-emerald-400">
                <TrendingUp className="w-3 h-3" />
                <span>Growing ecosystem</span>
              </div>
            </div>
            <div className="p-4 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <div className="flex items-center gap-2 mb-2">
                <Zap className="w-4 h-4 text-amber-400" />
                <span className="text-xs text-slate-400 uppercase tracking-wide">Ease of Use</span>
              </div>
              <div className="text-3xl font-bold text-white">
                {filteredPlatforms.length > 0
                  ? (filteredPlatforms.reduce((sum, p) => sum + p.ease_of_use, 0) / filteredPlatforms.length).toFixed(1)
                  : 0}
              </div>
              <div className="flex items-center gap-1 mt-2 text-sm text-slate-400">
                <span>Out of 5.0 rating</span>
              </div>
            </div>
          </div>

          {/* Charts Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
            {/* Radar Chart */}
            <div className="p-5 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Layers className="w-5 h-5 text-blue-400" />
                Capability Comparison
              </h3>
              <div className="h-72">
                <ResponsiveContainer width="100%" height="100%">
                  <RadarChart outerRadius={90} data={CAPABILITY_DATA.filter(d => selectedPlatforms.includes(d.subject.toLowerCase().replace(' ', '')))}>
                    <PolarGrid stroke="#334155" />
                    <PolarAngleAxis dataKey="subject" tick={{ fill: '#94a3b8', fontSize: 11 }} />
                    <PolarRadiusAxis angle={30} domain={[0, 100]} tick={{ fill: '#64748b', fontSize: 10 }} />
                    {filteredPlatforms.map((platform, idx) => (
                      <Radar
                        key={platform.id}
                        name={platform.name}
                        dataKey={(d: any) => {
                          const pData = PLATFORM_DATA.find(p => p.name === d.subject);
                          return pData ? pData.capabilities[['visual_builder', 'multi_agent', 'rag', 'llmops', 'integrations', 'enterprise'][idx % 6]] : 0;
                        }}
                        stroke={platform.color}
                        fill={platform.color}
                        fillOpacity={0.2}
                      />
                    ))}
                    <Legend />
                    <Tooltip 
                      contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                      labelStyle={{ color: '#e2e8f0' }}
                    />
                  </RadarChart>
                </ResponsiveContainer>
              </div>
            </div>

            {/* Pricing Chart */}
            <div className="p-5 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Shield className="w-5 h-5 text-emerald-400" />
                Pricing Comparison (Monthly)
              </h3>
              <div className="h-72">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={PRICING_DATA.filter(d => selectedPlatforms.includes(d.name.toLowerCase()))} layout="vertical">
                    <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                    <XAxis type="number" stroke="#64748b" />
                    <YAxis dataKey="name" type="category" stroke="#94a3b8" width={80} />
                    <Tooltip 
                      contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                      labelStyle={{ color: '#e2e8f0' }}
                    />
                    <Legend />
                    <Bar dataKey="paid" fill="#3b82f6" radius={[0, 4, 4, 0]} name="Paid Tier ($)" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>

          {/* Sentiment Analysis */}
          <div className="p-5 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm mb-6">
            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
              <CheckCircle className="w-5 h-5 text-emerald-400" />
              User Sentiment Analysis
            </h3>
            <div className="space-y-3">
              {filteredPlatforms.map(platform => (
                <div key={platform.id} className="flex items-center gap-4">
                  <div className="w-24 text-sm font-medium text-slate-300">{platform.name}</div>
                  <div className="flex-1 h-6 bg-slate-700/50 rounded-full overflow-hidden flex">
                    <div 
                      className="h-full bg-emerald-500 transition-all duration-500"
                      style={{ width: `${platform.sentiment.positive}%` }}
                    />
                    <div 
                      className="h-full bg-slate-500 transition-all duration-500"
                      style={{ width: `${platform.sentiment.neutral}%` }}
                    />
                    <div 
                      className="h-full bg-red-500 transition-all duration-500"
                      style={{ width: `${platform.sentiment.negative}%` }}
                    />
                  </div>
                  <div className="w-16 text-right text-sm font-semibold" style={{ color: platform.color }}>
                    {platform.sentiment.positive}%
                  </div>
                </div>
              ))}
            </div>
            <div className="flex gap-6 mt-4 text-xs text-slate-400">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-emerald-500" />
                <span>Positive</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-slate-500" />
                <span>Neutral</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500" />
                <span>Negative</span>
              </div>
            </div>
          </div>
        </>
      )}

      {/* Features Tab */}
      {activeTab === 'features' && (
        <div className="p-5 rounded-xl bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
            <h3 className="text-lg font-semibold text-white flex items-center gap-2">
              <Database className="w-5 h-5 text-blue-400" />
              Feature Comparison Matrix
            </h3>
            <div className="relative">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
              <input
                type="text"
                placeholder="Filter features..."
                value={featureFilter}
                onChange={(e) => setFeatureFilter(e.target.value)}
                className="pl-9 pr-4 py-2 rounded-lg bg-slate-800 border border-slate-600 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
              />
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr>
                  <th className="text-left py-3 px-4 text-slate-400 font-medium uppercase text-xs tracking-wide sticky top-0 bg-slate-800/90 backdrop-blur">Feature</th>
                  {filteredPlatforms.map(p => (
                    <th key={p.id} className="text-center py-3 px-4 text-slate-400 font-medium uppercase text-xs tracking-wide sticky top-0 bg-slate-800/90 backdrop-blur" style={{ color: p.color }}>
                      {p.logo} {p.name}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {filteredFeatures.map((category, catIdx) => (
                  <React.Fragment key={catIdx}>
                    <tr className="bg-blue-900/20">
                      <td colSpan={filteredPlatforms.length + 1} className="py-2 px-4 font-semibold text-blue-300">
                        {category.name}
                      </td>
                    </tr>
                    {category.features.map((feature, featIdx) => (
                      <tr key={featIdx} className="border-t border-slate-700/50 hover:bg-slate-700/30 transition-colors">
                        <td className="py-3 px-4 text-slate-200">{feature}</td>
                        {filteredPlatforms.map(p => (
                          <td key={p.id} className="py-3 px-4 text-center">
                            {renderStarRating(p.features[feature as keyof typeof p.features] || 0)}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
          <div className="flex items-center gap-4 mt-4 text-xs text-slate-400">
            <span>Rating:</span>
            <div className="flex gap-1">{renderStarRating(5)}</div>
            <span className="text-slate-500">= Excellent</span>
            <div className="flex gap-1">{renderStarRating(3)}</div>
            <span className="text-slate-500">= Average</span>
          </div>
        </div>
      )}

      {/* Details Tab */}
      {activeTab === 'details' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {filteredPlatforms.map(platform => (
            <div
              key={platform.id}
              className={`p-5 rounded-xl bg-slate-800/30 border backdrop-blur-sm transition-all ${
                expandedCards.includes(platform.id) ? 'border-blue-500/50' : 'border-slate-700/50'
              }`}
            >
              <div
                className="flex items-center justify-between cursor-pointer"
                onClick={() => toggleCard(platform.id)}
              >
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg flex items-center justify-center text-xl" style={{ backgroundColor: `${platform.color}20` }}>
                    {platform.logo}
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white">{platform.name}</h3>
                    <div className="flex items-center gap-2 text-sm text-slate-400">
                      <span className={getRatingColor(platform.overall_score / 20)}>
                        {renderStarRating(Math.round(platform.overall_score / 20))}
                      </span>
                      <span>•</span>
                      <span>{platform.overall_score}/100</span>
                    </div>
                  </div>
                </div>
                {expandedCards.includes(platform.id) ? (
                  <ChevronUp className="w-5 h-5 text-slate-400" />
                ) : (
                  <ChevronDown className="w-5 h-5 text-slate-400" />
                )}
              </div>

              {expandedCards.includes(platform.id) && (
                <div className="mt-4 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
                  <p className="text-sm text-slate-300 leading-relaxed">{platform.description}</p>
                  
                  <div>
                    <h4 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Strengths</h4>
                    <ul className="space-y-1">
                      {platform.strengths.map((s, i) => (
                        <li key={i} className="flex items-start gap-2 text-sm text-emerald-300">
                          <CheckCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                          <span>{s}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <h4 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Limitations</h4>
                    <ul className="space-y-1">
                      {platform.weaknesses.map((w, i) => (
                        <li key={i} className="flex items-start gap-2 text-sm text-amber-300">
                          <AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                          <span>{w}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <h4 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Best For</h4>
                    <div className="flex flex-wrap gap-2">
                      {platform.best_for.map((b, i) => (
                        <span
                          key={i}
                          className="px-3 py-1 rounded-full text-xs font-medium"
                          style={{ backgroundColor: `${platform.color}20`, color: platform.color }}
                        >
                          {b}
                        </span>
                      ))}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-3 pt-3 border-t border-slate-700/50">
                    <div>
                      <div className="text-xs text-slate-400 mb-1">Starting Price</div>
                      <div className="text-lg font-semibold text-white">
                        {platform.pricing_paid === 0 ? 'Free' : `$${platform.pricing_paid}/mo`}
                      </div>
                    </div>
                    <div>
                      <div className="text-xs text-slate-400 mb-1">Community</div>
                      <div className="text-lg font-semibold text-white">
                        {(platform.community_size / 1000).toFixed(0)}K
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* Footer */}
      <footer className="mt-8 pt-6 border-t border-slate-700/50 text-sm text-slate-400">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <span className="text-slate-500">Data sources: </span>
            <span className="text-blue-400 hover:underline cursor-pointer">GitHub</span>
            <span className="text-slate-500">, </span>
            <span className="text-blue-400 hover:underline cursor-pointer">Official Documentation</span>
            <span className="text-slate-500">, </span>
            <span className="text-blue-400 hover:underline cursor-pointer">G2 Reviews</span>
          </div>
          <div className="text-slate-500">
            Last updated: April 2026
          </div>
        </div>
      </footer>
    </div>
  );
}