import { MessageSquare, HeadphonesIcon, FileText, Scale, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

const Servicos = () => {
const WHATSAPP_BASE_URL = import.meta.env.VITE_PUBLIC_WHATSAPP_LINK || "https://wa.me/5511949474214";

  const services = [
    {
      icon: MessageSquare,
      title: 'Consultoria Gratuita',
      description: 'Analisamos seu plano atual e identificamos oportunidades de redução de custos sem perder carências ou benefícios.',
      benefits: [
        'Análise completa do seu contrato',
        'Comparativo com melhores opções do mercado',
        'Identificação de economia potencial',
        'Orientação sobre migração segura'
      ],
      gradient: 'from-primary to-primary-soft'
    },
    {
      icon: HeadphonesIcon,
      title: 'Pós-venda Concierge',
      description: 'Suporte completo após a contratação. Estamos ao seu lado em cada etapa da utilização do seu plano.',
      benefits: [
        'Atendimento prioritário 24/7',
        'Auxílio em autorizações e procedimentos',
        'Suporte para dúvidas e problemas',
        'Acompanhamento personalizado'
      ],
      gradient: 'from-secondary to-primary'
    },
    {
      icon: FileText,
      title: 'Gestão de Contratos',
      description: 'Controle total de reajustes, renovações e mudanças contratuais. Garantimos que você sempre tenha as melhores condições.',
      benefits: [
        'Monitoramento de reajustes',
        'Negociação com operadoras',
        'Alertas de renovação',
        'Otimização contínua de custos'
      ],
      gradient: 'from-primary to-secondary'
    },
    {
      icon: Scale,
      title: 'Assessoria Jurídica',
      description: 'Defesa contra reajustes abusivos e práticas irregulares. Protegemos seus direitos como consumidor.',
      benefits: [
        'Análise de reajustes',
        'Contestação de cobranças indevidas',
        'Suporte jurídico especializado',
        'Defesa de direitos do consumidor'
      ],
      gradient: 'from-secondary to-primary'
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-secondary via-secondary to-primary/10 text-secondary-foreground">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              O que <span className="text-gradient-gold">fazemos</span>
            </h1>
            <p className="text-xl text-muted-foreground leading-relaxed">
              Oferecemos uma gama completa de serviços para garantir que você tenha 
              o melhor plano de saúde pelo menor custo, com o suporte que você merece.
            </p>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <div 
                key={index}
                className="group relative p-8 rounded-2xl bg-card hover-lift gold-border overflow-hidden"
              >
                <div className={`absolute top-0 left-0 right-0 h-2 bg-gradient-to-r ${service.gradient}`} />
                
                <service.icon className="h-14 w-14 text-primary mb-6 group-hover:scale-110 transition-transform duration-300" />
                
                <h3 className="text-2xl font-bold mb-4 group-hover:text-primary transition-colors">
                  {service.title}
                </h3>
                
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  {service.description}
                </p>
                
                <ul className="space-y-3">
                  {service.benefits.map((benefit, idx) => (
                    <li key={idx} className="flex items-start gap-3">
                      <div className="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <div className="w-2 h-2 rounded-full bg-primary" />
                      </div>
                      <span className="text-sm text-muted-foreground">{benefit}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-4xl font-bold text-center mb-12">
              Como <span className="text-gradient-gold">Funciona</span>
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              {[
                { step: '01', title: 'Análise', description: 'Entendemos suas necessidades e analisamos seu plano atual' },
                { step: '02', title: 'Solução', description: 'Apresentamos as melhores opções do mercado para você' },
                { step: '03', title: 'Economia', description: 'Mostramos quanto você pode economizar mantendo benefícios' },
                { step: '04', title: 'Suporte', description: 'Acompanhamento contínuo e suporte sempre que precisar' },
              ].map((item, index) => (
                <div key={index} className="text-center relative">
                  <div className="text-5xl font-bold text-primary/20 mb-4">{item.step}</div>
                  <h4 className="text-lg font-bold mb-2">{item.title}</h4>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                  
                  {index < 3 && (
                    <div className="hidden md:block absolute top-8 left-full w-full">
                      <ArrowRight className="h-6 w-6 text-primary/30 mx-auto" />
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center p-12 rounded-3xl bg-gradient-to-br from-secondary to-primary/20 text-secondary-foreground">
            <h2 className="text-4xl font-bold mb-6">
              Pronto para começar?
            </h2>
            <p className="text-xl text-muted-foreground mb-8">
              Entre em contato agora e descubra como podemos ajudar você
            </p>
            <Button 
              asChild 
              size="lg" 
              className="bg-primary hover:bg-primary-strong text-primary-foreground shadow-gold-lg"
            >
              <a href={WHATSAPP_BASE_URL} target="_blank" rel="noopener noreferrer">
                Falar com Especialista
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Servicos;