chorus-services-website/components/sections/WHOOSHShowcase.tsx

'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Progress, Statistic } from 'antd';
import { 
  RocketIcon,
  WorkflowIcon,
  BarChart3Icon,
  UsersIcon,
  ZapIcon,
  LayersIcon,
  MonitorIcon,
  NetworkIcon
} 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 WHOOSHShowcase() {
  return (
    <section id="whoosh" className="section-padding bg-gradient-to-br from-chorus-charcoal via-chorus-charcoal to-slate-900">
      <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-chorus-blue/20 rounded-full mb-6">
              <RocketIcon size={48} className="text-chorus-blue" />
            </div>
            <Title level={1} className="text-white mb-4">
              WHOOSH
            </Title>
            <Text className="text-2xl text-chorus-blue font-semibold block mb-4">
              Orchestration Engine
            </Text>
            <Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
              Enterprise-grade workflow management for AI agents with visual editing, 
              real-time monitoring, and intelligent task distribution.
            </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-chorus-blue/20 rounded-lg">
                        <WorkflowIcon size={32} className="text-chorus-blue" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Visual Workflow Editor</Title>
                        <Paragraph className="text-gray-300">
                          Drag-and-drop interface powered by React Flow for creating complex 
                          AI agent workflows with intuitive node connections and real-time validation.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-chorus-blue/20">
                      <div className="grid grid-cols-3 gap-4">
                        <div className="text-center">
                          <div className="w-12 h-12 bg-chorus-blue/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
                            <LayersIcon size={20} className="text-chorus-blue" />
                          </div>
                          <Text className="text-sm text-gray-400">Input Nodes</Text>
                        </div>
                        <div className="text-center">
                          <div className="w-12 h-12 bg-green-500/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
                            <ZapIcon size={20} className="text-green-500" />
                          </div>
                          <Text className="text-sm text-gray-400">Process Nodes</Text>
                        </div>
                        <div className="text-center">
                          <div className="w-12 h-12 bg-purple-500/20 rounded-lg mx-auto mb-2 flex items-center justify-center">
                            <NetworkIcon size={20} className="text-purple-500" />
                          </div>
                          <Text className="text-sm text-gray-400">Output Nodes</Text>
                        </div>
                      </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">
                        <MonitorIcon size={32} className="text-green-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Real-time Performance Monitoring</Title>
                        <Paragraph className="text-gray-300">
                          Comprehensive metrics dashboard with workflow execution tracking, 
                          performance analytics, and intelligent alerting systems.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div>
                        <div className="flex justify-between mb-2">
                          <Text className="text-gray-300">Workflow Execution</Text>
                          <Text className="text-green-500">98.7%</Text>
                        </div>
                        <Progress 
                          percent={98.7} 
                          strokeColor="#30d158" 
                          trailColor="#2a2a2a"
                          showInfo={false}
                        />
                      </div>
                      <div>
                        <div className="flex justify-between mb-2">
                          <Text className="text-gray-300">Agent Utilization</Text>
                          <Text className="text-chorus-blue">85.2%</Text>
                        </div>
                        <Progress 
                          percent={85.2} 
                          strokeColor="#007aff" 
                          trailColor="#2a2a2a"
                          showInfo={false}
                        />
                      </div>
                      <div>
                        <div className="flex justify-between mb-2">
                          <Text className="text-gray-300">Task Completion</Text>
                          <Text className="text-yellow-500">92.4%</Text>
                        </div>
                        <Progress 
                          percent={92.4} 
                          strokeColor="#eab308" 
                          trailColor="#2a2a2a"
                          showInfo={false}
                        />
                      </div>
                    </div>
                  </motion.div>
                </Card>
              </motion.div>
            </Col>
          </Row>

          {/* Performance Statistics */}
          <motion.div variants={fadeInUp} className="mb-16">
            <Row gutter={[24, 24]}>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <Statistic
                    title={<span className="text-gray-400">Active Workflows</span>}
                    value={1247}
                    valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
                    prefix={<WorkflowIcon size={20} className="text-chorus-blue" />}
                  />
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <Statistic
                    title={<span className="text-gray-400">Tasks/Hour</span>}
                    value={15420}
                    valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
                    prefix={<ZapIcon size={20} className="text-green-500" />}
                  />
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <Statistic
                    title={<span className="text-gray-400">Connected Agents</span>}
                    value={89}
                    valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
                    prefix={<UsersIcon size={20} className="text-yellow-500" />}
                  />
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <Statistic
                    title={<span className="text-gray-400">Uptime</span>}
                    value={99.9}
                    precision={1}
                    suffix="%"
                    valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
                    prefix={<BarChart3Icon size={20} className="text-orange-500" />}
                  />
                </Card>
              </Col>
            </Row>
          </motion.div>

          {/* Key Capabilities */}
          <motion.div variants={fadeInUp}>
            <Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
              <Title level={2} className="text-white text-center mb-8">
                Enterprise Orchestration Capabilities
              </Title>
              
              <Row gutter={[32, 32]}>
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-chorus-blue/10 rounded-full inline-block mb-4">
                      <UsersIcon size={40} className="text-chorus-blue" />
                    </div>
                    <Title level={4} className="text-white mb-3">Multi-Agent Task Distribution</Title>
                    <Paragraph className="text-gray-300">
                      Intelligent workload balancing across agent networks with dynamic 
                      scaling and fault tolerance mechanisms.
                    </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">
                      <BarChart3Icon size={40} className="text-green-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Performance Analytics</Title>
                    <Paragraph className="text-gray-300">
                      Real-time metrics collection with predictive analytics for 
                      workflow optimization and bottleneck identification.
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-purple-500/10 rounded-full inline-block mb-4">
                      <LayersIcon size={40} className="text-purple-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Workflow Management</Title>
                    <Paragraph className="text-gray-300">
                      Version control, rollback capabilities, and A/B testing for 
                      continuous workflow improvement and reliability.
                    </Paragraph>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}