import { Button } from '@/components/ui/button';
import { ArrowRight, Shield, Users, Award, Heart } from 'lucide-react';
import { Link } from 'react-router-dom';
import heroImage from '@/assets/hero-bg.jpg';

const Home = () => {
  const WHATSAPP_BASE_URL = import.meta.env.VITE_PUBLIC_WHATSAPP_LINK || "https://api.whatsapp.com/send/?phone=5511949474214&text&type=phone_number&app_absent=0";

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0">
          <img 
            src={heroImage} 
            alt="Equipe Rocha Sales" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-secondary/95 via-secondary/80 to-secondary/60" />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-secondary" />
        </div>

        {/* Hero Content */}
        <div className="container mx-auto px-4 z-10 relative">
          <div className="max-w-3xl">
            <h1 className="text-5xl md:text-7xl font-bold mb-6 text-secondary-foreground leading-tight">
              Você seguro para{' '}
              <span className="text-gradient-gold">viver</span>.
            </h1>
            <p className="text-xl md:text-2xl text-muted-foreground mb-8 leading-relaxed">
              Consultoria gratuita em planos de saúde para MEIs, empresas e famílias. 
              Atendimento humanizado, sem custos abusivos.
            </p>
            <Button 
              asChild 
              className="bg-primary hover:bg-primary-strong text-primary-foreground text-sm md:text-lg px-4 py-3 md:px-8 md:py-6 shadow-gold-lg hover:shadow-gold transition-all duration-300 hover:scale-105"
            >
              <a href={WHATSAPP_BASE_URL} target="_blank" rel="noopener noreferrer">
                Falar com Especialista no WhatsApp
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
          </div>
        </div>

        {/* Decorative Elements */}
        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10" />
      </section>

      {/* Trust Indicators */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              { icon: Shield, label: 'Consultoria Gratuita', value: '100%' },
              { icon: Users, label: 'Clientes Satisfeitos', value: '5000+' },
              { icon: Award, label: 'Anos de Experiência', value: '4+' },
              { icon: Heart, label: 'Atendimento Humanizado', value: '24/7' },
            ].map((stat, index) => (
              <div 
                key={index} 
                className="text-center p-6 rounded-xl bg-card hover-lift gold-border"
              >
                <stat.icon className="h-12 w-12 mx-auto mb-4 text-primary" />
                <div className="text-3xl font-bold text-gradient-gold mb-2">{stat.value}</div>
                <div className="text-sm text-muted-foreground font-medium">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quick Features */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Por que escolher a <span className="text-gradient-gold">Rocha Sales</span>?
            </h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Somos especialistas em encontrar a melhor solução para você e sua família
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                title: 'Consultoria Personalizada',
                description: 'Análise completa do seu perfil para encontrar o plano ideal',
                color: 'from-primary to-primary-soft'
              },
              {
                title: 'Redução de Custos',
                description: 'Economia de até 30% sem perder benefícios e carências',
                color: 'from-secondary to-primary'
              },
              {
                title: 'Suporte Contínuo',
                description: 'Acompanhamento completo mesmo após a contratação',
                color: 'from-primary to-secondary'
              },
            ].map((feature, index) => (
              <div 
                key={index} 
                className="p-8 rounded-2xl bg-card hover-lift gold-border group"
              >
                <div className={`h-2 w-20 rounded-full bg-gradient-to-r ${feature.color} mb-6`} />
                <h3 className="text-2xl font-bold mb-4 group-hover:text-primary transition-colors">
                  {feature.title}
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-secondary text-secondary-foreground relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary rounded-full blur-3xl" />
        </div>
        
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              Pronto para economizar no seu plano de saúde?
            </h2>
            <p className="text-xl text-muted-foreground mb-8">
              Entre em contato agora e receba uma consultoria gratuita e personalizada
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <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>
              <Button 
                asChild 
                size="lg" 
                variant="outline" 
                className="border-primary text-primary hover:bg-primary hover:text-primary-foreground"
              >
                <Link to="/servicos">
                  Conheça Nossos Serviços
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;