import { Card } from '@/components/ui/card';
import { Ruler, Palette, Truck, Wrench, CheckCircle, Users } from 'lucide-react';

export const ServicesSection = () => {
  const services = [
    {
      icon: Ruler,
      title: 'Consultoria e Projeto',
      description: 'Análise completa do espaço e desenvolvimento de projetos personalizados.',
      features: ['Medição técnica', 'Projeto 3D', 'Consultoria especializada']
    },
    {
      icon: Palette,
      title: 'Design de Interiores',
      description: 'Criação de ambientes funcionais e esteticamente atraentes.',
      features: ['Layout otimizado', 'Paleta de cores', 'Ambientação']
    },
    {
      icon: Wrench,
      title: 'Instalação e Montagem',
      description: 'Equipe técnica especializada para montagem e instalação.',
      features: ['Equipe técnica', 'Montagem profissional', 'Garantia de qualidade']
    },
    {
      icon: Truck,
      title: 'Logística e Entrega',
      description: 'Gestão completa da logística e entrega dos produtos.',
      features: ['Entrega programada', 'Logística reversa', 'Rastreamento']
    },
    {
      icon: Users,
      title: 'Suporte Pós-Venda',
      description: 'Acompanhamento contínuo e suporte técnico especializado.',
      features: ['Suporte técnico', 'Manutenção', 'Garantia estendida']
    },
    {
      icon: CheckCircle,
      title: 'Garantia de Qualidade',
      description: 'Compromisso com a excelência em todos os nossos serviços.',
      features: ['Controle de qualidade', 'Certificações', 'Padrões internacionais']
    }
  ];

  return (
    <section id="servicos" className="py-20 bg-muted/30">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16 animate-slide-up">
          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
            Nossos Serviços 
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Disponibilizamos soluções integradas e sob medida, que abrangem todas as fases do processo – do conceito inicial à concretização final – sempre pautadas pela busca incessante da excelência, pela eficiência operacional e por um rigoroso cuidado com os detalhes. Cada etapa é concebida com precisão, visando superar expectativas e assegurar a plena satisfação de nossos clientes.
          </p>
        </div>

        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <Card 
                key={service.title}
                className="p-6 group hover:shadow-elegant transition-all duration-300 animate-fade-in border-0 bg-background"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <div className="flex items-center mb-4">
                  <div className="w-12 h-12 bg-movo-green/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-movo-green group-hover:text-white transition-colors duration-300">
                    <IconComponent className="h-6 w-6 text-movo-green group-hover:text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-foreground">
                    {service.title}
                  </h3>
                </div>
                
                <p className="text-muted-foreground mb-4">
                  {service.description}
                </p>
                
                <ul className="space-y-2">
                  {service.features.map((feature, featureIndex) => (
                    <li 
                      key={featureIndex}
                      className="flex items-center text-sm text-muted-foreground"
                    >
                      <CheckCircle className="h-4 w-4 text-movo-green mr-2 flex-shrink-0" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
};