import React from 'react';
import { Database, Brain, Heart, Zap, Shield, Users, ArrowRight, CheckCircle } from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import interoperabilidadeImg from '../assets/interoperabilidade_saude_1.jpg';
import digitalTwinImg from '../assets/digital_twin_saude_1.png';
import jornadadaPacienteImg from '../assets/jornada_paciente_1.png';

const Platform = () => {
  const products = [
    {
      title: 'WEB3 ENGINE',
      subtitle: 'Infraestrutura de Integração',
      description: 'O coração técnico da IAsis que resolve a fragmentação dos sistemas legados, transformando dados desconexos em uma infraestrutura viva, interoperável e inteligente.',
      image: interoperabilidadeImg,
      icon: Database,
      color: 'bg-blue-500',
      features: [
        'Conectores REST/SOAP/HL7/FHIR',
        'Golder Record do paciente',
        'Leitura automatizada de dados',
        'Orquestração de processos (RPA + AI)',
        'Ontologia própria',
        'Data lake federado por território',
      ],
      users: ['Times de TI', 'Engenharia', 'Gestão de Sistemas', 'Auditores'],
      technologies: ['Apache Camel', 'Spark', 'Databricks', 'NiFi', 'S3'],
    },
    {
      title: 'SMART DIGITAL TWIN',
      subtitle: 'Inteligência Estratégica',
      description: 'Transforma o território em um gêmeo digital da saúde, permitindo decisões em tempo real baseadas em dados organizados e cruzados.',
      image: digitalTwinImg,
      icon: Brain,
      color: 'bg-purple-500',
      features: [
        'Painéis táticos e estratégicos',
        'Insights preditivos e prescritivos',
        'Cruza dados clínicos e epidemiológicos',
        'Ações orientadas por dados',
        'IA explicável e personalizável',
        'APIs públicas para integração',
      ],
      users: ['Secretários de saúde', 'Diretoria de Operações', 'Núcleos de Informação'],
      technologies: ['Power BI', 'Metabase', 'Spark/Databricks', 'APIs REST'],
    },
    {
      title: 'MED JOURNEY',
      subtitle: 'Continuidade do Cuidado',
      description: 'Promove continuidade de cuidado, integrando dados clínicos e notificando pacientes e equipes de saúde sobre ações necessárias.',
      image: jornadadaPacienteImg,
      icon: Heart,
      color: 'bg-green-500',
      features: [
        'Navegador de jornada clínica',
        'Monitoramento de linhas prioritárias',
        'Notificações inteligentes',
        'Conexão com teleatendimento',
        'Motor de jornada personalizável',
        'Apps mobile e web',
      ],
      users: ['Equipes de saúde da família', 'Cuidadores', 'Regulação', 'Atenção primária'],
      technologies: ['React Native', 'APIs abertas', 'Push notifications', 'WebRTC'],
    },
  ];

  const architecture = [
    {
      layer: 'Camada de Integração',
      description: 'Conectores universais para qualquer sistema de saúde',
      technologies: ['HL7 FHIR', 'REST/SOAP APIs', 'CSV/XML', 'Bancos de dados'],
    },
    {
      layer: 'Camada de Processamento',
      description: 'Pipeline de dados em tempo real com normalização semântica',
      technologies: ['Apache Spark', 'Databricks', 'Apache NiFi', 'Data Lake'],
    },
    {
      layer: 'Camada de Inteligência',
      description: 'IA aplicada para classificação, predição e automação',
      technologies: ['Machine Learning', 'NLP', 'Computer Vision', 'RPA'],
    },
    {
      layer: 'Camada de Produtos',
      description: 'Dashboards, APIs e aplicações para usuários finais',
      technologies: ['React', 'Power BI', 'APIs REST', 'Mobile Apps'],
    },
  ];

  const benefits = [
    {
      icon: Zap,
      title: 'Implementação Rápida',
      description: 'Valor entregue em 30-60 dias com metodologia ágil',
    },
    {
      icon: Shield,
      title: 'Segurança Total',
      description: 'Conformidade com LGPD e padrões internacionais',
    },
    {
      icon: Users,
      title: 'Squads Especializados',
      description: 'Time multidisciplinar dedicado ao seu sucesso',
    },
    {
      icon: Database,
      title: 'Interoperabilidade Real',
      description: 'Conecta qualquer sistema sem troca de infraestrutura',
    },
  ];

  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="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Plataforma <span className="gradient-text">IAsis</span>
            </h1>
            <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
              Uma arquitetura modular e escalável que transforma dados de saúde fragmentados 
              em inteligência acionável, conectando sistemas, pessoas e processos em uma 
              rede integrada de cuidado.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {benefits.map((benefit, index) => (
              <Card key={index} className="text-center border-0 shadow-lg card-hover">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                    <benefit.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{benefit.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{benefit.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Products Section */}
      <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">
              Nossos Produtos Digitais
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Três produtos principais que se integram para formar uma plataforma 
              completa de interoperabilidade em saúde.
            </p>
          </div>
          
          <div className="space-y-24">
            {products.map((product, index) => (
              <div key={index} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? 'lg:grid-flow-col-dense' : ''}`}>
                <div className={index % 2 === 1 ? 'lg:col-start-2' : ''}>
                  <div className="flex items-center mb-6">
                    <div className={`w-12 h-12 ${product.color} rounded-lg flex items-center justify-center mr-4`}>
                      <product.icon className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-2xl font-bold gradient-text">{product.title}</h3>
                      <p className="text-gray-600">{product.subtitle}</p>
                    </div>
                  </div>
                  
                  <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                    {product.description}
                  </p>
                  
                  <div className="mb-8">
                    <h4 className="text-lg font-semibold text-gray-900 mb-4">Principais Funcionalidades:</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      {product.features.map((feature, featureIndex) => (
                        <div key={featureIndex} className="flex items-center">
                          <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                          <span className="text-gray-600 text-sm">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  <div className="mb-8">
                    <h4 className="text-lg font-semibold text-gray-900 mb-4">Usuários Principais:</h4>
                    <div className="flex flex-wrap gap-2">
                      {product.users.map((user, userIndex) => (
                        <Badge key={userIndex} variant="secondary">{user}</Badge>
                      ))}
                    </div>
                  </div>
                  
                  <div>
                    <h4 className="text-lg font-semibold text-gray-900 mb-4">Tecnologias:</h4>
                    <div className="flex flex-wrap gap-2">
                      {product.technologies.map((tech, techIndex) => (
                        <Badge key={techIndex} variant="outline">{tech}</Badge>
                      ))}
                    </div>
                  </div>
                </div>
                
                <div className={index % 2 === 1 ? 'lg:col-start-1' : ''}>
                  <div className="relative">
                    <img
                      src={product.image}
                      alt={product.title}
                      className="rounded-2xl shadow-xl w-full"
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Architecture Section */}
      <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 escalabilidade, segurança e 
              interoperabilidade em todos os níveis.
            </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(index + 1).padStart(2, '0')}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {layer.technologies.map((tech, techIndex) => (
                      <Badge key={techIndex} variant="secondary">{tech}</Badge>
                    ))}
                  </div>
                </CardContent>
              </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">
            Pronto para conhecer nossa plataforma na prática?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Agende uma demonstração personalizada e veja como a IAsis pode 
            transformar a gestão de dados em sua organização de saúde.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" asChild className="bg-white text-primary hover:bg-white/90">
              <a href="/contato">
                Agendar Demonstração
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
            <Button size="lg" variant="outline" asChild className="border-white text-white hover:bg-white hover:text-primary">
              <a href="/modulos">Explorar Módulos</a>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Platform;