"use client";

import {
  ChangeEvent,
  FormEvent,
  useEffect,
  useState,
} from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";

type PreviewImage = {
  id: string;
  file: File;
  preview: string;
};

type UploadedImage = {
  url: string;
  fileName: string;
};

export default function CreateProjectPage() {
  const router = useRouter();

  const [form, setForm] = useState({
    title: "",
    slug: "",
    description: "",
    projectUrl: "",
    technologies: "",
    startDate: "",
    endDate: "",
    featured: false,
  });

  const [images, setImages] = useState<PreviewImage[]>([]);
  const [loading, setLoading] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  /* =========================================================
     HANDLE FORM
  ========================================================= */

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value, type } = e.target;

    setForm((prev) => ({
      ...prev,
      [name]:
        type === "checkbox"
          ? (e.target as HTMLInputElement).checked
          : value,
    }));
  };

  /* =========================================================
     GENERATE SLUG
  ========================================================= */

  const generateSlug = (title: string) => {
    return title
      .toLowerCase()
      .trim()
      .replace(/[^\w\s-]/g, "")
      .replace(/\s+/g, "-")
      .replace(/-+/g, "-");
  };

  const handleTitleChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const title = e.target.value;

    setForm((prev) => ({
      ...prev,
      title,
      slug: generateSlug(title),
    }));
  };

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

  const handleImageChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const selectedFiles = Array.from(
      e.target.files || []
    );

    if (selectedFiles.length === 0) {
      return;
    }

    const allowedTypes = [
      "image/jpeg",
      "image/jpg",
      "image/png",
      "image/webp",
      "image/gif",
    ];

    const validImages: PreviewImage[] = [];

    for (const file of selectedFiles) {
      if (!allowedTypes.includes(file.type)) {
        alert(
          `${file.name} tidak didukung. Gunakan JPG, JPEG, PNG, WebP, atau GIF.`
        );
        continue;
      }

      if (file.size > 5 * 1024 * 1024) {
        alert(
          `${file.name} terlalu besar. Maksimal 5 MB per gambar.`
        );
        continue;
      }

      const duplicate = images.some(
        (item) =>
          item.file.name === file.name &&
          item.file.size === file.size &&
          item.file.lastModified === file.lastModified
      );

      const duplicateInCurrentSelection =
        validImages.some(
          (item) =>
            item.file.name === file.name &&
            item.file.size === file.size &&
            item.file.lastModified === file.lastModified
        );

      if (
        duplicate ||
        duplicateInCurrentSelection
      ) {
        continue;
      }

      validImages.push({
        id: `${Date.now()}-${Math.random()
          .toString(36)
          .substring(2, 11)}`,
        file,
        preview: URL.createObjectURL(file),
      });
    }

    if (validImages.length > 0) {
      setImages((prev) => [
        ...prev,
        ...validImages,
      ]);
    }

    e.target.value = "";
  };

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

  const removeImage = (id: string) => {
    setImages((prev) => {
      const target = prev.find(
        (item) => item.id === id
      );

      if (target) {
        URL.revokeObjectURL(target.preview);
      }

      return prev.filter(
        (item) => item.id !== id
      );
    });
  };

  /* =========================================================
     CLEANUP PREVIEW
  ========================================================= */

  useEffect(() => {
    return () => {
      images.forEach((item) => {
        URL.revokeObjectURL(item.preview);
      });
    };
  }, [images]);

  /* =========================================================
     UPLOAD ALL IMAGES
  ========================================================= */

  const uploadImages = async (): Promise<
    UploadedImage[]
  > => {
    if (images.length === 0) {
      return [];
    }

    const formData = new FormData();

    /*
     * PENTING:
     * Semua file menggunakan field "files".
     */
    images.forEach((item) => {
      formData.append("files", item.file);
    });

    const response = await fetch(
      "/api/projects/upload",
      {
        method: "POST",
        body: formData,
      }
    );

    let result: any = null;

    try {
      result = await response.json();
    } catch {
      throw new Error(
        "Response upload gambar tidak valid."
      );
    }

    if (
      !response.ok ||
      !result?.success
    ) {
      throw new Error(
        result?.message ||
          "Gagal mengupload gambar."
      );
    }

    if (
      !Array.isArray(result.data)
    ) {
      throw new Error(
        "Data hasil upload gambar tidak valid."
      );
    }

    const uploadedImages =
      result.data as UploadedImage[];

    /*
     * Pastikan SEMUA gambar berhasil
     * diupload sebelum project dibuat.
     */
    if (
      uploadedImages.length !== images.length
    ) {
      throw new Error(
        `Hanya ${uploadedImages.length} dari ${images.length} gambar yang berhasil diupload. Project tidak dilanjutkan.`
      );
    }

    return uploadedImages;
  };

  /* =========================================================
     CREATE PROJECT
  ========================================================= */

  const handleSubmit = async (
    e: FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();

    if (loading) {
      return;
    }

    const title = form.title.trim();
    const slug = form.slug.trim();

    if (!title) {
      alert("Judul project wajib diisi.");
      return;
    }

    if (!slug) {
      alert("Slug project wajib diisi.");
      return;
    }

    if (images.length === 0) {
      alert(
        "Minimal satu gambar project harus dipilih."
      );
      return;
    }

    setLoading(true);

    try {
      /*
       * =====================================================
       * STEP 1
       * UPLOAD SEMUA GAMBAR
       * =====================================================
       */

      const uploadedImages =
        await uploadImages();

      if (
        uploadedImages.length === 0
      ) {
        throw new Error(
          "Tidak ada gambar yang berhasil diupload."
        );
      }

      /*
       * Gambar pertama menjadi gambar utama.
       */
      const mainImage =
        uploadedImages[0].url;

      /*
       * =====================================================
       * STEP 2
       * CREATE PROJECT
       * =====================================================
       */

      const projectPayload = {
        title,
        slug,
        description:
          form.description.trim() || null,
        image: mainImage,
        projectUrl:
          form.projectUrl.trim() || null,
        technologies:
          form.technologies.trim() || null,
        startDate:
          form.startDate || null,
        endDate:
          form.endDate || null,
        featured: form.featured,
      };

      const response = await fetch(
        "/api/projects",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(
            projectPayload
          ),
        }
      );

      let result: any = null;

      try {
        result = await response.json();
      } catch {
        throw new Error(
          "Response create project tidak valid."
        );
      }

      if (
        !response.ok ||
        !result?.success
      ) {
        throw new Error(
          result?.message ||
            "Gagal membuat Project."
        );
      }

      if (
        !result?.data?.id
      ) {
        throw new Error(
          "Project berhasil dibuat tetapi ID project tidak ditemukan."
        );
      }

      const projectId =
        result.data.id;

      /*
       * =====================================================
       * STEP 3
       * SIMPAN SEMUA GAMBAR KE PROJECT
       * =====================================================
       *
       * PERBAIKAN UTAMA:
       *
       * Sebelumnya PUT hanya mengirim:
       *
       * {
       *   images: [...]
       * }
       *
       * Jika API PUT melakukan validasi title,
       * maka muncul:
       *
       * "title wajib diisi"
       *
       * Padahal project sudah dibuat.
       *
       * Sekarang seluruh data project ikut dikirim.
       */

      const imagePayload = {
        title,
        slug,
        description:
          form.description.trim() || null,
        image: mainImage,
        projectUrl:
          form.projectUrl.trim() || null,
        technologies:
          form.technologies.trim() || null,
        startDate:
          form.startDate || null,
        endDate:
          form.endDate || null,
        featured: form.featured,

        /*
         * Semua gambar dikirim.
         */
        images: uploadedImages.map(
          (item) => item.url
        ),
      };

      const imageResponse =
        await fetch(
          `/api/projects/${projectId}`,
          {
            method: "PUT",
            headers: {
              "Content-Type":
                "application/json",
            },
            body: JSON.stringify(
              imagePayload
            ),
          }
        );

      let imageResult: any = null;

      try {
        imageResult =
          await imageResponse.json();
      } catch {
        throw new Error(
          "Response penyimpanan gambar tidak valid."
        );
      }

      if (
        !imageResponse.ok ||
        !imageResult?.success
      ) {
        throw new Error(
          imageResult?.message ||
            "Project berhasil dibuat tetapi gambar gagal disimpan."
        );
      }

      /*
       * =====================================================
       * SUCCESS
       * =====================================================
       */

      alert(
        `Project berhasil ditambahkan dengan ${uploadedImages.length} gambar.`
      );

      router.push(
        "/secure-panel/projects"
      );

      router.refresh();
    } catch (error) {
      console.error(
        "CREATE PROJECT:",
        error
      );

      alert(
        error instanceof Error
          ? error.message
          : "Gagal menambahkan project."
      );
    } finally {
      setLoading(false);
    }
  };

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

  const closeSidebar = () => {
    setSidebarOpen(false);
  };

  /* =========================================================
     PAGE
  ========================================================= */

  return (
    <>
      <style>{`
        * {
          box-sizing: border-box;
        }

        html,
        body {
          margin: 0;
          padding: 0;
          max-width: 100%;
          overflow-x: hidden;
        }

        body {
          background: #f5f7fb;
        }

        button,
        a,
        input,
        textarea,
        select {
          -webkit-tap-highlight-color: transparent;
        }

        .text-justify,
        .page-description,
        .form-header-description,
        .field-help,
        .upload-description,
        .image-info,
        .featured-description {
          text-align: justify;
          text-justify: inter-word;
        }

        .create-project-page {
          min-height: 100vh;
          width: 100%;
          background: #f5f7fb;
          color: #1f2937;
        }

        .admin-layout {
          min-height: 100vh;
          display: flex;
          position: relative;
        }

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

        .admin-sidebar {
          width: 270px;
          min-width: 270px;
          height: 100vh;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1050;
          background: #ffffff;
          border-right: 1px solid #e8ecf1;
          transition: transform .3s ease;
        }

        .sidebar-inner {
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 24px 16px;
          overflow-y: auto;
          overflow-x: hidden;
        }

        .sidebar-inner::-webkit-scrollbar {
          width: 5px;
        }

        .sidebar-inner::-webkit-scrollbar-thumb {
          background: #d9e1dc;
          border-radius: 20px;
        }

        .sidebar-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 4px 10px 28px;
          margin-bottom: 22px;
          border-bottom: 1px solid #edf0f4;
        }

        .brand-icon {
          width: 42px;
          height: 42px;
          min-width: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          background: linear-gradient(
            135deg,
            #198754,
            #20c997
          );
          color: #ffffff;
          font-size: 18px;
          box-shadow:
            0 8px 20px rgba(25,135,84,.2);
        }

        .brand-text {
          min-width: 0;
        }

        .brand-text strong {
          display: block;
          color: #17202a;
          font-size: 16px;
          line-height: 1.2;
        }

        .brand-text span {
          display: block;
          margin-top: 3px;
          color: #8b95a5;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: .08em;
          text-transform: uppercase;
        }

        .sidebar-close {
          margin-left: auto;
          border: 0;
          background: transparent;
          color: #7b8492;
          font-size: 17px;
          cursor: pointer;
        }

        .sidebar-section-label {
          padding: 0 12px;
          margin-bottom: 8px;
          color: #9aa3af;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .1em;
        }

        .sidebar-nav {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .sidebar-link {
          min-height: 44px;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: 11px;
          color: #697386;
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          transition: .2s ease;
        }

        .sidebar-link:hover {
          background: #f0f8f4;
          color: #198754;
          transform: translateX(2px);
        }

        .sidebar-link.active {
          background: linear-gradient(
            90deg,
            rgba(25,135,84,.12),
            rgba(25,135,84,.06)
          );
          color: #198754;
          font-weight: 700;
        }

        .sidebar-link-icon {
          width: 23px;
          min-width: 23px;
          text-align: center;
          font-size: 16px;
        }

        .sidebar-bottom {
          margin-top: auto;
          padding-top: 18px;
          border-top: 1px solid #edf0f4;
        }

        .sidebar-bottom a {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 11px 12px;
          border-radius: 10px;
          color: #6b7280;
          text-decoration: none;
          font-size: 13px;
          transition: .2s ease;
        }

        .sidebar-bottom a:hover {
          background: #f5f7fa;
          color: #198754;
        }

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

        .admin-main {
          width: calc(100% - 270px);
          margin-left: 270px;
          min-width: 0;
        }

        /* =====================================================
           TOPBAR
        ===================================================== */

        .admin-topbar {
          width: 100%;
          height: 76px;
          position: sticky;
          top: 0;
          z-index: 900;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
          padding: 0 34px;
          background: rgba(255,255,255,.96);
          border-bottom: 1px solid #e9edf2;
          backdrop-filter: blur(12px);
        }

        .topbar-left {
          display: flex;
          align-items: center;
          gap: 14px;
          min-width: 0;
        }

        .mobile-menu-button {
          width: 40px;
          height: 40px;
          border: 1px solid #e2e7ed;
          background: #ffffff;
          border-radius: 10px;
          color: #344054;
          font-size: 18px;
          cursor: pointer;
        }

        .mobile-menu-button:hover {
          color: #198754;
          background: #f5f8f6;
        }

        .topbar-label {
          margin-bottom: 3px;
          color: #9aa3af;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .1em;
        }

        .topbar-title {
          max-width: 500px;
          overflow: hidden;
          color: #17202a;
          font-size: 15px;
          font-weight: 700;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .topbar-right {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-shrink: 0;
        }

        .topbar-website,
        .topbar-logout {
          min-height: 40px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 8px 13px;
          border-radius: 10px;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
          white-space: nowrap;
          transition: .2s ease;
        }

        .topbar-website {
          color: #667085;
          border: 1px solid #e4e8ed;
          background: #ffffff;
        }

        .topbar-website:hover {
          color: #198754;
          border-color: #b7ddca;
          background: #f4fbf7;
        }

        .topbar-logout {
          color: #dc3545;
          border: 1px solid #f1c4c9;
          background: #ffffff;
        }

        .topbar-logout:hover {
          color: #dc3545;
          background: #fff5f6;
        }

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

        .admin-content {
          width: 100%;
          max-width: 1550px;
          margin: 0 auto;
          padding: 34px;
          animation: contentEnter .45s ease both;
        }

        @keyframes contentEnter {
          from {
            opacity: 0;
            transform: translateY(10px);
          }

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

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

        .page-header {
          margin-bottom: 28px;
        }

        .back-link {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          margin-bottom: 17px;
          color: #7b8492;
          text-decoration: none;
          font-size: 11px;
          font-weight: 600;
          transition: .2s ease;
        }

        .back-link:hover {
          color: #198754;
        }

        .page-eyebrow {
          display: flex;
          align-items: center;
          gap: 7px;
          margin-bottom: 8px;
          color: #198754;
          font-size: 10px;
          font-weight: 800;
          letter-spacing: .11em;
        }

        .page-eyebrow-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #20c997;
        }

        .page-title-row {
          display: flex;
          align-items: flex-start;
          gap: 15px;
        }

        .page-title-icon {
          width: 56px;
          height: 56px;
          min-width: 56px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          background: linear-gradient(
            135deg,
            rgba(25,135,84,.13),
            rgba(32,201,151,.08)
          );
          color: #198754;
          font-size: 23px;
        }

        .page-title {
          margin: 0;
          color: #182230;
          font-size: clamp(26px,3vw,35px);
          font-weight: 800;
          letter-spacing: -.025em;
          line-height: 1.15;
        }

        .page-description {
          max-width: 820px;
          margin: 8px 0 0;
          color: #7a8493;
          font-size: 13px;
          line-height: 1.8;
        }

        /* =====================================================
           FORM CONTAINER
        ===================================================== */

        .form-container {
          overflow: hidden;
          background: #ffffff;
          border: 1px solid #e5e9ee;
          border-radius: 18px;
          box-shadow:
            0 8px 30px rgba(20,30,45,.045),
            0 2px 8px rgba(20,30,45,.025);
        }

        .form-container-header {
          min-height: 76px;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 17px 23px;
          border-bottom: 1px solid #edf0f3;
          background: linear-gradient(
            180deg,
            #ffffff,
            #fcfdfd
          );
        }

        .form-header-icon {
          width: 41px;
          height: 41px;
          min-width: 41px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          background: #f0f8f4;
          color: #198754;
          font-size: 17px;
        }

        .form-header-title {
          margin: 0;
          color: #202b38;
          font-size: 14px;
          font-weight: 800;
        }

        .form-header-description {
          margin: 3px 0 0;
          color: #9aa3af;
          font-size: 11px;
          line-height: 1.7;
        }

        .form-container-body {
          padding: 28px;
        }

        /* =====================================================
           FORM SECTIONS
        ===================================================== */

        .form-section {
          padding-bottom: 26px;
          margin-bottom: 26px;
          border-bottom: 1px solid #edf0f3;
        }

        .form-section:last-child {
          padding-bottom: 0;
          margin-bottom: 0;
          border-bottom: 0;
        }

        .form-section-title {
          display: flex;
          align-items: center;
          gap: 9px;
          margin-bottom: 18px;
          color: #263241;
          font-size: 13px;
          font-weight: 800;
        }

        .form-section-title i {
          color: #198754;
          font-size: 15px;
        }

        .form-label-custom {
          display: block;
          margin-bottom: 7px;
          color: #344054;
          font-size: 11px;
          font-weight: 700;
        }

        .form-control-custom {
          width: 100%;
          min-height: 43px;
          padding: 10px 13px;
          color: #344054;
          background: #ffffff;
          border: 1px solid #dfe4ea;
          border-radius: 9px;
          outline: none;
          font-size: 12px;
          transition: .2s ease;
        }

        .form-control-custom::placeholder {
          color: #a5adb8;
        }

        .form-control-custom:focus {
          border-color: #72bd97;
          box-shadow:
            0 0 0 3px rgba(25,135,84,.09);
        }

        textarea.form-control-custom {
          min-height: 110px;
          resize: vertical;
          line-height: 1.8;
          text-align: justify;
          text-justify: inter-word;
        }

        .field-help {
          display: block;
          margin-top: 6px;
          color: #98a2b3;
          font-size: 10px;
          line-height: 1.7;
        }

        .input-wrapper {
          position: relative;
        }

        .input-icon {
          position: absolute;
          top: 50%;
          left: 13px;
          z-index: 2;
          color: #98a2b3;
          font-size: 14px;
          transform: translateY(-50%);
          pointer-events: none;
        }

        .input-with-icon {
          padding-left: 38px;
        }

        /* =====================================================
           UPLOAD
        ===================================================== */

        .upload-box {
          position: relative;
          padding: 22px;
          border: 1px dashed #b9d9c7;
          border-radius: 13px;
          background: #f8fcfa;
          transition: .2s ease;
        }

        .upload-box:hover {
          border-color: #198754;
          background: #f4fbf7;
        }

        .upload-icon {
          width: 42px;
          height: 42px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 11px;
          background: #eaf7f0;
          color: #198754;
          font-size: 18px;
        }

        .upload-title {
          margin: 0 0 3px;
          color: #344054;
          font-size: 12px;
          font-weight: 800;
        }

        .upload-description {
          max-width: 700px;
          margin: 0 0 13px;
          color: #98a2b3;
          font-size: 10px;
          line-height: 1.7;
        }

        .upload-input {
          width: 100%;
          padding: 8px;
          color: #667085;
          background: #ffffff;
          border: 1px solid #dfe4ea;
          border-radius: 8px;
          font-size: 10px;
        }

        .upload-input:focus {
          outline: none;
          border-color: #72bd97;
          box-shadow:
            0 0 0 3px rgba(25,135,84,.09);
        }

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

        .image-grid {
          display: grid;
          grid-template-columns:
            repeat(4,minmax(0,1fr));
          gap: 12px;
          margin-top: 17px;
        }

        .image-card {
          overflow: hidden;
          background: #ffffff;
          border: 1px solid #e3e7eb;
          border-radius: 12px;
          box-shadow:
            0 4px 14px rgba(20,30,45,.035);
        }

        .image-preview {
          position: relative;
          height: 155px;
          background: #f4f6f8;
        }

        .image-preview img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }

        .image-remove {
          position: absolute;
          top: 8px;
          right: 8px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0;
          border-radius: 8px;
          color: #ffffff;
          background: rgba(220,53,69,.9);
          cursor: pointer;
          transition: .2s ease;
        }

        .image-remove:hover:not(:disabled) {
          background: #dc3545;
          transform: scale(1.04);
        }

        .image-remove:disabled {
          opacity: .55;
          cursor: not-allowed;
        }

        .main-image-badge {
          position: absolute;
          left: 8px;
          bottom: 8px;
          padding: 5px 8px;
          border-radius: 7px;
          color: #ffffff;
          background: #198754;
          font-size: 8px;
          font-weight: 800;
        }

        .image-card-footer {
          min-height: 38px;
          display: flex;
          align-items: center;
          padding: 8px 10px;
        }

        .image-card-footer span {
          width: 100%;
          overflow: hidden;
          color: #7b8492;
          font-size: 9px;
          font-weight: 600;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .image-info {
          display: flex;
          align-items: flex-start;
          gap: 7px;
          margin-top: 13px;
          padding: 11px 13px;
          color: #667085;
          background: #f8fafb;
          border: 1px solid #edf0f3;
          border-radius: 9px;
          font-size: 10px;
          line-height: 1.7;
        }

        .image-info i {
          flex-shrink: 0;
          color: #198754;
          font-size: 14px;
        }

        .image-info strong {
          color: #344054;
        }

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

        .featured-box {
          padding: 14px 15px;
          border: 1px solid #e4e8ed;
          border-radius: 11px;
          background: #fbfcfd;
        }

        .featured-row {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          cursor: pointer;
        }

        .featured-checkbox {
          width: 17px;
          height: 17px;
          margin-top: 1px;
          accent-color: #198754;
          cursor: pointer;
          flex-shrink: 0;
        }

        .featured-title {
          color: #344054;
          font-size: 11px;
          font-weight: 800;
        }

        .featured-description {
          margin-top: 3px;
          color: #98a2b3;
          font-size: 9px;
          line-height: 1.7;
        }

        /* =====================================================
           ACTIONS
        ===================================================== */

        .form-actions {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
          padding-top: 22px;
          border-top: 1px solid #edf0f3;
        }

        .cancel-button,
        .save-button {
          min-height: 43px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          padding: 10px 16px;
          border-radius: 9px;
          text-decoration: none;
          font-size: 11px;
          font-weight: 700;
          transition: .2s ease;
        }

        .cancel-button {
          color: #667085;
          border: 1px solid #dfe4ea;
          background: #ffffff;
        }

        .cancel-button:hover {
          color: #344054;
          background: #f8fafb;
        }

        .save-button {
          min-width: 170px;
          color: #ffffff;
          border: 1px solid #198754;
          background: linear-gradient(
            135deg,
            #198754,
            #20a46c
          );
          box-shadow:
            0 7px 17px rgba(25,135,84,.15);
          cursor: pointer;
        }

        .save-button:hover:not(:disabled) {
          color: #ffffff;
          transform: translateY(-1px);
          box-shadow:
            0 10px 22px rgba(25,135,84,.22);
        }

        .save-button:disabled {
          opacity: .65;
          cursor: not-allowed;
        }

        .actions-right {
          display: flex;
          align-items: center;
          gap: 8px;
        }

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

        .admin-page-footer {
          padding: 20px 2px 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 15px;
          color: #9aa3af;
          font-size: 10px;
        }

        .admin-page-footer div {
          display: flex;
          align-items: center;
          gap: 7px;
        }

        .admin-page-footer i {
          color: #198754;
        }

        .admin-page-footer a {
          color: #7b8492;
          text-decoration: none;
          font-weight: 600;
        }

        .admin-page-footer a:hover {
          color: #198754;
        }

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

        .sidebar-overlay {
          display: none;
        }

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

        @media (max-width: 1199.98px) {
          .admin-content {
            padding: 28px;
          }

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

        /* =====================================================
           OFF CANVAS
        ===================================================== */

        @media (max-width: 991.98px) {
          .admin-sidebar {
            transform: translateX(-100%);
            box-shadow:
              15px 0 40px rgba(20,30,45,.1);
          }

          .admin-sidebar.open {
            transform: translateX(0);
          }

          .admin-main {
            width: 100%;
            margin-left: 0;
          }

          .sidebar-overlay {
            position: fixed;
            inset: 0;
            z-index: 1040;
            display: block;
            background: rgba(15,23,42,.35);
            backdrop-filter: blur(2px);
          }

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

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

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

        @media (max-width: 767.98px) {
          .admin-topbar {
            height: 68px;
            padding: 0 16px;
          }

          .admin-content {
            padding: 22px 16px;
          }

          .topbar-title {
            font-size: 13px;
          }

          .page-header {
            margin-bottom: 22px;
          }

          .page-title-row {
            gap: 12px;
          }

          .page-title-icon {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 13px;
            font-size: 20px;
          }

          .page-title {
            font-size: 26px;
          }

          .page-description {
            max-width: 100%;
            font-size: 11px;
            line-height: 1.8;
          }

          .form-container {
            border-radius: 15px;
          }

          .form-container-header {
            padding: 15px 16px;
          }

          .form-container-body {
            padding: 20px 16px;
          }

          .form-header-description {
            line-height: 1.7;
          }

          .image-grid {
            grid-template-columns:
              repeat(2,minmax(0,1fr));
          }

          .form-actions {
            align-items: stretch;
            flex-direction: column-reverse;
          }

          .actions-right {
            width: 100%;
          }

          .cancel-button,
          .save-button {
            flex: 1;
            width: 100%;
          }

          .admin-page-footer {
            align-items: flex-start;
            flex-direction: column;
          }
        }

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

        @media (max-width: 575.98px) {
          .admin-content {
            padding: 19px 12px;
          }

          .admin-topbar {
            padding: 0 12px;
          }

          .topbar-left {
            gap: 9px;
            min-width: 0;
          }

          .topbar-left > div:last-child {
            min-width: 0;
          }

          .topbar-right {
            gap: 6px;
          }

          .topbar-website,
          .topbar-logout {
            width: 38px;
            height: 38px;
            min-height: 38px;
            padding: 0;
            border-radius: 9px;
          }

          .page-title-icon {
            width: 43px;
            height: 43px;
            min-width: 43px;
            border-radius: 11px;
            font-size: 17px;
          }

          .page-title {
            font-size: 23px;
          }

          .page-description {
            font-size: 10px;
            line-height: 1.8;
          }

          .form-container-header {
            padding: 14px;
          }

          .form-header-icon {
            width: 37px;
            height: 37px;
            min-width: 37px;
            font-size: 15px;
          }

          .form-header-title {
            font-size: 12px;
          }

          .form-header-description {
            display: block;
            font-size: 9px;
            line-height: 1.7;
          }

          .form-container-body {
            padding: 16px 14px;
          }

          .form-section {
            padding-bottom: 21px;
            margin-bottom: 21px;
          }

          .form-section-title {
            font-size: 12px;
          }

          .form-label-custom {
            font-size: 10px;
          }

          .form-control-custom {
            min-height: 41px;
            font-size: 11px;
          }

          textarea.form-control-custom {
            min-height: 100px;
            line-height: 1.75;
          }

          .field-help {
            font-size: 9px;
            line-height: 1.75;
          }

          .upload-box {
            padding: 17px;
          }

          .upload-description {
            font-size: 9px;
            line-height: 1.75;
          }

          .image-grid {
            grid-template-columns:
              1fr 1fr;
            gap: 9px;
          }

          .image-preview {
            height: 135px;
          }

          .image-remove {
            width: 28px;
            height: 28px;
          }

          .main-image-badge {
            font-size: 7px;
          }

          .image-card-footer {
            min-height: 34px;
            padding: 7px 8px;
          }

          .image-card-footer span {
            font-size: 8px;
          }

          .image-info {
            font-size: 9px;
            line-height: 1.75;
          }

          .featured-description {
            font-size: 8px;
            line-height: 1.75;
          }

          .admin-page-footer {
            font-size: 9px;
          }
        }

        /* =====================================================
           EXTRA SMALL
        ===================================================== */

        @media (max-width: 399.98px) {
          .topbar-title {
            max-width: 125px;
          }

          .admin-content {
            padding-left: 10px;
            padding-right: 10px;
          }

          .page-title {
            font-size: 21px;
          }

          .page-title-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
          }

          .image-preview {
            height: 120px;
          }

          .upload-box {
            padding: 14px;
          }

          .form-container-body {
            padding: 14px 11px;
          }

          .page-description {
            font-size: 9px;
            line-height: 1.8;
          }

          .field-help {
            font-size: 8px;
          }

          .image-info {
            font-size: 8px;
          }
        }

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

        @media (max-width: 340px) {
          .admin-content {
            padding-left: 8px;
            padding-right: 8px;
          }

          .topbar-title {
            max-width: 100px;
          }

          .page-title {
            font-size: 19px;
          }

          .page-description {
            font-size: 9px;
            line-height: 1.8;
          }

          .image-grid {
            grid-template-columns: 1fr;
          }

          .image-preview {
            height: 175px;
          }

          .actions-right {
            flex-direction: column;
          }

          .cancel-button,
          .save-button {
            width: 100%;
          }
        }

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

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

      <div className="create-project-page">
        <div className="admin-layout">

          {/* ===================================================
              OVERLAY
          =================================================== */}

          {sidebarOpen && (
            <div
              className="sidebar-overlay"
              onClick={closeSidebar}
              aria-hidden="true"
            />
          )}

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

          <aside
            className={`admin-sidebar ${
              sidebarOpen ? "open" : ""
            }`}
          >
            <div className="sidebar-inner">

              <div className="sidebar-brand">

                <div className="brand-icon">
                  <i className="bi bi-grid-1x2-fill"></i>
                </div>

                <div className="brand-text">
                  <strong>
                    GloVaTech
                  </strong>

                  <span>
                    Admin Panel
                  </span>
                </div>

                <button
                  type="button"
                  className="sidebar-close d-lg-none"
                  onClick={closeSidebar}
                  aria-label="Close sidebar"
                >
                  <i className="bi bi-x-lg"></i>
                </button>

              </div>

              <div className="sidebar-section-label">
                MAIN MENU
              </div>

              <nav className="sidebar-nav">

                <Link
                  href="/secure-panel"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-speedometer2"></i>
                  </span>

                  <span>
                    Dashboard
                  </span>
                </Link>

              </nav>

              <div className="sidebar-section-label mt-4">
                CONTENT
              </div>

              <nav className="sidebar-nav">

                <Link
                  href="/secure-panel/hero"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-stars"></i>
                  </span>

                  <span>
                    Hero
                  </span>
                </Link>

                <Link
                  href="/secure-panel/about"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-person-vcard"></i>
                  </span>

                  <span>
                    About
                  </span>
                </Link>

                <Link
                  href="/secure-panel/about/stats"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-bar-chart-line"></i>
                  </span>

                  <span>
                    Stats
                  </span>
                </Link>

                <Link
                  href="/secure-panel/education"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-mortarboard"></i>
                  </span>

                  <span>
                    Education
                  </span>
                </Link>

                <Link
                  href="/secure-panel/skills"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-tools"></i>
                  </span>

                  <span>
                    Skills
                  </span>
                </Link>

                <Link
                  href="/secure-panel/experience"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-briefcase"></i>
                  </span>

                  <span>
                    Experience
                  </span>
                </Link>

                <Link
                  href="/secure-panel/projects"
                  className="sidebar-link active"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-code-square"></i>
                  </span>

                  <span>
                    Projects
                  </span>
                </Link>

                <Link
                  href="/secure-panel/certifications"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-patch-check"></i>
                  </span>

                  <span>
                    Certification
                  </span>
                </Link>

                <Link
                  href="/secure-panel/achievements"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-trophy"></i>
                  </span>

                  <span>
                    Achievement
                  </span>
                </Link>

                <Link
                  href="/secure-panel/services"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-gear-wide-connected"></i>
                  </span>

                  <span>
                    Services
                  </span>
                </Link>

                <Link
                  href="/secure-panel/gallery"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-images"></i>
                  </span>

                  <span>
                    Gallery
                  </span>
                </Link>

                <Link
                  href="/secure-panel/contact-info"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-person-lines-fill"></i>
                  </span>

                  <span>
                    Contact
                  </span>
                </Link>

                <Link
                  href="/secure-panel/contact-info/list"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-share-fill"></i>
                  </span>

                  <span>
                    Contact Social Media
                  </span>
                </Link>

                <Link
                  href="/secure-panel/articles"
                  className="sidebar-link"
                  onClick={closeSidebar}
                >
                  <span className="sidebar-link-icon">
                    <i className="bi bi-journal-text"></i>
                  </span>

                  <span>
                    Articles
                  </span>
                </Link>

                {/* CONTACT MESSAGES */}

<Link
  href="/secure-panel/contact-messages"
  className="sidebar-link"
  onClick={closeSidebar}
>
  <span className="sidebar-link-icon">
    <i className="bi bi-chat-left-text"></i>
  </span>

  <span>Contact Messages</span>
</Link>

{/* CONTACT USER */}

<Link
  href="/secure-panel/contact-users"
  className="sidebar-link"
  onClick={closeSidebar}
>
  <span className="sidebar-link-icon">
    <i className="bi bi-people-fill"></i>
  </span>

  <span>Contact User</span>
</Link>

              </nav>

              <div className="sidebar-bottom">

                <Link
                  href="/"
                  onClick={closeSidebar}
                >
                  <i className="bi bi-globe2"></i>

                  <span>
                    View Website
                  </span>

                  <i className="bi bi-arrow-up-right ms-auto"></i>
                </Link>

              </div>

            </div>
          </aside>

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

          <div className="admin-main">

            {/* =================================================
                TOPBAR
            ================================================= */}

            <header className="admin-topbar">

              <div className="topbar-left">

                <button
                  type="button"
                  className="mobile-menu-button d-lg-none"
                  onClick={() =>
                    setSidebarOpen(true)
                  }
                  aria-label="Open menu"
                >
                  <i className="bi bi-list"></i>
                </button>

                <div>
                  <div className="topbar-label">
                    ADMIN PANEL
                  </div>

                  <div className="topbar-title">
                    Tambah Project
                  </div>
                </div>

              </div>

              <div className="topbar-right">

                <Link
                  href="/"
                  className="topbar-website"
                  title="View Website"
                  aria-label="View Website"
                >
                  <i className="bi bi-globe2"></i>

                  <span className="d-none d-sm-inline">
                    Website
                  </span>
                </Link>

                <Link
                  href="/secure-panel/login"
                  className="topbar-logout"
                  title="Logout"
                  aria-label="Logout"
                >
                  <i className="bi bi-box-arrow-right"></i>

                  <span className="d-none d-sm-inline">
                    Logout
                  </span>
                </Link>

              </div>

            </header>

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

            <main className="admin-content">

              <section className="page-header">

                <Link
                  href="/secure-panel/projects"
                  className="back-link"
                >
                  <i className="bi bi-arrow-left"></i>

                  <span>
                    Kembali ke Projects
                  </span>
                </Link>

                <div className="page-eyebrow">
                  <span className="page-eyebrow-dot"></span>
                  PROJECT MANAGEMENT
                </div>

                <div className="page-title-row">

                  <div className="page-title-icon">
                    <i className="bi bi-plus-square"></i>
                  </div>

                  <div>
                    <h1 className="page-title">
                      Tambah Project
                    </h1>

                    <p className="page-description text-justify">
                      Tambahkan project baru ke
                      portfolio GloVaTech dengan
                      melengkapi informasi project,
                      gambar, teknologi, periode
                      pengerjaan, status featured,
                      dan tautan project.
                    </p>
                  </div>

                </div>

              </section>

              <section className="form-container">

                <div className="form-container-header">

                  <div className="form-header-icon">
                    <i className="bi bi-kanban"></i>
                  </div>

                  <div>
                    <h2 className="form-header-title">
                      Informasi Project
                    </h2>

                    <p className="form-header-description text-justify">
                      Isi seluruh informasi project
                      dengan benar sebelum menyimpan
                      data.
                    </p>
                  </div>

                </div>

                <div className="form-container-body">

                  <form
                    onSubmit={handleSubmit}
                    noValidate
                  >

                    {/* =================================================
                        BASIC INFORMATION
                    ================================================= */}

                    <div className="form-section">

                      <div className="form-section-title">
                        <i className="bi bi-info-circle"></i>
                        Informasi Dasar
                      </div>

                      <div className="row g-3">

                        <div className="col-md-8">

                          <label className="form-label-custom">
                            Nama Project
                          </label>

                          <input
                            type="text"
                            name="title"
                            className="form-control-custom"
                            placeholder="Contoh: Sistem Informasi KFC"
                            value={form.title}
                            onChange={handleTitleChange}
                            disabled={loading}
                            autoComplete="off"
                            required
                          />

                          <small className="field-help text-justify">
                            Nama project yang akan
                            ditampilkan pada portfolio.
                          </small>

                        </div>

                        <div className="col-md-4">

                          <label className="form-label-custom">
                            Slug
                          </label>

                          <input
                            type="text"
                            name="slug"
                            className="form-control-custom"
                            placeholder="sistem-informasi-kfc"
                            value={form.slug}
                            onChange={handleChange}
                            disabled={loading}
                            autoComplete="off"
                            required
                          />

                          <small className="field-help text-justify">
                            Digunakan untuk URL project.
                          </small>

                        </div>

                        <div className="col-12">

                          <label className="form-label-custom">
                            Deskripsi
                          </label>

                          <textarea
                            name="description"
                            className="form-control-custom"
                            rows={5}
                            placeholder="Jelaskan project, tujuan, fitur, dan teknologi yang digunakan..."
                            value={form.description}
                            onChange={handleChange}
                            disabled={loading}
                          />

                          <small className="field-help text-justify">
                            Gunakan deskripsi yang
                            singkat tetapi informatif.
                          </small>

                        </div>

                      </div>

                    </div>

                    {/* =================================================
                        IMAGES
                    ================================================= */}

                    <div className="form-section">

                      <div className="form-section-title">
                        <i className="bi bi-images"></i>
                        Gambar Project
                      </div>

                      <div className="upload-box">

                        <div className="upload-icon">
                          <i className="bi bi-cloud-arrow-up"></i>
                        </div>

                        <h3 className="upload-title">
                          Tambahkan gambar project
                        </h3>

                        <p className="upload-description text-justify">
                          Pilih satu atau beberapa
                          gambar sekaligus. Format yang
                          didukung adalah JPG, JPEG, PNG,
                          WEBP, atau GIF dengan ukuran
                          maksimal 5 MB per gambar.
                        </p>

                        <input
                          type="file"
                          className="upload-input"
                          accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
                          multiple
                          onChange={handleImageChange}
                          disabled={loading}
                        />

                      </div>

                      {images.length > 0 && (

                        <div className="image-grid">

                          {images.map(
                            (item, index) => (

                              <div
                                key={item.id}
                                className="image-card"
                              >

                                <div className="image-preview">

                                  <img
                                    src={item.preview}
                                    alt={`Preview project image ${
                                      index + 1
                                    }`}
                                  />

                                  {index === 0 && (
                                    <span className="main-image-badge">
                                      <i className="bi bi-star-fill me-1"></i>
                                      Gambar Utama
                                    </span>
                                  )}

                                  <button
                                    type="button"
                                    className="image-remove"
                                    onClick={() =>
                                      removeImage(
                                        item.id
                                      )
                                    }
                                    disabled={loading}
                                    title="Hapus gambar"
                                    aria-label={`Hapus gambar ${
                                      index + 1
                                    }`}
                                  >
                                    <i className="bi bi-trash"></i>
                                  </button>

                                </div>

                                <div className="image-card-footer">

                                  <span
                                    title={
                                      item.file.name
                                    }
                                  >
                                    {item.file.name}
                                  </span>

                                </div>

                              </div>

                            )
                          )}

                        </div>

                      )}

                      {images.length > 0 && (

                        <div className="image-info text-justify">

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

                          <span>
                            Total{" "}
                            <strong>
                              {images.length}
                            </strong>{" "}
                            gambar dipilih. Gambar
                            pertama otomatis digunakan
                            sebagai gambar utama project
                            dan seluruh gambar akan
                            disimpan ke project.
                          </span>

                        </div>

                      )}

                    </div>

                    {/* =================================================
                        PROJECT DETAILS
                    ================================================= */}

                    <div className="form-section">

                      <div className="form-section-title">
                        <i className="bi bi-code-slash"></i>
                        Detail Project
                      </div>

                      <div className="row g-3">

                        <div className="col-12">

                          <label className="form-label-custom">
                            Project URL
                          </label>

                          <div className="input-wrapper">

                            <i className="bi bi-link-45deg input-icon"></i>

                            <input
                              type="url"
                              name="projectUrl"
                              className="form-control-custom input-with-icon"
                              placeholder="https://example.com"
                              value={form.projectUrl}
                              onChange={handleChange}
                              disabled={loading}
                            />

                          </div>

                          <small className="field-help text-justify">
                            Bisa GitHub, GitLab,
                            website, demo aplikasi,
                            Vercel, atau URL lainnya.
                          </small>

                        </div>

                        <div className="col-12">

                          <label className="form-label-custom">
                            Technologies
                          </label>

                          <textarea
                            name="technologies"
                            className="form-control-custom"
                            rows={3}
                            placeholder="Next.js, Node.js, MySQL, Prisma"
                            value={form.technologies}
                            onChange={handleChange}
                            disabled={loading}
                          />

                          <small className="field-help text-justify">
                            Pisahkan teknologi
                            menggunakan koma.
                          </small>

                        </div>

                      </div>

                    </div>

                    {/* =================================================
                        PERIOD
                    ================================================= */}

                    <div className="form-section">

                      <div className="form-section-title">
                        <i className="bi bi-calendar3"></i>
                        Periode Project
                      </div>

                      <div className="row g-3">

                        <div className="col-md-6">

                          <label className="form-label-custom">
                            Tanggal Mulai
                          </label>

                          <input
                            type="date"
                            name="startDate"
                            className="form-control-custom"
                            value={form.startDate}
                            onChange={handleChange}
                            disabled={loading}
                          />

                        </div>

                        <div className="col-md-6">

                          <label className="form-label-custom">
                            Tanggal Selesai
                          </label>

                          <input
                            type="date"
                            name="endDate"
                            className="form-control-custom"
                            value={form.endDate}
                            onChange={handleChange}
                            disabled={loading}
                          />

                          <small className="field-help text-justify">
                            Kosongkan jika project
                            masih berlangsung.
                          </small>

                        </div>

                      </div>

                    </div>

                    {/* =================================================
                        FEATURED
                    ================================================= */}

                    <div className="form-section">

                      <div className="form-section-title">
                        <i className="bi bi-star"></i>
                        Project Featured
                      </div>

                      <div className="featured-box">

                        <label className="featured-row">

                          <input
                            type="checkbox"
                            name="featured"
                            className="featured-checkbox"
                            checked={form.featured}
                            onChange={handleChange}
                            disabled={loading}
                          />

                          <div>

                            <div className="featured-title">
                              Jadikan Featured Project
                            </div>

                            <div className="featured-description text-justify">
                              Project Featured dapat
                              ditampilkan sebagai project
                              unggulan pada halaman Home
                              website GloVaTech.
                            </div>

                          </div>

                        </label>

                      </div>

                    </div>

                    {/* =================================================
                        ACTION
                    ================================================= */}

                    <div className="form-actions">

                      <div>

                        <Link
                          href="/secure-panel/projects"
                          className="cancel-button"
                          onClick={(event) => {
                            if (loading) {
                              event.preventDefault();
                            }
                          }}
                        >
                          <i className="bi bi-x-lg"></i>
                          Batal
                        </Link>

                      </div>

                      <div className="actions-right">

                        <button
                          type="submit"
                          className="save-button"
                          disabled={loading}
                        >

                          {loading ? (
                            <>
                              <span
                                className="spinner-border spinner-border-sm"
                                role="status"
                                aria-hidden="true"
                              />

                              Menyimpan...
                            </>
                          ) : (
                            <>
                              <i className="bi bi-check-lg"></i>

                              Simpan Project
                            </>
                          )}

                        </button>

                      </div>

                    </div>

                  </form>

                </div>

              </section>

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

              <footer className="admin-page-footer">

                <div>

                  <i className="bi bi-shield-check"></i>

                  <span className="text-justify">
                    Admin Content Management System
                  </span>

                </div>

                <Link
                  href="/secure-panel/projects"
                >
                  <i className="bi bi-arrow-left me-1"></i>
                  Projects
                </Link>

              </footer>

            </main>

          </div>

        </div>
      </div>
    </>
  );
}