const OurValues = () => {
  const values = [
    {
      title: "Innovation",
      description: "Wir entwickeln kontinuierlich neue Lösungen, die unseren Kunden einen Wettbewerbsvorteil verschaffen.",
      icon: "💡"
    },
    {
      title: "Konnektivität", 
      description: "Wir verbinden Unternehmen, Technologien und Menschen für optimale Geschäftsergebnisse.",
      icon: "🔗"
    },
    {
      title: "Qualität",
      description: "Höchste Standards in allen Bereichen - von der Produktentwicklung bis zum Kundenservice.",
      icon: "⭐"
    },
    {
      title: "Vertrauen",
      description: "Transparente Kommunikation und zuverlässige Partnerschaften bilden das Fundament unserer Arbeit.",
      icon: "🤝"
    },
    {
      title: "Nachhaltigkeit",
      description: "Verantwortungsvolle Geschäftspraktiken für langfristigen Erfolg und positive gesellschaftliche Wirkung.",
      icon: "🌱"
    }
  ];

  return (
    <section className="py-20 px-4">
      <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">
            Unsere <span className="text-secondary">Werte</span>
          </h2>
          <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
            Diese fünf Grundpfeiler leiten unser tägliches Handeln und definieren, 
            wer wir als Unternehmen sind und wofür wir stehen.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {values.map((value, index) => (
            <div key={index} className={`group ${index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : ''}`}>
              <div className="card-elevated p-8 rounded-3xl h-full hover-scale transition-all duration-300">
                <div className="text-center space-y-6">
                  <div className="text-5xl mb-4">{value.icon}</div>
                  
                  <h3 className="text-2xl font-semibold text-foreground">
                    {value.title}
                  </h3>
                  
                  <div className="w-12 h-px bg-secondary mx-auto"></div>
                  
                  <p className="text-muted-foreground leading-relaxed">
                    {value.description}
                  </p>
                </div>
                
                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary/20 via-secondary to-secondary/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default OurValues;