"use client";

import { useEffect, useState } from "react";

type ExperienceData = {
  id: number;
  type: "WORK" | "INTERNSHIP";
  position: string;
  company: string;
  location: string | null;
  startDate: string;
  endDate: string | null;
  isCurrent: boolean;
  description: string | null;
  logo: string | null;
};

export default function Experience() {
  const [experiences, setExperiences] = useState<ExperienceData[]>([]);
  const [loading, setLoading] = useState(true);

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

        if (result.success) {
          setExperiences(result.data);
        }
      } catch (error) {
        console.error("Gagal mengambil data Experience:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchExperiences();
  }, []);

  /*
   * FORMAT DATE
   * Backend tidak disentuh.
   */
  const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString("id-ID", {
      month: "long",
      year: "numeric",
    });
  };

  /*
   * LOADING
   */
  if (loading) {
    return (
      <section
        id="experience"
        className="experience-section py-5"
        style={{
          background:
            "linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%)",
        }}
      >
        <div className="container py-5">
          <div className="experience-status-card text-center">
            <div className="experience-card-line">
              <span></span>
            </div>

            <div className="experience-status-content">
              <div className="experience-loader mx-auto mb-3">
                <div className="experience-loader-inner"></div>
              </div>

              <p className="text-muted mb-0">
                Loading professional experience...
              </p>
            </div>
          </div>
        </div>

        <style>
          {`
            .experience-section {
              overflow: hidden;
            }

            .experience-status-card {
              position: relative;
              max-width: 520px;
              margin: 0 auto;
              overflow: hidden;

              background: #ffffff;

              border: 1px solid rgba(25, 135, 84, 0.30);
              border-radius: 24px;

              box-shadow:
                0 12px 35px rgba(25, 135, 84, 0.06),
                0 5px 18px rgba(0, 0, 0, 0.035);
            }

            .experience-card-line {
              position: relative;
              width: 100%;
              height: 2px;
              overflow: hidden;

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

              z-index: 5;
            }

            .experience-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 7px rgba(25, 135, 84, 0.28);

              animation: experienceCardLineMove 3.2s linear infinite;
            }

            .experience-status-content {
              padding: 55px 30px;
            }

            .experience-loader {
              width: 42px;
              height: 42px;

              border: 3px solid #e9efeb;
              border-top-color: #198754;

              border-radius: 50%;

              animation: experienceSpin 0.9s linear infinite;
            }

            .experience-loader-inner {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }

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

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

              100% {
                left: 100%;
              }
            }

            @media (max-width: 575.98px) {
              .experience-status-content {
                padding: 45px 20px;
              }

              .experience-card-line {
                height: 2px;
              }
            }

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

  return (
    <section
      id="experience"
      className="experience-section py-5"
      style={{
        background:
          "linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%)",
      }}
    >
      <div className="container py-5">

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

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

          <div className="experience-badge">
            <i className="bi bi-briefcase"></i>
            EXPERIENCE
          </div>

          <h2 className="display-5 fw-bold text-dark mb-3">
            Work <span className="text-success">Experience</span>
          </h2>

          <p className="experience-subtitle mx-auto mb-0">
            A journey through professional experiences, responsibilities,
            and opportunities that have shaped my skills and expertise.
          </p>

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

        </div>

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

        {experiences.length === 0 ? (

          <div className="experience-empty-card text-center">

            {/* TOP ANIMATED LINE */}
            <div className="experience-card-line">
              <span></span>
            </div>

            <div className="experience-empty-content">

              <div className="empty-icon mx-auto">
                <i className="bi bi-briefcase"></i>
              </div>

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

              <p className="text-secondary mb-0">
                Data pengalaman akan tampil di sini setelah ditambahkan.
              </p>

            </div>

          </div>

        ) : (

          /* =====================================================
             TIMELINE
          ===================================================== */

          <div className="experience-timeline">

            {/* MAIN TIMELINE LINE */}

            <div className="timeline-line"></div>

            {experiences.map((experience, index) => {

              const isInternship =
                experience.type === "INTERNSHIP";

              return (
                <div
                  key={experience.id}
                  className={`experience-item ${
                    index % 2 === 0
                      ? "experience-left"
                      : "experience-right"
                  }`}
                  style={{
                    animationDelay: `${index * 120}ms`,
                  }}
                >

                  {/* =================================================
                      TIMELINE DOT
                  ================================================= */}

                  <div className="timeline-dot">

                    <div className="timeline-dot-inner">
                      <i
                        className={
                          isInternship
                            ? "bi bi-mortarboard-fill"
                            : "bi bi-briefcase-fill"
                        }
                      ></i>
                    </div>

                    {experience.isCurrent && (
                      <span className="current-pulse"></span>
                    )}

                  </div>

                  {/* =================================================
                      CARD
                  ================================================= */}

                  <div className="experience-card">

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

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

                    <div className="card-content">

                      {/* =================================================
                          TOP ROW
                      ================================================= */}

                      <div className="experience-card-top">

                        {/* COMPANY LOGO */}

                        <div className="company-logo-wrapper">

                          {experience.logo ? (
                            <img
                              src={experience.logo}
                              alt={experience.company}
                              className="company-logo"
                            />
                          ) : (
                            <div className="company-logo-placeholder">
                              <i className="bi bi-building"></i>
                            </div>
                          )}

                        </div>

                        {/* TYPE */}

                        <div className="experience-badges">

                          <span
                            className={
                              isInternship
                                ? "experience-type internship"
                                : "experience-type work"
                            }
                          >
                            <i
                              className={
                                isInternship
                                  ? "bi bi-mortarboard"
                                  : "bi bi-briefcase"
                              }
                            ></i>

                            {isInternship
                              ? "Internship"
                              : "Work"}
                          </span>

                          {experience.isCurrent && (
                            <span className="current-badge">
                              <span className="status-dot"></span>
                              Current
                            </span>
                          )}

                        </div>

                      </div>

                      {/* =================================================
                          POSITION
                      ================================================= */}

                      <h3 className="experience-position">
                        {experience.position}
                      </h3>

                      {/* COMPANY */}

                      <div className="experience-company">
                        <i className="bi bi-building"></i>
                        <span>{experience.company}</span>
                      </div>

                      {/* =================================================
                          META INFORMATION
                      ================================================= */}

                      <div className="experience-meta">

                        <div className="meta-item">

                          <div className="meta-icon">
                            <i className="bi bi-calendar3"></i>
                          </div>

                          <div>
                            <span className="meta-label">
                              Duration
                            </span>

                            <span className="meta-value">
                              {formatDate(
                                experience.startDate
                              )}

                              {" — "}

                              {experience.isCurrent
                                ? "Sekarang"
                                : experience.endDate
                                ? formatDate(
                                    experience.endDate
                                  )
                                : "Sekarang"}
                            </span>
                          </div>

                        </div>

                        {experience.location && (
                          <div className="meta-item">

                            <div className="meta-icon">
                              <i className="bi bi-geo-alt"></i>
                            </div>

                            <div>
                              <span className="meta-label">
                                Location
                              </span>

                              <span className="meta-value">
                                {experience.location}
                              </span>
                            </div>

                          </div>
                        )}

                      </div>

                      {/* =================================================
                          DESCRIPTION
                      ================================================= */}

                      {experience.description && (
                        <div className="experience-description">

                          {/* ANIMATED SIDE LINE */}

                          <div className="description-line">
                            <span></span>
                          </div>

                          <p>
                            {experience.description}
                          </p>

                        </div>
                      )}

                    </div>

                  </div>

                </div>
              );
            })}

          </div>
        )}

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

        {experiences.length > 0 && (
          <div className="experience-footer">

            <div className="footer-icon">
              <i className="bi bi-arrow-down"></i>
            </div>

            <span>
              Continuously growing through professional experience
            </span>

          </div>
        )}

      </div>

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

      <style>
        {`

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

          .experience-section {
            overflow: hidden;
          }


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

          .experience-header {
            animation: experienceHeaderIn 0.8s ease-out both;
          }

          .experience-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            padding: 9px 16px;
            margin-bottom: 18px;

            border-radius: 50px;

            background: rgba(25, 135, 84, 0.08);
            color: #198754;

            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.8px;
          }

          .experience-badge i {
            font-size: 0.9rem;
          }

          .experience-subtitle {
            max-width: 720px;

            color: #6c757d;

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

          .experience-line {
            position: relative;

            width: 70px;
            height: 4px;

            border-radius: 20px;
            overflow: hidden;

            background: #dfe9e3;
          }

          .experience-line span {
            position: absolute;
            top: 0;
            left: -60%;

            width: 60%;
            height: 100%;

            border-radius: 20px;

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

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

            animation: experienceHeaderLineMove 2.8s linear infinite;
          }


          /* =====================================================
             TIMELINE
          ===================================================== */

          .experience-timeline {
            position: relative;

            max-width: 1080px;

            margin: 70px auto 0;

            padding: 10px 0;
          }

          .timeline-line {
            position: absolute;

            top: 0;
            bottom: 0;
            left: 50%;

            width: 2px;

            transform: translateX(-50%);

            background: linear-gradient(
              180deg,
              transparent,
              rgba(25, 135, 84, 0.30) 8%,
              rgba(25, 135, 84, 0.30) 92%,
              transparent
            );
          }


          /* =====================================================
             EXPERIENCE ITEM
          ===================================================== */

          .experience-item {
            position: relative;

            width: 50%;

            padding-bottom: 60px;

            opacity: 0;

            animation:
              experienceItemIn
              0.7s
              ease-out
              forwards;
          }

          .experience-left {
            padding-right: 58px;
          }

          .experience-right {
            margin-left: 50%;
            padding-left: 58px;
          }


          /* =====================================================
             TIMELINE DOT
          ===================================================== */

          .timeline-dot {
            position: absolute;

            top: 28px;

            width: 44px;
            height: 44px;

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

            border-radius: 50%;

            background: #ffffff;

            border: 2px solid rgba(25, 135, 84, 0.30);

            z-index: 10;

            box-shadow:
              0 4px 18px rgba(25, 135, 84, 0.10),
              0 2px 8px rgba(0, 0, 0, 0.05);
          }

          .experience-left .timeline-dot {
            right: -22px;
          }

          .experience-right .timeline-dot {
            left: -22px;
          }

          .timeline-dot-inner {
            width: 31px;
            height: 31px;

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

            border-radius: 50%;

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

            color: #198754;

            font-size: 0.8rem;

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

          .experience-item:hover .timeline-dot-inner {
            transform: scale(1.08);

            background: #198754;
            color: #ffffff;
          }


          /* =====================================================
             CURRENT PULSE
          ===================================================== */

          .current-pulse {
            position: absolute;

            inset: -5px;

            border-radius: 50%;

            border: 2px solid rgba(25, 135, 84, 0.35);

            animation:
              timelinePulse
              2s
              ease-out
              infinite;

            pointer-events: none;
          }


          /* =====================================================
             EXPERIENCE CARD
          ===================================================== */

          .experience-card {
            position: relative;

            display: flex;
            flex-direction: column;

            overflow: hidden;

            background: #ffffff;

            /* GARIS CARD: TIPIS, JELAS, DAN SMOOTH */
            border: 1px solid rgba(25, 135, 84, 0.38);

            border-radius: 24px;

            box-shadow:
              0 10px 30px rgba(25, 135, 84, 0.055),
              0 4px 14px rgba(0, 0, 0, 0.035);

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

          .experience-card:hover {
            transform: translateY(-5px);

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

            box-shadow:
              0 18px 42px rgba(25, 135, 84, 0.10),
              0 5px 18px rgba(0, 0, 0, 0.035);
          }


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

          .experience-card-line {
            position: relative;

            width: 100%;

            /* GARIS ATAS LEBIH TIPIS */
            height: 2px;

            flex-shrink: 0;

            overflow: hidden;

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

            z-index: 5;
          }

          .experience-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 7px rgba(25, 135, 84, 0.28);

            animation:
              experienceCardLineMove
              3.2s
              linear
              infinite;
          }


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

          .card-content {
            padding: 28px;
          }


          /* =====================================================
             CARD TOP
          ===================================================== */

          .experience-card-top {
            display: flex;

            justify-content: space-between;
            align-items: flex-start;

            gap: 16px;

            margin-bottom: 25px;
          }


          /* =====================================================
             COMPANY LOGO
          ===================================================== */

          .company-logo-wrapper {
            flex-shrink: 0;
          }

          .company-logo,
          .company-logo-placeholder {
            width: 64px;
            height: 64px;

            border-radius: 16px;
          }

          .company-logo {
            display: block;

            object-fit: cover;

            border: 1px solid #dfe9e3;

            background: #ffffff;

            padding: 5px;
          }

          .company-logo-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;

            background:
              linear-gradient(
                135deg,
                rgba(25, 135, 84, 0.11),
                rgba(32, 201, 151, 0.07)
              );

            color: #198754;

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

            font-size: 1.5rem;
          }


          /* =====================================================
             BADGES
          ===================================================== */

          .experience-badges {
            display: flex;

            flex-wrap: wrap;

            justify-content: flex-end;

            gap: 7px;
          }

          .experience-type,
          .current-badge {
            display: inline-flex;
            align-items: center;

            gap: 6px;

            padding: 7px 11px;

            border-radius: 50px;

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

            white-space: nowrap;
          }

          .experience-type.work {
            color: #198754;

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

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

          .experience-type.internship {
            color: #0d6efd;

            background: rgba(13, 110, 253, 0.08);

            border: 1px solid rgba(13, 110, 253, 0.08);
          }

          .current-badge {
            color: #198754;

            background: #f0faf5;

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

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

            flex-shrink: 0;

            border-radius: 50%;

            background: #198754;

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


          /* =====================================================
             POSITION
          ===================================================== */

          .experience-position {
            margin-bottom: 7px;

            color: #212529;

            font-size: 1.35rem;
            line-height: 1.35;

            font-weight: 750;

            overflow-wrap: break-word;
          }


          /* =====================================================
             COMPANY
          ===================================================== */

          .experience-company {
            display: flex;
            align-items: center;

            gap: 8px;

            margin-bottom: 22px;

            color: #198754;

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

            overflow-wrap: anywhere;
          }

          .experience-company i {
            flex-shrink: 0;

            font-size: 0.85rem;
          }


          /* =====================================================
             META
          ===================================================== */

          .experience-meta {
            display: flex;

            flex-wrap: wrap;

            gap: 18px;

            padding: 16px;

            border-radius: 14px;

            background: #f8faf9;

            border: 1px solid #e2ebe5;
          }

          .meta-item {
            display: flex;
            align-items: center;

            gap: 10px;

            min-width: 0;
          }

          .meta-icon {
            width: 34px;
            height: 34px;

            flex-shrink: 0;

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

            border-radius: 10px;

            background: #ffffff;

            color: #198754;

            border: 1px solid #dce8df;
          }

          .meta-item > div:last-child {
            display: flex;
            flex-direction: column;

            gap: 2px;

            min-width: 0;
          }

          .meta-label {
            color: #8d9991;

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

            text-transform: uppercase;
            letter-spacing: 0.6px;
          }

          .meta-value {
            color: #495057;

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

            overflow-wrap: anywhere;
          }


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

          .experience-description {
            display: flex;

            gap: 14px;

            margin-top: 23px;

            min-width: 0;
          }


          /* =====================================================
             ANIMATED DESCRIPTION SIDE LINE
          ===================================================== */

          .description-line {
            position: relative;

            flex-shrink: 0;

            width: 4px;

            min-height: 100%;

            overflow: hidden;

            border-radius: 20px;

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

          .description-line span {
            position: absolute;

            top: -35%;
            left: 0;

            width: 100%;
            height: 35%;

            border-radius: 20px;

            background: linear-gradient(
              180deg,
              transparent,
              #198754 25%,
              #42b883 50%,
              #198754 75%,
              transparent
            );

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

            animation:
              descriptionLineMove
              2.4s
              linear
              infinite;
          }

          .experience-description p {
            flex: 1;

            min-width: 0;

            margin: 0;

            color: #6c757d;

            font-size: 0.88rem;

            line-height: 1.8;

            text-align: justify;

            text-justify: inter-word;

            overflow-wrap: break-word;
          }


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

          .experience-footer {
            display: flex;

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

            gap: 9px;

            margin-top: 5px;

            color: #8a938d;

            font-size: 0.78rem;

            text-align: center;
          }

          .footer-icon {
            width: 25px;
            height: 25px;

            flex-shrink: 0;

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

            border-radius: 50%;

            color: #198754;

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

            animation:
              footerFloat
              2s
              ease-in-out
              infinite;
          }


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

          .experience-empty-card {
            position: relative;

            max-width: 560px;

            margin: 70px auto 0;

            overflow: hidden;

            background: #ffffff;

            /* GARIS EMPTY CARD: TIPIS DAN JELAS */
            border: 1px solid rgba(25, 135, 84, 0.38);

            border-radius: 24px;

            box-shadow:
              0 12px 35px rgba(25, 135, 84, 0.055),
              0 4px 15px rgba(0, 0, 0, 0.035);
          }

          .experience-empty-content {
            padding: 55px 30px;
          }

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

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

            border-radius: 50%;

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

            color: #198754;

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

            font-size: 2rem;
          }


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

          @keyframes experienceHeaderIn {
            from {
              opacity: 0;
              transform: translateY(12px);
            }

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

          @keyframes experienceItemIn {
            from {
              opacity: 0;
              transform: translateY(25px);
            }

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

          @keyframes timelinePulse {
            0% {
              transform: scale(0.85);
              opacity: 0.8;
            }

            70% {
              transform: scale(1.35);
              opacity: 0;
            }

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

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

            50% {
              transform: scale(1.5);
              opacity: 0.5;
            }
          }

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

            100% {
              left: 100%;
            }
          }

          @keyframes descriptionLineMove {
            0% {
              top: -35%;
            }

            100% {
              top: 100%;
            }
          }

          @keyframes experienceHeaderLineMove {
            0% {
              left: -60%;
            }

            100% {
              left: 100%;
            }
          }

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

            50% {
              transform: translateY(3px);
            }
          }


          /* =====================================================
             HOVER DEVICES ONLY
          ===================================================== */

          @media (hover: hover) and (pointer: fine) {

            .experience-card:hover {
              transform: translateY(-5px);
            }

          }


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

          @media (max-width: 991.98px) {

            .experience-timeline {
              max-width: 900px;

              padding-left: 5px;
              padding-right: 5px;
            }

            .experience-left {
              padding-right: 40px;
            }

            .experience-right {
              padding-left: 40px;
            }

            .experience-position {
              font-size: 1.2rem;
            }

            .card-content {
              padding: 24px;
            }

            .experience-card-top {
              gap: 12px;
            }

            .experience-meta {
              gap: 14px;
            }

          }


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

          @media (max-width: 767.98px) {

            .experience-section {
              padding-left: 8px;
              padding-right: 8px;
            }

            .experience-header {
              margin-bottom: 35px !important;
            }

            .experience-header h2 {
              font-size: 2rem;
            }

            .experience-subtitle {
              max-width: 100%;

              padding: 0 10px;

              font-size: 0.88rem;

              line-height: 1.75;
            }

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


            /* ---------------------------------------------
               MOBILE TIMELINE
            --------------------------------------------- */

            .experience-timeline {
              margin-top: 40px;

              padding-left: 30px;
              padding-right: 0;
            }

            .timeline-line {
              left: 9px;

              transform: none;

              width: 2px;
            }

            .experience-item,
            .experience-left,
            .experience-right {
              width: 100%;

              margin-left: 0;

              padding-left: 28px;
              padding-right: 0;

              padding-bottom: 35px;
            }


            /* ---------------------------------------------
               MOBILE DOT
            --------------------------------------------- */

            .experience-left .timeline-dot,
            .experience-right .timeline-dot {
              left: -12px;
              right: auto;
            }

            .timeline-dot {
              top: 22px;

              width: 36px;
              height: 36px;
            }

            .timeline-dot-inner {
              width: 26px;
              height: 26px;

              font-size: 0.7rem;
            }


            /* ---------------------------------------------
               MOBILE CARD
            --------------------------------------------- */

            .experience-card {
              border-radius: 20px;

              box-shadow:
                0 8px 25px rgba(25, 135, 84, 0.055),
                0 3px 12px rgba(0, 0, 0, 0.03);
            }

            /* GARIS ATAS MOBILE TETAP TIPIS */
            .experience-card-line {
              height: 2px;
            }

            .card-content {
              padding: 20px;
            }


            /* ---------------------------------------------
               MOBILE TOP ROW
            --------------------------------------------- */

            .experience-card-top {
              align-items: flex-start;

              gap: 10px;

              margin-bottom: 21px;
            }

            .company-logo,
            .company-logo-placeholder {
              width: 52px;
              height: 52px;

              border-radius: 13px;
            }

            .company-logo-placeholder {
              font-size: 1.2rem;
            }

            .experience-badges {
              max-width: calc(100% - 62px);

              gap: 5px;
            }

            .experience-type,
            .current-badge {
              padding: 6px 9px;

              font-size: 0.62rem;
            }


            /* ---------------------------------------------
               MOBILE POSITION
            --------------------------------------------- */

            .experience-position {
              font-size: 1.08rem;

              line-height: 1.4;

              margin-bottom: 6px;
            }

            .experience-company {
              margin-bottom: 18px;

              font-size: 0.85rem;

              line-height: 1.5;
            }


            /* ---------------------------------------------
               MOBILE META
            --------------------------------------------- */

            .experience-meta {
              flex-direction: column;

              gap: 13px;

              padding: 13px;
            }

            .meta-item {
              width: 100%;
            }

            .meta-icon {
              width: 32px;
              height: 32px;

              border-radius: 9px;
            }

            .meta-value {
              font-size: 0.75rem;

              line-height: 1.45;
            }


            /* ---------------------------------------------
               MOBILE DESCRIPTION
            --------------------------------------------- */

            .experience-description {
              gap: 12px;

              margin-top: 20px;
            }

            .description-line {
              width: 3px;
            }

            .experience-description p {
              font-size: 0.82rem;

              line-height: 1.75;

              text-align: justify;

              text-justify: inter-word;

              overflow-wrap: break-word;
              word-break: normal;
            }


            /* ---------------------------------------------
               MOBILE EMPTY
            --------------------------------------------- */

            .experience-empty-card {
              margin-top: 40px;

              border-radius: 20px;
            }

            .experience-empty-content {
              padding: 45px 20px;
            }

            .empty-icon {
              width: 72px;
              height: 72px;

              font-size: 1.7rem;
            }

            .experience-empty-content h4 {
              font-size: 1.05rem;
            }

            .experience-empty-content p {
              font-size: 0.85rem;

              line-height: 1.7;
            }


            /* ---------------------------------------------
               MOBILE FOOTER
            --------------------------------------------- */

            .experience-footer {
              margin-top: 0;

              padding: 0 12px;

              font-size: 0.72rem;

              line-height: 1.6;
            }

          }


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

          @media (max-width: 420px) {

            .experience-section {
              padding-left: 4px;
              padding-right: 4px;
            }

            .experience-header h2 {
              font-size: 1.75rem;
            }

            .experience-subtitle {
              font-size: 0.84rem;
            }

            .experience-timeline {
              padding-left: 27px;
            }

            .experience-item,
            .experience-left,
            .experience-right {
              padding-left: 25px;
            }

            .experience-left .timeline-dot,
            .experience-right .timeline-dot {
              left: -10px;
            }

            .timeline-dot {
              width: 34px;
              height: 34px;
            }

            .timeline-dot-inner {
              width: 24px;
              height: 24px;
            }

            .card-content {
              padding: 17px;
            }

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

            .experience-position {
              font-size: 1rem;
            }

            .experience-company {
              margin-bottom: 16px;

              font-size: 0.82rem;
            }

            .experience-meta {
              padding: 12px;
            }

            .meta-label {
              font-size: 0.6rem;
            }

            .meta-value {
              font-size: 0.7rem;
            }

            .experience-description {
              gap: 10px;
            }

            .experience-description p {
              font-size: 0.79rem;

              line-height: 1.72;
            }

            .experience-footer {
              font-size: 0.68rem;
            }

          }


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

          @media (max-width: 350px) {

            .experience-timeline {
              padding-left: 23px;
            }

            .experience-item,
            .experience-left,
            .experience-right {
              padding-left: 22px;
            }

            .experience-left .timeline-dot,
            .experience-right .timeline-dot {
              left: -9px;
            }

            .timeline-dot {
              width: 32px;
              height: 32px;
            }

            .timeline-dot-inner {
              width: 22px;
              height: 22px;

              font-size: 0.62rem;
            }

            .card-content {
              padding: 15px;
            }

            .company-logo,
            .company-logo-placeholder {
              width: 46px;
              height: 46px;
            }

            .experience-badges {
              max-width: calc(100% - 55px);
            }

            .experience-type,
            .current-badge {
              padding: 5px 7px;

              font-size: 0.57rem;
            }

            .experience-position {
              font-size: 0.95rem;
            }

          }


          /* =====================================================
             ACCESSIBILITY
          ===================================================== */

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

            *,
            *::before,
            *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
            }

          }

        `}
      </style>
    </section>
  );
}