import marcelImage from "../assets/marcel-scheibe.jpg";
import sarahImage from "../assets/sarah-mueller.jpg";
import thomasImage from "../assets/thomas-weber.jpg";

const LeadershipTeam = () => {
  const team = [
    {
      name: "Marcel Scheibe",
      position: "Gründer & CEO",
      expertise: "Visionär für digitale Transformation und strategische Unternehmensführung.",
      image: marcelImage
    },
    {
      name: "Sarah Müller",
      position: "Head of Operations",
      expertise: "Expertin für Prozessoptimierung und operative Exzellenz in B2B-Umgebungen.",
      image: sarahImage
    },
    {
      name: "Thomas Weber",
      position: "Head of Technology",
      expertise: "Technologieführer mit Fokus auf innovative Konnektivitätslösungen.",
      image: thomasImage
    }
  ];

  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
            Das <span className="text-secondary">Führungsteam</span>
          </h2>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            Unser erfahrenes Team bringt jahrzehntelange Expertise in den Bereichen 
            Technologie, Operations und Geschäftsentwicklung mit.
          </p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-8">
          {team.map((member, index) => (
            <div key={index} className="group">
              <div className="card-elevated rounded-3xl overflow-hidden hover-scale transition-all duration-300">
                <div className="relative">
                  <img 
                    src={member.image}
                    alt={`${member.name} - ${member.position}`}
                    className="w-full h-80 object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                </div>
                
                <div className="p-6 space-y-4">
                  <div>
                    <h3 className="text-xl font-semibold text-foreground mb-1">
                      {member.name}
                    </h3>
                    <p className="text-secondary font-medium text-sm">
                      {member.position}
                    </p>
                  </div>
                  
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    {member.expertise}
                  </p>
                  
                  <div className="flex items-center gap-2 pt-2">
                    <div className="w-8 h-px bg-secondary"></div>
                    <span className="text-xs text-secondary font-medium">B2IN TEAM</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default LeadershipTeam;