"use client";

import { useEffect, useState } from "react";

type AboutData = {
  id: number;
  badge: string | null;
  title: string;
  highlight: string | null;
  description: string | null;
  photo: string | null;

  github: string | null;
  facebook: string | null;
  instagram: string | null;
  twitter: string | null;
  tiktok: string | null;
  email: string | null;

  active: boolean;
};

type AboutStat = {
  id: number;
  label: string;
  value: string;
  icon: string | null;
  active: boolean;
  sortOrder: number;
};

export default function About() {
  const [about, setAbout] = useState<AboutData | null>(null);
  const [stats, setStats] = useState<AboutStat[]>([]);

  useEffect(() => {
    const fetchAbout = async () => {
      try {
        const [aboutResponse, statsResponse] = await Promise.all([
          fetch("/api/about"),
          fetch("/api/about/stats"),
        ]);

        const aboutResult = await aboutResponse.json();
        const statsResult = await statsResponse.json();

        // =========================
        // ABOUT
        // =========================

        if (
          aboutResult.success &&
          Array.isArray(aboutResult.data) &&
          aboutResult.data.length > 0
        ) {
          const activeAbout =
            aboutResult.data.find(
              (item: AboutData) => item.active
            ) ?? aboutResult.data[0];

          setAbout(activeAbout);
        }

        // =========================
        // ABOUT STATS
        // =========================

        if (
          statsResult.success &&
          Array.isArray(statsResult.data)
        ) {
          const activeStats = statsResult.data
            .filter((item: AboutStat) => item.active)
            .sort(
              (a: AboutStat, b: AboutStat) =>
                a.sortOrder - b.sortOrder
            );

          setStats(activeStats);
        }
      } catch (error) {
        console.error(
          "Gagal mengambil data About:",
          error
        );
      }
    };

    fetchAbout();
  }, []);

  if (!about) {
    return null;
  }

  return (
    <>
      <section id="about" className="about-section">
        <div className="about-background-glow about-background-glow-one" />
        <div className="about-background-glow about-background-glow-two" />

        <div className="container about-container">

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

          <div className="about-header text-center">

            {about.badge && (
              <span className="about-badge">
                <span className="about-badge-dot" />

                <i className="bi bi-person-circle"></i>

                <span>{about.badge}</span>
              </span>
            )}

            <h2 className="about-section-title">
              About <span>Me</span>
            </h2>

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

          </div>

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

          <div className="row align-items-center about-main">

            {/* =================================================
                PHOTO
            ================================================== */}

            <div className="col-12 col-lg-5">
              <div className="about-photo-area">

                <div className="about-photo-frame">

                  {/* Decorative Number */}

                  <div className="about-photo-number">
                    01
                  </div>

                  {/* Photo */}

                  <div className="about-photo">

                    {about.photo ? (
                      <img
                        src={about.photo}
                        alt={
                          about.highlight ??
                          about.title
                        }
                      />
                    ) : (
                      <div className="about-photo-placeholder">
                        <i className="bi bi-person"></i>
                      </div>
                    )}

                  </div>

                  {/* Decorative Line */}

                  <div className="about-photo-line" />

                </div>

                {/* =================================================
                    SOCIAL MEDIA
                ================================================== */}

                {(about.github ||
                  about.facebook ||
                  about.instagram ||
                  about.twitter ||
                  about.tiktok ||
                  about.email) && (
                  <div className="about-social">

                    {about.github && (
                      <a
                        href={about.github}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="about-social-item"
                        aria-label="GitHub"
                        title="GitHub"
                      >
                        <i className="bi bi-github"></i>
                      </a>
                    )}

                    {about.facebook && (
                      <a
                        href={about.facebook}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="about-social-item"
                        aria-label="Facebook"
                        title="Facebook"
                      >
                        <i className="bi bi-facebook"></i>
                      </a>
                    )}

                    {about.instagram && (
                      <a
                        href={about.instagram}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="about-social-item"
                        aria-label="Instagram"
                        title="Instagram"
                      >
                        <i className="bi bi-instagram"></i>
                      </a>
                    )}

                    {about.twitter && (
                      <a
                        href={about.twitter}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="about-social-item"
                        aria-label="Twitter / X"
                        title="Twitter / X"
                      >
                        <i className="bi bi-twitter-x"></i>
                      </a>
                    )}

                    {about.tiktok && (
                      <a
                        href={about.tiktok}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="about-social-item"
                        aria-label="TikTok"
                        title="TikTok"
                      >
                        <i className="bi bi-tiktok"></i>
                      </a>
                    )}

                    {about.email && (
                      <a
                        href={`mailto:${about.email}`}
                        className="about-social-item"
                        aria-label="Email"
                        title={about.email}
                      >
                        <i className="bi bi-envelope"></i>
                      </a>
                    )}

                  </div>
                )}

              </div>
            </div>

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

            <div className="col-12 col-lg-7">
              <div className="about-content-card">

                {/* Animated Top Line */}

                <div className="about-content-card-line">
                  <span />
                </div>

                <div className="about-content">

                  {/* Small Label */}

                  <div className="about-content-label">
                    <span className="about-label-line" />
                    {about.title}
                  </div>

                  {/* Highlight */}

                  {about.highlight && (
                    <h3 className="about-highlight">
                      {about.highlight}
                    </h3>
                  )}

                  {/* Short Introduction */}

                  <p className="about-intro">
                    Technology Enthusiast
                  </p>

                  {/* Description */}

                  {about.description && (
                    <div className="about-description-wrapper">
                      <p className="about-description">
                        {about.description}
                      </p>
                    </div>
                  )}

                  {/* Additional Description */}

                  <div className="about-description-wrapper">
                    <p className="about-description">
                      I enjoy designing electronic systems,
                      exploring embedded technologies, and
                      developing innovative engineering solutions
                      that create real-world impact and lasting
                      value.
                    </p>
                  </div>

                  {/* =================================================
                      STATISTICS
                  ================================================== */}

                  {stats.length > 0 && (
                    <div className="about-stats">

                      {stats.map((stat, index) => (
                        <div
                          key={stat.id}
                          className="about-stat"
                          style={{
                            "--stat-index": index,
                          } as React.CSSProperties}
                        >

                          <div className="about-stat-top">

                            <span className="about-stat-number">
                              0{index + 1}
                            </span>

                            <span className="about-stat-icon">
                              <i
                                className={
                                  stat.icon ||
                                  "bi bi-bar-chart-fill"
                                }
                              ></i>
                            </span>

                          </div>

                          <div className="about-stat-value">
                            {stat.value}
                          </div>

                          <div className="about-stat-label">
                            {stat.label}
                          </div>

                          <div className="about-stat-line">
                            <span />
                          </div>

                        </div>
                      ))}

                    </div>
                  )}

                  {/* =================================================
                      CTA
                  ================================================== */}

                  <div className="about-action">
                    <a
                      href="/experience"
                      className="about-btn"
                    >
                      <span>
                        View My Experience
                      </span>

                      <span className="about-btn-icon">
                        <i className="bi bi-arrow-up-right"></i>
                      </span>
                    </a>
                  </div>

                </div>
              </div>
            </div>

          </div>

        </div>
      </section>

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

      <style jsx>{`

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

        .about-section {
          position: relative;
          width: 100%;
          padding: 100px 0;
          overflow: hidden;
          background: transparent;
          isolation: isolate;
        }

        .about-container {
          position: relative;
          z-index: 2;
        }

        .about-background-glow {
          position: absolute;

          width: 320px;
          height: 320px;

          border-radius: 50%;

          background: radial-gradient(
            circle,
            rgba(25, 135, 84, 0.08) 0%,
            rgba(25, 135, 84, 0.025) 45%,
            transparent 72%
          );

          pointer-events: none;

          z-index: 0;

          filter: blur(2px);
        }

        .about-background-glow-one {
          top: 8%;
          left: -170px;

          animation: aboutGlowOne 14s ease-in-out infinite;
        }

        .about-background-glow-two {
          right: -170px;
          bottom: 5%;

          animation: aboutGlowTwo 17s ease-in-out infinite;
        }

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

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

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

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

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

        .about-header {
          margin-bottom: 65px;
        }

        .about-badge {
          position: relative;

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

          gap: 8px;

          padding: 7px 14px;

          margin-bottom: 16px;

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

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

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

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

          overflow: hidden;
        }

        .about-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: aboutBadgeShine 4s ease-in-out infinite;
        }

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

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

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

          flex: 0 0 6px;

          border-radius: 50%;

          background: #198754;

          animation: aboutBadgePulse 2s ease-out infinite;
        }

        @keyframes aboutBadgePulse {
          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);
          }
        }

        .about-badge i {
          font-size: 0.85rem;
        }

        .about-section-title {
          margin: 0;

          color: #17221c;

          font-size: clamp(
            2.1rem,
            5vw,
            3.3rem
          );

          line-height: 1.1;

          letter-spacing: -0.04em;

          font-weight: 750;
        }

        .about-section-title span {
          color: #198754;
        }

        .about-title-line {
          position: relative;

          width: 55px;
          height: 4px;

          margin: 18px auto 0;

          overflow: hidden;

          border-radius: 999px;

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

        .about-title-line span {
          position: absolute;

          top: 0;
          left: -100%;

          width: 100%;
          height: 100%;

          border-radius: inherit;

          background: #198754;

          animation: aboutTitleFlow 2.5s ease-in-out infinite;
        }

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

          50% {
            left: 0;
          }

          100% {
            left: 100%;
          }
        }

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

        .about-main {
          row-gap: 55px;
        }

        /* =====================================================
           PHOTO AREA
        ====================================================== */

        .about-photo-area {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .about-photo-frame {
          position: relative;

          width: min(100%, 360px);

          aspect-ratio: 4 / 5;

          padding: 4px;

          border-radius: 21px;

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

          box-shadow:
            0 18px 45px
            rgba(20, 45, 32, 0.08),
            0 0 0 1px
            rgba(25, 135, 84, 0.18);
        }

        .about-photo {
          position: relative;

          width: 100%;
          height: 100%;

          overflow: hidden;

          background: #f5f7f6;

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

          border-radius: 17px;

          box-shadow:
            inset 0 0 0 1px
            rgba(255, 255, 255, 0.8);

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

        .about-photo:hover {
          transform: translateY(-4px);

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

          box-shadow:
            0 25px 55px
            rgba(20, 45, 32, 0.12),
            inset 0 0 0 1px
            rgba(255, 255, 255, 0.8);
        }

        .about-photo img {
          width: 100%;
          height: 100%;

          display: block;

          object-fit: cover;
        }

        .about-photo-placeholder {
          width: 100%;
          height: 100%;

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

          color: #198754;

          font-size: 6rem;

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

        /* =====================================================
           PHOTO NUMBER
        ====================================================== */

        .about-photo-number {
          position: absolute;

          top: -14px;
          left: -14px;

          z-index: 8;

          width: 52px;
          height: 52px;

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

          background: #198754;

          color: white;

          border: 2px solid white;

          border-radius: 13px;

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

          letter-spacing: 0.08em;

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

        /* =====================================================
           PHOTO DECORATIVE LINE
        ====================================================== */

        .about-photo-line {
          position: absolute;

          right: -18px;
          bottom: -18px;

          width: 75px;
          height: 75px;

          z-index: 3;

          border-right: 3px solid
            rgba(25, 135, 84, 0.55);

          border-bottom: 3px solid
            rgba(25, 135, 84, 0.55);

          border-radius: 0 0 17px 0;

          pointer-events: none;
        }

        /* =====================================================
           SOCIAL
        ====================================================== */

        .about-social {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;

          gap: 8px;

          margin-top: 27px;
        }

        .about-social-item {
          position: relative;

          width: 40px;
          height: 40px;

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

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

          border-radius: 10px;

          background: #ffffff;

          color: #5d6962;

          text-decoration: none;

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

        .about-social-item:hover {
          color: white;

          background: #198754;

          border-color: #198754;

          transform: translateY(-3px);

          box-shadow:
            0 9px 20px
            rgba(25, 135, 84, 0.18);
        }

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

        .about-content-card {
          position: relative;

          width: 100%;

          padding: 32px;

          overflow: hidden;

          background: #ffffff;

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

          border-radius: 22px;

          box-shadow:
            0 12px 38px
            rgba(25, 50, 38, 0.06),
            0 0 0 1px
            rgba(25, 135, 84, 0.04);

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

        .about-content-card:hover {
          transform: translateY(-4px);

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

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

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

        .about-content-card-line {
          position: absolute;

          top: 0;
          left: 0;

          width: 100%;
          height: 3px;

          overflow: hidden;

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

          z-index: 5;
        }

        .about-content-card-line span {
          position: absolute;

          top: 0;
          left: -45%;

          width: 45%;
          height: 3px;

          border-radius: 999px;

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

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

          animation:
            aboutCardEnergy 3.2s linear infinite;
        }

        @keyframes aboutCardEnergy {
          0% {
            left: -45%;
          }

          100% {
            left: 100%;
          }
        }

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

        .about-content {
          position: relative;

          z-index: 2;

          max-width: 700px;
        }

        .about-content-label {
          display: flex;
          align-items: center;

          gap: 9px;

          margin-bottom: 15px;

          color: #198754;

          font-size: 0.74rem;

          font-weight: 800;

          letter-spacing: 0.11em;

          text-transform: uppercase;
        }

        .about-label-line {
          width: 28px;
          height: 2px;

          flex: 0 0 28px;

          border-radius: 999px;

          background: #198754;
        }

        .about-highlight {
          margin: 0 0 13px;

          color: #17221c;

          font-size: clamp(
            1.8rem,
            3.5vw,
            2.8rem
          );

          line-height: 1.14;

          letter-spacing: -0.035em;

          font-weight: 750;

          text-align: left;
        }

        .about-intro {
          margin: 0 0 21px;

          color: #198754;

          font-size: 0.98rem;

          font-weight: 650;
        }

        /* =====================================================
           DESCRIPTION
           Tanpa garis animasi di samping
        ====================================================== */

        .about-description-wrapper {
          display: block;

          margin-bottom: 16px;
        }

        .about-description {
          min-width: 0;

          margin: 0;

          color: #68736d;

          font-size: 0.94rem;

          line-height: 1.82;

          text-align: justify;

          text-justify: inter-word;

          overflow-wrap: anywhere;
        }

        /* =====================================================
           STATISTICS
        ====================================================== */

        .about-stats {
          display: grid;

          grid-template-columns:
            repeat(3, minmax(0, 1fr));

          gap: 10px;

          margin-top: 27px;

          margin-bottom: 25px;
        }

        .about-stat {
          position: relative;

          min-width: 0;
          min-height: 122px;

          padding: 17px 17px 15px;

          display: flex;
          flex-direction: column;
          justify-content: center;

          overflow: hidden;

          background:
            linear-gradient(
              145deg,
              #ffffff,
              #f9fbfa
            );

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

          border-radius: 14px;

          box-shadow:
            0 7px 22px
            rgba(25, 50, 38, 0.045);

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

        .about-stat:hover {
          transform: translateY(-3px);

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

          background: #ffffff;

          box-shadow:
            0 14px 30px
            rgba(25, 50, 38, 0.08);
        }

        .about-stat-top {
          display: flex;

          align-items: center;

          justify-content: space-between;

          gap: 8px;

          margin-bottom: 11px;
        }

        .about-stat-number {
          color: #8d9891;

          font-size: 0.62rem;

          font-weight: 800;

          letter-spacing: 0.1em;
        }

        .about-stat-icon {
          width: 28px;
          height: 28px;

          flex: 0 0 28px;

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

          border-radius: 8px;

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

          color: #198754;

          font-size: 0.88rem;
        }

        .about-stat-value {
          margin-bottom: 4px;

          color: #17221c;

          font-size: clamp(
            1.3rem,
            2.4vw,
            1.75rem
          );

          line-height: 1;

          font-weight: 750;

          letter-spacing: -0.03em;

          white-space: nowrap;

          overflow: hidden;

          text-overflow: ellipsis;
        }

        .about-stat-label {
          color: #737d77;

          font-size: 0.73rem;

          line-height: 1.35;

          white-space: nowrap;

          overflow: hidden;

          text-overflow: ellipsis;
        }

        /* =====================================================
           STAT ANIMATED BOTTOM LINE
        ====================================================== */

        .about-stat-line {
          position: absolute;

          left: 0;
          bottom: 0;

          width: 100%;
          height: 2px;

          overflow: hidden;

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

        .about-stat-line span {
          position: absolute;

          top: 0;
          left: -40%;

          width: 40%;
          height: 2px;

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

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

          animation:
            statLineFlow 3s linear infinite;

          animation-delay:
            calc(var(--stat-index) * 0.35s);
        }

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

          100% {
            left: 100%;
          }
        }

        /* =====================================================
           BUTTON
        ====================================================== */

        .about-action {
          margin-top: 22px;
        }

        .about-btn {
          display: inline-flex;

          align-items: center;

          gap: 10px;

          min-height: 46px;

          padding: 0 6px 0 17px;

          border: 1px solid #198754;

          border-radius: 10px;

          background: #198754;

          color: white;

          text-decoration: none;

          font-size: 0.87rem;

          font-weight: 650;

          transition:
            transform 0.25s ease,
            background 0.25s ease,
            box-shadow 0.25s ease;
        }

        .about-btn:hover {
          color: white;

          background: #157347;

          transform: translateY(-2px);

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

        .about-btn-icon {
          width: 33px;
          height: 33px;

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

          border-radius: 8px;

          background:
            rgba(255, 255, 255, 0.14);
        }

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

        @media (max-width: 991.98px) {

          .about-section {
            padding: 85px 0;
          }

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

          .about-photo-area {
            margin-bottom: 5px;
          }

          .about-content-card {
            max-width: 760px;

            margin: 0 auto;

            padding: 30px;
          }

          .about-content {
            max-width: none;
          }

          .about-content-label {
            justify-content: center;
          }

          .about-highlight {
            text-align: center;
          }

          .about-intro {
            text-align: center;
          }

          .about-action {
            display: flex;

            justify-content: center;
          }

        }

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

        @media (max-width: 767.98px) {

          .about-section {
            padding: 70px 0;
          }

          .about-header {
            margin-bottom: 45px;
          }

          .about-section-title {
            font-size: 2.25rem;
          }

          .about-photo-frame {
            width: min(84vw, 330px);
          }

          .about-photo-number {
            top: -11px;
            left: -9px;

            width: 48px;
            height: 48px;

            border-radius: 11px;
          }

          .about-photo-line {
            right: -11px;
            bottom: -11px;

            width: 60px;
            height: 60px;
          }

          .about-social {
            margin-top: 23px;
          }

          .about-content-card {
            margin-top: 18px;

            padding: 25px 20px;

            border-radius: 18px;
          }

          .about-highlight {
            font-size: 1.9rem;

            line-height: 1.15;
          }

          .about-description {
            font-size: 0.92rem;

            line-height: 1.78;
          }

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

          .about-stats {
            grid-template-columns:
              repeat(3, minmax(0, 1fr));

            gap: 7px;

            margin-top: 22px;

            margin-bottom: 22px;
          }

          .about-stat {
            min-height: 108px;

            padding: 13px 9px;
          }

          .about-stat-top {
            margin-bottom: 8px;
          }

          .about-stat-number {
            font-size: 0.55rem;
          }

          .about-stat-icon {
            width: 25px;
            height: 25px;

            flex-basis: 25px;

            border-radius: 7px;

            font-size: 0.78rem;
          }

          .about-stat-value {
            font-size: 1.22rem;
          }

          .about-stat-label {
            font-size: 0.65rem;
          }

          .about-action {
            margin-top: 18px;
          }

          .about-btn {
            width: 100%;

            justify-content: space-between;
          }

        }

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

        @media (max-width: 480px) {

          .about-section {
            padding: 60px 0;
          }

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

          .about-badge {
            padding: 7px 11px;

            font-size: 0.67rem;
          }

          .about-section-title {
            font-size: 2rem;
          }

          .about-title-line {
            margin-top: 15px;
          }

          .about-photo-frame {
            width: 84vw;
          }

          .about-photo-number {
            width: 45px;
            height: 45px;

            font-size: 0.66rem;
          }

          .about-photo-line {
            right: -9px;
            bottom: -9px;

            width: 53px;
            height: 53px;
          }

          .about-social-item {
            width: 38px;
            height: 38px;
          }

          .about-content-card {
            padding: 23px 17px;

            border-radius: 17px;
          }

          .about-content-label {
            font-size: 0.68rem;

            gap: 7px;
          }

          .about-label-line {
            width: 22px;
            flex-basis: 22px;
          }

          .about-highlight {
            font-size: 1.7rem;
          }

          .about-intro {
            font-size: 0.9rem;

            margin-bottom: 18px;
          }

          .about-description {
            font-size: 0.89rem;

            line-height: 1.76;
          }

          .about-description-wrapper {
            margin-bottom: 15px;
          }

          .about-stats {
            gap: 5px;

            margin-top: 20px;

            margin-bottom: 20px;
          }

          .about-stat {
            min-height: 100px;

            padding: 11px 6px;
          }

          .about-stat-top {
            margin-bottom: 7px;
          }

          .about-stat-number {
            font-size: 0.5rem;
          }

          .about-stat-icon {
            width: 23px;
            height: 23px;

            flex-basis: 23px;

            font-size: 0.7rem;
          }

          .about-stat-value {
            font-size: 1.05rem;
          }

          .about-stat-label {
            font-size: 0.58rem;
          }

          .about-btn {
            font-size: 0.82rem;
          }

        }

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

        @media (max-width: 360px) {

          .about-section {
            padding: 55px 0;
          }

          .about-section-title {
            font-size: 1.85rem;
          }

          .about-highlight {
            font-size: 1.5rem;
          }

          .about-description {
            font-size: 0.86rem;
          }

          .about-photo-frame {
            width: 82vw;
          }

          .about-content-card {
            padding: 21px 14px;
          }

          .about-stat {
            min-height: 96px;

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

          .about-stat-value {
            font-size: 0.95rem;
          }

          .about-stat-label {
            font-size: 0.53rem;
          }

          .about-stat-icon {
            width: 21px;
            height: 21px;

            flex-basis: 21px;

            font-size: 0.65rem;
          }

          .about-btn {
            font-size: 0.79rem;
          }

        }

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

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

          *,
          *::before,
          *::after {
            transition: none !important;

            animation-duration: 0.01ms !important;

            animation-iteration-count: 1 !important;

            scroll-behavior: auto !important;
          }

        }

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