src/components/Skills.jsx

import React, { useState } from "react";
import { motion } from "framer-motion";
import { FaPython, FaDatabase } from "react-icons/fa";
import { BiLogoPostgresql } from "react-icons/bi";
import javaLogo from "../assets/java-svgrepo-com.svg";
import kotlinLogo from "../assets/kotlin-16-svgrepo-com.svg";
import springBootLogo from "../assets/spring-boot-svgrepo-com.svg";
import kafkaLogo from "../assets/kafka-icon-svgrepo-com.svg";
import redisLogo from "../assets/redis-svgrepo-com.svg";
import dockerLogo from "../assets/docker-svgrepo-com.svg";
import cLogo from "../assets/icons8-c-50.png";
import leetcodeLogo from "../assets/leetcode-svgrepo-com.svg";

export default function Skills() {
  const [skills] = useState([
    { id: 1, name: "Java", icon: <img src={javaLogo} alt="Java" className="w-12 h-12" /> },
    { id: 2, name: "Kotlin", icon: <img src={kotlinLogo} alt="Kotlin" className="w-12 h-12" /> },
    { id: 3, name: "Spring Boot", icon: <img src={springBootLogo} alt="Spring Boot" className="w-12 h-12" /> },
    { id: 4, name: "Kafka", icon: <img src={kafkaLogo} alt="Kafka" className="w-12 h-12" /> },
    { id: 5, name: "Redis", icon: <img src={redisLogo} alt="Redis" className="w-12 h-12" /> },
    { id: 6, name: "Docker", icon: <img src={dockerLogo} alt="Docker" className="w-12 h-12" /> },
    { id: 7, name: "C", icon: <img src={cLogo} alt="C" className="w-12 h-12" /> },
    { id: 8, name: "Python", icon: <FaPython size={50} /> },
    { id: 9, name: "PostgreSQL", icon: <BiLogoPostgresql size={50} /> },
    { id: 10, name: "MongoDb", icon: <FaDatabase size={50} /> },
  ]);

  const [experiences] = useState([
    {
      id: 1,
      company: "MobileBytesSensei",
      role: "Backend Intern",
      period: "Recent",
      description:
        "Worked on backend development projects, contributing to the design and implementation of scalable backend systems. Gained hands-on experience with modern backend technologies and best practices.",
    },
  ]);

  const [achievements] = useState([
    {
      id: 1,
      title: "ICPC Regionalist (2×)",
      description: "Participated twice in ICPC regional competitions, demonstrating strong problem-solving skills and competitive programming expertise.",
    },
  ]);

  return (
    <div className="mt-3 lg:mt-16" id="skills">
      <div className="px-5 lg:px-28">

        <motion.h2
          className="text-2xl lg:text-4xl text-center"
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          My <span className="font-extrabold">Skills</span>
        </motion.h2>

        {/* Skill Cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-5 text-lg font-bold mt-7 lg:mt-16 w-full place-items-center gap-y-6 lg:gap-y-12">
          {skills.map((skill) => (
            <motion.div
              key={skill.id}
              className="bg-white border-2 hover:bg-black hover:text-white transition-all cursor-pointer border-black rounded p-3 h-36 w-36 lg:h-44 lg:w-44 flex flex-col items-center justify-center gap-5"
              initial={{ opacity: 0, y: 5 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, ease: "easeOut", delay: skill.id * 0.1 }}
              viewport={{ once: true }}
            >
              {skill.icon}
              <p>{skill.name}</p>
            </motion.div>
          ))}
        </div>

      </div>

      {/* Experience Section */}
      <div className="bg-black w-full my-8 py-8 lg:my-16 lg:py-16">
        <motion.h2
          className="text-2xl lg:text-4xl text-center text-white"
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          My <span className="font-extrabold">Experience</span>
        </motion.h2>

        {/* Experience Cards */}
        <div className="px-5 lg:px-28 my-8 lg:mt-16 space-y-10">
          {experiences.map((exp, index) => (
            <motion.div
              key={exp.id}
              className="bg-black p-5 border border-[#D4D4D8] rounded-md hover:bg-[#27272A] transition-all cursor-pointer"
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{
                type: "spring",
                stiffness: 100,
                damping: 10,
                delay: index * 0.2,
              }}
              viewport={{ once: true }}
            >
              <div className="flex justify-between flex-col items-start lg:flex-row lg:items-center">
                <div className="flex items-center gap-5">
                  <img className="w-7" src={exp.logo} alt="" />
                  <h2 className="font-semibold text-white text-lg lg:text-xl">
                    {exp.role} at {exp.company}
                  </h2>
                </div>
                <span className="text-[#D4D4D8] font-semibold text-sm mt-4 lg:mt-0 lg:text-base">
                  {exp.period}
                </span>
              </div>
              <p className="text-[#D4D4D8] mt-6 text-sm/6 lg:text-base font-light">
                {exp.description}
              </p>
            </motion.div>
          ))}
        </div>

        {/* Achievements Section */}
        <motion.h2
          className="text-2xl lg:text-4xl text-center text-white mt-8 lg:mt-16"
          initial={{ opacity: 0, y: -20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          My <span className="font-extrabold">Achievements</span>
        </motion.h2>

        <div className="px-5 lg:px-28 my-8 space-y-6">
          {achievements.map((achievement, index) => (
            <motion.div
              key={achievement.id}
              className="bg-black p-5 border border-[#D4D4D8] rounded-md hover:bg-[#27272A] transition-all cursor-pointer"
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{
                type: "spring",
                stiffness: 100,
                damping: 10,
                delay: index * 0.2,
              }}
              viewport={{ once: true }}
            >
              <h2 className="font-semibold text-white text-lg lg:text-xl">
                {achievement.title}
              </h2>
              <p className="text-[#D4D4D8] mt-3 text-sm/6 lg:text-base font-light">
                {achievement.description}
              </p>
            </motion.div>
          ))}
        </div>

      </div>
    </div>
  );
}