'use client';

import { motion } from 'framer-motion';
import { Network, Database, Shield, Server, Globe, Lock } from 'lucide-react';

const components = [
  {
    name: 'Corestore & Autopass',
    description: 'Decentralized storage and secure writer additions',
    icon: Database,
    position: 'top-left',
  },
  {
    name: 'Hyperswarm',
    description: 'Peer discovery using fixed topic',
    icon: Network,
    position: 'top-center',
  },
  {
    name: 'DNS Handler',
    description: 'UDP server for P2P and public DNS resolution',
    icon: Globe,
    position: 'top-right',
  },
  {
    name: 'Proxy Server',
    description: 'HTTPS/HTTP with WebSocket support',
    icon: Server,
    position: 'bottom-left',
  },
  {
    name: 'Holesail',
    description: 'Secure UDP Holepunched Tunnels',
    icon: Shield,
    position: 'bottom-right',
  },
  {
    name: 'Certificate Authority',
    description: 'Automatic TLS certificate generation and management',
    icon: Lock,
    position: 'bottom-center',
  },
];

export default function ArchitectureDiagram() {
  return (
    <div className="relative bg-gray-50 dark:bg-gray-800 rounded-lg p-8 border border-gray-200 dark:border-gray-700">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {components.map((component, index) => {
          const Icon = component.icon;
          return (
            <motion.div
              key={component.name}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="bg-white dark:bg-gray-900 p-6 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 transition-colors"
            >
              <div className="flex items-center space-x-3 mb-3">
                <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
                  <Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {component.name}
                </h3>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {component.description}
              </p>
            </motion.div>
          );
        })}
      </div>
      
      <div className="mt-8 text-center">
        <div className="inline-flex items-center space-x-2 px-4 py-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
          <Network className="h-5 w-5 text-blue-600 dark:text-blue-400" />
          <span className="text-sm font-medium text-gray-900 dark:text-white">
            All components work together to create a resilient P2P DNS system
          </span>
        </div>
      </div>
    </div>
  );
}