feat: structured victories/education with photos, links, and editorial profile layout

- Add VictoryItem type (place, category, competition, location, date, image, link)
- Add RichListItem type for education with image/link support
- Backward-compatible DB parsing for old string[] formats
- Admin forms with structured fields and image upload per item
- Victory/education cards with photo overlay and lightbox
- Remove max-width constraint from trainer profile for full-width layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/sections/team/TeamProfile.tsx

@@ -1,29 +1,26 @@
+import { useState } from "react";
 import Image from "next/image";
-import { ArrowLeft, Instagram, Trophy, Award, GraduationCap } from "lucide-react";
-import type { TeamMember } from "@/types/content";
+import { ArrowLeft, Instagram, Trophy, GraduationCap, ExternalLink, X, MapPin, Calendar } from "lucide-react";
+import type { TeamMember, RichListItem, VictoryItem } from "@/types/content";
 
 interface TeamProfileProps {
   member: TeamMember;
   onBack: () => void;
 }
 
-const BIO_SECTIONS = [
-  { key: "experience" as const, label: "Опыт", icon: Trophy },
-  { key: "victories" as const, label: "Достижения", icon: Award },
-  { key: "education" as const, label: "Образование", icon: GraduationCap },
-];
-
 export function TeamProfile({ member, onBack }: TeamProfileProps) {
-  const hasBio = BIO_SECTIONS.some(
-    (s) => member[s.key] && member[s.key]!.length > 0
-  );
+  const [lightbox, setLightbox] = useState<string | null>(null);
+  const hasVictories = member.victories && member.victories.length > 0;
+  const hasExperience = member.experience && member.experience.length > 0;
+  const hasEducation = member.education && member.education.length > 0;
+  const hasBio = hasVictories || hasExperience || hasEducation;
 
   return (
     <div
-      className="mx-auto max-w-3xl"
+      className="w-full"
       style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
     >
-      {/* Back button */}
+      {/* Back button — above card */}
       <button
         onClick={onBack}
         className="mb-6 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light cursor-pointer"
@@ -32,78 +29,299 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
         Назад
       </button>
 
-      {/* Main: photo + info */}
-      <div className="flex flex-col items-center gap-8 sm:flex-row sm:items-start">
-        {/* Photo */}
-        <div className="relative w-full max-w-[260px] shrink-0 aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
+      {/* Two-column layout */}
+      <div className="flex flex-col gap-8 sm:flex-row sm:items-start">
+        {/* Photo with name overlay */}
+        <div className="relative shrink-0 w-full sm:w-[380px] aspect-[3/4] overflow-hidden rounded-xl border border-white/[0.06]">
           <Image
             src={member.image}
             alt={member.name}
             fill
-            sizes="260px"
+            sizes="(min-width: 640px) 380px, 100vw"
             className="object-cover"
           />
+          {/* Gradient overlay for text readability */}
+          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
+
+          {/* Name + role + instagram overlay */}
+          <div className="absolute top-0 left-0 right-0 p-6">
+            <h3
+              className="text-3xl sm:text-4xl font-bold text-white leading-tight"
+              style={{ textShadow: "0 2px 20px rgba(0,0,0,0.5)" }}
+            >
+              {member.name}
+            </h3>
+            <p
+              className="mt-1 text-sm font-medium text-gold-light"
+              style={{ textShadow: "0 1px 10px rgba(0,0,0,0.5)" }}
+            >
+              {member.role}
+            </p>
+            {member.instagram && (
+              <a
+                href={member.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/70 transition-colors hover:text-gold-light"
+                style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
+              >
+                <Instagram size={14} />
+                {member.instagram.split("/").filter(Boolean).pop()}
+              </a>
+            )}
+          </div>
         </div>
 
-        {/* Info */}
-        <div className="text-center sm:text-left">
-          <h3 className="text-2xl font-bold text-white">{member.name}</h3>
-          <p className="mt-1 text-sm font-medium text-gold-light">
-            {member.role}
-          </p>
-
-          {member.instagram && (
-            <a
-              href={member.instagram}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
-            >
-              <Instagram size={14} />
-              {member.instagram.split("/").filter(Boolean).pop()}
-            </a>
+        {/* Right column — bio content */}
+        <div className="flex-1 min-w-0">
+          {/* Victories as structured card grid */}
+          {hasVictories && (
+            <div>
+              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
+                Достижения:
+              </span>
+              <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {member.victories!.map((item, i) => (
+                  <VictoryCard key={i} victory={item} onImageClick={setLightbox} />
+                ))}
+              </div>
+            </div>
           )}
 
+          {/* Education as card grid */}
+          {hasEducation && (
+            <div className={hasVictories ? "mt-8" : ""}>
+              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
+                <GraduationCap size={14} className="inline -mt-0.5 mr-1.5" />
+                Образование:
+              </span>
+              <div className="mt-4 grid grid-cols-2 lg:grid-cols-3 gap-3">
+                {member.education!.map((item, i) => (
+                  <RichCard key={i} item={item} onImageClick={setLightbox} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Experience as text list */}
+          {hasExperience && (
+            <div className={hasVictories || hasEducation ? "mt-8" : ""}>
+              <div className="flex items-center gap-2 text-gold mb-3">
+                <Trophy size={15} />
+                <span className="text-xs font-semibold uppercase tracking-wider">
+                  Опыт
+                </span>
+              </div>
+              <ul className="space-y-2">
+                {member.experience!.map((item, i) => (
+                  <li
+                    key={i}
+                    className="flex items-start gap-2 text-sm text-white/60"
+                  >
+                    <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Description */}
           {member.description && (
-            <p className="mt-4 text-sm leading-relaxed text-white/55">
+            <p className={`text-sm leading-relaxed text-white/50 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
               {member.description}
             </p>
           )}
         </div>
       </div>
 
-      {/* Bio sections */}
-      {hasBio && (
-        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
-          {BIO_SECTIONS.map((section) => {
-            const items = member[section.key];
-            if (!items || items.length === 0) return null;
-            const Icon = section.icon;
-
-            return (
-              <div key={section.key}>
-                <div className="flex items-center gap-2 text-gold">
-                  <Icon size={16} />
-                  <span className="text-xs font-semibold uppercase tracking-wider">
-                    {section.label}
-                  </span>
-                </div>
-                <ul className="mt-3 space-y-2">
-                  {items.map((item, i) => (
-                    <li
-                      key={i}
-                      className="flex items-start gap-2 text-sm text-white/60"
-                    >
-                      <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            );
-          })}
+      {/* Image lightbox */}
+      {lightbox && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+          onClick={() => setLightbox(null)}
+        >
+          <button
+            onClick={() => setLightbox(null)}
+            className="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors"
+          >
+            <X size={20} />
+          </button>
+          <div className="relative max-h-[85vh] max-w-[90vw]">
+            <Image
+              src={lightbox}
+              alt="Достижение"
+              width={900}
+              height={900}
+              className="rounded-lg object-contain max-h-[85vh]"
+            />
+          </div>
         </div>
       )}
     </div>
   );
 }
+
+function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageClick: (src: string) => void }) {
+  const hasImage = !!victory.image;
+  const hasLink = !!victory.link;
+
+  if (hasImage) {
+    return (
+      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+        <button
+          onClick={() => onImageClick(victory.image!)}
+          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={victory.image!}
+            alt={victory.competition}
+            fill
+            sizes="(min-width: 640px) 200px, 45vw"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+          {/* Gradient overlay at bottom */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          {/* Text overlay at bottom */}
+          <div className="absolute bottom-0 left-0 right-0 p-3 space-y-0.5">
+            {victory.place && (
+              <p className="text-lg font-bold text-gold" style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}>{victory.place}</p>
+            )}
+            {victory.category && (
+              <p className="text-xs font-medium uppercase tracking-wider text-white/90" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.category}</p>
+            )}
+            <p className="text-sm text-white/70" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.competition}</p>
+            {(victory.location || victory.date) && (
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
+                {victory.location && (
+                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
+                    <MapPin size={10} />
+                    {victory.location}
+                  </span>
+                )}
+                {victory.date && (
+                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
+                    <Calendar size={10} />
+                    {victory.date}
+                  </span>
+                )}
+              </div>
+            )}
+            {hasLink && (
+              <a
+                href={victory.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
+              >
+                <ExternalLink size={11} />
+                Подробнее
+              </a>
+            )}
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="p-3 space-y-1">
+        {victory.place && (
+          <p className="text-lg font-bold text-gold">{victory.place}</p>
+        )}
+        {victory.category && (
+          <p className="text-xs font-medium uppercase tracking-wider text-white/80">{victory.category}</p>
+        )}
+        <p className="text-sm text-white/50">{victory.competition}</p>
+        {(victory.location || victory.date) && (
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
+            {victory.location && (
+              <span className="inline-flex items-center gap-1 text-xs text-white/30">
+                <MapPin size={10} />
+                {victory.location}
+              </span>
+            )}
+            {victory.date && (
+              <span className="inline-flex items-center gap-1 text-xs text-white/30">
+                <Calendar size={10} />
+                {victory.date}
+              </span>
+            )}
+          </div>
+        )}
+        {hasLink && (
+          <a
+            href={victory.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
+          >
+            <ExternalLink size={11} />
+            Подробнее
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RichCard({ item, onImageClick }: { item: RichListItem; onImageClick: (src: string) => void }) {
+  const hasImage = !!item.image;
+  const hasLink = !!item.link;
+
+  if (hasImage) {
+    return (
+      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+        <button
+          onClick={() => onImageClick(item.image!)}
+          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={item.image!}
+            alt={item.text}
+            fill
+            sizes="(min-width: 1024px) 200px, (min-width: 640px) 160px, 45vw"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-3">
+            <p className="text-sm text-white/80" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{item.text}</p>
+            {hasLink && (
+              <a
+                href={item.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
+              >
+                <ExternalLink size={11} />
+                Подробнее
+              </a>
+            )}
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="p-3">
+        <p className="text-sm text-white/60">{item.text}</p>
+        {hasLink && (
+          <a
+            href={item.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1.5 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
+          >
+            <ExternalLink size={11} />
+            Подробнее
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}