'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Typography, Row, Col, Card, Tag, Timeline } from 'antd';
import { 
  DatabaseIcon,
  FilterIcon,
  BrainIcon,
  ShieldCheckIcon,
  ClockIcon,
  FoldersIcon,
  SearchIcon,
  LayersIcon,
  TrendingUpIcon,
  FileTextIcon,
  TagIcon,
  UsersIcon
} 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 SLURPShowcase() {
  return (
    <section id="slurp" className="section-padding bg-gradient-to-br from-emerald-950 via-chorus-charcoal to-amber-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-yellow-500/20 rounded-full mb-6">
              <DatabaseIcon size={48} className="text-yellow-500" />
            </div>
            <Title level={1} className="text-white mb-4">
              SLURP
            </Title>
            <Text className="text-2xl text-yellow-500 font-semibold block mb-4">
              Context Curator Service
            </Text>
            <Paragraph className="text-lg text-gray-300 max-w-3xl mx-auto">
              Context curation from Hypercore logs with role-based filtering, intelligent 
              relevance scoring, and seamless HCFS integration for transparent access.
            </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-yellow-500/20 rounded-lg">
                        <BrainIcon size={32} className="text-yellow-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Intelligent Context Curation</Title>
                        <Paragraph className="text-gray-300">
                          AI-powered context extraction from Hypercore logs with semantic analysis, 
                          relevance scoring, and automated categorization based on agent roles.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Text className="text-white font-medium">Hypercore Log Processing</Text>
                            <Tag color="blue">Real-time</Tag>
                          </div>
                        </div>
                        <Text className="text-sm text-gray-400">Continuous ingestion and processing of append-only log entries with tamper-evident verification</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Text className="text-white font-medium">Semantic Analysis</Text>
                            <Tag color="green">AI-Powered</Tag>
                          </div>
                        </div>
                        <Text className="text-sm text-gray-400">Natural language processing for content understanding and automatic categorization</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Text className="text-white font-medium">Role-Based Filtering</Text>
                            <Tag color="purple">Dynamic</Tag>
                          </div>
                        </div>
                        <Text className="text-sm text-gray-400">Context filtering based on agent roles, permissions, and access control policies</Text>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
                        <div className="flex items-center justify-between mb-3">
                          <div className="flex items-center space-x-3">
                            <Text className="text-white font-medium">SQL Interface</Text>
                            <Tag color="orange">Standards-Based</Tag>
                          </div>
                        </div>
                        <Text className="text-sm text-gray-400">Standard SQL queries for flexible context retrieval and integration</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-purple-500/20 rounded-lg">
                        <ShieldCheckIcon size={32} className="text-purple-500" />
                      </div>
                      <div>
                        <Title level={3} className="text-white mb-2">Role-Based Access Control</Title>
                        <Paragraph className="text-gray-300">
                          Granular permissions system with role-based context filtering, 
                          deprecation tracking, and feature-specific access controls.
                        </Paragraph>
                      </div>
                    </div>
                    
                    <div className="space-y-4">
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <Title level={5} className="text-white mb-3">Active Roles</Title>
                        <div className="space-y-3">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                              <div className="w-3 h-3 bg-green-500 rounded-full" />
                              <Text className="text-gray-300">AI-Agent-Alpha</Text>
                            </div>
                            <Tag color="green">Full Access</Tag>
                          </div>
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                              <div className="w-3 h-3 bg-yellow-500 rounded-full" />
                              <Text className="text-gray-300">AI-Agent-Beta</Text>
                            </div>
                            <Tag color="orange">Limited</Tag>
                          </div>
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-2">
                              <div className="w-3 h-3 bg-blue-500 rounded-full" />
                              <Text className="text-gray-300">Human-Operator</Text>
                            </div>
                            <Tag color="blue">Read-Only</Tag>
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
                        <Title level={5} className="text-white mb-3">Technical Architecture</Title>
                        <Timeline
                          size="small"
                          items={[
                            {
                              color: 'green',
                              children: (
                                <div>
                                  <Text className="text-gray-300 text-sm">Hypercore Protocol Integration</Text>
                                  <div className="text-xs text-gray-500">Tamper-evident append-only logs</div>
                                </div>
                              )
                            },
                            {
                              color: 'blue',
                              children: (
                                <div>
                                  <Text className="text-gray-300 text-sm">HCFS Filesystem Integration</Text>
                                  <div className="text-xs text-gray-500">Transparent context access via FUSE</div>
                                </div>
                              )
                            },
                            {
                              color: 'orange',
                              children: (
                                <div>
                                  <Text className="text-gray-300 text-sm">SQL Query Engine</Text>
                                  <div className="text-xs text-gray-500">Standard SQL interface for context retrieval</div>
                                </div>
                              )
                            },
                            {
                              color: 'purple',
                              children: (
                                <div>
                                  <Text className="text-gray-300 text-sm">Role-Based Access Control</Text>
                                  <div className="text-xs text-gray-500">Agent permissions and content filtering</div>
                                </div>
                              )
                            }
                          ]}
                        />
                      </div>
                    </div>
                  </motion.div>
                </Card>
              </motion.div>
            </Col>
          </Row>

          {/* Context Architecture 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">
                    <FileTextIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Hypercore</Title>
                    <Text className="text-gray-400 text-sm">Append-only log for tamper-evident audit trails</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <SearchIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">SQL Interface</Title>
                    <Text className="text-gray-400 text-sm">Standard SQL queries for flexible context retrieval</Text>
                  </div>
                </Card>
              </Col>
              <Col xs={12} sm={6}>
                <Card className="glass-effect border-0 text-center">
                  <div className="p-4">
                    <UsersIcon size={32} className="text-slate-400 mb-3" />
                    <Title level={4} className="text-white mb-2">Role-Based</Title>
                    <Text className="text-gray-400 text-sm">Context filtering based on agent roles and permissions</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">Real-time</Title>
                    <Text className="text-gray-400 text-sm">Live context updates as Hypercore log grows</Text>
                  </div>
                </Card>
              </Col>
            </Row>
          </motion.div>

          {/* SQL Context Delivery */}
          <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">
                SQL-Based Context Delivery
              </Title>
              
              <Row gutter={[32, 32]}>
                <Col xs={24} md={8}>
                  <div className="text-center">
                    <div className="p-4 bg-yellow-500/10 rounded-full inline-block mb-4">
                      <DatabaseIcon size={40} className="text-yellow-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Intelligent Querying</Title>
                    <Paragraph className="text-gray-300">
                      Advanced SQL queries with semantic search, relevance ranking, 
                      and context-aware result filtering for precise information delivery.
                    </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">
                      <FilterIcon size={40} className="text-green-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">Dynamic Filtering</Title>
                    <Paragraph className="text-gray-300">
                      Real-time context filtering based on agent roles, permissions, 
                      feature flags, and deprecation status for accurate information access.
                    </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">
                      <FoldersIcon size={40} className="text-blue-500" />
                    </div>
                    <Title level={4} className="text-white mb-3">HCFS Integration</Title>
                    <Paragraph className="text-gray-300">
                      Seamless filesystem integration for transparent context access, 
                      with automated indexing and real-time synchronization.
                    </Paragraph>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>

          {/* Context Processing Pipeline */}
          <motion.div variants={fadeInUp}>
            <Card className="glass-effect border-0" bodyStyle={{ padding: '2rem' }}>
              <Title level={3} className="text-white mb-6">Context Processing Pipeline</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-yellow-500/20 rounded">
                        <ClockIcon size={20} className="text-yellow-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Real-time Ingestion</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Continuous monitoring of Hypercore logs with low-latency processing
                        </Paragraph>
                      </div>
                    </div>
                    
                    <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">
                        <BrainIcon size={20} className="text-blue-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Semantic Analysis</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          AI-powered content understanding and automatic categorization
                        </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-green-500/20 rounded">
                        <TagIcon size={20} className="text-green-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Role-based Tagging</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Automatic tagging and permission assignment based on content type
                        </Paragraph>
                      </div>
                    </div>
                    
                    <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">
                        <TrendingUpIcon size={20} className="text-purple-500" />
                      </div>
                      <div>
                        <Text className="text-white font-medium">Relevance Scoring</Text>
                        <Paragraph className="text-gray-400 text-sm mb-0">
                          Dynamic scoring based on recency, frequency, and agent feedback
                        </Paragraph>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}