'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Badge } from 'antd';
import { 
  ZapIcon,
  NetworkIcon,
  RadioIcon,
  ShieldIcon,
  ServerIcon,
  ActivityIcon,
  WifiIcon,
  GitBranchIcon,
  CpuIcon,
  CloudIcon
} 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 BZZZShowcase() {
  return (
    <section id="bzzz" className="section-padding bg-gradient-to-br from-slate-900 via-chorus-charcoal to-emerald-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-chorus-green/20 rounded-full mb-6">
              <ZapIcon size={48} className="text-chorus-green" />
            </div>
            <Title level={1} className="text-white mb-4">
              BZZZ
            </Title>
            <Text className="text-2xl text-chorus-green font-semibold block mb-4">
              P2P Agent Coordination
            </Text>
            <Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
              Mesh networking with libp2p for resilient communication, automatic peer discovery, 
              and distributed task coordination without single points of failure.
            </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-green/20 rounded-lg">
                        <NetworkIcon size={32} className="text-chorus-green" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Mesh Network Architecture</Title>
                        <Paragraph className="text-gray-300">
                          Built on libp2p for robust peer-to-peer communication with automatic 
                          routing, NAT traversal, and adaptive connection management.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-chorus-green/20">
                      <div className="grid grid-cols-2 gap-4 mb-4">
                        <div className="text-center">
                          <div className="text-2xl font-bold text-chorus-green">libp2p</div>
                          <Text className="text-sm text-gray-400">Protocol Foundation</Text>
                        </div>
                        <div className="text-center">
                          <div className="text-2xl font-bold text-chorus-green">Go Runtime</div>
                          <Text className="text-sm text-gray-400">High Performance</Text>
                        </div>
                      </div>
                      
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Text className="text-gray-300">Network Architecture</Text>
                          <Badge status="success" text="P2P Mesh" />
                        </div>
                        <div className="flex items-center justify-between">
                          <Text className="text-gray-300">Discovery Protocol</Text>
                          <Badge status="success" text="mDNS + DHT" />
                        </div>
                        <div className="flex items-center justify-between">
                          <Text className="text-gray-300">Message Routing</Text>
                          <Badge status="processing" text="Gossipsub" />
                        </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-blue-500/20 rounded-lg">
                        <RadioIcon size={32} className="text-blue-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Automatic Peer Discovery</Title>
                        <Paragraph className="text-gray-300">
                          mDNS-based service discovery with intelligent peer ranking, 
                          connection pooling, and failover mechanisms.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
                        <div className="flex items-center space-x-3 mb-3">
                          <div className="w-3 h-3 rounded-full bg-green-500" />
                          <Text className="text-white font-medium">Peer Discovery</Text>
                          <Badge color="green" text="mDNS + DHT" />
                        </div>
                        <Text className="text-sm text-gray-400">Automatic peer discovery via multicast DNS and distributed hash table routing</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
                        <div className="flex items-center space-x-3 mb-3">
                          <div className="w-3 h-3 rounded-full bg-blue-500" />
                          <Text className="text-white font-medium">Connection Multiplexing</Text>
                          <Badge color="blue" text="yamux" />
                        </div>
                        <Text className="text-sm text-gray-400">Multiple streams over single connections for efficient resource utilization</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
                        <div className="flex items-center space-x-3 mb-3">
                          <div className="w-3 h-3 rounded-full bg-purple-500" />
                          <Text className="text-white font-medium">NAT Traversal</Text>
                          <Badge color="purple" text="AutoRelay" />
                        </div>
                        <Text className="text-sm text-gray-400">Automatic relay discovery and holepunching for firewall traversal</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
                        <div className="flex items-center space-x-3 mb-3">
                          <div className="w-3 h-3 rounded-full bg-orange-500" />
                          <Text className="text-white font-medium">Transport Security</Text>
                          <Badge color="orange" text="Noise Protocol" />
                        </div>
                        <Text className="text-sm text-gray-400">End-to-end encryption with forward secrecy for all peer communications</Text>
                      </div>
                    </div>
                  </motion.div>
                </Card>
              </motion.div>
            </Col>
          </Row>

          {/* Network Architecture Highlights */}
          <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">
                    <ServerIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">libp2p</Title>
                    <Text className="text-gray-400 text-sm">Peer-to-peer networking protocol with automatic discovery</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <ActivityIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Gossipsub</Title>
                    <Text className="text-gray-400 text-sm">Efficient message propagation across the P2P mesh network</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <ShieldIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Noise Protocol</Title>
                    <Text className="text-gray-400 text-sm">Cryptographic security for all peer communications</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <WifiIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">DHT Routing</Title>
                    <Text className="text-gray-400 text-sm">Distributed hash table for decentralized agent discovery</Text>
                  </div>
                </Card>
              </Col>
            </Row>
          </motion.div>

          {/* Technical Architecture */}
          <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">
                High-Performance Go Architecture
              </Title>
              
              <Row gutter={[32, 32]}>
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-chorus-green/10 rounded-full inline-block mb-4">
                      <CpuIcon size={40} className="text-chorus-green" />
                    </div>
                    <Title level={4} className="text-white mb-3">Concurrent Processing</Title>
                    <Paragraph className="text-gray-300">
                      Goroutine-based concurrent task handling with intelligent work 
                      stealing and adaptive thread pooling for maximum throughput.
                    </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">
                      <GitBranchIcon size={40} className="text-blue-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Fault Tolerance</Title>
                    <Paragraph className="text-gray-300">
                      Distributed consensus mechanisms with automatic failover, 
                      circuit breakers, and graceful degradation patterns.
                    </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">
                      <CloudIcon size={40} className="text-purple-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Scale-out Architecture</Title>
                    <Paragraph className="text-gray-300">
                      Horizontal scaling capabilities with dynamic peer joining, 
                      load redistribution, and seamless cluster expansion.
                    </Paragraph>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>

          {/* Coordination Features */}
          <motion.div variants={fadeInUp}>
            <Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
              <Title level={3} className="text-white mb-6">Distributed Task Coordination</Title>
              
              <Row gutter={[24, 24]}>
                <Col xs={24} md={12}>
                  <div className="space-y-4">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-chorus-green rounded-full" />
                      <Text className="text-gray-300">Consensus-based task allocation</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-chorus-green rounded-full" />
                      <Text className="text-gray-300">Dynamic workload rebalancing</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-chorus-green rounded-full" />
                      <Text className="text-gray-300">Real-time peer health monitoring</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-chorus-green rounded-full" />
                      <Text className="text-gray-300">Automatic failure recovery</Text>
                    </div>
                  </div>
                </Col>
                
                <Col xs={24} md={12}>
                  <div className="space-y-4">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full" />
                      <Text className="text-gray-300">Message routing optimization</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full" />
                      <Text className="text-gray-300">End-to-end encryption</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full" />
                      <Text className="text-gray-300">Bandwidth throttling</Text>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full" />
                      <Text className="text-gray-300">Connection multiplexing</Text>
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}