feat: OpenDay trainer photos + click-to-bio; remove filter text highlights

src/components/sections/OpenDay.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { Calendar, Sparkles } from "lucide-react";
+import Image from "next/image";
+import { Calendar, Sparkles, User } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 import { SignupModal } from "@/components/ui/SignupModal";
@@ -14,6 +15,7 @@ interface OpenDayProps {
     classes: OpenDayClass[];
   };
   popups?: SiteContent["popups"];
+  teamMembers?: { name: string; image: string }[];
 }
 
 function formatDateRu(dateStr: string): string {
@@ -25,10 +27,20 @@ function formatDateRu(dateStr: string): string {
   });
 }
 
-export function OpenDay({ data, popups }: OpenDayProps) {
+export function OpenDay({ data, popups, teamMembers }: OpenDayProps) {
   const { event, classes } = data;
   const [signup, setSignup] = useState<{ classId: number; label: string } | null>(null);
 
+  const trainerPhotos = useMemo(() => {
+    const map: Record<string, string> = {};
+    if (teamMembers) {
+      for (const m of teamMembers) {
+        if (m.image) map[m.name] = m.image;
+      }
+    }
+    return map;
+  }, [teamMembers]);
+
   // Group classes by hall
   const hallGroups = useMemo(() => {
     const groups: Record<string, OpenDayClass[]> = {};
@@ -100,6 +112,7 @@ export function OpenDay({ data, popups }: OpenDayProps) {
                     cls={cls}
                     maxParticipants={event.maxParticipants}
                     onSignup={setSignup}
+                    trainerPhoto={trainerPhotos[cls.trainer]}
                   />
                 ))}
               </div>
@@ -117,6 +130,7 @@ export function OpenDay({ data, popups }: OpenDayProps) {
                           key={cls.id}
                           cls={cls}
                           onSignup={setSignup}
+                          trainerPhoto={trainerPhotos[cls.trainer]}
                         />
                       ))}
                     </div>
@@ -149,23 +163,26 @@ function ClassCard({
   cls,
   maxParticipants = 0,
   onSignup,
+  trainerPhoto,
 }: {
   cls: OpenDayClass;
   maxParticipants?: number;
   onSignup: (info: { classId: number; label: string }) => void;
+  trainerPhoto?: string;
 }) {
   const label = `${cls.style} · ${cls.trainer} · ${cls.startTime}–${cls.endTime}`;
 
   if (cls.cancelled) {
     return (
-      <div className="rounded-xl border border-white/5 bg-neutral-900/30 p-4 opacity-50">
-        <div className="flex items-center justify-between">
-          <div>
-            <span className="text-xs text-neutral-500">{cls.startTime}–{cls.endTime}</span>
-            <p className="text-sm text-neutral-500 line-through">{cls.style}</p>
-            <p className="text-xs text-neutral-600">{cls.trainer}</p>
+      <div className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-3 sm:p-4 opacity-50">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex-1 min-w-0 space-y-1">
+            <span className="rounded-md bg-neutral-800 px-2 py-0.5 text-[11px] font-bold text-neutral-500">
+              {cls.startTime}–{cls.endTime}
+            </span>
+            <p className="text-sm text-neutral-500 line-through">{cls.trainer} · {cls.style}</p>
           </div>
-          <span className="text-xs text-neutral-500 bg-neutral-800 rounded-full px-2 py-0.5">
+          <span className="text-[10px] text-neutral-500 bg-neutral-800 rounded-full px-2.5 py-0.5 font-medium">
             Отменено
           </span>
         </div>
@@ -176,24 +193,71 @@ function ClassCard({
   const isFull = maxParticipants > 0 && cls.bookingCount >= maxParticipants;
 
   return (
-    <div className={`rounded-xl border p-4 transition-all ${isFull ? "border-white/5 bg-neutral-900/50" : "border-white/10 bg-neutral-900 hover:border-gold/20"}`}>
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex-1 min-w-0">
-          <span className="text-xs text-gold font-medium">{cls.startTime}–{cls.endTime}</span>
-          <p className="text-sm font-bold text-white mt-1">{cls.trainer}</p>
-          <p className="text-xs text-neutral-400 mt-0.5">{cls.style}</p>
-          {maxParticipants > 0 && (
-            <p className={`text-[10px] mt-1 ${isFull ? "text-amber-400" : "text-neutral-500"}`}>
-              {cls.bookingCount}/{maxParticipants} мест
-            </p>
+    <div className={`rounded-xl border transition-all ${
+      isFull
+        ? "border-white/[0.04] bg-white/[0.01]"
+        : "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]"
+    }`}>
+      <div className="flex items-start gap-3 p-3 sm:p-4">
+        {/* Trainer photo */}
+        <button
+          onClick={() => {
+            window.dispatchEvent(new CustomEvent("openTrainerProfile", { detail: cls.trainer }));
+          }}
+          className="relative flex items-center justify-center h-10 w-10 rounded-full overflow-hidden shrink-0 ring-1 ring-white/10 hover:ring-gold/30 transition-all cursor-pointer mt-0.5"
+          title={`Подробнее о ${cls.trainer}`}
+        >
+          {trainerPhoto ? (
+            <Image src={trainerPhoto} alt={cls.trainer} fill className="object-cover" sizes="40px" />
+          ) : (
+            <div className="flex items-center justify-center h-full w-full bg-white/[0.06]">
+              <User size={16} className="text-white/40" />
+            </div>
           )}
+        </button>
+
+        <div className="flex-1 min-w-0 space-y-2">
+          {/* Trainer name — clickable to bio */}
+          <button
+            onClick={() => {
+              window.dispatchEvent(new CustomEvent("openTrainerProfile", { detail: cls.trainer }));
+            }}
+            className="text-sm font-semibold text-white/90 hover:text-gold transition-colors cursor-pointer"
+          >
+            {cls.trainer}
+          </button>
+
+          {/* Time + style */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <span className="rounded-md bg-gold/10 px-2 py-0.5 text-[11px] font-bold text-gold min-w-[80px] text-center">
+                {cls.startTime}–{cls.endTime}
+              </span>
+              <span className="text-sm font-medium text-white/60">{cls.style}</span>
+            </div>
+          </div>
+
+          {/* Badges */}
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {maxParticipants > 0 && (
+              <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-semibold ${
+                isFull
+                  ? "bg-amber-500/15 border border-amber-500/25 text-amber-400"
+                  : "bg-white/[0.04] border border-white/[0.08] text-white/45"
+              }`}>
+                {cls.bookingCount}/{maxParticipants} мест
+              </span>
+            )}
+          </div>
         </div>
+
+        {/* Book button */}
         <button
           onClick={() => onSignup({ classId: cls.id, label })}
-          className={`shrink-0 rounded-full px-4 py-2 text-xs font-medium transition-colors cursor-pointer ${
+          className={`shrink-0 self-center rounded-xl px-4 py-2 text-xs font-semibold transition-all cursor-pointer ${
             isFull
-              ? "bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-amber-500/20"
-              : "bg-gold/10 border border-gold/20 text-gold hover:bg-gold/20"
+              ? "bg-amber-500/10 border border-amber-500/25 text-amber-400 hover:bg-amber-500/20 hover:border-amber-500/40"
+              : "bg-gold/10 border border-gold/25 text-gold hover:bg-gold/20 hover:border-gold/40"
           }`}
         >
           {isFull ? "Лист ожидания" : "Записаться"}