// ============================================================
// Skills & Technologies Section
// ============================================================
const Skills = () => {
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('visible'); }),
      { threshold: 0.1 }
    );
    document.querySelectorAll('#skills .reveal').forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const categories = [
    {
      title: 'Backend',
      icon: '⚙️',
      skills: [
        { name: 'Java & Spring Boot', level: 82, icon: '☕' },
        { name: 'C# & .NET',          level: 78, icon: '🔷' },
        { name: 'SQL / MySQL',         level: 80, icon: '🗄️' },
        { name: 'REST APIs',           level: 84, icon: '🔗' },
      ],
    },
    {
      title: 'Frontend',
      icon: '🎨',
      skills: [
        { name: 'JavaScript',   level: 82, icon: '🟨' },
        { name: 'TypeScript',   level: 76, icon: '📘' },
        { name: 'Angular',      level: 74, icon: '🔴' },
        { name: 'React',        level: 72, icon: '⚛️' },
      ],
    },
    {
      title: 'Tools & Other',
      icon: '🛠️',
      skills: [
        { name: 'Git & GitLab', level: 85, icon: '📦' },
        { name: 'Docker',       level: 68, icon: '🐳' },
        { name: 'IntelliJ / VS Code', level: 88, icon: '💻' },
        { name: 'Jira & Postman',     level: 75, icon: '📋' },
      ],
    },
  ];

  const tools = [
    'Java', 'Spring Boot', 'Hibernate', 'C#', '.NET',
    'JavaScript', 'TypeScript', 'Angular', 'React', 'SQL',
    'Docker', 'Git', 'Linux', 'C++', 'Unity',
    'Blender', 'Software Architecture', 'DevOps',
  ];

  const languages = [
    { lang: 'Dutch',   level: 'Native',    pct: 100 },
    { lang: 'English', level: 'Very good',  pct: 88  },
    { lang: 'French',  level: 'Basic',      pct: 35  },
  ];

  return (
    <section
      id="skills"
      className="py-24 md:py-32 px-6 bg-gray-50 dark:bg-gray-900/50"
      aria-label="Skills and Technologies"
    >
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-16">
          <p className="reveal section-tag mb-2">What I work with</p>
          <h2 className="reveal section-title text-gray-900 dark:text-white">
            Skills &amp; Technologies
          </h2>
          <div className="reveal section-divider mx-auto" />
          <p className="reveal text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
            A curated set of technologies I've worked with throughout my studies, internship, and personal projects.
          </p>
        </div>

        {/* Category cards */}
        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {categories.map((cat, ci) => (
            <div
              key={cat.title}
              className="reveal p-6 rounded-2xl bg-white dark:bg-gray-800/70 border border-gray-100 dark:border-gray-700/60 shadow-sm"
              style={{ transitionDelay: `${ci * 0.1}s` }}
            >
              <div className="flex items-center gap-3 mb-5">
                <span className="text-2xl" role="img" aria-label={cat.title}>{cat.icon}</span>
                <h3 className="text-base font-bold text-gray-800 dark:text-white">{cat.title}</h3>
              </div>
              <ul className="space-y-4">
                {cat.skills.map(({ name, level, icon }) => (
                  <li key={name}>
                    <div className="flex items-center justify-between mb-1">
                      <span className="flex items-center gap-1.5 text-sm font-medium text-gray-700 dark:text-gray-300">
                        <span>{icon}</span> {name}
                      </span>
                      <span className="text-xs font-semibold text-bordeaux">{level}%</span>
                    </div>
                    {/* Progress bar */}
                    <div className="h-1.5 w-full rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all duration-1000"
                        style={{
                          width: `${level}%`,
                          background: 'linear-gradient(90deg, #800020, #9a0026)',
                        }}
                      />
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Tech chip grid */}
        <div className="reveal mb-12">
          <p className="text-center text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-6">
            Technologies &amp; concepts
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            {tools.map((tool) => (
              <span
                key={tool}
                className="skill-chip text-sm font-medium text-gray-700 dark:text-gray-300 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 transition-all"
              >
                {tool}
              </span>
            ))}
          </div>
        </div>

        {/* Languages */}
        <div className="reveal max-w-sm mx-auto">
          <p className="text-center text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-600 mb-5">
            Languages
          </p>
          <div className="space-y-3">
            {languages.map(({ lang, level, pct }) => (
              <div key={lang}>
                <div className="flex justify-between mb-1">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{lang}</span>
                  <span className="text-xs font-semibold text-bordeaux">{level}</span>
                </div>
                <div className="h-1.5 w-full rounded-full bg-gray-100 dark:bg-gray-700 overflow-hidden">
                  <div
                    className="h-full rounded-full"
                    style={{
                      width: `${pct}%`,
                      background: 'linear-gradient(90deg, #800020, #9a0026)',
                    }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
};