import React from 'react';
import { Building, Users, Hospital, Shield, ArrowRight, CheckCircle } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';

const ForWho = () => {
  const segments = [
    {
      title: 'Municípios',
      subtitle: 'Gestão Pública de Saúde',
      icon: Building,
      color: 'bg-blue-500',
      description: 'Soluções completas para secretarias municipais de saúde que buscam integração, eficiência e melhores resultados.',
      sizes: [
        {
          size: 'Pequeno Porte',
          population: 'Até 50 mil habitantes',
          modules: ['Integração + Receita Pública', 'Linha do cuidado básica', 'Dashboards essenciais'],
          benefits: ['Acesso a tecnologia de ponta', 'Entrada modular e acessível', 'Suporte especializado'],
          investment: 'A partir de R$ 15.000/mês',
        },
        {
          size: 'Médio Porte',
          population: '50 mil a 200 mil habitantes',
          modules: ['Módulos básicos +', 'Regulação inteligente', 'Produtos de dados avançados', 'IA aplicada'],
          benefits: ['Gestão integrada completa', 'Redução significativa de custos', 'Melhoria nos indicadores'],
          investment: 'A partir de R$ 35.000/mês',
        },
        {
          size: 'Grande Porte',
          population: 'Acima de 200 mil habitantes',
          modules: ['Plataforma completa', 'Customizações avançadas', 'Laboratório de dados', 'APIs próprias'],
          benefits: ['Solução enterprise', 'Inovação contínua', 'Liderança regional'],
          investment: 'Sob consulta',
        },
      ],
    },
    {
      title: 'Estados',
      subtitle: 'Gestão Estadual e Regional',
      icon: Users,
      color: 'bg-green-500',
      description: 'Plataformas federadas para secretarias estaduais que precisam integrar múltiplos municípios e regiões.',
      features: [
        'Integração regional com múltiplos municípios',
        'Monitoramento em tempo real de indicadores estaduais',
        'Captação otimizada de recursos federais',
        'Governança federada de dados',
        'Hubs regionais de interoperabilidade',
        'Suporte ao desenho de contratos baseados em dados',
      ],
      benefits: [
        'Visão unificada da saúde estadual',
        'Redução de disparidades regionais',
        'Otimização de recursos públicos',
        'Compliance automático com regulamentações',
      ],
      caseStudy: 'Estado de Minas Gerais: 853 municípios conectados, R$ 120M em recursos adicionais captados',
    },
    {
      title: 'Operadoras de Saúde',
      subtitle: 'Saúde Suplementar',
      icon: Shield,
      color: 'bg-purple-500',
      description: 'Gestão de risco populacional, auditoria inteligente e cuidado preventivo para operadoras e autogestões.',
      solutions: [
        {
          type: 'Operadoras Regionais',
          focus: 'Gestão de risco e sinistralidade',
          modules: ['Smart Digital Twin', 'Med Journey', 'Auditoria ativa', 'Gestão populacional'],
          roi: 'ROI médio de 340% em 12 meses',
        },
        {
          type: 'Autogestões',
          focus: 'Cuidado preventivo e bem-estar',
          modules: ['Jornadas de cuidado', 'Medicina preventiva', 'Analytics de saúde', 'Engajamento'],
          roi: '25% redução em sinistralidade',
        },
        {
          type: 'Cooperativas Médicas',
          focus: 'Integração com rede própria',
          modules: ['Interoperabilidade', 'Regulação interna', 'Qualidade assistencial', 'Compliance ANS'],
          roi: '60% melhoria na satisfação',
        },
      ],
    },
    {
      title: 'Hospitais e Clínicas',
      subtitle: 'Prestadores de Serviços',
      icon: Hospital,
      color: 'bg-red-500',
      description: 'Integração com redes de saúde, otimização de processos e melhoria da qualidade assistencial.',
      categories: [
        {
          type: 'Hospitais Públicos',
          challenges: ['Integração com SISREG', 'Otimização de leitos', 'Redução de glosas'],
          solutions: ['Regulação inteligente', 'Gestão de leitos', 'Auditoria preventiva'],
        },
        {
          type: 'Hospitais Privados',
          challenges: ['Gestão de convênios', 'Qualidade assistencial', 'Eficiência operacional'],
          solutions: ['Integração com operadoras', 'Protocolos clínicos', 'Analytics operacional'],
        },
        {
          type: 'Clínicas Especializadas',
          challenges: ['Continuidade do cuidado', 'Referência e contrarreferência', 'Dados fragmentados'],
          solutions: ['Jornadas integradas', 'Comunicação com APS', 'Histórico unificado'],
        },
      ],
    },
  ];

  const comparisonTable = [
    {
      feature: 'Integração de Sistemas',
      municipio: '✓ Básica',
      estado: '✓ Avançada',
      operadora: '✓ Especializada',
      hospital: '✓ Focada',
    },
    {
      feature: 'IA e Automação',
      municipio: '✓ Essencial',
      estado: '✓ Completa',
      operadora: '✓ Preditiva',
      hospital: '✓ Operacional',
    },
    {
      feature: 'Dashboards',
      municipio: '✓ Gerenciais',
      estado: '✓ Executivos',
      operadora: '✓ Risco',
      hospital: '✓ Assistenciais',
    },
    {
      feature: 'Suporte',
      municipio: '✓ Remoto',
      estado: '✓ Dedicado',
      operadora: '✓ Especializado',
      hospital: '✓ Técnico',
    },
    {
      feature: 'Customização',
      municipio: '✓ Limitada',
      estado: '✓ Ampla',
      operadora: '✓ Específica',
      hospital: '✓ Focada',
    },
  ];

  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">
              Para Quem é a <span className="gradient-text">IAsis</span>
            </h1>
            <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
              Nossa plataforma atende diferentes segmentos do ecossistema de saúde, 
              com soluções personalizadas para cada necessidade e contexto específico.
            </p>
          </div>
        </div>
      </section>

      {/* Segments Overview */}
      <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 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            {segments.map((segment, index) => (
              <Card key={index} className="border-0 shadow-lg card-hover text-center">
                <CardHeader>
                  <div className={`w-16 h-16 ${segment.color} rounded-full flex items-center justify-center mx-auto mb-4`}>
                    <segment.icon className="h-8 w-8 text-white" />
                  </div>
                  <CardTitle className="text-xl">{segment.title}</CardTitle>
                  <CardDescription className="text-primary font-medium">
                    {segment.subtitle}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 text-sm">{segment.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Detailed Segments */}
      <section className="section-padding bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-24">
            {/* Municípios */}
            <div>
              <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                  Soluções para Municípios
                </h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                  Desde pequenos municípios até grandes centros urbanos, 
                  oferecemos soluções escaláveis e acessíveis.
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {segments[0].sizes.map((size, index) => (
                  <Card key={index} className="border-0 shadow-lg">
                    <CardHeader>
                      <div className="flex items-center justify-between mb-4">
                        <CardTitle className="text-xl">{size.size}</CardTitle>
                        <Badge variant="outline">{size.population}</Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Módulos Inclusos:</h4>
                        <ul className="space-y-2">
                          {size.modules.map((module, moduleIndex) => (
                            <li key={moduleIndex} 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">{module}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Principais Benefícios:</h4>
                        <ul className="space-y-2">
                          {size.benefits.map((benefit, benefitIndex) => (
                            <li key={benefitIndex} className="flex items-start">
                              <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 mr-2 flex-shrink-0"></div>
                              <span className="text-gray-600 text-sm">{benefit}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <div className="pt-4 border-t">
                        <div className="text-sm text-gray-500 mb-1">Investimento</div>
                        <div className="text-lg font-semibold text-primary">{size.investment}</div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            {/* Estados */}
            <div>
              <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                  Soluções para Estados
                </h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                  Plataformas federadas que conectam múltiplos municípios 
                  em uma rede estadual integrada.
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                  <h3 className="text-2xl font-bold text-gray-900 mb-6">Funcionalidades Principais</h3>
                  <ul className="space-y-4">
                    {segments[1].features.map((feature, index) => (
                      <li key={index} className="flex items-start">
                        <CheckCircle className="h-5 w-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
                        <span className="text-gray-600">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                
                <div>
                  <Card className="border-0 shadow-lg">
                    <CardHeader>
                      <CardTitle className="text-xl">Caso de Sucesso</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-gray-600 mb-4">{segments[1].caseStudy}</p>
                      <div className="space-y-3">
                        {segments[1].benefits.map((benefit, index) => (
                          <div key={index} className="flex items-start">
                            <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
                            <span className="text-gray-600 text-sm">{benefit}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>

            {/* Operadoras */}
            <div>
              <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                  Soluções para Operadoras
                </h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                  Gestão de risco, auditoria inteligente e cuidado preventivo 
                  para o setor de saúde suplementar.
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {segments[2].solutions.map((solution, index) => (
                  <Card key={index} className="border-0 shadow-lg">
                    <CardHeader>
                      <CardTitle className="text-xl">{solution.type}</CardTitle>
                      <CardDescription className="text-primary font-medium">
                        {solution.focus}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Módulos:</h4>
                        <ul className="space-y-2">
                          {solution.modules.map((module, moduleIndex) => (
                            <li key={moduleIndex} className="flex items-start">
                              <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 mr-2 flex-shrink-0"></div>
                              <span className="text-gray-600 text-sm">{module}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <div className="pt-4 border-t">
                        <div className="text-sm text-gray-500 mb-1">ROI Típico</div>
                        <div className="text-lg font-semibold text-green-600">{solution.roi}</div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <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">
              Comparativo de Soluções
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Veja como nossas soluções se adaptam a cada tipo de organização.
            </p>
          </div>
          
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b-2 border-gray-200">
                  <th className="text-left py-4 px-6 font-semibold text-gray-900">Funcionalidade</th>
                  <th className="text-center py-4 px-6 font-semibold text-gray-900">Municípios</th>
                  <th className="text-center py-4 px-6 font-semibold text-gray-900">Estados</th>
                  <th className="text-center py-4 px-6 font-semibold text-gray-900">Operadoras</th>
                  <th className="text-center py-4 px-6 font-semibold text-gray-900">Hospitais</th>
                </tr>
              </thead>
              <tbody>
                {comparisonTable.map((row, index) => (
                  <tr key={index} className="border-b border-gray-100">
                    <td className="py-4 px-6 font-medium text-gray-900">{row.feature}</td>
                    <td className="py-4 px-6 text-center text-gray-600">{row.municipio}</td>
                    <td className="py-4 px-6 text-center text-gray-600">{row.estado}</td>
                    <td className="py-4 px-6 text-center text-gray-600">{row.operadora}</td>
                    <td className="py-4 px-6 text-center text-gray-600">{row.hospital}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </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">
            Qual solução é ideal para você?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Converse com nossos especialistas para entender como a IAsis 
            pode se adaptar às suas necessidades específicas.
          </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">
                Falar com Especialista
                <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="/contato">Solicitar Proposta</a>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ForWho;

