"use client";

import { useEffect, useState } from "react";

interface Skill {
  id: number;
  name: string;
  category: string | null;
  level: number | null;
  icon: string | null;
}

export default function Skills() {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [loading, setLoading] = useState(true);
  const [animateProgress, setAnimateProgress] = useState(false);

  useEffect(() => {
    let mounted = true;

    async function fetchSkills() {
      try {
        const response = await fetch("/api/skills");

        if (!response.ok) {
          throw new Error("Failed to fetch skills");
        }

        const result = await response.json();

        if (mounted && result.success) {
          setSkills(result.data);
        }
      } catch (error) {
        console.error("Gagal mengambil data Skills:", error);
      } finally {
        if (mounted) {
          setLoading(false);
        }
      }
    }

    fetchSkills();

    return () => {
      mounted = false;
    };
  }, []);

  useEffect(() => {
    if (!loading && skills.length > 0) {
      const timer = window.setTimeout(() => {
        setAnimateProgress(true);
      }, 250);

      return () => window.clearTimeout(timer);
    }
  }, [loading, skills]);

  const categories = Array.from(
    new Set(
      skills
        .map((skill) => skill.category)
        .filter((category): category is string => Boolean(category))
    )
  );

  return (
    <>
      <section
        id="skills"
        className="skills-section position-relative overflow-hidden"
      >
        <div className="skills-orb skills-orb-one" />
        <div className="skills-orb skills-orb-two" />
        <div className="skills-grid-background" />

        <div className="container position-relative skills-container">
          {/* HEADER */}

          <div className="skills-header text-center">
            <div className="skills-badge">
              <span className="skills-badge-icon">
                <i className="bi bi-stars" />
              </span>

              <span>PROFESSIONAL SKILLS</span>
            </div>

            <h2 className="skills-title">
              Technical <span>Skills</span>
            </h2>

            <p className="skills-description mx-auto">
              The technical skills and technologies I use to build modern,
              scalable, and high-quality applications.
            </p>

            <div className="skills-title-decoration">
              <span />
              <span />
              <span />
            </div>
          </div>

          {/* LOADING */}

          {loading && (
            <div className="skills-loading">
              <div className="skills-loading-animation">
                <span />
                <span />
                <span />
              </div>

              <p>Loading professional skills...</p>
            </div>
          )}

          {/* EMPTY STATE */}

          {!loading && skills.length === 0 && (
            <div className="skills-empty">
              <div className="skills-empty-icon">
                <i className="bi bi-code-slash" />
              </div>

              <h5>No Skills Available</h5>

              <p>Belum ada data skills yang tersedia.</p>
            </div>
          )}

          {/* SKILLS CONTENT */}

          {!loading && skills.length > 0 && (
            <div className="skills-content">
              {categories.map((category, categoryIndex) => {
                const categorySkills = skills.filter(
                  (skill) => skill.category === category
                );

                return (
                  <div
                    key={category}
                    className="skills-category"
                    style={{
                      animationDelay: `${categoryIndex * 120}ms`,
                    }}
                  >
                    {/* CATEGORY HEADER */}

                    <div className="skills-category-header">
                      <div className="skills-category-icon">
                        <i className="bi bi-layers" />

                        <span className="category-icon-ring" />
                      </div>

                      <div className="skills-category-title">
                        <span>EXPERTISE</span>

                        <h4>{category}</h4>
                      </div>

                      <div className="skills-category-line" />

                      <div className="skills-category-count">
                        <strong>{categorySkills.length}</strong>

                        <span>
                          {categorySkills.length === 1
                            ? "Skill"
                            : "Skills"}
                        </span>
                      </div>
                    </div>

                    {/* SKILL CARDS */}

                    <div className="row g-4">
                      {categorySkills.map((skill, index) => {
                        const level = Math.min(
                          100,
                          Math.max(0, skill.level ?? 0)
                        );

                        const proficiency =
                          level >= 90
                            ? "Expert"
                            : level >= 75
                            ? "Advanced"
                            : level >= 50
                            ? "Intermediate"
                            : "Beginner";

                        return (
                          <div
                            key={skill.id}
                            className="col-12 col-md-6 col-xl-4"
                          >
                            <article
                              className="skill-card"
                              style={{
                                animationDelay: `${
                                  categoryIndex * 100 + index * 90
                                }ms`,
                              }}
                            >
                              {/* Animated top line */}

                              <span className="skill-card-top-line">
                                <span />
                              </span>

                              {/* Card glow */}

                              <span className="skill-card-glow" />

                              <div className="skill-card-body">
                                {/* CARD HEADER */}

                                <div className="skill-card-header">
                                  <div className="skill-information">
                                    <div className="skill-icon-container">
                                      <div className="skill-icon">
                                        <i
                                          className={
                                            skill.icon ||
                                            "bi bi-code-slash"
                                          }
                                        />
                                      </div>

                                      <span className="skill-icon-wave" />
                                    </div>

                                    <div className="skill-name">
                                      <h5>{skill.name}</h5>

                                      <span>{category}</span>
                                    </div>
                                  </div>

                                  <div className="skill-percentage">
                                    {level}%
                                  </div>
                                </div>

                                {/* PROFICIENCY / DESCRIPTION AREA */}

                                <div className="skill-main-content">
                                  <div className="skill-proficiency">
                                    <div className="skill-proficiency-header">
                                      <span>Proficiency</span>

                                      <strong>{proficiency}</strong>
                                    </div>

                                    {/* Progress background */}

                                    <div className="skill-progress">
                                      {/* Progress value */}

                                      <div
                                        className="skill-progress-value"
                                        style={{
                                          width: animateProgress
                                            ? `${level}%`
                                            : "0%",
                                        }}
                                      >
                                        {/* Moving light */}

                                        <span className="progress-light" />

                                        {/* Energy particles */}

                                        <span className="progress-energy progress-energy-one" />
                                        <span className="progress-energy progress-energy-two" />
                                        <span className="progress-energy progress-energy-three" />
                                      </div>
                                    </div>

                                    <div className="skill-progress-labels">
                                      <span>Beginner</span>

                                      <span>Expert</span>
                                    </div>
                                  </div>
                                </div>

                                {/* CARD FOOTER */}

                                <div className="skill-card-footer">
                                  <span className="skill-status">
                                    <span className="skill-status-dot" />

                                    Active Skill
                                  </span>

                                  <i className="bi bi-arrow-up-right" />
                                </div>
                              </div>
                            </article>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          {/* FOOTER */}

          {!loading && skills.length > 0 && (
            <div className="skills-footer">
              <div className="skills-footer-line" />

              <div className="skills-footer-content">
                <span className="skills-live-indicator">
                  <span className="skills-live-ring" />
                  <span className="skills-live-dot" />
                </span>

                <span>
                  Continuously learning and improving technical expertise
                </span>

                <i className="bi bi-arrow-repeat" />
              </div>
            </div>
          )}
        </div>
      </section>

      <style
        dangerouslySetInnerHTML={{
          __html: `
            .skills-section {
              position: relative;
              padding: 85px 0 95px;
              background:
                radial-gradient(
                  circle at 5% 15%,
                  rgba(25, 135, 84, 0.07),
                  transparent 27%
                ),
                radial-gradient(
                  circle at 95% 80%,
                  rgba(32, 201, 151, 0.065),
                  transparent 28%
                ),
                linear-gradient(
                  180deg,
                  #ffffff 0%,
                  #f8fbf9 48%,
                  #ffffff 100%
                );
            }

            .skills-container {
              z-index: 2;
            }

            /* =============================================
               BACKGROUND
            ============================================= */

            .skills-orb {
              position: absolute;
              width: 280px;
              height: 280px;
              border-radius: 50%;
              filter: blur(80px);
              pointer-events: none;
              opacity: 0.22;
              z-index: 0;
              animation: skillsOrbFloat 8s ease-in-out infinite;
            }

            .skills-orb-one {
              left: -150px;
              top: 12%;
              background: rgba(25, 135, 84, 0.25);
            }

            .skills-orb-two {
              right: -150px;
              bottom: 10%;
              background: rgba(32, 201, 151, 0.22);
              animation-delay: -4s;
            }

            .skills-grid-background {
              position: absolute;
              inset: 0;
              opacity: 0.28;
              pointer-events: none;
              background-image:
                linear-gradient(
                  rgba(25, 135, 84, 0.025) 1px,
                  transparent 1px
                ),
                linear-gradient(
                  90deg,
                  rgba(25, 135, 84, 0.025) 1px,
                  transparent 1px
                );
              background-size: 45px 45px;
              mask-image: linear-gradient(
                to bottom,
                transparent,
                black 15%,
                black 85%,
                transparent
              );
            }

            /* =============================================
               HEADER
            ============================================= */

            .skills-header {
              margin-bottom: 65px;
              animation: skillsHeaderIn 0.8s ease both;
            }

            .skills-badge {
              display: inline-flex;
              align-items: center;
              gap: 10px;
              padding: 7px 17px 7px 7px;
              border: 1px solid rgba(25, 135, 84, 0.16);
              border-radius: 50px;
              color: #198754;
              background: rgba(25, 135, 84, 0.065);
              box-shadow:
                0 8px 25px rgba(25, 135, 84, 0.06);
              font-size: 0.7rem;
              font-weight: 800;
              letter-spacing: 1.2px;
              animation: skillsBadgeFloat 3s ease-in-out infinite;
            }

            .skills-badge-icon {
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              color: #ffffff;
              background:
                linear-gradient(
                  135deg,
                  #198754,
                  #20c997
                );
              box-shadow:
                0 6px 16px rgba(25, 135, 84, 0.25);
              animation:
                skillsBadgeIconPulse
                2s ease-in-out infinite;
            }

            .skills-title {
              margin: 20px 0 14px;
              color: #18231e;
              font-size: clamp(2.2rem, 4vw, 3.2rem);
              font-weight: 800;
              line-height: 1.15;
              letter-spacing: -1.7px;
            }

            .skills-title span {
              position: relative;
              display: inline-block;
              color: #198754;
            }

            /* Underline di bawah "Skills" DIHILANGKAN */

            .skills-title span::after {
              display: none;
            }

            .skills-description {
              max-width: 700px;
              margin-bottom: 22px;
              color: #6c757d;
              font-size: 0.96rem;
              line-height: 1.85;
            }

            /* =============================================
               CONTINUOUS HEADER DECORATION LINE
            ============================================= */

            /* =============================================
   CONTINUOUS HEADER DECORATION LINE
============================================= */

.skills-title-decoration {
  position: relative;

  width: 70px;
  height: 4px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(25, 135, 84, 0.10);
}

/* Hide the old 3-part decoration */

.skills-title-decoration span {
  display: none;
}

/* Moving green light */

.skills-title-decoration::after {
  content: "";

  position: absolute;

  top: 0;
  left: -35%;

  width: 35%;
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #198754,
      #20c997,
      #198754,
      transparent
    );

  box-shadow:
    0 0 9px rgba(25, 135, 84, 0.45);

  animation:
    skillsTitleDecorationMove
    2.8s linear infinite;
}
            /* =============================================
               CATEGORY
            ============================================= */

            .skills-category {
              margin-bottom: 60px;
              animation:
                skillsCategoryIn
                0.7s ease both;
            }

            .skills-category:last-child {
              margin-bottom: 0;
            }

            .skills-category-header {
              display: flex;
              align-items: center;
              gap: 15px;
              margin-bottom: 25px;
            }

            .skills-category-icon {
              position: relative;
              width: 50px;
              height: 50px;
              flex: 0 0 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 15px;
              color: #ffffff;
              background:
                linear-gradient(
                  135deg,
                  #198754,
                  #20c997
                );
              box-shadow:
                0 10px 24px rgba(25, 135, 84, 0.2);
              animation:
                skillsCategoryIconFloat
                3.5s ease-in-out infinite;
            }

            .skills-category-icon i {
              position: relative;
              z-index: 2;
              font-size: 1.2rem;
            }

            .category-icon-ring {
              position: absolute;
              inset: -5px;
              border: 1px solid rgba(25, 135, 84, 0.22);
              border-radius: 19px;
              animation:
                skillsCategoryRing
                2.5s ease-out infinite;
            }

            .skills-category-title {
              flex-shrink: 0;
            }

            .skills-category-title span {
              display: block;
              margin-bottom: 3px;
              color: #929c97;
              font-size: 0.63rem;
              font-weight: 800;
              letter-spacing: 1.7px;
            }

            .skills-category-title h4 {
              margin: 0;
              color: #1d2923;
              font-size: 1.22rem;
              font-weight: 800;
            }

            .skills-category-line {
              flex: 1;
              height: 1px;
              margin-left: 8px;
              background:
                linear-gradient(
                  90deg,
                  rgba(25, 135, 84, 0.22),
                  transparent
                );
            }

            .skills-category-count {
              display: flex;
              align-items: baseline;
              gap: 5px;
              flex-shrink: 0;
              padding: 7px 12px;
              border: 1px solid rgba(25, 135, 84, 0.15);
              border-radius: 50px;
              background: rgba(25, 135, 84, 0.045);
            }

            .skills-category-count strong {
              color: #198754;
              font-size: 0.82rem;
              font-weight: 800;
            }

            .skills-category-count span {
              color: #8b9690;
              font-size: 0.65rem;
            }

            /* =============================================
               SKILL CARD
            ============================================= */

            .skill-card {
              position: relative;
              height: 100%;
              min-height: 220px;
              overflow: hidden;

              border: 1px solid rgba(25, 135, 84, 0.48);
              border-radius: 20px;

              background:
                linear-gradient(
                  145deg,
                  rgba(255, 255, 255, 0.98),
                  rgba(249, 253, 250, 0.98)
                );

              box-shadow:
                0 8px 25px rgba(25, 45, 35, 0.06),
                0 0 0 1px rgba(25, 135, 84, 0.04);

              isolation: isolate;

              animation:
                skillCardIn
                0.7s ease both;

              transition:
                transform 0.4s cubic-bezier(
                  0.22,
                  1,
                  0.36,
                  1
                ),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
            }

            .skill-card:hover {
              transform: translateY(-6px);

              border-color: rgba(25, 135, 84, 0.72);

              box-shadow:
                0 18px 38px rgba(25, 135, 84, 0.10),
                0 0 0 1px rgba(25, 135, 84, 0.08);
            }

            /* =============================================
               CONTINUOUS TOP GREEN LINE
            ============================================= */

            .skill-card-top-line {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 4px;

              overflow: hidden;

              z-index: 10;

              background:
                rgba(25, 135, 84, 0.10);
            }

            .skill-card-top-line span {
              position: absolute;
              top: 0;
              left: -35%;

              width: 35%;
              height: 100%;

              border-radius: 999px;

              background:
                linear-gradient(
                  90deg,
                  transparent,
                  #198754,
                  #20c997,
                  #198754,
                  transparent
                );

              box-shadow:
                0 0 9px rgba(25, 135, 84, 0.45);

              animation:
                skillCardTopLineMove
                2.8s linear infinite;
            }

            /* =============================================
               CARD GLOW
            ============================================= */

            .skill-card-glow {
              position: absolute;
              right: -75px;
              bottom: -75px;
              width: 160px;
              height: 160px;
              border-radius: 50%;
              background:
                rgba(32, 201, 151, 0.08);
              filter: blur(35px);
              opacity: 0;
              transition: opacity 0.5s ease;
              pointer-events: none;
              z-index: 0;
            }

            .skill-card:hover .skill-card-glow {
              opacity: 1;
            }

            /* =============================================
               CARD BODY
            ============================================= */

            .skill-card-body {
              position: relative;
              z-index: 2;

              display: flex;
              flex-direction: column;

              height: 100%;

              padding: 25px;
            }

            /* =============================================
               CARD HEADER
            ============================================= */

            .skill-card-header {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 12px;
              margin-bottom: 25px;
            }

            .skill-information {
              min-width: 0;

              display: flex;
              align-items: center;

              gap: 13px;
            }

            .skill-icon-container {
              position: relative;

              width: 52px;
              height: 52px;

              flex: 0 0 52px;
            }

            .skill-icon {
              position: relative;
              z-index: 2;

              width: 52px;
              height: 52px;

              display: flex;
              align-items: center;
              justify-content: center;

              border-radius: 15px;

              color: #198754;

              background:
                linear-gradient(
                  145deg,
                  #edf9f3,
                  #e1f5eb
                );

              border: 1px solid rgba(25, 135, 84, 0.16);

              transition:
                transform 0.4s ease,
                color 0.4s ease,
                background 0.4s ease;
            }

            .skill-card:hover .skill-icon {
              color: #ffffff;

              background:
                linear-gradient(
                  135deg,
                  #198754,
                  #20c997
                );

              transform:
                rotate(-5deg)
                scale(1.05);
            }

            .skill-icon i {
              font-size: 1.4rem;
            }

            .skill-icon-wave {
              position: absolute;
              inset: 0;

              border: 1px solid rgba(25, 135, 84, 0.2);
              border-radius: 15px;

              animation:
                skillIconWave
                2.8s ease-out infinite;
            }

            .skill-name {
              min-width: 0;
            }

            .skill-name h5 {
              overflow: hidden;

              margin: 0 0 5px;

              color: #18231e;

              font-size: 0.97rem;
              font-weight: 800;

              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .skill-name span {
              color: #8b9690;
              font-size: 0.7rem;
            }

            .skill-percentage {
              flex-shrink: 0;

              padding: 7px 11px;

              border: 1px solid rgba(25, 135, 84, 0.22);
              border-radius: 50px;

              color: #198754;

              background:
                rgba(25, 135, 84, 0.065);

              font-size: 0.72rem;
              font-weight: 800;

              transition:
                transform 0.35s ease,
                background 0.35s ease;
            }

            .skill-card:hover .skill-percentage {
              transform: scale(1.05);

              background:
                rgba(25, 135, 84, 0.12);
            }

            /* =============================================
               MAIN CONTENT
               SIDE LINE DIHILANGKAN
            ============================================= */

            .skill-main-content {
              display: flex;
              align-items: stretch;

              gap: 12px;

              flex: 1;

              min-height: 65px;
            }

            /* =============================================
               PROFICIENCY
            ============================================= */

            .skill-proficiency {
              flex: 1;
              min-width: 0;
              margin-top: auto;
            }

            .skill-proficiency-header {
              display: flex;
              align-items: center;
              justify-content: space-between;

              margin-bottom: 9px;
            }

            .skill-proficiency-header span {
              color: #7d8983;
              font-size: 0.71rem;
            }

            .skill-proficiency-header strong {
              color: #198754;
              font-size: 0.71rem;
              font-weight: 800;
            }

            /* =============================================
               PROGRESS
            ============================================= */

            .skill-progress {
              position: relative;

              width: 100%;
              height: 8px;

              overflow: hidden;

              border-radius: 20px;

              background: #e7efea;

              box-shadow:
                inset 0 1px 2px rgba(0, 0, 0, 0.05);
            }

            .skill-progress-value {
              position: relative;

              height: 100%;

              overflow: hidden;

              border-radius: inherit;

              background:
                linear-gradient(
                  90deg,
                  #198754 0%,
                  #20a879 55%,
                  #20c997 100%
                );

              box-shadow:
                0 0 10px rgba(32, 201, 151, 0.25);

              transition:
                width 1.5s cubic-bezier(
                  0.22,
                  1,
                  0.36,
                  1
                );
            }

            .progress-light {
              position: absolute;

              top: 0;
              left: -50%;

              width: 45%;
              height: 100%;

              background:
                linear-gradient(
                  90deg,
                  transparent,
                  rgba(255, 255, 255, 0.7),
                  transparent
                );

              transform: skewX(-20deg);

              animation:
                progressLight
                2.3s linear infinite;
            }

            .progress-energy {
              position: absolute;

              top: 50%;
              left: -10px;

              width: 4px;
              height: 4px;

              border-radius: 50%;

              background:
                rgba(255, 255, 255, 0.95);

              box-shadow:
                0 0 6px rgba(255, 255, 255, 0.95),
                0 0 12px rgba(255, 255, 255, 0.45);

              transform: translateY(-50%);

              animation:
                progressEnergy
                2s linear infinite;
            }

            .progress-energy-two {
              width: 3px;
              height: 3px;

              animation-delay: 0.65s;
            }

            .progress-energy-three {
              width: 2px;
              height: 2px;

              animation-delay: 1.3s;
            }

            .skill-progress-labels {
              display: flex;
              justify-content: space-between;

              margin-top: 7px;

              color: #a0aaa5;

              font-size: 0.59rem;
            }

            /* =============================================
               CARD FOOTER
            ============================================= */

            .skill-card-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;

              margin-top: 19px;
              padding-top: 13px;

              border-top:
                1px solid rgba(25, 135, 84, 0.12);
            }

            .skill-status {
              display: inline-flex;
              align-items: center;

              gap: 7px;

              color: #7f8b85;

              font-size: 0.64rem;
            }

            .skill-status-dot {
              width: 6px;
              height: 6px;

              border-radius: 50%;

              background: #198754;

              box-shadow:
                0 0 0 4px rgba(25, 135, 84, 0.08),
                0 0 8px rgba(25, 135, 84, 0.35);

              animation:
                skillStatusPulse
                1.8s ease-in-out infinite;
            }

            .skill-card-footer > i {
              color: #198754;
              font-size: 0.8rem;
              opacity: 0.6;

              transition:
                transform 0.35s ease,
                opacity 0.35s ease;
            }

            .skill-card:hover .skill-card-footer > i {
              opacity: 1;

              transform:
                translate(3px, -3px);
            }

            /* =============================================
               LOADING
            ============================================= */

            .skills-loading {
              padding: 80px 20px;
              text-align: center;
            }

            .skills-loading-animation {
              display: flex;
              align-items: center;
              justify-content: center;

              gap: 7px;
            }

            .skills-loading-animation span {
              width: 9px;
              height: 9px;

              border-radius: 50%;

              background: #198754;

              animation:
                skillsLoader
                1.2s ease-in-out infinite;
            }

            .skills-loading-animation span:nth-child(2) {
              background: #20a879;
              animation-delay: 0.15s;
            }

            .skills-loading-animation span:nth-child(3) {
              background: #20c997;
              animation-delay: 0.3s;
            }

            .skills-loading p {
              margin: 16px 0 0;

              color: #7d8983;

              font-size: 0.8rem;
            }

            /* =============================================
               EMPTY
            ============================================= */

            .skills-empty {
              padding: 75px 20px;
              text-align: center;
            }

            .skills-empty-icon {
              width: 85px;
              height: 85px;

              display: flex;
              align-items: center;
              justify-content: center;

              margin: 0 auto 20px;

              border: 1px solid rgba(25, 135, 84, 0.2);
              border-radius: 50%;

              color: #198754;

              background: #f0f8f4;

              box-shadow:
                0 12px 35px rgba(25, 135, 84, 0.08);

              animation:
                skillsEmptyFloat
                3s ease-in-out infinite;
            }

            .skills-empty-icon i {
              font-size: 2rem;
            }

            .skills-empty h5 {
              margin-bottom: 7px;

              color: #202a25;
              font-weight: 800;
            }

            .skills-empty p {
              margin: 0;

              color: #8a9590;
              font-size: 0.85rem;
            }

            /* =============================================
               FOOTER
            ============================================= */

            .skills-footer {
              margin-top: 65px;
            }

            .skills-footer-line {
              width: 100%;
              height: 1px;

              background:
                linear-gradient(
                  90deg,
                  transparent,
                  rgba(25, 135, 84, 0.18),
                  transparent
                );
            }

            .skills-footer-content {
              display: flex;
              align-items: center;
              justify-content: center;

              gap: 9px;

              padding-top: 22px;

              color: #7d8983;

              font-size: 0.74rem;

              text-align: center;
            }

            .skills-live-indicator {
              position: relative;

              width: 10px;
              height: 10px;

              flex: 0 0 10px;
            }

            .skills-live-dot {
              position: absolute;
              inset: 2px;

              border-radius: 50%;

              background: #198754;

              box-shadow:
                0 0 8px rgba(25, 135, 84, 0.55);

              animation:
                skillsLivePulse
                1.7s ease-in-out infinite;
            }

            .skills-live-ring {
              position: absolute;
              inset: -3px;

              border: 1px solid rgba(25, 135, 84, 0.25);
              border-radius: 50%;

              animation:
                skillsLiveRing
                2s ease-out infinite;
            }

            .skills-footer-content > i {
              color: #198754;
              font-size: 0.85rem;

              animation:
                skillsFooterRotate
                3s linear infinite;
            }

            /* =============================================
               ANIMATIONS
            ============================================= */

            @keyframes skillsHeaderIn {
              from {
                opacity: 0;
                transform: translateY(20px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            @keyframes skillsBadgeFloat {
              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-4px);
              }
            }

            @keyframes skillsBadgeIconPulse {
              0%,
              100% {
                transform: scale(1);

                box-shadow:
                  0 6px 16px
                  rgba(25, 135, 84, 0.25);
              }

              50% {
                transform: scale(1.08);

                box-shadow:
                  0 8px 22px
                  rgba(25, 135, 84, 0.4);
              }
            }

            /* =============================================
               HEADER DECORATION CONTINUOUS
            ============================================= */

            @keyframes skillsTitleDecorationMove {
  0% {
    left: -35%;
  }

  100% {
    left: 100%;
  }
}

            @keyframes skillsOrbFloat {
              0%,
              100% {
                transform:
                  translate(0, 0)
                  scale(1);
              }

              50% {
                transform:
                  translate(25px, -25px)
                  scale(1.1);
              }
            }

            @keyframes skillsCategoryIn {
              from {
                opacity: 0;
                transform: translateY(18px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            @keyframes skillsCategoryIconFloat {
              0%,
              100% {
                transform:
                  translateY(0)
                  rotate(0);
              }

              50% {
                transform:
                  translateY(-4px)
                  rotate(2deg);
              }
            }

            @keyframes skillsCategoryRing {
              0% {
                transform: scale(0.85);
                opacity: 0.65;
              }

              75%,
              100% {
                transform: scale(1.18);
                opacity: 0;
              }
            }

            @keyframes skillCardIn {
              from {
                opacity: 0;

                transform:
                  translateY(20px)
                  scale(0.98);
              }

              to {
                opacity: 1;

                transform:
                  translateY(0)
                  scale(1);
              }
            }

            /* =============================================
               TOP CARD LINE
               CONTINUOUS LEFT -> RIGHT
            ============================================= */

            @keyframes skillCardTopLineMove {
              0% {
                left: -35%;
              }

              100% {
                left: 100%;
              }
            }

            @keyframes skillIconWave {
              0% {
                transform: scale(1);
                opacity: 0.55;
              }

              70%,
              100% {
                transform: scale(1.3);
                opacity: 0;
              }
            }

            @keyframes progressLight {
              0% {
                left: -50%;
              }

              100% {
                left: 120%;
              }
            }

            @keyframes progressEnergy {
              0% {
                left: -10px;
                opacity: 0;
              }

              10% {
                opacity: 1;
              }

              80% {
                opacity: 1;
              }

              100% {
                left: 105%;
                opacity: 0;
              }
            }

            @keyframes skillStatusPulse {
              0%,
              100% {
                transform: scale(0.85);
              }

              50% {
                transform: scale(1.15);
              }
            }

            @keyframes skillsLoader {
              0%,
              60%,
              100% {
                transform: translateY(0);
              }

              30% {
                transform: translateY(-10px);
              }
            }

            @keyframes skillsEmptyFloat {
              0%,
              100% {
                transform: translateY(0);
              }

              50% {
                transform: translateY(-8px);
              }
            }

            @keyframes skillsLivePulse {
              0%,
              100% {
                transform: scale(0.8);
              }

              50% {
                transform: scale(1.2);
              }
            }

            @keyframes skillsLiveRing {
              0% {
                transform: scale(0.7);
                opacity: 0.8;
              }

              100% {
                transform: scale(1.7);
                opacity: 0;
              }
            }

            @keyframes skillsFooterRotate {
              from {
                transform: rotate(0deg);
              }

              to {
                transform: rotate(360deg);
              }
            }

            /* =============================================
               TABLET
            ============================================= */

            @media (max-width: 991.98px) {
              .skills-section {
                padding-top: 70px;
                padding-bottom: 75px;
              }

              .skills-header {
                margin-bottom: 50px;
              }

              .skills-category {
                margin-bottom: 50px;
              }

              .skill-card {
                min-height: 215px;
              }

              .skill-card-body {
                padding: 23px;
              }
            }

            /* =============================================
               MOBILE
            ============================================= */

            @media (max-width: 767.98px) {
              .skills-section {
                padding-top: 60px;
                padding-bottom: 65px;
              }

              .skills-header {
                margin-bottom: 42px;
              }

              .skills-badge {
                padding-right: 13px;

                font-size: 0.63rem;
                letter-spacing: 0.8px;
              }

              .skills-badge-icon {
                width: 29px;
                height: 29px;
              }

              .skills-title {
                margin-top: 18px;

                font-size: 2.15rem;
                letter-spacing: -1px;
              }

              .skills-description {
                padding: 0 10px;

                font-size: 0.88rem;
                line-height: 1.75;
              }

              .skills-category-header {
                gap: 11px;
                margin-bottom: 20px;
              }

              .skills-category-icon {
                width: 44px;
                height: 44px;

                flex-basis: 44px;

                border-radius: 13px;
              }

              .skills-category-title h4 {
                font-size: 1.05rem;
              }

              .skills-category-title span {
                font-size: 0.58rem;
              }

              .skills-category-line {
                display: none;
              }

              .skills-category-count {
                margin-left: auto;

                padding: 6px 9px;
              }

              .skills-category-count span {
                display: none;
              }

              .skill-card {
                min-height: 205px;

                border-radius: 18px;
              }

              .skill-card-top-line {
                height: 3px;
              }

              .skill-card-body {
                padding: 20px;
              }

              .skill-card-header {
                margin-bottom: 22px;
              }

              .skill-icon-container,
              .skill-icon {
                width: 48px;
                height: 48px;

                flex-basis: 48px;
              }

              .skill-icon i {
                font-size: 1.25rem;
              }

              .skill-information {
                gap: 10px;
              }

              .skill-name h5 {
                font-size: 0.9rem;
              }

              .skill-percentage {
                padding: 6px 9px;

                font-size: 0.67rem;
              }

              .skill-main-content {
                gap: 10px;
              }

              .skill-proficiency-header span,
              .skill-proficiency-header strong {
                font-size: 0.68rem;
              }

              .skill-progress {
                height: 7px;
              }

              .skill-card-footer {
                margin-top: 17px;
                padding-top: 12px;
              }

              .skills-footer {
                margin-top: 45px;
              }

              .skills-footer-content {
                max-width: 340px;

                margin: 0 auto;

                line-height: 1.5;
              }
            }

            /* =============================================
               SMALL MOBILE
            ============================================= */

            @media (max-width: 420px) {
              .skills-section {
                padding-top: 50px;
              }

              .skills-title {
                font-size: 1.9rem;
              }

              .skills-description {
                font-size: 0.84rem;
              }

              .skills-category-header {
                align-items: center;
              }

              .skills-category-count {
                padding: 5px 8px;
              }

              .skills-category-count strong {
                font-size: 0.7rem;
              }

              .skill-card {
                min-height: 200px;
              }

              .skill-card-body {
                padding: 18px;
              }

              .skill-card-header {
                gap: 8px;
                margin-bottom: 20px;
              }

              .skill-icon-container,
              .skill-icon {
                width: 45px;
                height: 45px;

                flex-basis: 45px;
              }

              .skill-name h5 {
                max-width: 125px;
              }

              .skill-name span {
                font-size: 0.65rem;
              }

              .skill-percentage {
                padding: 5px 8px;
              }

              .skill-main-content {
                gap: 9px;
              }

              .skill-progress-labels {
                font-size: 0.56rem;
              }
            }

            /* =============================================
               VERY SMALL DEVICES
            ============================================= */

            @media (max-width: 350px) {
              .skills-section {
                padding-left: 5px;
                padding-right: 5px;
              }

              .skills-title {
                font-size: 1.75rem;
              }

              .skills-badge {
                gap: 7px;

                padding-right: 10px;

                font-size: 0.57rem;
              }

              .skills-badge-icon {
                width: 27px;
                height: 27px;
              }

              .skill-card-body {
                padding: 16px;
              }

              .skill-information {
                gap: 8px;
              }

              .skill-icon-container,
              .skill-icon {
                width: 42px;
                height: 42px;

                flex-basis: 42px;
              }

              .skill-name h5 {
                max-width: 105px;

                font-size: 0.84rem;
              }

              .skill-percentage {
                padding: 5px 7px;

                font-size: 0.62rem;
              }
            }

            /* =============================================
               REDUCED MOTION
            ============================================= */

            @media (prefers-reduced-motion: reduce) {
              .skills-section *,
              .skills-section *::before,
              .skills-section *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
              }
            }
          `,
        }}
      />
    </>
  );
}