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/index.js

@@ -4,6 +4,7 @@ import DoctorAvatar from "@/app/component/DoctorAvatar";
 import QrImg from "./QrImg";
 import SiteLogoBase from "./SiteLogo";
 import { getStateInfoClient } from "@/lib/getStateInfoClient";
+import { posterSpecialtyLine, splitSpecialties } from "@/lib/specialtyDisplay";
 import { doctorTitle } from "@/helper";
 
 import StarDI from "@/components/icons/StarDI";
@@ -41,7 +42,10 @@ function Poster({ data, onQrReady }) {
     setCity(matchedCity || null);
   }, []);
 
-  const specialties = (data?.specialties ?? []).filter((s) => s?.name).slice(0, 4);
+  // برش بر اساس طول متن است نه عدد ثابت: چهار چیپ با نام‌های بلند به سه ردیف
+  // می‌رفت، بخش hero را بلند می‌کرد و بخش‌های پایین را از کادر ثابت بیرون می‌انداخت.
+  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;
@@ -128,18 +132,25 @@ function Poster({ data, onQrReady }) {
           <h1 className="text-white text-[46px] font-extrabold leading-tight">
             {doctorTitle(data?.name)}
           </h1>
-          <div className="flex flex-wrap gap-[10px] mt-[16px]">
-            {specialties.map((s, i) => (
-              <span
-                key={i}
-                className="flex items-center rounded-full bg-[#F59E0B]/18 border border-[#F59E0B]/40 px-[18px] py-[9px]"
-              >
+          {primary && (
+            <div className="mt-[16px] flex flex-wrap items-center gap-[12px]">
+              <span className="flex items-center rounded-full bg-[#F59E0B]/18 border border-[#F59E0B]/40 px-[18px] py-[9px]">
                 <span className="text-[#FCD9A0] text-[22px] font-semibold leading-none">
-                  {s.name}
+                  {primary.name}
                 </span>
               </span>
-            ))}
-          </div>
+            </div>
+          )}
+
+          {/* زیرتخصص‌ها یک خط متنی‌اند نه چیپ: در چاپ نه کلیک هست نه Popover، پس
+              «+N» بی‌معناست و متن خوانا جایش را می‌گیرد. max-h تور ایمنیِ کادر است
+              اگر بودجهٔ کاراکتر روزی کوتاه تنظیم شود. */}
+          {subSpecialties.text && (
+            <p className="mt-[12px] max-h-[80px] overflow-hidden text-[#C7DBF2] text-[20px] font-medium leading-[40px]">
+              {subSpecialties.text}
+              {subSpecialties.hidden > 0 && ` و ${subSpecialties.hidden} تخصص دیگر`}
+            </p>
+          )}
           <div className="flex flex-wrap gap-[12px] mt-[18px]">
             {badges.map((b, i) => (
               <span