"use client";

import { useEffect, useState, type CSSProperties } from "react";

type EducationData = {
  id: number;
  institution: string;
  degree: string;
  field: string | null;
  startDate: string;
  endDate: string | null;
  description: string | null;
};

export default function Education() {
  const [educations, setEducations] = useState<EducationData[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchEducation = async () => {
      try {
        const response = await fetch("/api/education");

        if (!response.ok) {
          throw new Error("Gagal mengambil data education");
        }

        const result = await response.json();

        if (result.success && Array.isArray(result.data)) {
          setEducations(result.data);
        } else {
          setEducations([]);
        }
      } catch (error) {
        console.error("Gagal mengambil data Education:", error);
        setEducations([]);
      } finally {
        setLoading(false);
      }
    };

    fetchEducation();
  }, []);

  const formatYear = (date: string) => {
    const parsedDate = new Date(date);

    if (Number.isNaN(parsedDate.getTime())) {
      return "-";
    }

    return parsedDate.getFullYear();
  };

  if (loading) {
    return (
      <section id="education" className="education-section">
        <div className="container education-container">
          <div className="education-loading">
            <div
              className="spinner-border text-success"
              role="status"
              aria-label="Loading"
            />
          </div>
        </div>
      </section>
    );
  }

  return (
    <>
      <section id="education" className="education-section">
        {/* Ambient background */}
        <div className="education-ambient education-ambient-one" />
        <div className="education-ambient education-ambient-two" />

        <div className="container education-container">
          {/* =====================================================
              HEADER
          ====================================================== */}

          <div className="education-header">
            <div className="education-badge">
              <span className="education-badge-dot" />

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

              <span>EDUCATION</span>
            </div>

            <h2 className="education-title">
              My <span>Education</span>
            </h2>

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

            <p className="education-intro">
              My academic journey and educational background that
              shaped my technical knowledge and professional
              development.
            </p>
          </div>

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

          {educations.length === 0 ? (
            <div className="education-empty">
              <div className="education-empty-icon">
                <i className="bi bi-mortarboard" />
              </div>

              <h4>No education data available</h4>

              <p>
                Education data will appear here once added.
              </p>
            </div>
          ) : (
            /* =====================================================
               EDUCATION LIST
            ====================================================== */

            <div className="education-list">
              {educations.map((education, index) => (
                <article
                  className="education-item"
                  key={education.id}
                  style={
                    {
                      "--item-index": index,
                    } as CSSProperties
                  }
                >
                  {/* =================================================
                      TIMELINE
                  ================================================== */}

                  <div className="education-timeline">
                    <div className="education-timeline-number">
                      <span>
                        {String(index + 1).padStart(2, "0")}
                      </span>
                    </div>

                    {index !== educations.length - 1 && (
                      <div className="education-timeline-line">
                        <span className="timeline-flow" />
                      </div>
                    )}
                  </div>

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

                  <div className="education-card">
                    {/* Continuous green top line */}
                    <div className="education-card-top-line">
                      <span />
                    </div>

                    <div className="education-card-glow" />

                    {/* TOP */}

                    <div className="education-card-top">
                      {/* ICON */}

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

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

                        <span className="education-icon-pulse" />
                      </div>

                      {/* INFORMATION */}

                      <div className="education-main">
                        {/* DEGREE */}

                        <div className="education-badges">
                          <span className="education-degree">
                            {education.degree}
                          </span>
                        </div>

                        {/* INSTITUTION */}

                        <h3 className="education-institution">
                          {education.institution}
                        </h3>

                        {/* FIELD */}

                        {education.field && (
                          <p className="education-field">
                            {education.field}
                          </p>
                        )}

                        {/* PERIOD */}

                        <div className="education-period">
                          <span className="education-period-icon">
                            <i className="bi bi-calendar3" />
                          </span>

                          <span>
                            {formatYear(education.startDate)}
                            {" — "}
                            {education.endDate
                              ? formatYear(education.endDate)
                              : "Sekarang"}
                          </span>

                          <span className="education-period-line" />
                        </div>
                      </div>
                    </div>

                    {/* DESCRIPTION */}

                    {education.description && (
                      <div className="education-description-wrapper">
                        <div className="education-description-line">
                          <span />
                        </div>

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

                    {/* FOOTER */}

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

                        <i className="bi bi-check-circle-fill" />

                        Academic Background
                      </span>

                      <span className="education-index">
                        {String(index + 1).padStart(2, "0")}
                      </span>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* ==========================================================
          COMPONENT STYLES
      =========================================================== */}

      <style jsx>{`
        /* =====================================================
           SECTION
        ====================================================== */

        .education-section {
          position: relative;
          width: 100%;
          background: transparent;
          overflow: hidden;
          isolation: isolate;
        }

        .education-container {
          position: relative;
          z-index: 2;
          padding-top: 110px;
          padding-bottom: 110px;
        }

        /* =====================================================
           AMBIENT
        ====================================================== */

        .education-ambient {
          position: absolute;
          width: 280px;
          height: 280px;
          border-radius: 50%;

          background: radial-gradient(
            circle,
            rgba(25, 135, 84, 0.08) 0%,
            rgba(25, 135, 84, 0.035) 35%,
            transparent 70%
          );

          pointer-events: none;
          filter: blur(2px);
          z-index: 0;
        }

        .education-ambient-one {
          top: 8%;
          left: -130px;
          animation: ambientFloatOne 14s ease-in-out infinite;
        }

        .education-ambient-two {
          right: -140px;
          bottom: 8%;
          animation: ambientFloatTwo 17s ease-in-out infinite;
        }

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

          50% {
            transform: translate3d(80px, 45px, 0) scale(1.12);
          }
        }

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

          50% {
            transform: translate3d(-70px, -55px, 0) scale(1.1);
          }
        }

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

        .education-header {
          max-width: 800px;
          margin: 0 auto 70px;
          text-align: center;
        }

        .education-badge {
          position: relative;

          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;

          padding: 8px 15px;

          border: 1px solid rgba(25, 135, 84, 0.18);
          border-radius: 999px;

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

          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.12em;

          overflow: hidden;
        }

        .education-badge::after {
          content: "";

          position: absolute;
          top: 0;
          left: -100%;

          width: 70%;
          height: 100%;

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

          animation: badgeShine 4s ease-in-out infinite;
        }

        @keyframes badgeShine {
          0% {
            left: -100%;
          }

          35%,
          100% {
            left: 130%;
          }
        }

        .education-badge-dot {
          width: 6px;
          height: 6px;

          border-radius: 50%;
          background: #198754;

          animation: badgePulse 2s ease-out infinite;
        }

        @keyframes badgePulse {
          0% {
            box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4);
          }

          70% {
            box-shadow: 0 0 0 7px rgba(25, 135, 84, 0);
          }

          100% {
            box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
          }
        }

        .education-badge i {
          font-size: 0.95rem;
        }

        .education-title {
          margin: 18px 0 15px;

          color: #17221c;

          font-size: clamp(2.2rem, 5vw, 3.6rem);
          line-height: 1.1;
          letter-spacing: -0.04em;
          font-weight: 750;
        }

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

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

        .education-line {
          position: relative;

          width: 55px;
          height: 4px;

          margin: 0 auto;

          overflow: hidden;

          background: rgba(25, 135, 84, 0.15);
          border-radius: 999px;
        }

        .education-line span {
          position: absolute;

          top: 0;
          left: -100%;

          width: 100%;
          height: 100%;

          background: #198754;
          border-radius: inherit;

          animation: titleLineFlow 2.5s linear infinite;
        }

        @keyframes titleLineFlow {
          0% {
            left: -100%;
          }

          50% {
            left: 0;
          }

          100% {
            left: 100%;
          }
        }

        .education-intro {
          max-width: 650px;

          margin: 22px auto 0;

          color: #737d77;

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

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

        .education-loading {
          min-height: 300px;

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

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

        .education-empty {
          max-width: 600px;

          margin: 0 auto;
          padding: 60px 25px;

          text-align: center;

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

          background: #ffffff;

          box-shadow: 0 10px 35px rgba(25, 50, 38, 0.05);
        }

        .education-empty-icon {
          position: relative;

          width: 75px;
          height: 75px;

          margin: 0 auto 20px;

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

          border-radius: 18px;

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

          font-size: 2.2rem;

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

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

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

        .education-empty h4 {
          margin-bottom: 8px;

          color: #17221c;
          font-weight: 700;
        }

        .education-empty p {
          margin: 0;

          color: #7a8580;
          line-height: 1.7;
        }

        /* =====================================================
           LIST
        ====================================================== */

        .education-list {
          max-width: 1050px;
          margin: 0 auto;
        }

        .education-item {
          position: relative;

          display: grid;

          grid-template-columns: 75px minmax(0, 1fr);

          column-gap: 28px;
        }

        .education-item + .education-item {
          margin-top: 42px;
        }

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

        .education-timeline {
          position: relative;

          display: flex;
          justify-content: center;
        }

        .education-timeline-number {
          position: relative;
          z-index: 5;

          width: 48px;
          height: 48px;

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

          border: 1px solid rgba(25, 135, 84, 0.32);
          border-radius: 14px;

          background: #ffffff;

          color: #198754;

          font-size: 0.75rem;
          font-weight: 800;
          letter-spacing: 0.05em;

          box-shadow:
            0 8px 25px rgba(25, 50, 38, 0.06),
            0 0 0 3px rgba(25, 135, 84, 0.035);

          animation: timelineNumberPulse 3.5s ease-in-out infinite;

          animation-delay: calc(var(--item-index) * 0.6s);
        }

        .education-timeline-number::before {
          content: "";

          position: absolute;

          inset: -5px;

          border: 1px solid rgba(25, 135, 84, 0.15);
          border-radius: 18px;

          animation: numberRing 3s ease-out infinite;

          animation-delay: calc(var(--item-index) * 0.5s);
        }

        @keyframes timelineNumberPulse {
          0%,
          100% {
            transform: scale(1);
            box-shadow: 0 8px 25px rgba(25, 50, 38, 0.06);
          }

          50% {
            transform: scale(1.04);
            box-shadow: 0 10px 30px rgba(25, 135, 84, 0.13);
          }
        }

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

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

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

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

        .education-timeline-line {
          position: absolute;

          top: 48px;
          bottom: -42px;

          width: 2px;

          overflow: hidden;

          background: linear-gradient(
            to bottom,
            rgba(25, 135, 84, 0.28),
            #dfe6e1 15%,
            #dfe6e1 85%,
            rgba(25, 135, 84, 0.28)
          );

          border-radius: 999px;
        }

        .timeline-flow {
          position: absolute;

          top: -45px;
          left: 0;

          width: 100%;
          height: 45px;

          border-radius: 999px;

          background: linear-gradient(
            to bottom,
            transparent,
            rgba(25, 135, 84, 0.25),
            #198754,
            rgba(25, 135, 84, 0.25),
            transparent
          );

          filter: drop-shadow(
            0 0 5px rgba(25, 135, 84, 0.35)
          );

          animation: timelineFlow 2.8s linear infinite;
        }

        @keyframes timelineFlow {
          0% {
            top: -45px;
          }

          100% {
            top: 100%;
          }
        }

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

        .education-card {
          position: relative;

          padding: 30px;

          overflow: hidden;

          background:
            linear-gradient(
              145deg,
              #ffffff 0%,
              #fbfefc 100%
            );

          /* CLEAR GREEN BORDER */

          border: 1.5px solid rgba(25, 135, 84, 0.55);

          border-radius: 22px;

          box-shadow:
            0 10px 35px rgba(25, 50, 38, 0.055),
            0 0 0 1px rgba(25, 135, 84, 0.035);

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

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

        .education-card-top-line {
          position: absolute;

          top: 0;
          left: 0;

          width: 100%;
          height: 4px;

          overflow: hidden;

          z-index: 10;

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

        .education-card-top-line span {
          position: absolute;

          top: 0;
          left: -35%;

          width: 35%;
          height: 100%;

          border-radius: 999px;

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

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

          animation:
            educationCardTopLineMove
            2.8s linear infinite;

          animation-delay:
            calc(var(--item-index) * -0.45s);
        }

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

          100% {
            left: 100%;
          }
        }

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

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

          box-shadow:
            0 20px 50px rgba(25, 50, 38, 0.1),
            0 0 0 2px rgba(25, 135, 84, 0.05);
        }

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

        .education-card-glow {
          position: absolute;

          width: 180px;
          height: 180px;

          top: -120px;
          right: -100px;

          border-radius: 50%;

          background:
            radial-gradient(
              circle,
              rgba(25, 135, 84, 0.08),
              transparent 70%
            );

          pointer-events: none;

          animation: cardGlow 8s ease-in-out infinite;

          animation-delay:
            calc(var(--item-index) * 0.7s);
        }

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

          50% {
            transform: translate(-40px, 70px) scale(1.25);
          }
        }

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

        .education-card-top {
          position: relative;
          z-index: 2;

          display: flex;
          align-items: flex-start;
          gap: 24px;
        }

        /* =====================================================
           EDUCATION ICON
        ====================================================== */

        .education-icon {
          position: relative;

          flex: 0 0 82px;

          width: 82px;
          height: 82px;

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

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

          background:
            linear-gradient(
              145deg,
              #f8faf9,
              #eef7f2
            );

          color: #198754;

          font-size: 2.2rem;

          animation: iconBreathing 4s ease-in-out infinite;

          animation-delay:
            calc(var(--item-index) * 0.65s);
        }

        .education-icon-ring {
          position: absolute;

          inset: -5px;

          border: 1px solid rgba(25, 135, 84, 0.15);
          border-radius: 22px;

          pointer-events: none;

          animation: iconRing 4s ease-out infinite;

          animation-delay:
            calc(var(--item-index) * 0.6s);
        }

        .education-icon-pulse {
          position: absolute;

          right: -3px;
          bottom: -3px;

          width: 10px;
          height: 10px;

          border-radius: 50%;

          background: #198754;

          border: 2px solid #ffffff;

          animation: iconPulse 2s ease-out infinite;

          animation-delay:
            calc(var(--item-index) * 0.45s);
        }

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

          50% {
            transform: translateY(-2px) scale(1.025);
          }
        }

        @keyframes iconRing {
          0% {
            opacity: 0.8;
            transform: scale(0.95);
          }

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

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

        @keyframes iconPulse {
          0% {
            box-shadow:
              0 0 0 0 rgba(25, 135, 84, 0.4);
          }

          70% {
            box-shadow:
              0 0 0 8px rgba(25, 135, 84, 0);
          }

          100% {
            box-shadow:
              0 0 0 0 rgba(25, 135, 84, 0);
          }
        }

        /* =====================================================
           MAIN
        ====================================================== */

        .education-main {
          min-width: 0;
          flex: 1;
        }

        .education-badges {
          display: flex;

          align-items: center;
          flex-wrap: wrap;

          gap: 8px;

          margin-bottom: 11px;
        }

        .education-degree {
          display: inline-flex;

          align-items: center;

          padding: 6px 11px;

          border-radius: 8px;

          color: #ffffff;
          background: #198754;

          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 0.02em;
        }

        .education-institution {
          margin: 0;

          color: #17221c;

          font-size: clamp(1.35rem, 2.5vw, 1.75rem);

          line-height: 1.25;
          font-weight: 750;
          letter-spacing: -0.025em;
        }

        .education-field {
          margin: 7px 0 13px;

          color: #198754;

          font-size: 0.95rem;
          font-weight: 600;
        }

        /* =====================================================
           PERIOD
        ====================================================== */

        .education-period {
          display: inline-flex;

          align-items: center;
          gap: 8px;

          color: #7b8580;

          font-size: 0.82rem;
          font-weight: 500;
        }

        .education-period-icon {
          display: inline-flex;

          color: #198754;

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

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

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

        .education-period-line {
          position: relative;

          width: 22px;
          height: 1px;

          overflow: hidden;

          background: #dfe6e1;
        }

        .education-period-line::after {
          content: "";

          position: absolute;

          top: 0;
          left: -100%;

          width: 100%;
          height: 100%;

          background: #198754;

          animation:
            periodFlow
            2.5s linear infinite;
        }

        @keyframes periodFlow {
          0% {
            left: -100%;
          }

          100% {
            left: 100%;
          }
        }

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

        .education-description-wrapper {
          position: relative;
          z-index: 2;

          display: flex;
          gap: 18px;

          margin-top: 25px;
          padding-top: 23px;

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

        /* =====================================================
           CONTINUOUS DESCRIPTION SIDE LINE
        ====================================================== */

        .education-description-line {
          position: relative;

          flex: 0 0 3px;

          min-height: 100%;

          overflow: hidden;

          border-radius: 999px;

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

        .education-description-line span {
          position: absolute;

          top: -35%;
          left: 0;

          width: 100%;
          height: 35%;

          border-radius: inherit;

          background:
            linear-gradient(
              to bottom,
              transparent,
              #198754,
              #20c997,
              #198754,
              transparent
            );

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

          animation:
            descriptionFlow
            2.4s linear infinite;
        }

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

          100% {
            top: 100%;
          }
        }

        .education-description {
          flex: 1;

          margin: 0;

          color: #6d7771;

          font-size: 0.94rem;
          line-height: 1.85;

          text-align: justify;
        }

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

        .education-card-footer {
          position: relative;
          z-index: 2;

          display: flex;

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

          margin-top: 25px;
          padding-top: 17px;

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

          color: #8c9691;

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

          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        .education-status {
          display: inline-flex;

          align-items: center;
          gap: 7px;
        }

        .education-card-footer i {
          color: #198754;
        }

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

          border-radius: 50%;

          background: #198754;

          animation:
            statusPulse
            2s ease-out infinite;
        }

        @keyframes statusPulse {
          0% {
            box-shadow:
              0 0 0 0 rgba(25, 135, 84, 0.45);
          }

          70% {
            box-shadow:
              0 0 0 6px rgba(25, 135, 84, 0);
          }

          100% {
            box-shadow:
              0 0 0 0 rgba(25, 135, 84, 0);
          }
        }

        .education-index {
          color: #198754;
          font-size: 0.72rem;
        }

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

        @media (max-width: 991.98px) {
          .education-container {
            padding-top: 90px;
            padding-bottom: 90px;
          }

          .education-header {
            margin-bottom: 55px;
          }

          .education-list {
            max-width: 850px;
          }

          .education-item {
            grid-template-columns: 65px minmax(0, 1fr);
            column-gap: 22px;
          }

          .education-card {
            padding: 27px;
          }

          .education-card-top {
            gap: 20px;
          }

          .education-icon {
            flex-basis: 76px;
            width: 76px;
            height: 76px;
            font-size: 2rem;
          }

          .education-institution {
            font-size: 1.5rem;
          }
        }

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

        @media (max-width: 767.98px) {
          .education-container {
            padding-top: 75px;
            padding-bottom: 75px;
          }

          .education-header {
            margin-bottom: 45px;
            padding: 0 8px;
          }

          .education-title {
            font-size: clamp(2rem, 10vw, 2.7rem);
          }

          .education-intro {
            font-size: 0.92rem;
            line-height: 1.7;
          }

          .education-line {
            width: 52px;
            height: 4px;
          }

          .education-item {
            grid-template-columns: 45px minmax(0, 1fr);
            column-gap: 15px;
          }

          .education-item + .education-item {
            margin-top: 30px;
          }

          .education-timeline-number {
            width: 40px;
            height: 40px;

            border-radius: 11px;

            font-size: 0.67rem;
          }

          .education-timeline-line {
            top: 40px;
            bottom: -30px;
          }

          .education-card {
            padding: 22px 18px;

            border-radius: 18px;

            border-width: 1.5px;
          }

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

          .education-card-top {
            gap: 16px;
          }

          .education-icon {
            flex: 0 0 65px;

            width: 65px;
            height: 65px;

            border-radius: 13px;

            font-size: 1.7rem;
          }

          .education-institution {
            font-size: 1.2rem;
          }

          .education-field {
            font-size: 0.85rem;
          }

          .education-period {
            font-size: 0.76rem;
          }

          .education-description-wrapper {
            gap: 12px;

            margin-top: 20px;
            padding-top: 19px;
          }

          .education-description-line {
            flex-basis: 3px;
          }

          .education-description {
            font-size: 0.87rem;
            line-height: 1.75;
          }

          .education-card-footer {
            margin-top: 20px;
            font-size: 0.62rem;
          }
        }

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

        @media (max-width: 480px) {
          .education-container {
            padding-left: 14px;
            padding-right: 14px;
          }

          .education-header {
            margin-bottom: 40px;
          }

          .education-badge {
            font-size: 0.68rem;
            padding: 7px 12px;
          }

          .education-card-top {
            display: block;
          }

          .education-icon {
            margin-bottom: 18px;
          }

          .education-institution {
            font-size: 1.15rem;
          }

          .education-badges {
            gap: 6px;
          }

          .education-degree {
            font-size: 0.66rem;
            padding: 5px 8px;
          }

          .education-description {
            text-align: justify;
          }

          .education-card-footer {
            flex-wrap: wrap;
            gap: 8px;
          }

          .education-period-line {
            width: 15px;
          }

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

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

        @media (max-width: 360px) {
          .education-container {
            padding-left: 10px;
            padding-right: 10px;
          }

          .education-item {
            grid-template-columns: 1fr;
          }

          .education-timeline {
            display: none;
          }

          .education-card {
            padding: 20px 15px;
            border-radius: 16px;
          }

          .education-icon {
            width: 60px;
            height: 60px;
          }

          .education-institution {
            font-size: 1.08rem;
          }

          .education-description-wrapper {
            gap: 10px;
          }

          .education-description {
            font-size: 0.84rem;
            line-height: 1.7;
          }
        }

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

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