import { Navigation } from "@/components/navigation"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Heart, Stethoscope, Shield, Users, Award, Clock, ArrowRight, CheckCircle, HeartPulse, Slice, Syringe, Bed, Baby, Droplets } from "lucide-react"
import Image from "next/image"
import { Footer } from "@/components/Footer"
import Link from "next/link"

export default function ServicesPage() {
  const services = [
    {
      id: "angiografia",
      title: "Angiografia e Hemodinâmica",
      subtitle: "Diagnóstico e Tratamento Cardiovascular",
      description:
        "Oferecemos procedimentos diagnósticos e terapêuticos para doenças cardiovasculares utilizando tecnologia de ponta em hemodinâmica.",
      icon: HeartPulse,
      gradient: "from-red-500 to-pink-500",
      features: [
        "Cateterismo cardíaco diagnóstico",
        "Angioplastia coronária",
        "Implante de stents",
        "Valvuloplastia",
        "Fechamento de comunicações",
        "Embolização de malformações",
      ],
      benefits: [
        "Procedimentos minimamente invasivos",
        "Recuperação mais rápida",
        "Menor risco de complicações",
        "Tecnologia de última geração",
      ],
    },
    {
      id: "cirurgia",
      title: "Cirurgia",
      subtitle: "Procedimentos Cirúrgicos Especializados",
      description:
        "Nossa equipe cirúrgica experiente realiza procedimentos complexos com segurança e precisão, utilizando técnicas modernas e equipamentos avançados.",
      icon: Slice,
      gradient: "from-blue-500 to-cyan-500",
      features: [
        "Cirurgia geral",
        "Cirurgia vascular",
        "Cirurgia torácica",
        "Cirurgia plástica",
        "Cirurgia ortopédica",
        "Cirurgia minimamente invasiva",
      ],
      benefits: [
        "Equipe multidisciplinar",
        "Centro cirúrgico moderno",
        "Protocolos de segurança rigorosos",
        "Acompanhamento pós-operatório",
      ],
    },
    {
      id: "cuidados-criticos",
      title: "Cuidados Críticos",
      subtitle: "UTI e Medicina Intensiva",
      description:
        "Unidade de Terapia Intensiva com monitoramento 24 horas, equipamentos de última geração e equipe especializada em medicina intensiva.",
      icon: Syringe,
      gradient: "from-green-500 to-teal-500",
      features: [
        "UTI adulto e pediátrica",
        "Monitoramento contínuo",
        "Ventilação mecânica",
        "Hemodiálise",
        "Suporte nutricional",
        "Cuidados paliativos",
      ],
      benefits: ["Atendimento 24h", "Equipe multidisciplinar", "Protocolos internacionais", "Humanização do cuidado"],
    },
    {
      id: "obstetricia",
      title: "Obstetrícia",
      subtitle: "Cuidados Materno-Infantis",
      description:
        "Acompanhamento completo da gestação, parto e puerpério com equipe especializada e estrutura adequada para mãe e bebê.",
      icon: Baby,
      gradient: "from-purple-500 to-pink-500",
      features: [
        "Pré-natal completo",
        "Parto normal e cesárea",
        "UTI neonatal",
        "Banco de leite",
        "Alojamento conjunto",
        "Acompanhamento puerperal",
      ],
      benefits: [
        "Equipe obstétrica experiente",
        "Centro obstétrico moderno",
        "Cuidados neonatais especializados",
        "Apoio ao aleitamento materno",
      ],
    },
    {
      id: "oncologia",
      title: "Oncologia",
      subtitle: "Tratamento Oncológico Integrado",
      description:
        "Centro oncológico com abordagem multidisciplinar, oferecendo tratamentos modernos e cuidados humanizados para pacientes com câncer.",
      icon: Bed,
      gradient: "from-yellow-500 to-orange-500",
      features: [
        "Quimioterapia",
        "Radioterapia",
        "Imunoterapia",
        "Cirurgia oncológica",
        "Cuidados paliativos",
        "Suporte psicológico",
      ],
      benefits: ["Equipe multidisciplinar", "Protocolos internacionais", "Tecnologia avançada", "Cuidado humanizado"],
    },
    {
      id: "urologia",
      title: "Urologia",
      subtitle: "Saúde do Sistema Urinário",
      description:
        "Diagnóstico e tratamento de doenças do sistema urinário masculino e feminino, utilizando técnicas minimamente invasivas.",
      icon: Droplets,
      gradient: "from-indigo-500 to-blue-500",
      features: [
        "Cirurgia urológica",
        "Litotripsia",
        "Endoscopia urológica",
        "Andrologia",
        "Uro-oncologia",
        "Incontinência urinária",
      ],
      benefits: [
        "Técnicas minimamente invasivas",
        "Equipamentos modernos",
        "Recuperação rápida",
        "Atendimento especializado",
      ],
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      {/* Hero Section */}
      <section className="py-20 lg:py-32 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center space-y-6">
            <Badge variant="secondary" className="text-sm px-4 py-2">
              Serviços Especializados
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-bold text-foreground text-balance">
              Nossos <span className="text-primary">Serviços</span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty">
              Oferecemos uma ampla gama de serviços médicos especializados com tecnologia de ponta, equipe qualificada e
              foco na excelência do atendimento.
            </p>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid gap-12">
            {services.map((service, index) => (
              <Card key={service.id} className="glass-card floating-card border-0 overflow-hidden">
                <div className="grid lg:grid-cols-2 gap-0">
                  <div className="p-8 lg:p-12 space-y-6">
                    <div className="flex items-center space-x-4">
                      <div
                        className={`w-16 h-16 bg-gradient-to-br ${service.gradient} rounded-2xl flex items-center justify-center shadow-lg`}
                      >
                        <service.icon className="h-8 w-8 text-white" />
                      </div>
                      <div>
                        <h2 className="text-2xl lg:text-3xl font-bold text-foreground">{service.title}</h2>
                        <p className="text-primary font-medium">{service.subtitle}</p>
                      </div>
                    </div>

                    <p className="text-lg text-muted-foreground leading-relaxed">{service.description}</p>

                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold text-foreground">Principais Benefícios:</h3>
                      <div className="grid sm:grid-cols-2 gap-3">
                        {service.benefits.map((benefit, idx) => (
                          <div key={idx} className="flex items-center space-x-2">
                            <CheckCircle className="h-5 w-5 text-primary flex-shrink-0" />
                            <span className="text-muted-foreground">{benefit}</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    <Button className="gradient-primary border-0 shadow-lg hover:shadow-xl transition-all duration-300 group">
                      <Link href="/contato">Saiba mais</Link>
                      <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                    </Button>
                  </div>

                  <div className="bg-gradient-to-br from-muted/30 to-muted/10 p-8 lg:p-12 backdrop-blur-sm">
                    <h3 className="text-lg font-semibold text-foreground mb-6">Procedimentos Oferecidos:</h3>
                    <div className="grid gap-3">
                      {service.features.map((feature, idx) => (
                        <div key={idx} className="flex items-center space-x-3 p-4 glass-card rounded-xl shadow-sm">
                          <div className={`w-3 h-3 bg-gradient-to-r ${service.gradient} rounded-full flex-shrink-0`} />
                          <span className="text-foreground font-medium">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 gradient-primary relative overflow-hidden">
        <div className="absolute inset-0 bg-black/10"></div>
        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8">
          <h2 className="text-3xl lg:text-4xl font-bold text-white text-balance">
            Precisa de Atendimento Especializado?
          </h2>
          <p className="text-xl text-white/90 text-pretty">
            Nossa equipe médica está pronta para oferecer o melhor cuidado para sua saúde. Agende sua consulta e receba
            atendimento personalizado.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="text-lg px-8 py-6 bg-white text-primary hover:bg-white/90 shadow-lg"
            >
              <Link href="/contato">Cotação Imediata</Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 py-6 border-white/30 text-white hover:bg-white/10 bg-transparent backdrop-blur-sm"
            >
              Fale com Especialista
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}