import React from 'react';
import { Database, Cloud, Shield, Zap, Cpu, Network } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import tecnologiaSaudeImg from '../assets/tecnologia_saude_1.webp';
import redesSaudeImg from '../assets/redes_saude_inteligentes_1.png';

const Technology = () => {
  const techStack = [
    {
      category: 'Integração de Dados',
      icon: Database,
      color: 'bg-blue-500',
      technologies: [
        { name: 'Apache Camel', description: 'Framework de integração empresarial' },
        { name: 'Apache NiFi', description: 'Automação de fluxo de dados' },
        { name: 'HL7 FHIR', description: 'Padrão de interoperabilidade em saúde' },
        { name: 'REST/SOAP APIs', description: 'Conectores universais' },
      ],
    },
    {
      category: 'Processamento de Dados',
      icon: Cpu,
      color: 'bg-green-500',
      technologies: [
        { name: 'Apache Spark', description: 'Processamento distribuído em tempo real' },
        { name: 'Databricks', description: 'Plataforma de analytics unificada' },
        { name: 'Data Lake', description: 'Armazenamento escalável de dados' },
        { name: 'Lakehouse', description: 'Arquitetura híbrida de dados' },
      ],
    },
    {
      category: 'Inteligência Artificial',
      icon: Zap,
      color: 'bg-purple-500',
      technologies: [
        { name: 'Machine Learning', description: 'Algoritmos de aprendizado automático' },
        { name: 'Natural Language Processing', description: 'Processamento de linguagem natural' },
        { name: 'Computer Vision', description: 'Análise de imagens médicas' },
        { name: 'RPA', description: 'Automação robótica de processos' },
      ],
    },
    {
      category: 'Infraestrutura Cloud',
      icon: Cloud,
      color: 'bg-indigo-500',
      technologies: [
        { name: 'Amazon S3', description: 'Armazenamento de objetos escalável' },
        { name: 'Kubernetes', description: 'Orquestração de containers' },
        { name: 'Docker', description: 'Containerização de aplicações' },
        { name: 'Microservices', description: 'Arquitetura de serviços distribuídos' },
      ],
    },
    {
      category: 'Segurança e Governança',
      icon: Shield,
      color: 'bg-red-500',
      technologies: [
        { name: 'Zero Trust Security', description: 'Modelo de segurança sem confiança implícita' },
        { name: 'Blockchain', description: 'Rastreabilidade e auditoria (opcional)' },
        { name: 'Criptografia Avançada', description: 'Proteção de dados sensíveis' },
        { name: 'LGPD Compliance', description: 'Conformidade com regulamentações' },
      ],
    },
    {
      category: 'Visualização e APIs',
      icon: Network,
      color: 'bg-yellow-500',
      technologies: [
        { name: 'Power BI', description: 'Dashboards e relatórios interativos' },
        { name: 'Metabase', description: 'Analytics self-service' },
        { name: 'React', description: 'Interface de usuário moderna' },
        { name: 'GraphQL', description: 'APIs flexíveis e eficientes' },
      ],
    },
  ];

  const architecture = [
    {
      layer: 'Camada de Apresentação',
      description: 'Interfaces web e mobile responsivas',
      components: ['React Web Apps', 'React Native Mobile', 'Power BI Dashboards', 'APIs REST/GraphQL'],
    },
    {
      layer: 'Camada de Aplicação',
      description: 'Lógica de negócio e processamento',
      components: ['Microservices', 'Business Logic', 'Workflow Engine', 'Notification Service'],
    },
    {
      layer: 'Camada de Dados',
      description: 'Processamento e armazenamento de dados',
      components: ['Apache Spark', 'Databricks', 'Data Lake', 'Real-time Streaming'],
    },
    {
      layer: 'Camada de Integração',
      description: 'Conectores e adaptadores de sistemas',
      components: ['Apache Camel', 'HL7 FHIR', 'REST/SOAP APIs', 'File Processors'],
    },
  ];

  const principles = [
    {
      title: 'Interoperabilidade por Design',
      description: 'Construída desde o início para conectar sistemas heterogêneos sem necessidade de mudanças nos sistemas existentes.',
    },
    {
      title: 'Escalabilidade Horizontal',
      description: 'Arquitetura que cresce conforme a demanda, suportando desde pequenos municípios até estados inteiros.',
    },
    {
      title: 'Segurança em Camadas',
      description: 'Múltiplas camadas de segurança garantem proteção total dos dados sensíveis de saúde.',
    },
    {
      title: 'IA Explicável',
      description: 'Algoritmos transparentes e auditáveis que permitem compreender como as decisões são tomadas.',
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="section-padding bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                Tecnologia <span className="gradient-text">IAsis</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Nossa stack tecnológica combina as melhores ferramentas de mercado 
                com arquiteturas modernas para criar uma plataforma robusta, 
                escalável e segura para interoperabilidade em saúde.
              </p>
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <div className="text-3xl font-bold text-primary mb-2">99.9%</div>
                  <div className="text-gray-600">Uptime Garantido</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-primary mb-2">&lt;100ms</div>
                  <div className="text-gray-600">Latência de APIs</div>
                </div>
              </div>
            </div>
            <div className="relative">
              <img
                src={tecnologiaSaudeImg}
                alt="Tecnologia em Saúde"
                className="rounded-2xl shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Tech Stack */}
      <section className="section-padding bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Stack Tecnológico
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Utilizamos tecnologias de ponta para garantir performance, 
              escalabilidade e confiabilidade em todos os aspectos da plataforma.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {techStack.map((category, index) => (
              <Card key={index} className="border-0 shadow-lg card-hover">
                <CardHeader>
                  <div className="flex items-center space-x-3 mb-4">
                    <div className={`w-10 h-10 ${category.color} rounded-lg flex items-center justify-center`}>
                      <category.icon className="h-5 w-5 text-white" />
                    </div>
                    <CardTitle className="text-lg">{category.category}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {category.technologies.map((tech, techIndex) => (
                      <div key={techIndex}>
                        <div className="flex items-center justify-between mb-1">
                          <span className="font-medium text-gray-900">{tech.name}</span>
                        </div>
                        <p className="text-sm text-gray-600">{tech.description}</p>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Architecture */}
      <section className="section-padding bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Arquitetura da Plataforma
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Uma arquitetura em camadas que garante modularidade, 
              manutenibilidade e escalabilidade.
            </p>
          </div>
          
          <div className="space-y-6">
            {architecture.map((layer, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="text-xl">{layer.layer}</CardTitle>
                      <CardDescription className="text-base mt-2">{layer.description}</CardDescription>
                    </div>
                    <div className="text-3xl font-bold text-primary/20">
                      {String(architecture.length - index).padStart(2, '0')}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                    {layer.components.map((component, componentIndex) => (
                      <Badge key={componentIndex} variant="secondary" className="justify-center py-2">
                        {component}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Principles */}
      <section className="section-padding bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-8">
                Princípios Arquiteturais
              </h2>
              <div className="space-y-6">
                {principles.map((principle, index) => (
                  <div key={index} className="border-l-4 border-primary pl-6">
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                      {principle.title}
                    </h3>
                    <p className="text-gray-600 leading-relaxed">
                      {principle.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <img
                src={redesSaudeImg}
                alt="Redes de Saúde Inteligentes"
                className="rounded-2xl shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Performance Metrics */}
      <section className="section-padding bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Performance e Confiabilidade
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Métricas que demonstram a robustez e eficiência da nossa plataforma.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-3xl font-bold text-primary">99.9%</CardTitle>
                <CardDescription>Uptime Garantido</CardDescription>
              </CardHeader>
            </Card>
            
            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-3xl font-bold text-primary">&lt;100ms</CardTitle>
                <CardDescription>Latência de APIs</CardDescription>
              </CardHeader>
            </Card>
            
            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-3xl font-bold text-primary">1M+</CardTitle>
                <CardDescription>Registros/Segundo</CardDescription>
              </CardHeader>
            </Card>
            
            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-3xl font-bold text-primary">24/7</CardTitle>
                <CardDescription>Monitoramento</CardDescription>
              </CardHeader>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding gradient-bg">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            Quer conhecer nossa arquitetura em detalhes?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Nossos arquitetos de soluções podem apresentar como nossa 
            tecnologia se adapta às suas necessidades específicas.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-white text-primary hover:bg-white/90 px-6 py-3 rounded-lg font-medium transition-colors">
              Falar com Arquiteto
            </button>
            <button className="border border-white text-white hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-medium transition-colors">
              Download Whitepaper
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Technology;

