"use client";

import { useEffect, useState } from "react";

type AchievementImage = {
  id: number;
  image: string;
};

type Achievement = {
  id: number;
  title: string;
  issuer: string | null;
  date: string | null;
  description: string | null;
  image: string | null;
  url: string | null;
  achievementimage: AchievementImage[];
};

export default function Achievements() {
  const [achievements, setAchievements] = useState<Achievement[]>([]);
  const [loading, setLoading] = useState(true);

  const [activeImages, setActiveImages] = useState<
    Record<number, number>
  >({});

  const [lightbox, setLightbox] = useState<{
    achievementId: number;
    imageIndex: number;
  } | null>(null);

  const [pageReady, setPageReady] = useState(false);

  // ============================================================
  // PAGE ANIMATION
  // ============================================================

  useEffect(() => {
    const timer = setTimeout(() => {
      setPageReady(true);
    }, 80);

    return () => clearTimeout(timer);
  }, []);

  // ============================================================
  // GET ACHIEVEMENTS
  // ============================================================

  useEffect(() => {
    const getAchievements = async () => {
      try {
        const response = await fetch("/api/achievements", {
          cache: "no-store",
        });

        const result = await response.json();

        if (result.success) {
          setAchievements(result.data);
        }
      } catch (error) {
        console.error("GET ACHIEVEMENTS:", error);
      } finally {
        setLoading(false);
      }
    };

    getAchievements();
  }, []);

  // ============================================================
  // GET IMAGES
  // ============================================================

  const getImages = (
    achievement: Achievement
  ): AchievementImage[] => {
    if (
      achievement.achievementimage &&
      achievement.achievementimage.length > 0
    ) {
      return achievement.achievementimage;
    }

    if (achievement.image) {
      return [
        {
          id: 0,
          image: achievement.image,
        },
      ];
    }

    return [];
  };

  // ============================================================
  // FORMAT DATE
  // ============================================================

  const formatDate = (date: string | null) => {
    if (!date) return "";

    return new Date(date).toLocaleDateString("id-ID", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    });
  };

  // ============================================================
  // CHANGE IMAGE
  // ============================================================

  const changeImage = (
    achievementId: number,
    direction: number,
    totalImages: number
  ) => {
    if (totalImages <= 1) return;

    const current = activeImages[achievementId] ?? 0;

    const next =
      (current + direction + totalImages) % totalImages;

    setActiveImages((previous) => ({
      ...previous,
      [achievementId]: next,
    }));
  };

  // ============================================================
  // SELECT IMAGE
  // ============================================================

  const selectImage = (
    achievementId: number,
    index: number
  ) => {
    setActiveImages((previous) => ({
      ...previous,
      [achievementId]: index,
    }));
  };

  // ============================================================
  // OPEN LIGHTBOX
  // ============================================================

  const openLightbox = (
    achievementId: number,
    imageIndex: number
  ) => {
    setLightbox({
      achievementId,
      imageIndex,
    });
  };

  // ============================================================
  // CLOSE LIGHTBOX
  // ============================================================

  const closeLightbox = () => {
    setLightbox(null);
  };

  // ============================================================
  // LIGHTBOX KEYBOARD
  // ============================================================

  useEffect(() => {
    if (!lightbox) return;

    const handleKeyDown = (
      event: KeyboardEvent
    ) => {
      if (event.key === "Escape") {
        closeLightbox();
      }

      if (event.key === "ArrowLeft") {
        setLightbox((previous) => {
          if (!previous) return null;

          const achievement = achievements.find(
            (item) =>
              item.id === previous.achievementId
          );

          if (!achievement) return previous;

          const images = getImages(achievement);

          if (images.length <= 1) return previous;

          return {
            ...previous,
            imageIndex:
              previous.imageIndex === 0
                ? images.length - 1
                : previous.imageIndex - 1,
          };
        });
      }

      if (event.key === "ArrowRight") {
        setLightbox((previous) => {
          if (!previous) return null;

          const achievement = achievements.find(
            (item) =>
              item.id === previous.achievementId
          );

          if (!achievement) return previous;

          const images = getImages(achievement);

          if (images.length <= 1) return previous;

          return {
            ...previous,
            imageIndex:
              (previous.imageIndex + 1) %
              images.length,
          };
        });
      }
    };

    window.addEventListener(
      "keydown",
      handleKeyDown
    );

    document.body.style.overflow = "hidden";

    return () => {
      window.removeEventListener(
        "keydown",
        handleKeyDown
      );

      document.body.style.overflow = "";
    };
  }, [lightbox, achievements]);

  // ============================================================
  // LOADING
  // ============================================================

  if (loading) {
    return (
      <>
        <style>{`
          .achievement-loading-section {
            position: relative;
            overflow: hidden;
          }

          .achievement-loading-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 400px;
  margin: 0 auto;
  padding: 0 30px 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(25, 135, 84, 0.22);
  box-shadow:
    0 7px 24px rgba(25, 135, 84, 0.055),
    0 2px 7px rgba(0, 0, 0, 0.035);
}

          .achievement-loading-card-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            overflow: hidden;
            background: rgba(25, 135, 84, 0.08);
            z-index: 5;
          }

          .achievement-loading-card-line::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
              linear-gradient(
                90deg,
                rgba(25, 135, 84, 0.08),
                rgba(25, 135, 84, 0.2),
                rgba(25, 135, 84, 0.08)
              );
          }

          .achievement-loading-card-line span {
            position: absolute;
            top: 0;
            left: -30%;
            width: 30%;
            height: 100%;
            border-radius: 999px;
            background:
              linear-gradient(
                90deg,
                transparent,
                #198754,
                #42b883,
                #198754,
                transparent
              );
            box-shadow:
              0 0 9px rgba(25, 135, 84, 0.35);
            animation:
              achievementCardLineMove
              3.2s
              linear
              infinite;
          }

          .achievement-loading-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: rgba(25, 135, 84, 0.09);
            color: #198754;
            animation:
              achievementIconPulse
              2s
              ease-in-out
              infinite;
          }

          .achievement-loading-icon i {
            font-size: 2rem;
          }

          .achievement-loading-line {
            position: relative;
            width: 180px;
            height: 4px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(25, 135, 84, 0.08);
          }

          .achievement-loading-line span {
            position: absolute;
            top: 0;
            left: -40%;
            width: 40%;
            height: 100%;
            border-radius: 999px;
            background:
              linear-gradient(
                90deg,
                transparent,
                #198754,
                #42b883,
                #198754,
                transparent
              );
            animation:
              achievementLoadingMove
              2.2s
              linear
              infinite;
          }

          @keyframes achievementLoadingMove {
            0% {
              left: -40%;
            }

            100% {
              left: 100%;
            }
          }

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

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

          @keyframes achievementCardLineMove {
            0% {
              left: -30%;
            }

            100% {
              left: 100%;
            }
          }
        `}</style>

        <section
          id="achievements"
          className="py-5 achievement-loading-section"
          style={{
            background:
              "linear-gradient(180deg, #ffffff 0%, #f8faf9 100%)",
          }}
        >
          <div className="container py-5">
            <div className="achievement-loading-card text-center">

              <div className="achievement-loading-card-line">
                <span></span>
              </div>

              <div className="achievement-loading-icon">
                <i className="bi bi-trophy"></i>
              </div>

              <h5
                className="fw-bold mt-4 mb-2"
                style={{
                  color: "#17221c",
                }}
              >
                Loading Achievements
              </h5>

              <p className="text-secondary mb-4">
                Preparing achievement content...
              </p>

              <div className="achievement-loading-line">
                <span></span>
              </div>
            </div>
          </div>
        </section>
      </>
    );
  }

  // ============================================================
  // MAIN
  // ============================================================

  return (
    <>
      <style>{`
        .achievement-section {
          position: relative;
          overflow: hidden;
        }

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

        .achievement-header {
          position: relative;
        }

        .achievement-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 15px;
          border-radius: 999px;
          background: rgba(25, 135, 84, 0.09);
          border: 1px solid rgba(25, 135, 84, 0.12);
          color: #198754;
          font-size: 0.76rem;
          font-weight: 700;
          letter-spacing: 0.09em;
          text-transform: uppercase;
        }

        .achievement-badge-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #198754;
          box-shadow:
            0 0 0 5px rgba(25, 135, 84, 0.08);
          animation:
            achievementBadgePulse
            2s
            ease-in-out
            infinite;
        }

        @keyframes achievementBadgePulse {
          0%,
          100% {
            transform: scale(1);
            opacity: 1;
          }

          50% {
            transform: scale(1.3);
            opacity: 0.65;
          }
        }

        .achievement-title-wrapper {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        }

        .achievement-title {
          color: #17221c;
          font-size: clamp(2.2rem, 5vw, 3.7rem);
          line-height: 1.08;
          letter-spacing: -0.04em;
        }

        .achievement-title-green {
          color: #198754;
        }

        .achievement-title-line {
          position: relative;
          width: 90px;
          height: 4px;
          margin-top: 16px;
          overflow: hidden;
          border-radius: 999px;
          background: rgba(25, 135, 84, 0.12);
        }

        .achievement-title-line::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(
              90deg,
              rgba(25, 135, 84, 0.06),
              rgba(25, 135, 84, 0.16),
              rgba(25, 135, 84, 0.06)
            );
        }

        .achievement-title-line span {
          position: absolute;
          top: 0;
          left: -40%;
          width: 40%;
          height: 100%;
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              transparent,
              #198754,
              #42b883,
              #198754,
              transparent
            );
          box-shadow:
            0 0 8px rgba(25, 135, 84, 0.35);
          animation:
            achievementTitleLineMove
            2.5s
            linear
            infinite;
        }

        @keyframes achievementTitleLineMove {
          0% {
            left: -40%;
          }

          100% {
            left: 100%;
          }
        }

        .achievement-description {
          max-width: 720px;
          color: #6c757d;
          font-size: 1rem;
          line-height: 1.8;
        }

        /* ============================================================
           ACHIEVEMENT CARD
        ============================================================ */

        .achievement-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(25, 135, 84, 0.24);
  border-radius: 24px;
  box-shadow:
    0 7px 24px rgba(25, 135, 84, 0.055),
    0 2px 7px rgba(0, 0, 0, 0.035);
  transition:
    transform 0.4s
      cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.achievement-card:hover {
  transform: translateY(-7px);
  border-color: rgba(25, 135, 84, 0.38);
  box-shadow:
    0 16px 36px rgba(25, 135, 84, 0.09),
    0 4px 12px rgba(0, 0, 0, 0.035);
}
        /* ============================================================
           GREEN LINE INSIDE CARD
        ============================================================ */

        .achievement-card-line {
          position: relative;
          width: 100%;
          height: 5px;
          flex-shrink: 0;
          overflow: hidden;
          background: rgba(25, 135, 84, 0.08);
          z-index: 5;
        }

        .achievement-card-line::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(
              90deg,
              rgba(25, 135, 84, 0.08),
              rgba(25, 135, 84, 0.2),
              rgba(25, 135, 84, 0.08)
            );
        }

        .achievement-card-line span {
          position: absolute;
          top: 0;
          left: -30%;
          width: 30%;
          height: 100%;
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              transparent,
              #198754,
              #42b883,
              #198754,
              transparent
            );
          box-shadow:
            0 0 9px rgba(25, 135, 84, 0.35);
          animation:
            achievementCardLineMove
            3.2s
            linear
            infinite;
        }

        @keyframes achievementCardLineMove {
          0% {
            left: -30%;
          }

          100% {
            left: 100%;
          }
        }

        /* ============================================================
           IMAGE
        ============================================================ */

        .achievement-image-area {
          position: relative;
          height: 260px;
          flex-shrink: 0;
          overflow: hidden;
          background:
            linear-gradient(
              135deg,
              #edf5f0,
              #ffffff
            );
        }

        .achievement-main-image {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          cursor: zoom-in;
          transition:
            transform 0.7s
              cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.45s ease;
        }

        .achievement-card:hover
        .achievement-main-image {
          transform: scale(1.045);
        }

        .achievement-image-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            linear-gradient(
              180deg,
              rgba(0, 0, 0, 0.02) 15%,
              rgba(0, 0, 0, 0) 50%,
              rgba(0, 0, 0, 0.3) 100%
            );
        }

        .achievement-image-counter {
          position: absolute;
          right: 15px;
          bottom: 15px;
          z-index: 3;
        }

        .achievement-counter-badge {
          display: inline-flex;
          align-items: center;
          padding: 8px 12px;
          border-radius: 999px;
          background: rgba(20, 30, 25, 0.72);
          color: #ffffff;
          font-size: 0.71rem;
          font-weight: 700;
          backdrop-filter: blur(10px);
        }

        /* ============================================================
           NAVIGATION
        ============================================================ */

        .achievement-nav-button {
          position: absolute;
          top: 50%;
          z-index: 5;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          padding: 0;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.94);
          color: #198754;
          box-shadow:
            0 7px 20px rgba(0, 0, 0, 0.14);
          transform: translateY(-50%);
          transition:
            transform 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;
        }

        .achievement-nav-button:hover {
          background: #ffffff;
          color: #198754;
          box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.18);
          transform:
            translateY(-50%)
            scale(1.08);
        }

        .achievement-nav-prev {
          left: 12px;
        }

        .achievement-nav-next {
          right: 12px;
        }

        /* ============================================================
           DOTS
        ============================================================ */

        .achievement-dots-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 28px;
          padding-top: 10px;
        }

        .achievement-dot {
          width: 7px;
          height: 7px;
          padding: 0;
          border: 0;
          border-radius: 999px;
          background: #d4ddd8;
          cursor: pointer;
          transition:
            width 0.3s ease,
            background 0.3s ease,
            transform 0.3s ease;
        }

        .achievement-dot:hover {
          transform: scale(1.15);
        }

        .achievement-dot.active {
          width: 22px;
          background: #198754;
        }

        /* ============================================================
           CONTENT
        ============================================================ */

        .achievement-card-content {
          display: flex;
          flex-direction: column;
          flex: 1;
          padding: 25px;
        }

        .achievement-card-title {
          margin: 0 0 10px;
          color: #17221c;
          font-size: 1.22rem;
          line-height: 1.4;
          letter-spacing: -0.015em;
          text-align: center;
        }

        .achievement-issuer {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          margin-bottom: 18px;
          color: #198754;
          font-size: 0.88rem;
          font-weight: 700;
          text-align: center;
        }

        .achievement-small-line {
          width: 42px;
          height: 3px;
          margin: 0 auto 18px;
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              #198754,
              #42b883
            );
        }

        .achievement-info {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 18px;
  background: #f8faf9;
  border: 1px solid rgba(25, 135, 84, 0.13);
}

        .achievement-info-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
        }

        .achievement-info-item
        + .achievement-info-item {
          margin-top: 15px;
        }

        .achievement-info-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          border-radius: 10px;
          background: rgba(25, 135, 84, 0.1);
          color: #198754;
        }

        .achievement-info-label {
          display: block;
          margin-bottom: 2px;
          color: #6c757d;
          font-size: 0.69rem;
          font-weight: 700;
          letter-spacing: 0.02em;
        }

        .achievement-info-value {
          display: block;
          color: #17221c;
          font-size: 0.84rem;
          line-height: 1.55;
          word-break: break-word;
        }

        .achievement-description-heading {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          margin-bottom: 10px;
          color: #198754;
          font-size: 0.8rem;
          font-weight: 700;
        }

        .achievement-card-description {
          margin: 0;
          color: #6c757d;
          font-size: 0.9rem;
          line-height: 1.85;
          text-align: justify;
          white-space: normal;
          overflow-wrap: break-word;
          word-break: normal;
        }

        .achievement-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-top: 22px;
          padding: 10px 18px;
          border-radius: 12px;
          font-weight: 600;
          transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
        }

        .achievement-button:hover {
          transform: translateY(-2px);
          box-shadow:
            0 8px 20px
            rgba(25, 135, 84, 0.20);
        }

        /* ============================================================
           EMPTY CARD
           SAMA SEPERTI CERTIFICATION
        ============================================================ */

        .achievement-empty-card {
  position: relative;
  max-width: 520px;
  min-height: 300px;
  margin: 0 auto;
  padding: 55px 30px;
  overflow: hidden;
  border: 1px solid rgba(25, 135, 84, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 7px 24px rgba(25, 135, 84, 0.055),
    0 2px 7px rgba(0, 0, 0, 0.035);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.achievement-empty-card:hover {
  border-color: rgba(25, 135, 84, 0.30);
  box-shadow:
    0 12px 30px rgba(25, 135, 84, 0.075),
    0 3px 10px rgba(0, 0, 0, 0.035);
}

        /*
          GARIS BENAR-BENAR MENJADI BAGIAN
          DARI CARD, SAMA SEPERTI CERTIFICATION
        */

        .achievement-empty-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: -30%;
          width: 30%;
          height: 5px;
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              transparent,
              #198754,
              #42b883,
              #198754,
              transparent
            );
          box-shadow:
            0 0 9px rgba(25, 135, 84, 0.35);
          animation:
            achievementCardLineMove
            3.2s
            linear
            infinite;
          z-index: 5;
        }

        .achievement-empty-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 78px;
          height: 78px;
          margin: 0 auto;
          border-radius: 20px;
          background: rgba(25, 135, 84, 0.08);
          color: #198754;
        }

        .achievement-empty-icon i {
          font-size: 2.3rem;
        }

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

        .achievement-footer {
          color: #6c757d;
          font-size: 0.84rem;
        }

        /* ============================================================
           LIGHTBOX
        ============================================================ */

        .achievement-lightbox {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px;
          background: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(5px);
          animation:
            achievementLightboxIn
            0.25s ease;
        }

        @keyframes achievementLightboxIn {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }

        .achievement-lightbox-image {
          max-width: 90%;
          max-height: 84vh;
          object-fit: contain;
          border-radius: 14px;
          box-shadow:
            0 20px 70px rgba(0, 0, 0, 0.35);
          animation:
            achievementImageIn
            0.3s ease;
        }

        @keyframes achievementImageIn {
          from {
            opacity: 0;
            transform: scale(0.97);
          }

          to {
            opacity: 1;
            transform: scale(1);
          }
        }

        .achievement-lightbox-close {
          position: absolute;
          top: 22px;
          right: 22px;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.92);
          color: #17221c;
          transition:
            transform 0.25s ease,
            background 0.25s ease;
        }

        .achievement-lightbox-close:hover {
          background: #ffffff;
          transform: scale(1.07);
        }

        .achievement-lightbox-nav {
          position: absolute;
          top: 50%;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 46px;
          height: 46px;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.92);
          color: #198754;
          transform: translateY(-50%);
          transition:
            transform 0.25s ease,
            background 0.25s ease;
        }

        .achievement-lightbox-nav:hover {
          background: #ffffff;
          transform:
            translateY(-50%)
            scale(1.07);
        }

        .achievement-lightbox-prev {
          left: 22px;
        }

        .achievement-lightbox-next {
          right: 22px;
        }

        .achievement-lightbox-counter {
          position: absolute;
          bottom: 22px;
          left: 50%;
          z-index: 10;
          padding: 7px 13px;
          border-radius: 999px;
          background: rgba(0, 0, 0, 0.65);
          color: #ffffff;
          font-size: 0.78rem;
          font-weight: 700;
          transform: translateX(-50%);
        }

        /* ============================================================
           RESPONSIVE
        ============================================================ */

        @media (max-width: 575.98px) {
  .achievement-card {
    border-radius: 18px;
  }
}

          .achievement-card {
            border-radius: 20px;
          }

          .achievement-card-content {
            padding: 22px;
          }

          .achievement-image-area {
            height: 245px;
          }

          .achievement-lightbox {
            padding: 20px;
          }

          .achievement-lightbox-image {
            max-width: 94%;
            max-height: 78vh;
          }

          .achievement-lightbox-prev {
            left: 10px;
          }

          .achievement-lightbox-next {
            right: 10px;
          }
        }

        @media (max-width: 575.98px) {
          .achievement-title-line {
            width: 70px;
            height: 3px;
          }

          .achievement-card {
            border-radius: 18px;
          }

          .achievement-card-line {
            height: 4px;
          }

          .achievement-image-area {
            height: 230px;
          }

          .achievement-card-content {
            padding: 20px;
          }

          .achievement-nav-button {
            width: 37px;
            height: 37px;
          }

          .achievement-lightbox-close {
            top: 15px;
            right: 15px;
          }

          .achievement-lightbox-counter {
            bottom: 15px;
          }

          .achievement-empty-card {
            min-height: 270px;
            padding: 50px 20px;
            border-radius: 20px;
          }

          .achievement-empty-card::before {
            height: 4px;
          }
        }
      `}</style>

      <section
        id="achievements"
        className="py-5 achievement-section"
        style={{
          background:
            "radial-gradient(circle at 10% 10%, rgba(25,135,84,0.06), transparent 32%), radial-gradient(circle at 90% 30%, rgba(13,110,253,0.04), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%)",
        }}
      >
        <div className="container py-5">

          {/* ============================================================
              HEADER
          ============================================================ */}

          <div
            className="text-center mb-5 pb-lg-3 achievement-header"
            style={{
              opacity: pageReady ? 1 : 0,
              transform: pageReady
                ? "translateY(0)"
                : "translateY(20px)",
              transition:
                "opacity .8s ease, transform .8s ease",
            }}
          >
            <div className="mb-3">
              <span className="achievement-badge">
                <span className="achievement-badge-dot"></span>

                <i className="bi bi-trophy-fill"></i>

                Achievements
              </span>
            </div>

            <div className="achievement-title-wrapper">
              <h2 className="fw-bold mb-0 text-center achievement-title">
                Professional{" "}
                <span className="achievement-title-green">
                  Achievements
                </span>
              </h2>

              <div className="achievement-title-line">
                <span></span>
              </div>
            </div>

            <p className="mx-auto mb-0 mt-3 text-center achievement-description">
              Some of the achievements and accomplishments I
              have earned throughout my professional journey
              and competency development.
            </p>
          </div>

          {/* ============================================================
              EMPTY
          ============================================================ */}

          {achievements.length === 0 && (
            <div
              className="achievement-empty-card text-center"
              style={{
                opacity: pageReady ? 1 : 0,
                transform: pageReady
                  ? "translateY(0)"
                  : "translateY(20px)",
                transition:
                  "opacity .8s ease .1s, transform .8s ease .1s",
              }}
            >
              <div className="achievement-empty-icon">
                <i className="bi bi-trophy"></i>
              </div>

              <h5
                className="fw-bold mt-4 mb-2"
                style={{
                  color: "#17221c",
                }}
              >
                No Achievements Yet
              </h5>

              <p className="text-secondary mb-0">
                Achievement data will be displayed here
                after being added.
              </p>
            </div>
          )}

          {/* ============================================================
              ACHIEVEMENTS
          ============================================================ */}

          {achievements.length > 0 && (
            <div className="row g-4">
              {achievements.map(
                (
                  achievement,
                  achievementIndex
                ) => {
                  const images =
                    getImages(achievement);

                  const activeIndex =
                    activeImages[
                      achievement.id
                    ] ?? 0;

                  const currentImage =
                    images[activeIndex];

                  return (
                    <div
                      key={achievement.id}
                      className="col-12 col-md-6 col-lg-4"
                      style={{
                        opacity: pageReady ? 1 : 0,
                        transform: pageReady
                          ? "translateY(0)"
                          : "translateY(35px)",
                        transition: `
                          opacity .7s ease ${
                            0.1 +
                            achievementIndex * 0.1
                          }s,
                          transform .7s ease ${
                            0.1 +
                            achievementIndex * 0.1
                          }s
                        `,
                      }}
                    >
                      <article className="achievement-card">

                        {/* GREEN LINE */}

                        <div className="achievement-card-line">
                          <span></span>
                        </div>

                        {/* IMAGE */}

                        <div className="achievement-image-area">
                          {currentImage ? (
                            <>
                              <img
                                key={
                                  currentImage.image
                                }
                                src={
                                  currentImage.image
                                }
                                alt={`${achievement.title} - Gambar ${
                                  activeIndex + 1
                                }`}
                                onClick={() =>
                                  openLightbox(
                                    achievement.id,
                                    activeIndex
                                  )
                                }
                                className="achievement-main-image"
                              />

                              <div className="achievement-image-overlay"></div>

                              {images.length > 1 && (
                                <div className="achievement-image-counter">
                                  <span className="achievement-counter-badge">
                                    <i className="bi bi-images me-1"></i>

                                    {activeIndex + 1} /{" "}
                                    {images.length}
                                  </span>
                                </div>
                              )}

                              {images.length > 1 && (
                                <button
                                  type="button"
                                  className="achievement-nav-button achievement-nav-prev"
                                  onClick={() =>
                                    changeImage(
                                      achievement.id,
                                      -1,
                                      images.length
                                    )
                                  }
                                  aria-label="Gambar sebelumnya"
                                >
                                  <i className="bi bi-chevron-left"></i>
                                </button>
                              )}

                              {images.length > 1 && (
                                <button
                                  type="button"
                                  className="achievement-nav-button achievement-nav-next"
                                  onClick={() =>
                                    changeImage(
                                      achievement.id,
                                      1,
                                      images.length
                                    )
                                  }
                                  aria-label="Gambar berikutnya"
                                >
                                  <i className="bi bi-chevron-right"></i>
                                </button>
                              )}
                            </>
                          ) : (
                            <div className="w-100 h-100 d-flex align-items-center justify-content-center">
                              <div
                                className="d-flex align-items-center justify-content-center rounded-circle"
                                style={{
                                  width: "82px",
                                  height: "82px",
                                  background:
                                    "rgba(25,135,84,0.09)",
                                  color: "#198754",
                                }}
                              >
                                <i
                                  className="bi bi-trophy"
                                  style={{
                                    fontSize:
                                      "2.3rem",
                                  }}
                                ></i>
                              </div>
                            </div>
                          )}
                        </div>

                        {/* DOTS */}

                        {images.length > 1 && (
                          <div className="achievement-dots-wrapper">
                            <div className="d-flex justify-content-center align-items-center gap-2">
                              {images.map(
                                (
                                  image,
                                  index
                                ) => {
                                  const active =
                                    index ===
                                    activeIndex;

                                  return (
                                    <button
                                      key={
                                        image.id ||
                                        index
                                      }
                                      type="button"
                                      onClick={() =>
                                        selectImage(
                                          achievement.id,
                                          index
                                        )
                                      }
                                      className={`achievement-dot ${
                                        active
                                          ? "active"
                                          : ""
                                      }`}
                                      aria-label={`Tampilkan gambar ${
                                        index + 1
                                      }`}
                                    />
                                  );
                                }
                              )}
                            </div>
                          </div>
                        )}

                        {/* CONTENT */}

                        <div className="achievement-card-content">

                          <h4 className="fw-bold achievement-card-title">
                            {achievement.title}
                          </h4>

                          {achievement.issuer && (
                            <div className="achievement-issuer">
                              <i className="bi bi-building"></i>

                              <span>
                                {achievement.issuer}
                              </span>
                            </div>
                          )}

                          <div className="achievement-small-line"></div>

                          {achievement.date && (
                            <div className="achievement-info">
                              <div className="achievement-info-item">
                                <div className="achievement-info-icon">
                                  <i className="bi bi-calendar3"></i>
                                </div>

                                <div>
                                  <small className="achievement-info-label">
                                    DATE
                                  </small>

                                  <span className="achievement-info-value">
                                    {formatDate(
                                      achievement.date
                                    )}
                                  </span>
                                </div>
                              </div>
                            </div>
                          )}

                          {achievement.description && (
                            <div>
                              <div className="achievement-description-heading">
                                <i className="bi bi-text-paragraph"></i>

                                <span>
                                  DESCRIPTION
                                </span>
                              </div>

                              <p className="achievement-card-description">
                                {
                                  achievement.description
                                }
                              </p>
                            </div>
                          )}

                          {achievement.url && (
                            <div className="mt-auto">
                              <a
                                href={
                                  achievement.url
                                }
                                target="_blank"
                                rel="noopener noreferrer"
                                className="achievement-button btn btn-success"
                              >
                                <i className="bi bi-box-arrow-up-right me-2"></i>
                                View Achievement
                              </a>
                            </div>
                          )}
                        </div>
                      </article>
                    </div>
                  );
                }
              )}
            </div>
          )}

          {/* ============================================================
              FOOTER
          ============================================================ */}

          {achievements.length > 0 && (
            <div
              className="text-center mt-5 pt-4 achievement-footer"
              style={{
                opacity: pageReady ? 1 : 0,
                transition:
                  "opacity 1s ease .6s",
              }}
            >
              <div className="d-inline-flex align-items-center gap-2">
                <i className="bi bi-trophy-fill text-success"></i>

                <span>
                  Continuous growth and professional
                  achievement
                </span>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* ================================================================
          LIGHTBOX
      ================================================================ */}

      {lightbox && (
        <div
          className="achievement-lightbox"
          onClick={closeLightbox}
        >
          {(() => {
            const achievement =
              achievements.find(
                (item) =>
                  item.id ===
                  lightbox.achievementId
              );

            if (!achievement) {
              return null;
            }

            const images =
              getImages(achievement);

            if (images.length === 0) {
              return null;
            }

            const currentImage =
              images[lightbox.imageIndex];

            if (!currentImage) {
              return null;
            }

            return (
              <>
                <button
                  type="button"
                  className="achievement-lightbox-close"
                  onClick={(event) => {
                    event.stopPropagation();
                    closeLightbox();
                  }}
                  aria-label="Tutup"
                >
                  <i className="bi bi-x-lg"></i>
                </button>

                <img
                  key={currentImage.image}
                  src={currentImage.image}
                  alt={`${achievement.title} - Gallery image`}
                  className="achievement-lightbox-image"
                  onClick={(event) =>
                    event.stopPropagation()
                  }
                />

                {images.length > 1 && (
                  <button
                    type="button"
                    className="achievement-lightbox-nav achievement-lightbox-prev"
                    onClick={(event) => {
                      event.stopPropagation();

                      setLightbox({
                        achievementId:
                          lightbox.achievementId,
                        imageIndex:
                          (lightbox.imageIndex -
                            1 +
                            images.length) %
                          images.length,
                      });
                    }}
                    aria-label="Gambar sebelumnya"
                  >
                    <i className="bi bi-chevron-left"></i>
                  </button>
                )}

                {images.length > 1 && (
                  <button
                    type="button"
                    className="achievement-lightbox-nav achievement-lightbox-next"
                    onClick={(event) => {
                      event.stopPropagation();

                      setLightbox({
                        achievementId:
                          lightbox.achievementId,
                        imageIndex:
                          (lightbox.imageIndex + 1) %
                          images.length,
                      });
                    }}
                    aria-label="Gambar berikutnya"
                  >
                    <i className="bi bi-chevron-right"></i>
                  </button>
                )}

                {images.length > 1 && (
                  <span className="achievement-lightbox-counter">
                    {lightbox.imageIndex + 1} /{" "}
                    {images.length}
                  </span>
                )}
              </>
            );
          })()}
        </div>
      )}
    </>
  );
}