'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Badge } from 'antd';
import { 
  BrainCircuitIcon,
  ThumbsUpIcon,
  ThumbsDownIcon,
  TrendingUpIcon,
  TargetIcon,
  FlaskConicalIcon,
  BarChart3Icon,
  Users2Icon,
  ClockIcon,
  SparklesIcon,
  AwardIcon,
  RefreshCwIcon
} from 'lucide-react';

const { Title, Paragraph, Text } = Typography;

// Animation variants
const fadeInUp = {
  hidden: { opacity: 0, y: 30 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.6, ease: 'easeOut' }
  }
};

const stagger = {
  visible: {
    transition: {
      staggerChildren: 0.15
    }
  }
};

const scaleOnHover = {
  hover: { 
    scale: 1.02,
    transition: { duration: 0.2 }
  }
};


export default function COOEEShowcase() {
  return (
    <section id="cooee" className="section-padding bg-gradient-to-br from-amber-950 via-chorus-charcoal to-purple-950">
      <div className="container-chorus">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={stagger}
        >
          {/* Header */}
          <motion.div variants={fadeInUp} className="text-center mb-16">
            <div className="inline-flex items-center justify-center p-4 bg-purple-500/20 rounded-full mb-6">
              <BrainCircuitIcon size={48} className="text-purple-500" />
            </div>
            <Title level={1} className="text-white mb-4">
              COOEE
            </Title>
            <Text className="text-2xl text-purple-500 font-semibold block mb-4">
              Feedback & Learning (RL Context SLURP)
            </Text>
            <Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
              Reinforcement learning for context relevance tuning with agent feedback collection, 
              role-based filtering, and continuous improvement through real-world performance data.
            </Paragraph>
          </motion.div>

          {/* Main Features Grid */}
          <Row gutter={[32, 32]} className="mb-16">
            <Col xs={24} lg={12}>
              <motion.div variants={fadeInUp} whileHover="hover">
                <Card
                  className="h-full glass-effect border-0 card-hover"
                  bodyStyle={{ padding: '2rem' }}
                >
                  <motion.div variants={scaleOnHover}>
                    <div className="flex items-start space-x-4 mb-6">
                      <div className="p-3 bg-purple-500/20 rounded-lg">
                        <SparklesIcon size={32} className="text-purple-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Reinforcement Learning Engine</Title>
                        <Paragraph className="text-gray-300">
                          Advanced RL algorithms for context relevance optimization with multi-agent 
                          feedback integration and adaptive learning rates.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <Text className="text-white font-medium">Reinforcement Learning Engine</Text>
                          <Badge color="green" text="Q-Learning" />
                        </div>
                        <Text className="text-sm text-gray-400">Deep Q-Network implementation for context relevance optimization</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <Text className="text-white font-medium">Feedback Collection</Text>
                          <Badge color="blue" text="Multi-Modal" />
                        </div>
                        <Text className="text-sm text-gray-400">Agent feedback via thumbs up/down, ratings, and detailed comments</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <Text className="text-white font-medium">Context Relevance Tuning</Text>
                          <Badge color="purple" text="Adaptive" />
                        </div>
                        <Text className="text-sm text-gray-400">Dynamic scoring adjustments based on real-world performance data</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <Text className="text-white font-medium">Performance Analytics</Text>
                          <Badge color="orange" text="Real-time" />
                        </div>
                        <Text className="text-sm text-gray-400">Continuous monitoring and metrics collection for system improvement</Text>
                      </div>
                    </div>
                  </motion.div>
                </Card>
              </motion.div>
            </Col>

            <Col xs={24} lg={12}>
              <motion.div variants={fadeInUp} whileHover="hover">
                <Card
                  className="h-full glass-effect border-0 card-hover"
                  bodyStyle={{ padding: '2rem' }}
                >
                  <motion.div variants={scaleOnHover}>
                    <div className="flex items-start space-x-4 mb-6">
                      <div className="p-3 bg-green-500/20 rounded-lg">
                        <ThumbsUpIcon size={32} className="text-green-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Agent Feedback Collection</Title>
                        <Paragraph className="text-gray-300">
                          Real-time feedback collection with upvote/downvote systems, 
                          detailed comments, and sentiment analysis for continuous improvement.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Badge color="blue" text="Feedback API" />
                          </div>
                        </div>
                        <Text className="text-sm text-gray-300 mb-2">RESTful API for collecting structured feedback from agents</Text>
                        <Text className="text-xs text-gray-400">Supports ratings, comments, and contextual relevance scoring</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Badge color="green" text="Learning Models" />
                          </div>
                        </div>
                        <Text className="text-sm text-gray-300 mb-2">Machine learning models for context quality prediction</Text>
                        <Text className="text-xs text-gray-400">Continuous training on agent feedback and performance metrics</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Badge color="purple" text="A/B Testing" />
                          </div>
                        </div>
                        <Text className="text-sm text-gray-300 mb-2">Automated experimentation framework for optimization</Text>
                        <Text className="text-xs text-gray-400">Statistical significance testing for context improvements</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Badge color="orange" text="Real-time Updates" />
                          </div>
                        </div>
                        <Text className="text-sm text-gray-300 mb-2">Live model updates based on feedback streams</Text>
                        <Text className="text-xs text-gray-400">Immediate integration of new learning into context filtering</Text>
                      </div>
                    </div>
                  </motion.div>
                </Card>
              </motion.div>
            </Col>
          </Row>

          {/* Feedback System Components */}
          <motion.div variants={fadeInUp} className="mb-16">
            <Row gutter={[24, 24]}>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <ThumbsUpIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">RL Training</Title>
                    <Text className="text-gray-400 text-sm">Reinforcement learning from human feedback</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <RefreshCwIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Continuous</Title>
                    <Text className="text-gray-400 text-sm">Real-time learning and model updates</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <TrendingUpIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Analytics</Title>
                    <Text className="text-gray-400 text-sm">Performance tracking and improvement metrics</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <Users2Icon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Multi-Agent</Title>
                    <Text className="text-gray-400 text-sm">Collaborative learning across agent networks</Text>
                  </div>
                </Card>
              </Col>
            </Row>
          </motion.div>

          {/* Continuous Learning Features */}
          <motion.div variants={fadeInUp} className="mb-16">
            <Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
              <Title level={2} className="text-white text-center mb-8">
                Continuous Improvement Through Real-World Data
              </Title>
              
              <Row gutter={[32, 32]}>
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-purple-500/10 rounded-full inline-block mb-4">
                      <TargetIcon size={40} className="text-purple-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Adaptive Learning</Title>
                    <Paragraph className="text-gray-300">
                      Dynamic algorithm adjustment based on real-world performance metrics 
                      with personalized learning paths for different agent types.
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-green-500/10 rounded-full inline-block mb-4">
                      <FlaskConicalIcon size={40} className="text-green-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">A/B Testing Framework</Title>
                    <Paragraph className="text-gray-300">
                      Automated experimentation platform for testing context relevance 
                      improvements with statistical significance validation.
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-blue-500/10 rounded-full inline-block mb-4">
                      <AwardIcon size={40} className="text-blue-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Performance Rewards</Title>
                    <Paragraph className="text-gray-300">
                      Incentive-based learning system with performance-based rewards 
                      and penalty mechanisms for optimal context quality.
                    </Paragraph>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>

          {/* Role-Based Learning */}
          <motion.div variants={fadeInUp}>
            <Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
              <Title level={3} className="text-white mb-6">Role-Based Context Filtering & Access Control</Title>
              
              <Row gutter={[24, 24]}>
                <Col xs={24} md={12}>
                  <div className="space-y-4">
                    <div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
                      <div className="p-2 bg-purple-500/20 rounded">
                        <Users2Icon size={20} className="text-purple-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Multi-Agent Learning</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Personalized learning models for different agent roles and capabilities
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
                      <div className="p-2 bg-green-500/20 rounded">
                        <BarChart3Icon size={20} className="text-green-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Performance Analytics</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Detailed metrics tracking and analysis for continuous optimization
                        </Paragraph>
                      </div>
                    </div>
                  </div>
                </Col>
                
                <Col xs={24} md={12}>
                  <div className="space-y-4">
                    <div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
                      <div className="p-2 bg-blue-500/20 rounded">
                        <ClockIcon size={20} className="text-blue-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Real-Time Adaptation</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Immediate learning integration with live performance monitoring
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="flex items-start space-x-4 p-4 bg-chorus-charcoal/30 rounded-lg">
                      <div className="p-2 bg-yellow-500/20 rounded">
                        <TrendingUpIcon size={20} className="text-yellow-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Predictive Modeling</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Future context relevance prediction based on historical patterns
                        </Paragraph>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}