feat: Refactor specialty display logic and enhance specialty filtering

- Introduced SpecialtyChips component to manage the display of doctor's specialties with a primary specialty and a count of additional specialties.
- Updated ItemDoctor component to utilize SpecialtyChips for better UI presentation.
- Enhanced PosterLight and Poster components to display primary specialties and a text line for sub-specialties.
- Implemented nextSpecialtyFilter function to improve specialty selection logic in the Content component.
- Updated search functionality to allow searching by both doctor name and specialty.
- Added new specialties to specialties.json for better coverage.
- Created sync-specialties script to synchronize specialties data with the backend during build.
- Added tests for new components and helper functions to ensure functionality and reliability.

components/doctor/poster/PosterLight.js

@@ -4,6 +4,7 @@ import DoctorAvatar from "@/app/component/DoctorAvatar";
 import QrImg from "./QrImg";
 import SiteLogo from "./SiteLogo";
 import { getStateInfoClient } from "@/lib/getStateInfoClient";
+import { posterSpecialtyLine, splitSpecialties } from "@/lib/specialtyDisplay";
 import { doctorTitle } from "@/helper";
 
 import StarDI from "@/components/icons/StarDI";
@@ -21,7 +22,9 @@ function PosterLight({ data, onQrReady }) {
     setCity(matchedCity || null);
   }, []);
 
-  const specialties = (data?.specialties ?? []).filter((s) => s?.name).slice(0, 4);
+  // قرینهٔ پوستر تیره — همان دلیل: برش عددیِ ثابت با نام‌های بلند از کادر بیرون می‌زد.
+  const { primary, rest } = splitSpecialties(data?.specialties);
+  const subSpecialties = posterSpecialtyLine(rest, 78);
   const services = (data?.expertise ?? []).filter((s) => s?.name);
   const shownServices = services.slice(0, 8);
   const moreServices = services.length - shownServices.length;
@@ -88,18 +91,23 @@ function PosterLight({ data, onQrReady }) {
           {doctorTitle(data?.name)}
         </h1>
 
-        <div className="w-full flex flex-wrap justify-center gap-[10px] mt-[16px]">
-          {specialties.map((s, i) => (
-            <span
-              key={i}
-              className="flex items-center shrink-0 rounded-full bg-[#E3EEF9] px-[20px] py-[9px]"
-            >
+        {primary && (
+          <div className="w-full flex justify-center mt-[16px]">
+            <span className="flex items-center shrink-0 rounded-full bg-[#E3EEF9] px-[20px] py-[9px]">
               <span className="text-[#16528C] text-[23px] font-semibold leading-none whitespace-nowrap">
-                {s.name}
+                {primary.name}
               </span>
             </span>
-          ))}
-        </div>
+          </div>
+        )}
+
+        {/* زیرتخصص‌ها یک خط متنی — در چاپ نه کلیک هست نه Popover. */}
+        {subSpecialties.text && (
+          <p className="w-full mt-[12px] max-h-[80px] overflow-hidden text-[#3E6E9E] text-[20px] font-medium leading-[40px]">
+            {subSpecialties.text}
+            {subSpecialties.hidden > 0 && ` و ${subSpecialties.hidden} تخصص دیگر`}
+          </p>
+        )}
 
         {badges.length > 0 && (
           <div className="w-full flex flex-wrap justify-center items-center gap-[14px] mt-[22px]">