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

'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Space } from 'antd';
import { 
  RocketIcon,
  ZapIcon,
  DatabaseIcon,
  BrainCircuitIcon,
  ArrowRightIcon,
  RefreshCwIcon,
  NetworkIcon,
  FlowIcon
} 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.2
    }
  }
};

const flowAnimation = {
  hidden: { pathLength: 0, opacity: 0 },
  visible: { 
    pathLength: 1, 
    opacity: 1,
    transition: { 
      duration: 2, 
      ease: 'easeInOut',
      repeat: Infinity,
      repeatType: 'loop' as const,
      repeatDelay: 1
    }
  }
};

// Component data
const components = [
  {
    name: 'WHOOSH',
    icon: RocketIcon,
    color: '#007aff',
    description: 'Orchestrates workflows and manages agent tasks',
    position: { x: 10, y: 20 }
  },
  {
    name: 'BZZZ',
    icon: ZapIcon,
    color: '#30d158',
    description: 'Coordinates P2P communication between agents',
    position: { x: 70, y: 20 }
  },
  {
    name: 'SLURP',
    icon: DatabaseIcon,
    color: '#eab308',
    description: 'Curates and filters context based on roles',
    position: { x: 10, y: 70 }
  },
  {
    name: 'COOEE',
    icon: BrainCircuitIcon,
    color: '#a855f7',
    description: 'Learns and adapts from agent feedback',
    position: { x: 70, y: 70 }
  }
];

// Integration flows
const flows = [
  { from: 'WHOOSH', to: 'BZZZ', description: 'Task Distribution' },
  { from: 'BZZV', to: 'SLURP', description: 'Context Requests' },
  { from: 'SLURP', to: 'COOEE', description: 'Feedback Data' },
  { from: 'COOEE', to: 'WHOOSH', description: 'Performance Insights' }
];

export default function IntegrationShowcase() {
  return (
    <section id="integration" className="section-padding bg-gradient-to-br from-purple-950 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-gradient-to-r from-chorus-blue/20 to-chorus-green/20 rounded-full mb-6">
              <NetworkIcon size={48} className="text-white" />
            </div>
            <Title level={1} className="text-white mb-4">
              The Complete CHORUS Ecosystem
            </Title>
            <Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
              Four powerful components working in harmony to create the most advanced 
              AI orchestration platform. See how they integrate to deliver unmatched performance.
            </Paragraph>
          </motion.div>

          {/* Interactive Architecture Diagram */}
          <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">
                System Architecture & Data Flow
              </Title>
              
              <div className="relative h-96 mb-8">
                {/* SVG Flow Diagram */}
                <svg 
                  viewBox="0 0 100 100" 
                  className="absolute inset-0 w-full h-full"
                  style={{ zIndex: 1 }}
                >
                  {/* Flow paths */}
                  <motion.path
                    d="M 25 25 Q 50 15 75 25"
                    fill="none"
                    stroke="#007aff"
                    strokeWidth="0.5"
                    strokeDasharray="2,2"
                    variants={flowAnimation}
                    initial="hidden"
                    animate="visible"
                  />
                  <motion.path
                    d="M 75 35 Q 85 50 75 65"
                    fill="none"
                    stroke="#30d158"
                    strokeWidth="0.5"
                    strokeDasharray="2,2"
                    variants={flowAnimation}
                    initial="hidden"
                    animate="visible"
                  />
                  <motion.path
                    d="M 65 75 Q 50 85 35 75"
                    fill="none"
                    stroke="#eab308"
                    strokeWidth="0.5"
                    strokeDasharray="2,2"
                    variants={flowAnimation}
                    initial="hidden"
                    animate="visible"
                  />
                  <motion.path
                    d="M 25 65 Q 15 50 25 35"
                    fill="none"
                    stroke="#a855f7"
                    strokeWidth="0.5"
                    strokeDasharray="2,2"
                    variants={flowAnimation}
                    initial="hidden"
                    animate="visible"
                  />
                </svg>

                {/* Component nodes */}
                {components.map((component, index) => {
                  const Icon = component.icon;
                  return (
                    <motion.div
                      key={component.name}
                      className="absolute transform -translate-x-1/2 -translate-y-1/2"
                      style={{
                        left: `${component.position.x}%`,
                        top: `${component.position.y}%`,
                        zIndex: 2
                      }}
                      variants={fadeInUp}
                      whileHover={{ scale: 1.1 }}
                    >
                      <div className="text-center">
                        <div 
                          className="w-16 h-16 rounded-full flex items-center justify-center glass-effect border-2 mb-3 mx-auto"
                          style={{ borderColor: component.color }}
                        >
                          <Icon size={28} style={{ color: component.color }} />
                        </div>
                        <Text className="text-white font-semibold block">{component.name}</Text>
                        <Text className="text-xs text-gray-400 max-w-24 block">
                          {component.description}
                        </Text>
                      </div>
                    </motion.div>
                  );
                })}
              </div>

              {/* Flow descriptions */}
              <Row gutter={[16, 16]}>
                <Col xs={12} md={6}>
                  <div className="text-center p-3 bg-chorus-blue/10 rounded-lg">
                    <ArrowRightIcon size={20} className="text-chorus-blue mx-auto mb-2" />
                    <Text className="text-xs text-gray-300">Task Distribution</Text>
                  </div>
                </Col>
                <Col xs={12} md={6}>
                  <div className="text-center p-3 bg-green-500/10 rounded-lg">
                    <ArrowRightIcon size={20} className="text-green-500 mx-auto mb-2" />
                    <Text className="text-xs text-gray-300">Context Requests</Text>
                  </div>
                </Col>
                <Col xs={12} md={6}>
                  <div className="text-center p-3 bg-yellow-500/10 rounded-lg">
                    <ArrowRightIcon size={20} className="text-yellow-500 mx-auto mb-2" />
                    <Text className="text-xs text-gray-300">Feedback Data</Text>
                  </div>
                </Col>
                <Col xs={12} md={6}>
                  <div className="text-center p-3 bg-purple-500/10 rounded-lg">
                    <RefreshCwIcon size={20} className="text-purple-500 mx-auto mb-2" />
                    <Text className="text-xs text-gray-300">Performance Insights</Text>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>

          {/* Integration Benefits */}
          <Row gutter={[32, 32]} className="mb-16">
            <Col xs={24} lg={12}>
              <motion.div variants={fadeInUp}>
                <Card className="h-full glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
                  <Title level={3} className="text-white mb-4">Seamless Integration</Title>
                  <Space direction="vertical" size="large" className="w-full">
                    <div>
                      <Text className="text-chorus-blue font-semibold">Unified API Layer</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Single API interface for all CHORUS services with consistent authentication and error handling.
                      </Paragraph>
                    </div>
                    <div>
                      <Text className="text-chorus-green font-semibold">Real-time Synchronization</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Event-driven architecture ensures all components stay in sync with minimal latency.
                      </Paragraph>
                    </div>
                    <div>
                      <Text className="text-yellow-500 font-semibold">Shared Context</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Common context model across all services for consistent data interpretation.
                      </Paragraph>
                    </div>
                  </Space>
                </Card>
              </motion.div>
            </Col>

            <Col xs={24} lg={12}>
              <motion.div variants={fadeInUp}>
                <Card className="h-full glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
                  <Title level={3} className="text-white mb-4">Enterprise Benefits</Title>
                  <Space direction="vertical" size="large" className="w-full">
                    <div>
                      <Text className="text-purple-500 font-semibold">Scalable Architecture</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Each component scales independently while maintaining tight integration.
                      </Paragraph>
                    </div>
                    <div>
                      <Text className="text-orange-500 font-semibold">Fault Tolerance</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Distributed design with automatic failover and graceful degradation.
                      </Paragraph>
                    </div>
                    <div>
                      <Text className="text-red-500 font-semibold">Performance Monitoring</Text>
                      <Paragraph className="text-gray-300 mb-0">
                        Built-in monitoring and alerting across the entire ecosystem.
                      </Paragraph>
                    </div>
                  </Space>
                </Card>
              </motion.div>
            </Col>
          </Row>

          {/* Data Flow Steps */}
          <motion.div variants={fadeInUp}>
            <Card className="glass-effect border-0" bodyStyle={{ padding: '3rem' }}>
              <Title level={2} className="text-white text-center mb-8">
                How It All Works Together
              </Title>
              
              <Row gutter={[24, 24]}>
                <Col xs={24} md={6}>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-chorus-blue/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Text className="text-chorus-blue font-bold">1</Text>
                    </div>
                    <Title level={5} className="text-white mb-2">Task Creation</Title>
                    <Paragraph className="text-gray-400 text-sm">
                      WHOOSH receives workflow requests and creates optimized task distributions
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={6}>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Text className="text-green-500 font-bold">2</Text>
                    </div>
                    <Title level={5} className="text-white mb-2">Agent Coordination</Title>
                    <Paragraph className="text-gray-400 text-sm">
                      BZZZ coordinates agent communication and ensures reliable task delivery
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={6}>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Text className="text-yellow-500 font-bold">3</Text>
                    </div>
                    <Title level={5} className="text-white mb-2">Context Delivery</Title>
                    <Paragraph className="text-gray-400 text-sm">
                      SLURP provides relevant, role-based context to agents for informed decisions
                    </Paragraph>
                  </div>
                </Col>
                
                <Col xs={24} md={6}>
                  <div className="text-center">
                    <div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Text className="text-purple-500 font-bold">4</Text>
                    </div>
                    <Title level={5} className="text-white mb-2">Continuous Learning</Title>
                    <Paragraph className="text-gray-400 text-sm">
                      COOEE collects feedback and optimizes the entire system for better performance
                    </Paragraph>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}