"use client"

import { useScrollAnimation } from "@/hooks/use-scroll-animation"
import { useLanguage } from "@/context/language-context"

export default function Skills() {
  const { ref, isVisible } = useScrollAnimation()
  const { t } = useLanguage()

  const skillCategories = [
    {
      category: "Backend",
      icon: "⚙️",
      skills: ["Laravel", "PHP", "CodeIgniter", "REST API", "Javascript"],
      color: "from-blue-500 to-blue-600",
    },
    {
      category: "Frontend",
      icon: "🎨",
      skills: ["Bootstrap", "Vue", "HTML/CSS", "Tailwind CSS"],
      color: "from-purple-500 to-purple-600",
    },
    {
      category: "Database",
      icon: "🛠️",
      skills: ["MySQL", "PostgreSQL", "MariaDB"],
      color: "from-orange-500 to-orange-600",
    },
    {
      category: "Digital Marketing",
      icon: "📊",
      skills: ["Google Ads", "Facebook Ads", "TikTok Ads", "Data Analytics", "Funnel Optimization"],
      color: "from-green-500 to-green-600",
    },
  ]

  return (
    <section id="skills" className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-background to-card/30">
      <div className="max-w-6xl mx-auto" ref={ref}>
        <h2
          className={`text-4xl font-bold mb-4 text-center transition-all duration-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          {t("skills_title")}
        </h2>
        <p
          className={`text-center text-muted-foreground mb-16 transition-all duration-700 delay-100 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          {t("skills_description")}
        </p>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {skillCategories.map((category, categoryIndex) => (
            <div
              key={categoryIndex}
              className={`group relative transition-all duration-700 ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
              style={{
                transitionDelay: isVisible ? `${categoryIndex * 100}ms` : "0ms",
              }}
            >
              <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-primary/5 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-500 opacity-0 group-hover:opacity-100" />
              <div className="relative bg-card border border-border rounded-xl p-6 hover:border-primary/50 transition-all duration-500 h-full">
                <div className="text-4xl mb-4">{category.icon}</div>
                <h3 className="text-lg font-bold mb-4 text-foreground">{category.category}</h3>
                <div className="space-y-3">
                  {category.skills.map((skill) => (
                    <div key={skill} className="flex items-center gap-2 group/skill cursor-default">
                      <div className="w-2 h-2 rounded-full bg-primary group-hover/skill:scale-150 transition-transform duration-300" />
                      <span className="text-sm text-muted-foreground group-hover/skill:text-foreground transition-colors duration-300">
                        {skill}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20">
          <h3
            className={`text-2xl font-bold mb-12 text-center transition-all duration-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
            style={{
              transitionDelay: isVisible ? "400ms" : "0ms",
            }}
          >
            {t("proficiency_levels")}
          </h3>

          <div className="grid md:grid-cols-2 gap-8">
            {skillCategories.map((category, categoryIndex) => (
              <div
                key={categoryIndex}
                className={`transition-all duration-700 ${
                  isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
                }`}
                style={{
                  transitionDelay: isVisible ? `${500 + categoryIndex * 100}ms` : "0ms",
                }}
              >
                <div className="flex items-center gap-3 mb-6">
                  <div
                    className={`w-12 h-12 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center text-white text-xl`}
                  >
                    {category.icon}
                  </div>
                  <h4 className="text-lg font-semibold">{category.category}</h4>
                </div>

                <div className="space-y-4">
                  {category.skills.map((skill, skillIndex) => {
                    const proficiencies = [100, 100, 100, 100, 100]
                    const proficiency = proficiencies[skillIndex % proficiencies.length]

                    return (
                      <div key={skill}>
                        <div className="flex justify-between items-center mb-2">
                          <span className="text-sm font-medium">{skill}</span>
                          <span className="text-xs text-muted-foreground font-semibold">{proficiency}%</span>
                        </div>
                        <div className="w-full bg-muted rounded-full h-2.5 overflow-hidden">
                          <div
                            className="bg-gradient-to-r from-primary to-primary/70 h-2.5 rounded-full transition-all duration-1000 ease-out"
                            style={{
                              width: isVisible ? `${proficiency}%` : "0%",
                              transitionDelay: isVisible ? `${600 + categoryIndex * 100 + skillIndex * 50}ms` : "0ms",
                            }}
                          />
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}