import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Database, Brain, Heart, Shield, Zap, Users } from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import interoperabilidadeImg from '../assets/interoperabilidade_saude_1.jpg';
import iaSaudeImg from '../assets/ia_saude_1.jpg';
import digitalTwinImg from '../assets/digital_twin_saude_1.png';

const Home = () => {
  const features = [
    {
      icon: Database,
      title: 'Interoperabilidade Real',
      description: 'Conecta qualquer sistema de saúde sem necessidade de troca de infraestrutura.',
    },
    {
      icon: Brain,
      title: 'Inteligência Artificial',
      description: 'IA aplicada para classificação, auditoria e predição em saúde.',
    },
    {
      icon: Heart,
      title: 'Continuidade do Cuidado',
      description: 'Jornadas clínicas completas que acompanham o paciente em toda a rede.',
    },
    {
      icon: Shield,
      title: 'Segurança e LGPD',
      description: 'Governança de dados com total conformidade e rastreabilidade.',
    },
    {
      icon: Zap,
      title: 'Implementação Rápida',
      description: 'Valor entregue em 30-60 dias com metodologia ágil e modular.',
    },
    {
      icon: Users,
      title: 'Squads Especializados',
      description: 'Time multidisciplinar com expertise em saúde, dados e tecnologia.',
    },
  ];

  const stats = [
    { number: '18M+', label: 'Pacientes Integrados' },
    { number: '40→3', label: 'Dias de Regulação' },
    { number: '3.200+', label: 'Jornadas Completas' },
    { number: '95%', label: 'Redução de Glosas' },
  ];

  const products = [
    {
      title: 'WEB3 ENGINE',
      description: 'Infraestrutura de integração e ingestão de dados automatizada',
      image: interoperabilidadeImg,
      features: ['Conectores universais', 'Golder Record', 'Automação RPA'],
    },
    {
      title: 'SMART DIGITAL TWIN',
      description: 'Inteligência estratégica e visualização analítica do território',
      image: digitalTwinImg,
      features: ['Painéis inteligentes', 'Insights preditivos', 'Decisões em tempo real'],
    },
    {
      title: 'MED JOURNEY',
      description: 'Continuidade de cuidado e navegação personalizada em saúde',
      image: iaSaudeImg,
      features: ['Jornadas clínicas', 'Alertas inteligentes', 'Busca ativa'],
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative gradient-bg hero-pattern section-padding overflow-hidden">
        <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 className="text-white">
              <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                O Cérebro Digital da
                <span className="block text-accent-foreground">Saúde Brasileira</span>
              </h1>
              <p className="text-xl mb-8 text-white/90 leading-relaxed">
                Transformamos ecossistemas de saúde fragmentados em redes inteligentes, 
                interoperáveis e humanas, orientadas por dados e conduzidas por tecnologia viva.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" asChild className="bg-white text-primary hover:bg-white/90">
                  <Link to="/contato">
                    Solicitar Demonstração
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild className="border-white text-white hover:bg-white hover:text-primary">
                  <Link to="/plataforma">Conhecer Plataforma</Link>
                </Button>
              </div>
            </div>
            <div className="relative">
              <div className="animate-float">
                <img
                  src={interoperabilidadeImg}
                  alt="Interoperabilidade em Saúde"
                  className="rounded-2xl shadow-2xl"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
                  {stat.number}
                </div>
                <div className="text-gray-600">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features 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">
              Por que escolher a IAsis?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Nossa plataforma resolve os principais desafios da saúde digital com 
              tecnologia de ponta e metodologia comprovada.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="card-hover border-0 shadow-lg">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                    <feature.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-xl">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-gray-600">
                    {feature.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="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {products.map((product, index) => (
              <Card key={index} className="card-hover overflow-hidden">
                <div className="aspect-video overflow-hidden">
                  <img
                    src={product.image}
                    alt={product.title}
                    className="w-full h-full object-cover"
                  />
                </div>
                <CardHeader>
                  <CardTitle className="text-xl gradient-text">{product.title}</CardTitle>
                  <CardDescription>{product.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {product.features.map((feature, featureIndex) => (
                      <li key={featureIndex} className="flex items-center text-sm text-gray-600">
                        <div className="w-1.5 h-1.5 bg-primary rounded-full mr-2"></div>
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="text-center mt-12">
            <Button size="lg" asChild>
              <Link to="/plataforma">
                Explorar Plataforma Completa
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
          </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 transformar sua rede de saúde?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Agende uma demonstração e veja como a IAsis pode revolucionar 
            a gestão de dados e o cuidado em sua organização.
          </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">
              <Link to="/contato">
                Agendar Demonstração
                <ArrowRight className="ml-2 h-5 w-5" />
              </Link>
            </Button>
            <Button size="lg" variant="outline" asChild className="border-white text-white hover:bg-white hover:text-primary">
              <Link to="/sobre">Conhecer Nossa História</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;

