🚀 Fix: Corrected CompanyProfile syntax and restored state

frontend/components/CompanyProfile.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import type { CompanyProfile as CompanyProfileType } from "../lib/types";
 
 type Props = {
@@ -17,14 +17,34 @@ export default function CompanyProfile({ profile, onSave }: Props) {
   const [regionsStr, setRegionsStr] = useState(profile.regions?.join(", ") || "");
   const [docsStr, setDocsStr] = useState(profile.documents_available?.join(", ") || "");
 
-  const handleSave = () => {
-    onSave({
-      ...form,
-      services: servicesStr.split(",").map((s) => s.trim()).filter(Boolean),
-      certifications: certsStr.split(",").map((s) => s.trim()).filter(Boolean),
-      regions: regionsStr.split(",").map((s) => s.trim()).filter(Boolean),
-      documents_available: docsStr.split(",").map((s) => s.trim()).filter(Boolean),
-    });
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle");
+
+  const handleSave = async () => {
+    console.log("[CompanyProfile] Clicked Save Profile");
+    setSaving(true);
+    setSaveStatus("saving");
+    try {
+      const updatedProfile = {
+        ...form,
+        services: servicesStr.split(",").map((s) => s.trim()).filter(Boolean),
+        certifications: certsStr.split(",").map((s) => s.trim()).filter(Boolean),
+        regions: regionsStr.split(",").map((s) => s.trim()).filter(Boolean),
+        documents_available: docsStr.split(",").map((s) => s.trim()).filter(Boolean),
+      };
+      
+      console.log("[CompanyProfile] Sending to onSave:", updatedProfile);
+      await onSave(updatedProfile);
+      
+      setSaveStatus("success");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    } catch (e) {
+      console.error("[CompanyProfile] Save failed", e);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    } finally {
+      setSaving(false);
+    }
   };
 
   return (
@@ -103,10 +123,37 @@ export default function CompanyProfile({ profile, onSave }: Props) {
         <button
           type="button"
           onClick={handleSave}
-          className="group relative overflow-hidden rounded-2xl bg-cyan px-8 py-4 font-bold text-slate-950 transition hover:bg-sky hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-cyan/20"
+          disabled={saving}
+          className={`group relative overflow-hidden rounded-2xl px-12 py-5 font-bold text-slate-950 transition-all active:scale-95 shadow-xl ${
+            saveStatus === "success" ? "bg-green-500 shadow-green-500/30" : 
+            saveStatus === "error" ? "bg-red-500 shadow-red-500/30" :
+            "bg-cyan hover:bg-sky shadow-cyan/30"
+          } ${saving ? "opacity-70 cursor-wait" : "cursor-pointer"}`}
         >
-          <span className="relative z-10">Save Profile</span>
-          <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+          <span className="relative z-10 flex items-center gap-3">
+            {saveStatus === "idle" && "Save Profile"}
+            {saveStatus === "saving" && (
+              <>
+                <span className="animate-spin text-xl">⏳</span>
+                Saving...
+              </>
+            )}
+            {saveStatus === "success" && (
+              <>
+                <span className="text-xl">✅</span>
+                Saved!
+              </>
+            )}
+            {saveStatus === "error" && (
+              <>
+                <span className="text-xl">❌</span>
+                Error!
+              </>
+            )}
+          </span>
+          {saveStatus === "idle" && (
+            <div className="absolute inset-0 bg-gradient-to-r from-white/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+          )}
         </button>
       </div>
     </div>