import { Card } from '@/components/ui/card';
import { User, MessageCircle, Mail } from 'lucide-react';
import { ResponsiveImage } from '@/components/ResponsiveImage';

// Team member photos
import ruthPhoto from '@/assets/ruth 1.jpeg';
import danielPhoto from '@/assets/pai2.jpeg';
import marcioPhoto from '@/assets/marcio1.jpeg';
import pauloPhoto from '@/assets/paulo 1.jpeg';
import pattyPhoto from '@/assets/patty.jpeg';
import dheysonPhoto from '@/assets/dheyson.jpeg';
import paulaPhoto from '@/assets/paula.jpeg';
import tantanPhoto from '@/assets/tantan.jpeg';
import leonardoPhotoUrl from '@/assets/leonardo1.JPG?url';
import maluPhoto from '@/assets/malu1.jpeg';
import lucasPhoto from '@/assets/lucas1.jpg';

export const TeamSection = () => {
  const teamMembers = [
    {
      id: 1,
      name: 'Ruth',
      position: 'CEO',
      email: 'rc@grupomovo.com.br',
      phone: '(55) 11 96716-0002',
      photo: ruthPhoto
    },
    // {
    //   id: 2,
    //   name: 'Daniel Bortoletto',
    //   position: 'Diretor',
    //   email: 'db@grupomovo.com.br',
    //   phone: '(55) 11 97013-1150',
    //   photo: danielPhoto
    // },
    {
      id: 3,
      name: 'Marcio',
      position: 'Diretor',
      email: 'mb@grupomovo.com.br',
      phone: '(55) 11 99964-3838',
      photo: marcioPhoto
    },
    // {
    //   id: 4,
    //   name: 'Hevelyn Silva',
    //   position: 'Gerente Geral',
    //   email: 'hs@grupomovo.com.br',
    //   phone: '(55) 11 99641-5928',
    //   photo: '/src/assets/evelyn1.jpeg'
    // },
    {
      id: 5,
      name: 'Paulo',
      position: 'Comercial',
      email: 'pr@grupomovo.com.br',
      phone: '(55) 11 99443-0101',
      photo: pauloPhoto
    },
    {
      id: 6,
      name: 'Patricia',
      position: 'Comercial',
      email: 'pt@grupomovo.com.br',
      phone: '(55) 11 98744-7026',
      photo: pattyPhoto
    },
    {
      id: 7,
      name: 'Dheyson',
      position: 'Comercial',
      email: 'dc@grupomovo.com.br',
      phone: '(55) 11 97830-7023',
      photo: dheysonPhoto
    },
    {
      id: 12,
      name: 'Paula',
      position: 'Financeiro',
      email: 'financeiro@grupomovo.com.br',
      phone: '(55) 11 98208-8511',
      photo: paulaPhoto
    },
    {
      id: 8,
      name: 'Adam',
      position: 'Arquiteto',
      email: 'ad@grupomovo.com.br',
      phone: '(55) 11 97066-2578',
      photo: tantanPhoto
    },
    {
      id: 9,
      name: 'Lucas',
      position: 'Arquiteto Paisagista',
      email: 'lc@grupomovo.com.br',
      phone: '(55) 11 98471-3611',
      photo: lucasPhoto
    },
    {
      id: 10,
      name: 'Leonardo',
      position: 'Tecnologia Da Informação',
      email: 'lb@grupomovo.com.br',
      phone: '(55) 11 95923-8271',
      photo: leonardoPhotoUrl
    },
    {
      id: 11,
      name: 'Malu',
      position: 'Marketing',
      email: 'ml@grupomovo.com.br',
      phone: '(55) 11 98905-3024',
      photo: maluPhoto
    },
   
    
  ];

  return (
    <section id="equipe" className="py-8 bg-background">
      <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">
            Nossa Equipe
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Na Mövo, temos o privilégio de contar com um time de excelência – uma sinergia de talentos diversos, especializados e apaixonados pelo que fazem. Cada profissional traz consigo uma bagagem singular de conhecimentos, experiências e sensibilidade, que se complementam em perfeita harmonia.
            <br /><br />
            Mais do que competência técnica, nossa equipe atua com sofisticação, visão estratégica e um apurado senso estético, conduzindo cada projeto com precisão e cuidado em cada detalhe. É essa união de saber e sensibilidade que nos permite transformar ideias em realizações memoráveis, superando expectativas e elevando padrões.
            <br /><br />
            A Mövo é, acima de tudo, feita de pessoas que acreditam no poder da criatividade e da excelência para construir soluções verdadeiramente significativas.
          </p>
        </div>

        {/* Team Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {teamMembers.map((member, index) => (
            <Card 
              key={member.id}
              className="p-6 group hover:shadow-elegant transition-all duration-300 animate-fade-in border-0 bg-muted/30"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              {/* Photo */}
              <div className="flex justify-center mb-6">
                <div className="relative w-24 h-24 rounded-full overflow-hidden bg-movo-green/10 flex items-center justify-center group-hover:bg-movo-green/20 transition-colors duration-300">
                  <ResponsiveImage 
                    src={member.photo} 
                    alt={member.name}
                    className="w-full h-full object-cover rounded-full"
                    sizes="96px"
                    rootMargin="50px"
                    threshold={0.1}
                  />
                </div>
              </div>

              {/* Info */}
              <div className="text-center">
                <h3 className="text-xl font-bold text-foreground mb-2">
                  {member.name}
                </h3>
                <p className="text-movo-green font-medium mb-4">
                  {member.position}
                </p>

                {/* Contact Info */}
                <div className="space-y-3">
                  <div className="flex items-center justify-center text-sm text-muted-foreground hover:text-movo-green transition-colors">
                    <Mail className="h-4 w-4 mr-2 flex-shrink-0" />
                    <a href={`mailto:${member.email}`} className="hover:underline">
                      {member.email}
                    </a>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        {/* Call to Action */}
        <div className="text-center mt-16">
          <p className="text-lg text-muted-foreground mb-6">
            Precisa falar com nossa equipe? Entre em contato conosco!
          </p>
          <div className="flex justify-center">
            <a 
              href="https://wa.me/5511989053024"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center px-6 py-3 bg-movo-green text-white rounded-lg hover:bg-movo-green-light transition-colors duration-300"
            >
              <MessageCircle className="h-5 w-5 mr-2" />
              WhatsApp
            </a>
          </div>
        </div>
      </div>


    </section>
  );
};