"use client";

import Link from "next/link";
import { useState } from "react";

type AdminMenu = {
  title: string;
  description: string;
  href: string;
  icon: string;
  color: string;
};

const adminMenus: AdminMenu[] = [
  {
    title: "Dashboard",
    description:
      "Ringkasan dan akses utama untuk mengelola seluruh website.",
    href: "/secure-panel",
    icon: "bi-speedometer2",
    color: "success",
  },
  {
    title: "Hero",
    description:
      "Kelola konten utama dan headline halaman depan.",
    href: "/secure-panel/hero",
    icon: "bi-stars",
    color: "success",
  },
  {
    title: "About",
    description:
      "Kelola informasi profil dan deskripsi tentang diri.",
    href: "/secure-panel/about",
    icon: "bi-person-vcard",
    color: "primary",
  },
  {
    title: "About Stats",
    description:
      "Kelola statistik seperti Projects Completed, Years Experience, dan Technologies.",
    href: "/secure-panel/about/stats",
    icon: "bi-bar-chart",
    color: "success",
  },
  {
    title: "Education",
    description:
      "Kelola riwayat pendidikan dan informasi akademik.",
    href: "/secure-panel/education",
    icon: "bi-mortarboard",
    color: "info",
  },
  {
    title: "Skills",
    description:
      "Kelola daftar kemampuan dan teknologi.",
    href: "/secure-panel/skills",
    icon: "bi-tools",
    color: "warning",
  },
  {
    title: "Experience",
    description:
      "Kelola pengalaman kerja dan profesional.",
    href: "/secure-panel/experience",
    icon: "bi-briefcase",
    color: "info",
  },
  {
    title: "Projects",
    description:
      "Kelola project dan portfolio yang ditampilkan.",
    href: "/secure-panel/projects",
    icon: "bi-code-square",
    color: "primary",
  },
  {
    title: "Certification",
    description:
      "Kelola sertifikasi profesional.",
    href: "/secure-panel/certifications",
    icon: "bi-patch-check",
    color: "success",
  },
  {
    title: "Achievement",
    description:
      "Kelola pencapaian dan penghargaan.",
    href: "/secure-panel/achievements",
    icon: "bi-trophy",
    color: "warning",
  },
  {
    title: "Services",
    description:
      "Kelola layanan dan solusi yang ditawarkan.",
    href: "/secure-panel/services",
    icon: "bi-gear-wide-connected",
    color: "secondary",
  },
  {
    title: "Gallery",
    description:
      "Kelola foto dan dokumentasi gallery.",
    href: "/secure-panel/gallery",
    icon: "bi-images",
    color: "danger",
  },
  {
    title: "Contact Social Media",
    description:
      "Kelola email, phone, location dan social media.",
    href: "/secure-panel/contact-info/list",
    icon: "bi-share-fill",
    color: "info",
  },
  {
    title: "Contact Info",
    description:
      "Kelola informasi kontak seperti alamat, nomor telepon, email dan informasi lainnya.",
    href: "/secure-panel/contact-info",
    icon: "bi-person-lines-fill",
    color: "primary",
  },
  {
    title: "Articles",
    description:
      "Kelola artikel, tulisan dan konten blog.",
    href: "/secure-panel/articles",
    icon: "bi-journal-text",
    color: "dark",
  },
  {
    title: "Contact Messages",
    description:
      "Lihat dan kelola pesan yang dikirim melalui contact form.",
    href: "/secure-panel/contact-messages",
    icon: "bi-envelope",
    color: "success",
  },
  {
    title: "Contact User",
    description:
      "Kelola informasi dan data pengguna yang berhubungan dengan website.",
    href: "/secure-panel/contact-users",
    icon: "bi-people-fill",
    color: "primary",
  },
];

export default function AdminPage() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const handleLogout = () => {
    /*
     * Jangan mengubah backend.
     * Untuk sementara logout diarahkan ke halaman login admin.
     *
     * Jika nanti sistem authentication kamu mempunyai
     * endpoint logout/session, bagian ini tinggal disesuaikan.
     */
    window.location.href = "/secure-panel/login";
  };

  return (
    <>
      <style>{`
        .admin-page {
          min-height: 100vh;
          background:
            radial-gradient(
              circle at top right,
              rgba(25, 135, 84, 0.08),
              transparent 30%
            ),
            radial-gradient(
              circle at bottom left,
              rgba(13, 110, 253, 0.05),
              transparent 30%
            ),
            var(--bs-body-bg);
        }

        /* =========================
           SIDEBAR
        ========================= */

        .admin-sidebar {
          position: fixed;
          top: 0;
          left: 0;
          width: 270px;
          height: 100vh;
          z-index: 1050;
          background: var(--bs-body-bg);
          border-right: 1px solid var(--bs-border-color);
          display: flex;
          flex-direction: column;
          transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
        }

        .sidebar-brand {
          height: 78px;
          display: flex;
          align-items: center;
          padding: 0 24px;
          border-bottom: 1px solid var(--bs-border-color);
        }

        .brand-icon {
          width: 42px;
          height: 42px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(
            135deg,
            rgba(25, 135, 84, 0.16),
            rgba(25, 135, 84, 0.06)
          );
          color: #198754;
          animation: brandPulse 3s ease-in-out infinite;
        }

        @keyframes brandPulse {
          0%,
          100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
          }

          50% {
            transform: scale(1.06);
            box-shadow: 0 0 0 8px rgba(25, 135, 84, 0.05);
          }
        }

        .sidebar-brand-title {
          font-size: 1rem;
          font-weight: 800;
          letter-spacing: -0.02em;
        }

        .sidebar-brand-subtitle {
          font-size: 0.7rem;
          color: var(--bs-secondary-color);
          letter-spacing: 0.08em;
        }

        .sidebar-content {
          flex: 1;
          overflow-y: auto;
          padding: 22px 14px;
        }

        .sidebar-label {
          padding: 0 12px;
          margin-bottom: 10px;
          font-size: 0.68rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.12em;
          color: var(--bs-secondary-color);
        }

        .sidebar-menu {
          display: flex;
          flex-direction: column;
          gap: 5px;
        }

        .sidebar-link {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 11px 13px;
          border-radius: 12px;
          color: var(--bs-secondary-color);
          text-decoration: none;
          font-size: 0.88rem;
          font-weight: 600;
          transition:
            color 0.25s ease,
            background 0.25s ease,
            transform 0.25s ease;
        }

        .sidebar-link i {
          width: 22px;
          text-align: center;
          font-size: 1rem;
        }

        .sidebar-link:hover {
          color: #198754;
          background: rgba(25, 135, 84, 0.08);
          transform: translateX(4px);
        }

        .sidebar-link.active {
          color: #fff;
          background: linear-gradient(
            135deg,
            #198754,
            #157347
          );
          box-shadow:
            0 8px 20px rgba(25, 135, 84, 0.18);
        }

        .sidebar-link.active:hover {
          color: #fff;
          transform: translateX(3px);
        }

        .sidebar-bottom {
          padding: 15px;
          border-top: 1px solid var(--bs-border-color);
        }

        .logout-button {
          width: 100%;
          border: 0;
          background: transparent;
          color: var(--bs-secondary-color);
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 11px 13px;
          border-radius: 12px;
          font-size: 0.88rem;
          font-weight: 600;
          text-align: left;
          transition:
            background 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease;
        }

        .logout-button:hover {
          background: rgba(220, 53, 69, 0.08);
          color: #dc3545;
          transform: translateX(4px);
        }

        .logout-button i {
          width: 22px;
          text-align: center;
        }

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

        .admin-main {
          margin-left: 270px;
          min-height: 100vh;
          transition: margin-left 0.35s ease;
        }

        .admin-topbar {
          position: sticky;
          top: 0;
          z-index: 1000;
          min-height: 78px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          padding: 14px 34px;
          background: rgba(
            var(--bs-body-bg-rgb),
            0.82
          );
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid var(--bs-border-color);
        }

        .mobile-menu-button {
          display: none;
          width: 42px;
          height: 42px;
          border: 1px solid var(--bs-border-color);
          border-radius: 12px;
          background: var(--bs-body-bg);
          color: var(--bs-body-color);
          align-items: center;
          justify-content: center;
        }

        .topbar-status {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.78rem;
          color: var(--bs-secondary-color);
        }

        .online-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #198754;
          box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.1);
          animation: onlinePulse 2s infinite;
        }

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

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

        .dashboard-container {
          width: 100%;
          max-width: 1700px;
          margin: 0 auto;
          padding: 32px 34px 45px;
        }

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

        .dashboard-header {
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(25, 135, 84, 0.13);
          background:
            linear-gradient(
              135deg,
              rgba(25, 135, 84, 0.09),
              rgba(25, 135, 84, 0.02)
            ),
            var(--bs-body-bg);
        }

        .dashboard-header::before {
          content: "";
          position: absolute;
          width: 280px;
          height: 280px;
          right: -100px;
          top: -150px;
          border-radius: 50%;
          background: rgba(25, 135, 84, 0.08);
          animation: floatCircle 6s ease-in-out infinite;
        }

        @keyframes floatCircle {
          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }

          50% {
            transform: translateY(18px) rotate(8deg);
          }
        }

        .header-content {
          position: relative;
          z-index: 1;
        }

        .admin-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 7px 12px;
          border-radius: 999px;
          background: rgba(25, 135, 84, 0.09);
          color: #198754;
          font-size: 0.7rem;
          font-weight: 800;
          letter-spacing: 0.08em;
        }

        .status-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #198754;
          animation: onlinePulse 2s infinite;
        }

        .dashboard-title {
          letter-spacing: -0.035em;
        }

        .dashboard-description {
          max-width: 760px;
          line-height: 1.8;
          text-align: justify;
        }

        .website-button {
          position: relative;
          z-index: 2;
          border-radius: 12px;
          padding: 11px 17px;
          font-weight: 700;
          transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
        }

        .website-button:hover {
          transform: translateY(-3px);
          box-shadow:
            0 10px 25px rgba(25, 135, 84, 0.15);
        }

        /* =========================
           WELCOME
        ========================= */

        .welcome-card {
          border: 1px solid var(--bs-border-color);
          overflow: hidden;
        }

        .welcome-icon {
          width: 62px;
          height: 62px;
          border-radius: 17px;
          flex-shrink: 0;
          animation: welcomeFloat 4s ease-in-out infinite;
        }

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

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

        .welcome-description {
          line-height: 1.8;
          text-align: justify;
        }

        .module-counter {
          position: relative;
          overflow: hidden;
          border: 1px solid var(--bs-border-color);
        }

        .module-counter::after {
          content: "";
          position: absolute;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          right: -50px;
          bottom: -60px;
          background: rgba(25, 135, 84, 0.06);
        }

        .counter-number {
          line-height: 1;
          letter-spacing: -0.05em;
        }

        .counter-icon {
          animation: counterSpin 7s linear infinite;
        }

        @keyframes counterSpin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

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

        .section-heading {
          line-height: 1.3;
          letter-spacing: -0.025em;
        }

        .section-description {
          line-height: 1.7;
          text-align: justify;
        }

        /* =========================
           MODULE CARDS
        ========================= */

        .module-card-wrapper {
          animation: cardReveal 0.65s both;
        }

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

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

        .module-card {
          position: relative;
          overflow: hidden;
          border: 1px solid var(--bs-border-color) !important;
          background: var(--bs-body-bg);
          transition:
            transform 0.35s ease,
            box-shadow 0.35s ease,
            border-color 0.35s ease;
        }

        .module-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 2px;
          background: linear-gradient(
            90deg,
            transparent,
            #198754,
            transparent
          );
          transition: left 0.6s ease;
        }

        .module-card:hover::before {
          left: 100%;
        }

        .module-card:hover {
          transform: translateY(-7px);
          box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.08) !important;
          border-color: rgba(
            25,
            135,
            84,
            0.25
          ) !important;
        }

        .module-icon {
          width: 56px;
          height: 56px;
          border-radius: 16px;
          transition:
            transform 0.35s ease,
            border-radius 0.35s ease;
        }

        .module-card:hover .module-icon {
          transform: scale(1.08) rotate(-4deg);
          border-radius: 19px;
        }

        .module-arrow {
          transition:
            transform 0.3s ease,
            color 0.3s ease;
        }

        .module-card:hover .module-arrow {
          transform: translate(3px, -3px);
          color: #198754 !important;
        }

        .module-description {
          line-height: 1.75;
          text-align: justify;
          min-height: 52px;
        }

        .manage-link {
          transition: letter-spacing 0.25s ease;
        }

        .module-card:hover .manage-link {
          letter-spacing: 0.02em;
        }

        /* =========================
           QUICK ACCESS
        ========================= */

        .quick-card {
          border: 1px solid var(--bs-border-color) !important;
        }

        .quick-icon {
          animation: quickPulse 2.5s ease-in-out infinite;
        }

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

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

        .quick-buttons {
          justify-content: flex-end;
        }

        .quick-btn {
          transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
        }

        .quick-btn:hover {
          transform: translateY(-3px);
          box-shadow:
            0 7px 16px rgba(0, 0, 0, 0.07);
        }

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

        .dashboard-footer {
          text-align: center;
          padding-top: 8px;
        }

        /* =========================
           SIDEBAR OVERLAY
        ========================= */

        .sidebar-overlay {
          display: none;
        }

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

        @media (max-width: 1199.98px) {
          .admin-sidebar {
            transform: translateX(-100%);
          }

          .admin-sidebar.open {
            transform: translateX(0);
            box-shadow:
              15px 0 45px rgba(0, 0, 0, 0.12);
          }

          .admin-main {
            margin-left: 0;
          }

          .mobile-menu-button {
            display: inline-flex;
          }

          .sidebar-overlay {
            position: fixed;
            inset: 0;
            z-index: 1040;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(3px);
          }

          .sidebar-overlay.show {
            display: block;
          }

          .admin-topbar {
            padding: 14px 24px;
          }

          .dashboard-container {
            padding: 28px 24px 40px;
          }
        }

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

        @media (max-width: 767.98px) {
          .admin-topbar {
            min-height: 68px;
            padding: 12px 15px;
          }

          .dashboard-container {
            padding: 20px 15px 32px;
          }

          .dashboard-header {
            border-radius: 18px !important;
          }

          .dashboard-title {
            font-size: 2rem;
          }

          .dashboard-description {
            font-size: 0.9rem;
            text-align: justify;
          }

          .website-button {
            width: 100%;
            justify-content: center;
          }

          .welcome-card {
            border-radius: 18px !important;
          }

          .welcome-icon {
            width: 52px;
            height: 52px;
          }

          .welcome-description {
            font-size: 0.9rem;
            text-align: justify;
          }

          .module-counter {
            margin-top: 4px;
          }

          .section-description {
            text-align: justify;
            font-size: 0.88rem;
          }

          .module-card {
            border-radius: 17px !important;
          }

          .module-card .card-body {
            padding: 20px !important;
          }

          .module-description {
            min-height: auto;
            text-align: justify;
          }

          .quick-buttons {
            justify-content: flex-start;
          }

          .quick-btn {
            flex: 1 1 auto;
          }

          .topbar-status {
            display: none;
          }
        }

        @media (max-width: 420px) {
          .dashboard-title {
            font-size: 1.75rem;
          }

          .admin-badge {
            font-size: 0.61rem;
          }

          .welcome-content {
            flex-direction: column;
          }

          .quick-buttons .quick-btn {
            width: 100%;
          }
        }

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

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

      <main className="admin-page">
        {/* MOBILE OVERLAY */}
        <div
          className={`sidebar-overlay ${
            sidebarOpen ? "show" : ""
          }`}
          onClick={() => setSidebarOpen(false)}
        />

        {/* =========================
            SIDEBAR
        ========================= */}

        <aside
          className={`admin-sidebar ${
            sidebarOpen ? "open" : ""
          }`}
        >
          <div className="sidebar-brand">
            <div className="brand-icon me-3">
              <i className="bi bi-grid-1x2-fill fs-5"></i>
            </div>

            <div>
              <div className="sidebar-brand-title">
                GlobalValueTech
              </div>

              <div className="sidebar-brand-subtitle">
                ADMIN PANEL
              </div>
            </div>
          </div>

          <div className="sidebar-content">
            <div className="sidebar-label">
              Management
            </div>

            <nav className="sidebar-menu">
              {adminMenus.map((menu, index) => (
                <Link
                  key={menu.href}
                  href={menu.href}
                  className={`sidebar-link ${
                    index === 0 ? "active" : ""
                  }`}
                  onClick={() => setSidebarOpen(false)}
                >
                  <i className={`bi ${menu.icon}`}></i>
                  <span>{menu.title}</span>
                </Link>
              ))}
            </nav>
          </div>

          <div className="sidebar-bottom">
            <button
              type="button"
              className="logout-button"
              onClick={handleLogout}
            >
              <i className="bi bi-box-arrow-left"></i>
              <span>Logout</span>
            </button>
          </div>
        </aside>

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

        <section className="admin-main">
          {/* TOPBAR */}

          <header className="admin-topbar">
            <div className="d-flex align-items-center gap-3">
              <button
                type="button"
                className="mobile-menu-button"
                onClick={() =>
                  setSidebarOpen(!sidebarOpen)
                }
                aria-label="Open navigation"
              >
                <i className="bi bi-list fs-4"></i>
              </button>

              <div>
                <div className="fw-bold">
                  Admin Dashboard
                </div>

                <div className="small text-secondary">
                  GlobalValueTech Content Management
                </div>
              </div>
            </div>

            <div className="d-flex align-items-center gap-3">
              <div className="topbar-status">
                <span className="online-dot"></span>
                <span>System Online</span>
              </div>

              <Link
                href="/"
                className="btn btn-sm btn-outline-success rounded-3"
              >
                <i className="bi bi-globe2 me-2"></i>
                Website
              </Link>
            </div>
          </header>

          {/* CONTENT */}

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

            <div className="dashboard-header rounded-4 shadow-sm mb-4 mb-xl-5">
              <div className="header-content p-4 p-md-5">
                <div className="row align-items-center g-4">
                  <div className="col-lg">
                    <div className="admin-badge mb-3">
                      <span className="status-dot"></span>

                      ADMIN CONTROL CENTER
                    </div>

                    <h1 className="dashboard-title fw-bold display-6 mb-2">
                      Dashboard Admin
                    </h1>

                    <p className="dashboard-description text-secondary mb-0">
                      Kelola seluruh konten website
                      GlobalValueTech dari satu tempat dengan
                      mudah, terstruktur, dan efisien.
                    </p>
                  </div>

                  <div className="col-lg-auto">
                    <Link
                      href="/"
                      className="website-button btn btn-success d-inline-flex align-items-center"
                    >
                      <i className="bi bi-globe2 me-2"></i>
                      Lihat Website
                      <i className="bi bi-arrow-up-right ms-2"></i>
                    </Link>
                  </div>
                </div>
              </div>
            </div>

            {/* WELCOME */}

            <div className="welcome-card card border-0 shadow-sm rounded-4 mb-4 mb-xl-5">
              <div className="card-body p-4 p-md-5">
                <div className="row align-items-center g-4">
                  <div className="col-xl-8">
                    <div className="d-flex align-items-start gap-3 gap-md-4 welcome-content">
                      <div className="welcome-icon bg-success-subtle text-success d-flex align-items-center justify-content-center">
                        <i className="bi bi-grid-1x2-fill fs-3"></i>
                      </div>

                      <div>
                        <div className="small fw-semibold text-success text-uppercase mb-1">
                          Control Panel
                        </div>

                        <h3 className="fw-bold mb-2">
                          Selamat datang di Admin GlobalValueTech
                        </h3>

                        <p className="welcome-description text-secondary mb-0">
                          Gunakan menu dashboard untuk
                          mengelola seluruh konten website,
                          mulai dari Hero, About, Education,
                          Skills, Experience, Projects,
                          Certification, Achievement,
                          Services, Gallery, Contact
                          Information, hingga Articles.
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="col-xl-4">
                    <div className="module-counter bg-body-tertiary rounded-4 p-4">
                      <div className="d-flex align-items-center justify-content-between">
                        <div>
                          <div className="small text-secondary mb-1">
                            Total Modul
                          </div>

                          <div className="counter-number display-5 fw-bold text-success">
                            {adminMenus.length}
                          </div>

                          <div className="small text-secondary mt-1">
                            Content management
                          </div>
                        </div>

                        <div className="counter-icon text-success">
                          <i className="bi bi-database-check fs-1"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* SECTION HEADER */}

            <div className="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-3 mb-lg-4">
              <div>
                <div className="small fw-bold text-success text-uppercase mb-1">
                  Website Content
                </div>

                <h4 className="section-heading fw-bold mb-1">
                  Content Management
                </h4>

                <p className="section-description text-secondary mb-0">
                  Pilih bagian website yang ingin kamu
                  kelola melalui dashboard administrator.
                </p>
              </div>

              <div className="small text-secondary">
                <i className="bi bi-grid-3x3-gap me-1"></i>
                {adminMenus.length} Modules
              </div>
            </div>

            {/* MODULE GRID */}

            <div className="row g-3 g-lg-4">
              {adminMenus.map((menu, index) => (
                <div
                  key={menu.href}
                  className="col-12 col-sm-6 col-xl-4 module-card-wrapper"
                  style={{
                    animationDelay: `${index * 70}ms`,
                  }}
                >
                  <Link
                    href={menu.href}
                    className="text-decoration-none"
                  >
                    <div className="module-card card h-100 border-0 shadow-sm rounded-4">
                      <div className="card-body p-4 d-flex flex-column">
                        <div className="d-flex align-items-start justify-content-between gap-3">
                          <div
                            className={`module-icon bg-${menu.color}-subtle text-${menu.color} d-flex align-items-center justify-content-center flex-shrink-0`}
                          >
                            <i
                              className={`bi ${menu.icon} fs-4`}
                            ></i>
                          </div>

                          <i className="module-arrow bi bi-arrow-up-right text-secondary"></i>
                        </div>

                        <div className="mt-4 d-flex flex-column flex-grow-1">
                          <h5 className="fw-bold text-body mb-2">
                            {menu.title}
                          </h5>

                          <p className="module-description text-secondary small mb-3">
                            {menu.description}
                          </p>

                          <div className="mt-auto">
                            <span className="manage-link small fw-semibold text-success">
                              Kelola {menu.title}
                              <i className="bi bi-arrow-right ms-2"></i>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </Link>
                </div>
              ))}
            </div>

            {/* QUICK ACCESS */}

            <div className="mt-4 mt-xl-5">
              <div className="quick-card card border-0 shadow-sm rounded-4">
                <div className="card-body p-4">
                  <div className="row align-items-center g-4">
                    <div className="col-lg">
                      <div className="d-flex align-items-center gap-3">
                        <div className="quick-icon text-success flex-shrink-0">
                          <i className="bi bi-lightning-charge-fill fs-2"></i>
                        </div>

                        <div>
                          <h6 className="fw-bold mb-1">
                            Quick Access
                          </h6>

                          <p className="text-secondary small mb-0">
                            Akses cepat ke beberapa bagian
                            penting website.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="col-lg-auto">
                      <div className="quick-buttons d-flex flex-wrap gap-2">
                        <Link
                          href="/secure-panel/hero"
                          className="quick-btn btn btn-sm btn-outline-success"
                        >
                          <i className="bi bi-stars me-1"></i>
                          Hero
                        </Link>

                        <Link
                          href="/secure-panel/education"
                          className="quick-btn btn btn-sm btn-outline-info"
                        >
                          <i className="bi bi-mortarboard me-1"></i>
                          Education
                        </Link>

                        <Link
                          href="/secure-panel/projects"
                          className="quick-btn btn btn-sm btn-outline-primary"
                        >
                          <i className="bi bi-code-square me-1"></i>
                          Projects
                        </Link>

                        <Link
                          href="/secure-panel/articles"
                          className="quick-btn btn btn-sm btn-outline-dark"
                        >
                          <i className="bi bi-journal-text me-1"></i>
                          Blog
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* FOOTER */}

            <div className="dashboard-footer mt-4 mt-xl-5">
              <small className="text-secondary">
                <i className="bi bi-shield-check me-1"></i>
                GlobalValueTech Admin Panel
              </small>
            </div>
          </div>
        </section>
      </main>
    </>
  );
}