import React from 'react';
import { Users, Clock, DollarSign, Heart, TrendingUp, CheckCircle, Award, Target } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';

const Impact = () => {
  const metrics = [
    {
      icon: Users,
      number: '18M+',
      label: 'Pacientes Integrados',
      description: 'Dados unificados de mais de 18 milhões de pacientes em uma única plataforma',
      color: 'bg-blue-500',
    },
    {
      icon: Clock,
      number: '40→3',
      label: 'Dias de Regulação',
      description: 'Redução dramática no tempo de regulação de internações e procedimentos',
      color: 'bg-green-500',
    },
    {
      icon: Heart,
      number: '3.200+',
      label: 'Jornadas Completas',
      description: 'Gestantes acompanhadas do pré-natal ao puerpério com continuidade total',
      color: 'bg-pink-500',
    },
    {
      icon: DollarSign,
      number: '95%',
      label: 'Redução de Glosas',
      description: 'Diminuição significativa em glosas por auditoria inteligente e preventiva',
      color: 'bg-yellow-500',
    },
    {
      icon: TrendingUp,
      number: '300%',
      label: 'Aumento de Receita',
      description: 'Incremento na captação de recursos federais através de dados corretos',
      color: 'bg-purple-500',
    },
    {
      icon: CheckCircle,
      number: '99.8%',
      label: 'Precisão de Dados',
      description: 'Qualidade e confiabilidade dos dados após normalização e validação',
      color: 'bg-indigo-500',
    },
  ];

  const caseStudies = [
    {
      title: 'Município de São Carlos - SP',
      category: 'Atenção Primária',
      challenge: 'Fragmentação de dados entre UBS e falta de continuidade no cuidado de gestantes',
      solution: 'Implementação do módulo de Linha do Cuidado com foco em saúde materno-infantil',
      results: [
        '100% das gestantes cadastradas no pré-natal',
        '85% de adesão às consultas de puerpério',
        '40% redução na mortalidade infantil',
        'R$ 2.3M em recursos adicionais captados',
      ],
      timeframe: '6 meses',
    },
    {
      title: 'Consórcio Intermunicipal ABC',
      category: 'Regulação Regional',
      challenge: 'Filas de regulação desorganizadas e tempo excessivo para internações',
      solution: 'Módulo de Regulação Inteligente com IA para classificação de prioridades',
      results: [
        'Redução de 40 para 3 dias no tempo médio de regulação',
        '60% melhoria na satisfação dos usuários',
        '90% redução em glosas por auditoria',
        'Integração de 15 municípios em rede única',
      ],
      timeframe: '4 meses',
    },
    {
      title: 'Operadora Unimed Regional',
      category: 'Saúde Suplementar',
      challenge: 'Alto índice de sinistralidade e falta de gestão de risco populacional',
      solution: 'Smart Digital Twin para gestão de risco e Med Journey para cuidado preventivo',
      results: [
        '25% redução na sinistralidade',
        '150% aumento em ações preventivas',
        '80% melhoria na experiência do beneficiário',
        'ROI de 340% em 12 meses',
      ],
      timeframe: '8 meses',
    },
  ];

  const benefits = [
    {
      category: 'Para Pacientes',
      icon: Heart,
      items: [
        'Continuidade de cuidado garantida',
        'Redução no tempo de espera',
        'Histórico médico unificado',
        'Cuidado preventivo personalizado',
        'Maior segurança nos dados',
      ],
    },
    {
      category: 'Para Gestores',
      icon: Target,
      items: [
        'Decisões baseadas em dados reais',
        'Aumento na captação de recursos',
        'Redução de custos operacionais',
        'Melhoria nos indicadores de saúde',
        'Conformidade regulatória automática',
      ],
    },
    {
      category: 'Para Profissionais',
      icon: Award,
      items: [
        'Acesso rápido ao histórico do paciente',
        'Alertas inteligentes para ações',
        'Redução de trabalho manual',
        'Ferramentas de apoio à decisão',
        'Integração entre níveis de atenção',
      ],
    },
  ];

  const socialImpact = [
    {
      title: 'Redução da Mortalidade Evitável',
      description: 'Identificação precoce de riscos e intervenções oportunas salvam vidas',
      impact: '40% redução',
    },
    {
      title: 'Equidade no Acesso',
      description: 'Dados organizados garantem que ninguém seja esquecido no sistema',
      impact: '100% cobertura',
    },
    {
      title: 'Eficiência do SUS',
      description: 'Otimização de recursos públicos para maior impacto social',
      impact: 'R$ 50M economizados',
    },
    {
      title: 'Inovação em Saúde',
      description: 'Plataforma que acelera pesquisa e desenvolvimento de novas soluções',
      impact: '15 projetos de pesquisa',
    },
  ];

  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">
              Impacto <span className="gradient-text">Real</span>
            </h1>
            <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
              Nossos resultados falam por si. Veja como a IAsis está transformando 
              a saúde no Brasil com dados concretos e histórias reais de sucesso.
            </p>
          </div>
        </div>
      </section>

      {/* Key Metrics */}
      <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">
              Números que Importam
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Métricas que demonstram o impacto real da IAsis na vida das pessoas 
              e na eficiência dos sistemas de saúde.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {metrics.map((metric, index) => (
              <Card key={index} className="border-0 shadow-lg card-hover text-center">
                <CardHeader>
                  <div className={`w-16 h-16 ${metric.color} rounded-full flex items-center justify-center mx-auto mb-4`}>
                    <metric.icon className="h-8 w-8 text-white" />
                  </div>
                  <CardTitle className="text-4xl font-bold text-primary mb-2">
                    {metric.number}
                  </CardTitle>
                  <CardDescription className="text-lg font-semibold text-gray-900">
                    {metric.label}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600">{metric.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Case Studies */}
      <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">
              Casos de Sucesso
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Histórias reais de transformação em diferentes contextos e 
              necessidades do sistema de saúde brasileiro.
            </p>
          </div>
          
          <div className="space-y-12">
            {caseStudies.map((study, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex items-center justify-between mb-4">
                    <div>
                      <CardTitle className="text-2xl mb-2">{study.title}</CardTitle>
                      <Badge variant="secondary">{study.category}</Badge>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-500">Implementação</div>
                      <div className="font-semibold text-primary">{study.timeframe}</div>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-3">Desafio</h4>
                      <p className="text-gray-600">{study.challenge}</p>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-3">Solução</h4>
                      <p className="text-gray-600">{study.solution}</p>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-3">Resultados</h4>
                      <ul className="space-y-2">
                        {study.results.map((result, resultIndex) => (
                          <li key={resultIndex} className="flex items-start">
                            <CheckCircle className="h-4 w-4 text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                            <span className="text-gray-600 text-sm">{result}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits by Stakeholder */}
      <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">
              Benefícios para Todos
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              A IAsis gera valor para todos os stakeholders do ecossistema de saúde.
            </p>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {benefits.map((benefit, 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-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                      <benefit.icon className="h-6 w-6 text-primary" />
                    </div>
                    <CardTitle className="text-xl">{benefit.category}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3">
                    {benefit.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start">
                        <CheckCircle className="h-4 w-4 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
                        <span className="text-gray-600">{item}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Social Impact */}
      <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">
              Impacto Social
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Além dos números, nosso maior orgulho é o impacto positivo 
              na vida das pessoas e na sociedade como um todo.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {socialImpact.map((impact, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-xl">{impact.title}</CardTitle>
                    <Badge variant="outline" className="text-primary border-primary">
                      {impact.impact}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600">{impact.description}</p>
                </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 gerar impacto real?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Junte-se às organizações que já estão transformando a saúde 
            com dados e tecnologia inteligente.
          </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">
              Ver Mais Casos de Sucesso
            </button>
            <button className="border border-white text-white hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-medium transition-colors">
              Calcular Seu ROI
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Impact;

