"use client";

import { useEffect, useState } from "react";

type ProjectImage = {
  id: number;
  image: string;
  projectId: number;
  createdAt: string;
};

type Project = {
  id: number;
  title: string;
  slug: string;
  description: string | null;
  image: string | null;
  projectUrl: string | null;
  technologies: string | null;
  startDate: string | null;
  endDate: string | null;
  featured: boolean;
  projectimage: ProjectImage[];
};

export default function Projects() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);

  const [currentImages, setCurrentImages] = useState<
    Record<number, number>
  >({});

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

  useEffect(() => {
    const getProjects = async () => {
      try {
        const response = await fetch("/api/projects");
        const result = await response.json();

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

    getProjects();
  }, []);

  /* =========================================================
     GET PROJECT IMAGES
  ========================================================= */

  const getProjectImages = (project: Project) => {
    if (
      project.projectimage &&
      project.projectimage.length > 0
    ) {
      return project.projectimage;
    }

    if (project.image) {
      return [
        {
          id: 0,
          image: project.image,
          projectId: project.id,
          createdAt: "",
        },
      ];
    }

    return [];
  };

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

  const previousImage = (
    projectId: number,
    total: number
  ) => {
    if (total <= 1) return;

    setCurrentImages((prev) => {
      const current = prev[projectId] ?? 0;

      return {
        ...prev,
        [projectId]:
          current === 0 ? total - 1 : current - 1,
      };
    });
  };

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

  const nextImage = (
    projectId: number,
    total: number
  ) => {
    if (total <= 1) return;

    setCurrentImages((prev) => {
      const current = prev[projectId] ?? 0;

      return {
        ...prev,
        [projectId]:
          current === total - 1 ? 0 : current + 1,
      };
    });
  };

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

  const selectImage = (
    projectId: number,
    imageIndex: number
  ) => {
    setCurrentImages((prev) => ({
      ...prev,
      [projectId]: imageIndex,
    }));
  };

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

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

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

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

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

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

  const getLightboxProject = () => {
    if (!lightbox) return null;

    return projects.find(
      (project) =>
        project.id === lightbox.projectId
    );
  };

  const lightboxProject = getLightboxProject();

  const lightboxImages = lightboxProject
    ? getProjectImages(lightboxProject)
    : [];

  return (
    <section
      id="projects"
      className="projects-section py-5"
    >
      <div className="container py-5">

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

        <div className="projects-header text-center mb-5">

          <div className="projects-badge">
            <i className="bi bi-grid-1x2-fill"></i>

            <span>PORTFOLIO</span>
          </div>

          <h2 className="projects-title fw-bold mb-3">
            Featured{" "}
            <span>Projects</span>
          </h2>

          <p className="projects-subtitle mx-auto mb-0">
            A selection of projects, applications, and
            technical solutions I have built using modern
            technologies.
          </p>

          <div className="projects-heading-line mx-auto mt-4">
            <span></span>
          </div>

        </div>

        {/* =====================================================
            LOADING
        ===================================================== */}

        {loading && (
          <div className="projects-state-card">

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

            <div className="projects-state-content text-center">

              <div className="projects-loader mx-auto mb-3">
                <div></div>
              </div>

              <p className="text-muted mb-0">
                Loading projects...
              </p>

            </div>

          </div>
        )}

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

        {!loading && projects.length === 0 && (
          <div className="projects-state-card">

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

            <div className="projects-state-content text-center">

              <div className="empty-project-icon mx-auto">

                <i className="bi bi-folder2-open"></i>

              </div>

              <h5 className="fw-bold text-dark mt-4 mb-2">
                Belum ada project
              </h5>

              <p className="text-secondary mb-0">
                Project yang telah dibuat akan tampil
                di sini.
              </p>

            </div>

          </div>
        )}

        {/* =====================================================
            PROJECTS
        ===================================================== */}

        {!loading && projects.length > 0 && (
          <div className="row g-4">

            {projects.map(
              (project, projectIndex) => {

                const projectImages =
                  getProjectImages(project);

                const currentIndex =
                  currentImages[project.id] ?? 0;

                const currentImage =
                  projectImages[currentIndex];

                return (
                  <div
                    key={project.id}
                    className="col-12 col-md-6 col-xl-4"
                  >

                    <article
                      className="project-card"
                      style={{
                        animationDelay:
                          `${projectIndex * 100}ms`,
                      }}
                    >

                      {/* =================================================
                          TOP ANIMATED GREEN LINE
                      ================================================= */}

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

                      {/* =================================================
                          IMAGE
                      ================================================= */}

                      <div className="project-image-wrapper">

                        {projectImages.length > 0 &&
                        currentImage ? (
                          <img
                            key={currentImage.id}
                            src={currentImage.image}
                            alt={`${project.title} - gambar ${
                              currentIndex + 1
                            }`}
                            className="project-image"
                            onClick={() =>
                              openLightbox(
                                project.id,
                                currentIndex
                              )
                            }
                          />
                        ) : (
                          <div className="project-no-image">

                            <i className="bi bi-image"></i>

                          </div>
                        )}

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

                        {/* FEATURED */}

                        {project.featured && (
                          <div className="featured-badge">

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

                            <span>Featured</span>

                          </div>
                        )}

                        {/* IMAGE COUNTER */}

                        {projectImages.length > 1 && (
                          <div className="image-counter">

                            <i className="bi bi-images"></i>

                            <span>
                              {currentIndex + 1}
                              {" / "}
                              {projectImages.length}
                            </span>

                          </div>
                        )}

                        {/* NAVIGATION */}

                        {projectImages.length > 1 && (
                          <>
                            <button
                              type="button"
                              className="image-nav image-nav-left"
                              onClick={() =>
                                previousImage(
                                  project.id,
                                  projectImages.length
                                )
                              }
                              aria-label="Gambar sebelumnya"
                            >
                              <i className="bi bi-chevron-left"></i>
                            </button>

                            <button
                              type="button"
                              className="image-nav image-nav-right"
                              onClick={() =>
                                nextImage(
                                  project.id,
                                  projectImages.length
                                )
                              }
                              aria-label="Gambar berikutnya"
                            >
                              <i className="bi bi-chevron-right"></i>
                            </button>
                          </>
                        )}

                      </div>

                      {/* =================================================
                          DOTS
                      ================================================= */}

                      {projectImages.length > 1 && (
                        <div className="project-dots">

                          {projectImages.map(
                            (img, index) => (
                              <button
                                key={img.id}
                                type="button"
                                onClick={() =>
                                  selectImage(
                                    project.id,
                                    index
                                  )
                                }
                                className={`project-dot ${
                                  index === currentIndex
                                    ? "active"
                                    : ""
                                }`}
                                aria-label={`Gambar ${
                                  index + 1
                                }`}
                              />
                            )
                          )}

                        </div>
                      )}

                      {/* =================================================
                          CONTENT
                      ================================================= */}

                      <div className="project-content">

                        {/* CATEGORY */}

                        <div className="project-category">

                          <span className="category-line"></span>

                          <span className="category-text">
                            {project.slug
                              ? project.slug
                                  .replace(
                                    /-/g,
                                    " "
                                  )
                                  .replace(
                                    /\b\w/g,
                                    (char) =>
                                      char.toUpperCase()
                                  )
                              : "Electrical"}
                          </span>

                          <span className="category-line"></span>

                        </div>

                        {/* DATE */}

                        {(project.startDate ||
                          project.endDate) && (
                          <div className="project-date">

                            <i className="bi bi-calendar3"></i>

                            <span>

                              {formatDate(
                                project.startDate
                              )}

                              {project.endDate && (
                                <>
                                  {" — "}
                                  {formatDate(
                                    project.endDate
                                  )}
                                </>
                              )}

                              {!project.endDate &&
                                project.startDate && (
                                  <>
                                    {" — "}
                                    Present
                                  </>
                                )}

                            </span>

                          </div>
                        )}

                        {/* TITLE */}

                        <h3 className="project-title">
                          {project.title}
                        </h3>

                        {/* DESCRIPTION */}

                        {project.description && (
                          <p className="project-description">
                            {project.description}
                          </p>
                        )}

                        {/* TECHNOLOGIES */}

                        {project.technologies && (
                          <div className="project-technologies">

                            {project.technologies
                              .split(",")
                              .map(
                                (
                                  technology,
                                  index
                                ) => (
                                  <span
                                    key={index}
                                    className="technology-tag"
                                  >
                                    {technology.trim()}
                                  </span>
                                )
                              )}

                          </div>
                        )}

                        {/* FOOTER */}

                        <div className="project-footer">

                          <div className="project-number">
                            {String(
                              projectIndex + 1
                            ).padStart(2, "0")}
                          </div>

                          {project.projectUrl && (
                            <a
                              href={
                                project.projectUrl
                              }
                              target="_blank"
                              rel="noopener noreferrer"
                              className="project-link"
                            >

                              <span>
                                View Project
                              </span>

                              <span className="project-link-icon">
                                <i className="bi bi-arrow-up-right"></i>
                              </span>

                            </a>
                          )}

                        </div>

                      </div>

                    </article>

                  </div>
                );
              }
            )}

          </div>
        )}

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

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

            <div className="projects-footer-line"></div>

            <span>
              More projects and technical work coming soon
            </span>

            <div className="projects-footer-line"></div>

          </div>
        )}

      </div>

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

      {lightbox && lightboxProject && (
        <div
          className="project-lightbox"
          onClick={() =>
            setLightbox(null)
          }
        >

          {/* CLOSE */}

          <button
            type="button"
            className="lightbox-close"
            onClick={() =>
              setLightbox(null)
            }
            aria-label="Tutup"
          >
            <i className="bi bi-x-lg"></i>
          </button>

          {/* IMAGE */}

          {lightboxImages.length > 0 && (
            <img
              src={
                lightboxImages[
                  lightbox.imageIndex
                ]?.image
              }
              alt={`${lightboxProject.title} - project image`}
              className="lightbox-image"
              onClick={(event) =>
                event.stopPropagation()
              }
            />
          )}

          {/* PREVIOUS */}

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

                setLightbox((previous) => {
                  if (!previous) {
                    return previous;
                  }

                  return {
                    ...previous,
                    imageIndex:
                      previous.imageIndex === 0
                        ? lightboxImages.length - 1
                        : previous.imageIndex - 1,
                  };
                });
              }}
              aria-label="Gambar sebelumnya"
            >
              <i className="bi bi-chevron-left"></i>
            </button>
          )}

          {/* NEXT */}

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

                setLightbox((previous) => {
                  if (!previous) {
                    return previous;
                  }

                  return {
                    ...previous,
                    imageIndex:
                      previous.imageIndex ===
                      lightboxImages.length - 1
                        ? 0
                        : previous.imageIndex + 1,
                  };
                });
              }}
              aria-label="Gambar berikutnya"
            >
              <i className="bi bi-chevron-right"></i>
            </button>
          )}

          {/* IMAGE COUNT */}

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

        </div>
      )}

      {/* =========================================================
          FRONTEND CSS ONLY
      ========================================================= */}

      <style>
        {`

          /* =====================================================
             SECTION
          ===================================================== */

          .projects-section {
            position: relative;
            overflow: hidden;

            background:
              linear-gradient(
                180deg,
                #ffffff 0%,
                #f8faf9 50%,
                #ffffff 100%
              );
          }


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

          .projects-header {
            animation:
              projectsHeaderIn
              0.8s
              ease-out
              both;
          }

          .projects-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            padding: 8px 15px;
            margin-bottom: 18px;

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

            border-radius: 50px;

            color: #198754;

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

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

            letter-spacing: 0.9px;
          }

          .projects-badge i {
            font-size: 0.78rem;
          }

          .projects-title {
            color: #212529;

            font-size: 2.55rem;
            line-height: 1.25;
          }

          .projects-title span {
            color: #198754;
          }

          .projects-subtitle {
            max-width: 700px;

            color: #6c757d;

            font-size: 0.94rem;
            line-height: 1.8;
          }

          .projects-heading-line {
            position: relative;

            width: 70px;
            height: 4px;

            overflow: hidden;

            border-radius: 999px;

            background: #e4ebe7;
          }

          .projects-heading-line span {
            position: absolute;

            top: 0;
            left: -35%;

            width: 35%;
            height: 100%;

            border-radius: 999px;

            background:
              linear-gradient(
                90deg,
                transparent,
                #198754,
                #42b883,
                #198754,
                transparent
              );

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

            animation:
              projectsHeadingLineMove
              3s
              linear
              infinite;
          }


          /* =====================================================
   PROJECT CARD
===================================================== */

.project-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #ffffff;

  /* Border dibuat lebih jelas tetapi tetap tipis */
  border: 1px solid rgba(25, 135, 84, 0.24);

  border-radius: 22px;

  /* Shadow lebih soft agar border tetap menjadi
     pembeda utama card */
  box-shadow:
    0 7px 24px rgba(25, 135, 84, 0.055),
    0 2px 7px rgba(0, 0, 0, 0.035);

  opacity: 0;

  animation:
    projectCardIn
    0.7s
    ease-out
    forwards;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

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

  /* Saat hover sedikit lebih terlihat */
  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);
}


          /* =====================================================
             CARD TOP GREEN ANIMATED LINE

             IMPORTANT:
             Line is INSIDE the card and directly above image.
          ===================================================== */

          .project-card-line {
            position: relative;

            width: 100%;
            height: 5px;

            flex-shrink: 0;

            overflow: hidden;

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

            z-index: 5;
          }

          .project-card-line::before {
            content: "";

            position: absolute;

            inset: 0;

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

          .project-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:
              projectCardLineMove
              3.2s
              linear
              infinite;
          }


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

          .project-image-wrapper {
            position: relative;

            width: 100%;
            height: 245px;

            overflow: hidden;

            background:
              linear-gradient(
                135deg,
                #f5f8f6,
                #edf3ef
              );
          }

          .project-image {
            display: block;

            width: 100%;
            height: 100%;

            object-fit: cover;

            cursor: zoom-in;

            animation:
              projectImageIn
              0.45s
              ease-out;

            transition:
              transform 0.65s
              cubic-bezier(
                0.2,
                0.8,
                0.2,
                1
              );
          }

          .project-card:hover
          .project-image {
            transform:
              scale(1.035);
          }

          .project-no-image {
            display: flex;

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

            width: 100%;
            height: 100%;

            color: #adb5bd;

            font-size: 3rem;
          }

          .project-image-overlay {
            position: absolute;

            inset: 0;

            pointer-events: none;

            background:
              linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.015) 0%,
                rgba(0, 0, 0, 0.02) 55%,
                rgba(0, 0, 0, 0.28) 100%
              );
          }


          /* =====================================================
             FEATURED
          ===================================================== */

          .featured-badge {
            position: absolute;

            top: 15px;
            left: 15px;

            display: inline-flex;
            align-items: center;
            gap: 7px;

            padding: 7px 11px;

            border:
              1px solid
              rgba(255, 255, 255, 0.2);

            border-radius: 50px;

            color: #ffffff;

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

            backdrop-filter:
              blur(8px);

            font-size: 0.68rem;
            font-weight: 700;

            box-shadow:
              0 5px 15px
              rgba(0, 0, 0, 0.12);

            z-index: 3;
          }


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

          .image-counter {
            position: absolute;

            right: 13px;
            bottom: 13px;

            display: inline-flex;
            align-items: center;
            gap: 6px;

            padding: 6px 10px;

            border:
              1px solid
              rgba(255, 255, 255, 0.12);

            border-radius: 50px;

            color: #ffffff;

            background:
              rgba(0, 0, 0, 0.52);

            backdrop-filter:
              blur(8px);

            font-size: 0.66rem;
            font-weight: 600;

            z-index: 3;
          }


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

          .image-nav {
            position: absolute;

            top: 50%;

            width: 37px;
            height: 37px;

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

            padding: 0;

            transform:
              translateY(-50%);

            border:
              1px solid
              rgba(255, 255, 255, 0.25);

            border-radius: 50%;

            color: #198754;

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

            box-shadow:
              0 5px 18px
              rgba(0, 0, 0, 0.12);

            opacity: 0;

            z-index: 4;

            cursor: pointer;

            transition:
              opacity 0.25s ease,
              transform 0.25s ease,
              background 0.25s ease,
              color 0.25s ease;
          }

          .image-nav-left {
            left: 13px;
          }

          .image-nav-right {
            right: 13px;
          }

          .project-card:hover
          .image-nav {
            opacity: 1;
          }

          .image-nav:hover {
            color: #ffffff;

            background: #198754;

            transform:
              translateY(-50%)
              scale(1.06);
          }


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

          .project-dots {
            display: flex;

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

            gap: 6px;

            min-height: 28px;

            padding:
              9px 10px 3px;
          }

          .project-dot {
            width: 7px;
            height: 7px;

            padding: 0;

            border: 0;

            border-radius: 50%;

            background: #d2d9d5;

            cursor: pointer;

            transition:
              width 0.25s ease,
              background 0.25s ease,
              transform 0.25s ease;
          }

          .project-dot.active {
            width: 20px;

            border-radius: 10px;

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


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

          .project-content {
            display: flex;
            flex-direction: column;

            flex: 1;

            padding:
              20px 24px 24px;
          }


          /* =====================================================
             CATEGORY
          ===================================================== */

          .project-category {
            display: flex;

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

            width: 100%;

            gap: 9px;

            margin-bottom: 13px;
          }

          .category-line {
            flex: 1;

            max-width: 52px;

            height: 1px;

            background:
              linear-gradient(
                90deg,
                transparent,
                #d3dfd8
              );
          }

          .category-line:last-child {
            background:
              linear-gradient(
                90deg,
                #d3dfd8,
                transparent
              );
          }

          .category-text {
            color: #198754;

            font-size: 0.66rem;
            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1.15px;

            white-space: nowrap;
          }


          /* =====================================================
             DATE
          ===================================================== */

          .project-date {
            display: flex;

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

            gap: 6px;

            margin-bottom: 10px;

            color: #89938d;

            font-size: 0.67rem;
            font-weight: 600;

            text-align: center;
          }

          .project-date i {
            color: #198754;
          }


          /* =====================================================
             TITLE
          ===================================================== */

          .project-title {
            margin:
              0 0 12px;

            color: #212529;

            font-size: 1.22rem;
            line-height: 1.4;

            font-weight: 750;

            text-align: center;
          }


          /* =====================================================
             DESCRIPTION
          ===================================================== */

          .project-description {
            display: -webkit-box;

            margin:
              0 0 19px;

            overflow: hidden;

            color: #68716c;

            font-size: 0.83rem;

            line-height: 1.8;

            text-align: justify;
            text-justify: inter-word;

            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
          }


          /* =====================================================
             TECHNOLOGIES
          ===================================================== */

          .project-technologies {
            display: flex;

            flex-wrap: wrap;

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

            gap: 6px;

            margin-bottom: 20px;
          }

          .technology-tag {
            display: inline-flex;

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

            min-height: 27px;

            padding:
              5px 9px;

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

            border-radius: 7px;

            color: #198754;

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

            font-size: 0.65rem;
            font-weight: 650;

            text-align: center;

            transition:
              transform 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease;
          }

          .technology-tag:hover {
            transform:
              translateY(-1px);

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

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


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

          .project-footer {
            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 15px;

            margin-top: auto;

            padding-top: 16px;

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

          .project-number {
            color: #b6c0ba;

            font-size: 0.7rem;
            font-weight: 700;

            letter-spacing: 1px;
          }

          .project-link {
            display: inline-flex;

            align-items: center;

            gap: 8px;

            color: #198754;

            text-decoration: none;

            font-size: 0.76rem;
            font-weight: 700;

            transition:
              color 0.25s ease;
          }

          .project-link:hover {
            color: #146c43;
          }

          .project-link-icon {
            width: 29px;
            height: 29px;

            display: flex;

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

            border-radius: 50%;

            color: #198754;

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

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

          .project-link:hover
          .project-link-icon {
            transform:
              translate(
                2px,
                -2px
              );

            color: #ffffff;

            background:
              #198754;
          }


          /* =====================================================
             EMPTY / LOADING CARD
          ===================================================== */

          .projects-state-card {
  position: relative;

  max-width: 520px;

  margin:
    0 auto;

  overflow: hidden;

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

  border-radius: 22px;

  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;
}

.projects-state-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);
}

          .projects-state-content {
            padding:
              55px 30px;
          }

          .empty-project-icon {
            width: 82px;
            height: 82px;

            display: flex;

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

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

            border-radius: 50%;

            color: #198754;

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

            font-size: 2.1rem;
          }


          /* =====================================================
             LOADER
          ===================================================== */

          .projects-loader {
            position: relative;

            width: 38px;
            height: 38px;

            border:
              3px solid
              rgba(25, 135, 84, 0.12);

            border-top-color:
              #198754;

            border-radius: 50%;

            animation:
              projectsLoaderSpin
              0.8s
              linear
              infinite;
          }


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

          .projects-footer {
            display: flex;

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

            gap: 14px;

            margin-top: 58px;

            color: #9aa39e;

            font-size: 0.7rem;

            text-align: center;
          }

          .projects-footer-line {
            width: 48px;
            height: 1px;

            background:
              linear-gradient(
                90deg,
                transparent,
                #d5dfd9
              );
          }

          .projects-footer-line:last-child {
            background:
              linear-gradient(
                90deg,
                #d5dfd9,
                transparent
              );
          }


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

          .project-lightbox {
            position: fixed;

            inset: 0;

            z-index: 9999;

            display: flex;

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

            padding: 30px;

            background:
              rgba(0, 0, 0, 0.88);

            animation:
              lightboxIn
              0.25s
              ease-out;
          }

          .lightbox-image {
            display: block;

            max-width: 90%;
            max-height: 85vh;

            object-fit: contain;

            border-radius: 12px;

            box-shadow:
              0 20px 70px
              rgba(0, 0, 0, 0.35);
          }

          .lightbox-close {
            position: absolute;

            top: 22px;
            right: 22px;

            width: 44px;
            height: 44px;

            display: flex;

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

            padding: 0;

            border: 0;

            border-radius: 50%;

            color: #212529;

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

            z-index: 10;

            cursor: pointer;

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

          .lightbox-close:hover {
            transform:
              scale(1.05);

            background:
              #ffffff;
          }

          .lightbox-nav {
            position: absolute;

            top: 50%;

            width: 48px;
            height: 48px;

            display: flex;

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

            padding: 0;

            transform:
              translateY(-50%);

            border: 0;

            border-radius: 50%;

            color: #212529;

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

            z-index: 10;

            cursor: pointer;

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

          .lightbox-nav:hover {
            background:
              #ffffff;
          }

          .lightbox-nav-left {
            left: 25px;
          }

          .lightbox-nav-right {
            right: 25px;
          }

          .lightbox-nav-left:hover {
            transform:
              translateY(-50%)
              translateX(-2px);
          }

          .lightbox-nav-right:hover {
            transform:
              translateY(-50%)
              translateX(2px);
          }

          .lightbox-counter {
            position: absolute;

            bottom: 22px;
            left: 50%;

            transform:
              translateX(-50%);

            padding:
              7px 13px;

            border-radius: 999px;

            color: #ffffff;

            background:
              rgba(0, 0, 0, 0.58);

            font-size: 0.78rem;
            font-weight: 700;
          }


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

          @keyframes projectsHeaderIn {
            from {
              opacity: 0;

              transform:
                translateY(12px);
            }

            to {
              opacity: 1;

              transform:
                translateY(0);
            }
          }

          @keyframes projectCardIn {
            from {
              opacity: 0;

              transform:
                translateY(22px);
            }

            to {
              opacity: 1;

              transform:
                translateY(0);
            }
          }

          @keyframes projectImageIn {
            from {
              opacity: 0;

              transform:
                scale(1.015);
            }

            to {
              opacity: 1;

              transform:
                scale(1);
            }
          }

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

            100% {
              left: 100%;
            }
          }

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

            100% {
              left: 100%;
            }
          }

          @keyframes projectsLoaderSpin {
            to {
              transform:
                rotate(360deg);
            }
          }

          @keyframes lightboxIn {
            from {
              opacity: 0;
            }

            to {
              opacity: 1;
            }
          }


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

          @media (max-width: 991.98px) {

            .projects-title {
              font-size: 2.25rem;
            }

            .project-image-wrapper {
              height: 230px;
            }

            .project-content {
              padding:
                20px 21px 22px;
            }

            .project-title {
              font-size: 1.18rem;
            }

          }


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

          @media (max-width: 767.98px) {

            .projects-section {
              padding-left: 7px;
              padding-right: 7px;
            }

            .projects-section
            .container {
              padding-left: 10px !important;
              padding-right: 10px !important;
            }

            .projects-header {
              margin-bottom:
                38px !important;
            }

            .projects-badge {
              padding:
                7px 13px;

              margin-bottom:
                15px;

              font-size:
                0.68rem;
            }

            .projects-title {
              font-size: 2rem;

              line-height:
                1.3;
            }

            .projects-subtitle {
              padding:
                0 8px;

              font-size:
                0.84rem;

              line-height:
                1.75;
            }

            .projects-heading-line {
              width: 62px;
              height: 4px;
            }

            .project-card {
              border-radius:
                19px;
            }

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

            .project-image-wrapper {
              height:
                220px;
            }

            .project-card:hover {
              transform:
                translateY(-3px);
            }

            .project-card:hover
            .project-image {
              transform:
                scale(1.02);
            }

            .image-nav {
              opacity:
                0.96;
            }

            .image-nav {
              width:
                35px;

              height:
                35px;
            }

            .image-nav-left {
              left:
                10px;
            }

            .image-nav-right {
              right:
                10px;
            }

            .project-content {
              padding:
                19px 18px 20px;
            }

            .project-category {
              gap:
                7px;

              margin-bottom:
                11px;
            }

            .category-line {
              max-width:
                36px;
            }

            .category-text {
              font-size:
                0.62rem;

              letter-spacing:
                0.9px;
            }

            .project-date {
              font-size:
                0.64rem;
            }

            .project-title {
              font-size:
                1.12rem;

              line-height:
                1.4;

              padding:
                0 3px;
            }

            .project-description {
              margin-bottom:
                17px;

              font-size:
                0.81rem;

              line-height:
                1.76;

              -webkit-line-clamp:
                7;
            }

            .project-technologies {
              gap:
                5px;

              padding:
                0 2px;

              margin-bottom:
                18px;
            }

            .technology-tag {
              min-height:
                26px;

              padding:
                5px 8px;

              font-size:
                0.62rem;
            }

            .project-footer {
              padding-top:
                15px;
            }

            .project-link {
              font-size:
                0.73rem;
            }

            .project-link-icon {
              width:
                28px;

              height:
                28px;
            }

            .projects-footer {
              gap:
                9px;

              margin-top:
                45px;

              padding:
                0 8px;

              line-height:
                1.6;
            }

            .projects-footer-line {
              width:
                30px;
            }

            .projects-state-card {
              border-radius:
                19px;
            }

            .projects-state-content {
              padding:
                48px 22px;
            }

            .empty-project-icon {
              width:
                75px;

              height:
                75px;

              font-size:
                1.9rem;
            }

            .lightbox-image {
              max-width:
                94%;

              max-height:
                78vh;

              border-radius:
                9px;
            }

            .lightbox-close {
              top:
                15px;

              right:
                15px;

              width:
                41px;

              height:
                41px;
            }

            .lightbox-nav {
              width:
                42px;

              height:
                42px;
            }

            .lightbox-nav-left {
              left:
                12px;
            }

            .lightbox-nav-right {
              right:
                12px;
            }

            .lightbox-counter {
              bottom:
                15px;

              font-size:
                0.72rem;
            }

          }


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

          @media (max-width: 420px) {

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

            .projects-subtitle {
              font-size:
                0.81rem;
            }

            .project-image-wrapper {
              height:
                205px;
            }

            .project-content {
              padding:
                17px 16px 18px;
            }

            .project-category {
              gap:
                5px;
            }

            .category-line {
              max-width:
                26px;
            }

            .category-text {
              font-size:
                0.59rem;

              letter-spacing:
                0.75px;
            }

            .project-title {
              font-size:
                1.06rem;
            }

            .project-description {
              font-size:
                0.79rem;

              line-height:
                1.72;
            }

            .technology-tag {
              font-size:
                0.60rem;

              padding:
                5px 7px;
            }

            .projects-state-content {
              padding:
                43px 18px;
            }

            .projects-footer {
              font-size:
                0.65rem;
            }

          }


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

          @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {

              animation-duration:
                0.01ms !important;

              animation-iteration-count:
                1 !important;

              transition-duration:
                0.01ms !important;
            }

          }

        `}
      </style>

    </section>
  );
}