beWerbung-2025/components/SoftSkills.tsx

'use client';

import { useEffect, useRef, useState } from 'react';

interface SoftSkill {
  name: string;
  level: number; // 1-5
  icon: string;
}

const softSkills: SoftSkill[] = [
  { name: 'Organisation', level: 4, icon: '📋' },
  { name: 'Kommunikation', level: 5, icon: '💬' },
  { name: 'Selbstständigkeit', level: 4, icon: '🎯' },
  { name: 'Teamfähigkeit', level: 5, icon: '🤝' },
  { name: 'Verantwortung', level: 5, icon: '✓' },
  { name: 'Engagement', level: 5, icon: '🚀' },
  { name: 'Kompromissbereitschaft', level: 4, icon: '🤔' },
  { name: 'Aufgeschlossenheit', level: 5, icon: '🌟' },
  { name: 'Lernbereitschaft', level: 5, icon: '📚' },
  { name: 'Zielstrebigkeit', level: 5, icon: '🎯' },
  { name: 'Überzeugungsfähigkeit', level: 4, icon: '💡' },
  { name: 'Lösungsorientiert', level: 5, icon: '🔧' },
];

export default function SoftSkills() {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const currentRef = ref.current;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, []);

  return (
    <section
      id="soft-skills"
      ref={ref}
      className={`py-20 px-4 sm:px-6 lg:px-8 bg-white transition-opacity duration-1000 ${
        isVisible ? 'opacity-100' : 'opacity-0'
      }`}
    >
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl sm:text-4xl font-bold text-text text-center mb-4 relative inline-block w-full">
          Persönliche Fähigkeiten
        </h2>
        <p className="text-center text-text-light mb-12 max-w-2xl mx-auto">
          Soft Skills, die mich als Teamplayer und Leader auszeichnen
        </p>

        {/* Skills Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {softSkills.map((skill, index) => (
            <div
              key={skill.name}
              className={`group bg-gradient-to-br from-white to-bg-light rounded-xl p-6 shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100 hover:border-primary/30 ${
                isVisible ? 'animate-fade-in' : 'opacity-0'
              }`}
              style={{ animationDelay: `${index * 50}ms` }}
            >
              {/* Icon */}
              <div className="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">
                {skill.icon}
              </div>

              {/* Skill Name */}
              <h3 className="font-bold text-text mb-3 text-base group-hover:text-primary transition-colors">
                {skill.name}
              </h3>

              {/* Level Dots */}
              <div className="flex gap-1.5">
                {[1, 2, 3, 4, 5].map((dot) => (
                  <div
                    key={dot}
                    className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                      dot <= skill.level
                        ? 'bg-primary group-hover:scale-125'
                        : 'bg-gray-300'
                    }`}
                    style={{
                      transitionDelay: `${index * 50 + dot * 30}ms`,
                    }}
                  />
                ))}
              </div>

              {/* Hover Effect - Level Text */}
              <div className="mt-3 transition-opacity duration-300">
                <span className="text-xs text-primary font-semibold">
                  {skill.level === 5 ? 'Expertenlevel' : skill.level === 4 ? 'Sehr gut' : 'Gut'}
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom Info */}
        <div className="mt-16 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 rounded-xl p-8 text-center">
          <h3 className="text-xl font-bold text-text mb-4">
            Warum diese Fähigkeiten wichtig sind
          </h3>
          <p className="text-text-light leading-relaxed max-w-3xl mx-auto">
            In über 20 Jahren Berufserfahrung habe ich gelernt, dass technisches Know-how nur die 
            halbe Miete ist. Erfolgreiche Projekte entstehen durch{' '}
            <strong className="text-primary">klare Kommunikation</strong>, 
            <strong className="text-primary"> Teamarbeit</strong> und die Fähigkeit, auch in 
            stressigen Situationen <strong className="text-primary">lösungsorientiert</strong> zu bleiben. 
            Diese Soft Skills ermöglichen es mir, komplexe technische Anforderungen verständlich zu 
            vermitteln und Teams erfolgreich zu führen.
          </p>
        </div>
      </div>
    </section>
  );
}