import React from 'react';
import { Target, Eye, Heart, Users, Award, Lightbulb } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import saudeConectadaImg from '../assets/saude_conectada_1.jpg';
import tecnologiaSaudeImg from '../assets/tecnologia_saude_1.webp';

const About = () => {
  const values = [
    {
      icon: Heart,
      title: 'Impacto Humano',
      description: 'Cada linha de código que escrevemos tem como objetivo salvar vidas e melhorar o cuidado em saúde.',
    },
    {
      icon: Lightbulb,
      title: 'Inovação Responsável',
      description: 'Desenvolvemos tecnologia de ponta sempre com foco na aplicabilidade real e no valor entregue.',
    },
    {
      icon: Users,
      title: 'Colaboração',
      description: 'Trabalhamos em parceria com gestores, profissionais de saúde e pacientes para criar soluções efetivas.',
    },
    {
      icon: Award,
      title: 'Excelência Técnica',
      description: 'Mantemos os mais altos padrões de qualidade, segurança e conformidade em todas as nossas soluções.',
    },
  ];

  const timeline = [
    {
      year: '2020',
      title: 'Fundação',
      description: 'IAsis nasce com a missão de resolver a fragmentação dos dados em saúde no Brasil.',
    },
    {
      year: '2021',
      title: 'Primeiros Projetos',
      description: 'Desenvolvimento dos primeiros conectores e validação do framework de interoperabilidade.',
    },
    {
      year: '2022',
      title: 'Expansão',
      description: 'Implementação em múltiplos municípios e desenvolvimento dos produtos digitais principais.',
    },
    {
      year: '2023',
      title: 'Consolidação',
      description: 'Mais de 18 milhões de pacientes integrados e parcerias estratégicas estabelecidas.',
    },
    {
      year: '2024',
      title: 'Inovação',
      description: 'Lançamento de IA aplicada e expansão para operadoras de saúde suplementar.',
    },
    {
      year: '2025',
      title: 'Futuro',
      description: 'Consolidação como plataforma nacional de dados em saúde federada.',
    },
  ];

  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">
                Sobre a <span className="gradient-text">IAsis</span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Somos uma empresa de tecnologia em saúde dedicada a transformar 
                ecossistemas fragmentados em redes inteligentes e interoperáveis. 
                Nossa missão é conectar dados, pessoas e sistemas para criar um 
                futuro onde o cuidado em saúde seja mais eficiente, humano e acessível.
              </p>
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <div className="text-3xl font-bold text-primary mb-2">18M+</div>
                  <div className="text-gray-600">Pacientes Conectados</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-primary mb-2">50+</div>
                  <div className="text-gray-600">Municípios Atendidos</div>
                </div>
              </div>
            </div>
            <div className="relative">
              <img
                src={saudeConectadaImg}
                alt="Saúde Conectada"
                className="rounded-2xl shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Mission, Vision, Values */}
      <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-3 gap-8 mb-16">
            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Target className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-2xl">Missão</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-gray-600 text-base">
                  Transformar ecossistemas de saúde fragmentados em redes inteligentes, 
                  interoperáveis e humanas, orientadas por dados e conduzidas por tecnologia viva.
                </CardDescription>
              </CardContent>
            </Card>

            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Eye className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-2xl">Visão</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-gray-600 text-base">
                  Ser a principal plataforma de interoperabilidade baseada em produtos 
                  de dados de saúde do Brasil, conectando o caos dos dados à clareza da gestão.
                </CardDescription>
              </CardContent>
            </Card>

            <Card className="text-center border-0 shadow-lg">
              <CardHeader>
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="h-8 w-8 text-primary" />
                </div>
                <CardTitle className="text-2xl">Propósito</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-gray-600 text-base">
                  Promover equidade no acesso ao cuidado e capacitar redes de saúde 
                  com tecnologia leve, inteligente e impactante para salvar vidas.
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Values */}
      <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">
              Nossos Valores
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Os princípios que guiam cada decisão e cada linha de código que desenvolvemos.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((value, index) => (
              <Card key={index} className="card-hover text-center border-0 shadow-lg">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                    <value.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{value.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-gray-600">
                    {value.description}
                  </CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <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">
              Nossa Jornada
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              A evolução da IAsis desde a fundação até se tornar referência 
              em interoperabilidade em saúde no Brasil.
            </p>
          </div>
          <div className="relative">
            <div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-primary/20"></div>
            <div className="space-y-12">
              {timeline.map((item, index) => (
                <div key={index} className={`flex items-center ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}>
                  <div className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8 text-left'}`}>
                    <Card className="border-0 shadow-lg">
                      <CardHeader>
                        <CardTitle className="text-xl gradient-text">{item.title}</CardTitle>
                        <CardDescription className="text-primary font-semibold">{item.year}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-gray-600">{item.description}</p>
                      </CardContent>
                    </Card>
                  </div>
                  <div className="relative z-10">
                    <div className="w-4 h-4 bg-primary rounded-full border-4 border-white shadow-lg"></div>
                  </div>
                  <div className="w-1/2"></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team 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="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-6">
                Nossa Equipe
              </h2>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Somos um time multidisciplinar de especialistas em saúde, tecnologia, 
                dados e gestão. Nossa diversidade de conhecimentos nos permite criar 
                soluções que realmente atendem às necessidades do setor de saúde.
              </p>
              <div className="grid grid-cols-2 gap-6">
                <div>
                  <div className="text-2xl font-bold text-primary mb-2">Engenheiros</div>
                  <div className="text-gray-600">Especialistas em dados e integração</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-primary mb-2">Médicos</div>
                  <div className="text-gray-600">Profissionais de saúde experientes</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-primary mb-2">Gestores</div>
                  <div className="text-gray-600">Especialistas em saúde pública</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-primary mb-2">Designers</div>
                  <div className="text-gray-600">Focados em experiência do usuário</div>
                </div>
              </div>
            </div>
            <div className="relative">
              <img
                src={tecnologiaSaudeImg}
                alt="Tecnologia em Saúde"
                className="rounded-2xl shadow-xl"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;

