import { Building2, Users, Baby, Briefcase, CheckCircle2, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

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

  const operators = [
    {
      name: 'Bradesco Saúde',
      description: 'Rede premium e ampla cobertura nacional',
      features: [
        'Maior rede credenciada do país',
        'Hospitais de excelência',
        'Cobertura internacional',
        'Telemedicina incluída'
      ],
      color: 'from-red-600 to-red-800'
    },
    {
      name: 'Amil',
      description: 'Custo-benefício e planos flexíveis',
      features: [
        'Planos modulares personalizáveis',
        'Excelente custo-benefício',
        'Rede credenciada qualificada',
        'Programas de bem-estar'
      ],
      color: 'from-blue-600 to-blue-800'
    },
    {
      name: 'SulAmérica',
      description: 'Tradição e confiança no mercado',
      features: [
        'Mais de 120 anos de história',
        'Rede premium de hospitais',
        'Atendimento diferenciado',
        'Programas de saúde preventiva'
      ],
      color: 'from-orange-600 to-orange-800'
    },
    {
      name: 'NotreDame Intermédica',
      description: 'Planos regionais acessíveis',
      features: [
        'Ótima cobertura regional',
        'Preços competitivos',
        'Clínicas próprias',
        'Atendimento ágil'
      ],
      color: 'from-green-600 to-green-800'
    },
  ];

  const planTypes = [
    {
      icon: Briefcase,
      title: 'Planos MEI',
      description: 'Soluções especiais para Microempreendedores Individuais',
      gradient: 'from-primary to-primary-soft'
    },
    {
      icon: Building2,
      title: 'Planos Empresariais',
      description: 'Benefícios corporativos para empresas de todos os tamanhos',
      gradient: 'from-secondary to-primary'
    },
    {
      icon: Users,
      title: 'Planos Familiares',
      description: 'Cobertura completa para você e toda sua família',
      gradient: 'from-primary to-secondary'
    },
    {
      icon: Baby,
      title: 'Planos Individuais',
      description: 'Soluções personalizadas para suas necessidades',
      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">
              Trabalhamos com as <span className="text-gradient-gold">melhores operadoras</span> do Brasil
            </h1>
            <p className="text-xl text-muted-foreground leading-relaxed">
              Selecionamos as operadoras mais confiáveis do mercado para oferecer 
              a você segurança, qualidade e o melhor custo-benefício.
            </p>
          </div>
        </div>
      </section>

      {/* Plan Types */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-12">
            Tipos de <span className="text-gradient-gold">Planos</span>
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
            {planTypes.map((type, index) => (
              <div 
                key={index}
                className="group p-6 rounded-xl bg-card hover-lift gold-border text-center"
              >
                <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${type.gradient} flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
                  <type.icon className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-2 group-hover:text-primary transition-colors">
                  {type.title}
                </h3>
                <p className="text-sm text-muted-foreground">{type.description}</p>
              </div>
            ))}
          </div>

          {/* Operators Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {operators.map((operator, index) => (
              <div 
                key={index}
                className="group relative overflow-hidden rounded-2xl bg-card hover-lift gold-border"
              >
                <div className={`absolute top-0 left-0 right-0 h-2 bg-gradient-to-r ${operator.color}`} />
                
                <div className="p-8">
                  <h3 className="text-3xl font-bold mb-3 group-hover:text-primary transition-colors">
                    {operator.name}
                  </h3>
                  
                  <p className="text-muted-foreground mb-6 text-lg">
                    {operator.description}
                  </p>
                  
                  <ul className="space-y-3">
                    {operator.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center gap-3">
                        <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
                        <span className="text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits 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">
              Por que contratar através da <span className="text-gradient-gold">Rocha Sales</span>?
            </h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {[
                'Consultoria gratuita e personalizada',
                'Acesso às melhores condições do mercado',
                'Economia de até 30% no valor do plano',
                'Suporte completo antes e após a contratação',
                'Negociação direta com as operadoras',
                'Análise de carências e coberturas',
                'Sem custos adicionais para você',
                'Atendimento humanizado 24/7'
              ].map((benefit, index) => (
                <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card hover-lift">
                  <CheckCircle2 className="h-6 w-6 text-primary flex-shrink-0" />
                  <span className="font-medium">{benefit}</span>
                </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">
              Encontre o plano ideal para você
            </h2>
            <p className="text-xl text-muted-foreground mb-8">
              Faça uma cotação gratuita e descubra quanto você pode economizar
            </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">
                Fazer Cotação Gratuita
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Planos;