feat: upgrade team admin with click-to-edit, Instagram validation, date picker, city autocomplete

- Team list: click card to open editor (remove pencil button), keep drag-to-reorder
- Instagram field: username-only input with @ prefix, async account validation via HEAD request
- Victory dates: date range picker replacing text input, auto-formats to DD.MM.YYYY / DD-DD.MM.YYYY
- Victory location: city autocomplete via Nominatim API with suggestions dropdown
- Links: real-time URL validation with error indicators on all link fields
- Save button blocked when any validation errors exist

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

src/app/admin/_components/FormField.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState } from "react";
-import { Plus, X } from "lucide-react";
+import { Plus, X, Upload, Loader2, Link, ImageIcon, Calendar, AlertCircle, MapPin } from "lucide-react";
+import type { RichListItem, VictoryItem } from "@/types/content";
 
 interface InputFieldProps {
   label: string;
@@ -104,12 +105,10 @@ export function SelectField({
   const filtered = search
     ? options.filter((o) => {
         const q = search.toLowerCase();
-        // Match any word that starts with the search query
         return o.label.toLowerCase().split(/\s+/).some((word) => word.startsWith(q));
       })
     : options;
 
-  // Close on outside click
   useEffect(() => {
     if (!open) return;
     function handle(e: MouseEvent) {
@@ -188,7 +187,6 @@ interface TimeRangeFieldProps {
 }
 
 export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFieldProps) {
-  // Parse "HH:MM–HH:MM" into start and end
   const parts = value.split("–");
   const start = parts[0]?.trim() || "";
   const end = parts[1]?.trim() || "";
@@ -204,7 +202,6 @@ export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFiel
   }
 
   function handleStartChange(newStart: string) {
-    // Reset end if start >= end
     if (newStart && end && newStart >= end) {
       update(newStart, "");
     } else {
@@ -213,7 +210,6 @@ export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFiel
   }
 
   function handleEndChange(newEnd: string) {
-    // Ignore if end <= start
     if (start && newEnd && newEnd <= start) return;
     update(start, newEnd);
   }
@@ -339,3 +335,468 @@ export function ListField({ label, items, onChange, placeholder }: ListFieldProp
     </div>
   );
 }
+
+interface VictoryListFieldProps {
+  label: string;
+  items: RichListItem[];
+  onChange: (items: RichListItem[]) => void;
+  placeholder?: string;
+  onLinkValidate?: (key: string, error: string | null) => void;
+}
+
+export function VictoryListField({ label, items, onChange, placeholder, onLinkValidate }: VictoryListFieldProps) {
+  const [draft, setDraft] = useState("");
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
+
+  function add() {
+    const val = draft.trim();
+    if (!val) return;
+    onChange([...items, { text: val }]);
+    setDraft("");
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function updateText(index: number, text: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, text } : item)));
+  }
+
+  function updateLink(index: number, link: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, link: link || undefined } : item)));
+  }
+
+  function removeImage(index: number) {
+    onChange(items.map((item, i) => (i === index ? { ...item, image: undefined } : item)));
+  }
+
+  async function handleUpload(index: number, e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingIndex(index);
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("folder", "team");
+    try {
+      const res = await fetch("/api/admin/upload", { method: "POST", body: formData });
+      const result = await res.json();
+      if (result.path) {
+        onChange(items.map((item, i) => (i === index ? { ...item, image: result.path } : item)));
+      }
+    } catch { /* upload failed */ } finally {
+      setUploadingIndex(null);
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div className="space-y-3">
+        {items.map((item, i) => (
+          <div key={i} className="rounded-lg border border-white/10 bg-neutral-800/50 p-3 space-y-2">
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={item.text}
+                onChange={(e) => updateText(i, e.target.value)}
+                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-4 py-2 text-sm text-white outline-none focus:border-gold transition-colors"
+              />
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+            <div className="flex items-center gap-2 pl-1">
+              {item.image ? (
+                <div className="flex items-center gap-1.5 rounded-md bg-neutral-700/50 px-2 py-1 text-xs text-neutral-300">
+                  <ImageIcon size={12} className="text-gold" />
+                  <span className="max-w-[120px] truncate">{item.image.split("/").pop()}</span>
+                  <button type="button" onClick={() => removeImage(i)} className="text-neutral-500 hover:text-red-400">
+                    <X size={10} />
+                  </button>
+                </div>
+              ) : (
+                <label className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-neutral-500 hover:text-neutral-300 transition-colors">
+                  {uploadingIndex === i ? <Loader2 size={12} className="animate-spin" /> : <Upload size={12} />}
+                  {uploadingIndex === i ? "Загрузка..." : "Фото"}
+                  <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
+                </label>
+              )}
+              <ValidatedLinkField
+                value={item.link || ""}
+                onChange={(v) => updateLink(i, v)}
+                validationKey={`edu-${i}`}
+                onValidate={onLinkValidate}
+              />
+            </div>
+          </div>
+        ))}
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
+            placeholder={placeholder || "Добавить..."}
+            className="flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+          />
+          <button
+            type="button"
+            onClick={add}
+            disabled={!draft.trim()}
+            className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-gold transition-colors disabled:opacity-30"
+          >
+            <Plus size={14} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- Date Range Picker ---
+// Parses Russian date formats: "22.02.2025", "22-23.02.2025", "22.02-01.03.2025"
+function parseDateRange(value: string): { start: string; end: string } {
+  if (!value) return { start: "", end: "" };
+
+  // "22-23.02.2025" → same month range
+  const sameMonth = value.match(/^(\d{1,2})-(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (sameMonth) {
+    const [, d1, d2, m, y] = sameMonth;
+    return {
+      start: `${y}-${m}-${d1.padStart(2, "0")}`,
+      end: `${y}-${m}-${d2.padStart(2, "0")}`,
+    };
+  }
+
+  // "22.02-01.03.2025" → cross-month range
+  const crossMonth = value.match(/^(\d{1,2})\.(\d{2})-(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (crossMonth) {
+    const [, d1, m1, d2, m2, y] = crossMonth;
+    return {
+      start: `${y}-${m1}-${d1.padStart(2, "0")}`,
+      end: `${y}-${m2}-${d2.padStart(2, "0")}`,
+    };
+  }
+
+  // "22.02.2025" → single date
+  const single = value.match(/^(\d{1,2})\.(\d{2})\.(\d{4})$/);
+  if (single) {
+    const [, d, m, y] = single;
+    const iso = `${y}-${m}-${d.padStart(2, "0")}`;
+    return { start: iso, end: "" };
+  }
+
+  return { start: "", end: "" };
+}
+
+function formatDateRange(start: string, end: string): string {
+  if (!start) return "";
+  const [sy, sm, sd] = start.split("-");
+  if (!end) return `${sd}.${sm}.${sy}`;
+  const [ey, em, ed] = end.split("-");
+  if (sm === em && sy === ey) return `${sd}-${ed}.${sm}.${sy}`;
+  return `${sd}.${sm}-${ed}.${em}.${ey}`;
+}
+
+interface DateRangeFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function DateRangeField({ value, onChange }: DateRangeFieldProps) {
+  const { start, end } = parseDateRange(value);
+
+  function handleChange(s: string, e: string) {
+    onChange(formatDateRange(s, e));
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative flex-1">
+        <Calendar size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="date"
+          value={start}
+          onChange={(e) => handleChange(e.target.value, end)}
+          className="w-full rounded-lg border border-white/10 bg-neutral-800 pl-7 pr-2 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
+        />
+      </div>
+      <span className="text-neutral-500 text-xs">—</span>
+      <div className="relative flex-1">
+        <Calendar size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="date"
+          value={end}
+          min={start}
+          onChange={(e) => handleChange(start, e.target.value)}
+          placeholder="(один день)"
+          className="w-full rounded-lg border border-white/10 bg-neutral-800 pl-7 pr-2 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
+        />
+      </div>
+    </div>
+  );
+}
+
+// --- City Autocomplete Field ---
+interface CityFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  onSearch?: (query: string) => void;
+  suggestions?: string[];
+  onSelectSuggestion?: (value: string) => void;
+}
+
+export function CityField({ value, onChange, error, onSearch, suggestions, onSelectSuggestion }: CityFieldProps) {
+  const [focused, setFocused] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!focused) return;
+    function handle(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setFocused(false);
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [focused]);
+
+  return (
+    <div ref={containerRef} className="relative flex-1">
+      <div className="relative">
+        <MapPin size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-500 pointer-events-none" />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            onSearch?.(e.target.value);
+          }}
+          onFocus={() => setFocused(true)}
+          placeholder="Город, страна"
+          className={`w-full rounded-lg border bg-neutral-800 pl-7 pr-3 py-2 text-sm text-white placeholder-neutral-600 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {error && <AlertCircle size={12} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-red-400" />}
+      </div>
+      {error && <p className="mt-0.5 text-[10px] text-red-400">{error}</p>}
+      {focused && suggestions && suggestions.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full rounded-lg border border-white/10 bg-neutral-800 shadow-xl overflow-hidden">
+          {suggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                onSelectSuggestion?.(s);
+                setFocused(false);
+              }}
+              className="w-full px-3 py-1.5 text-left text-sm text-white hover:bg-white/5 transition-colors"
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Link Field with Validation ---
+interface ValidatedLinkFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onValidate?: (key: string, error: string | null) => void;
+  validationKey?: string;
+  placeholder?: string;
+}
+
+export function ValidatedLinkField({ value, onChange, onValidate, validationKey, placeholder }: ValidatedLinkFieldProps) {
+  const [error, setError] = useState<string | null>(null);
+
+  function validate(url: string) {
+    if (!url) {
+      setError(null);
+      onValidate?.(validationKey || "", null);
+      return;
+    }
+    try {
+      new URL(url);
+      setError(null);
+      onValidate?.(validationKey || "", null);
+    } catch {
+      setError("Некорректная ссылка");
+      onValidate?.(validationKey || "", "invalid");
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 flex-1">
+      <Link size={12} className="text-neutral-500 shrink-0" />
+      <div className="relative flex-1">
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+            validate(e.target.value);
+          }}
+          placeholder={placeholder || "Ссылка..."}
+          className={`w-full rounded-md border bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/5 focus:border-gold/50"
+          }`}
+        />
+        {error && (
+          <span className="absolute right-1.5 top-1/2 -translate-y-1/2">
+            <AlertCircle size={10} className="text-red-400" />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface VictoryItemListFieldProps {
+  label: string;
+  items: VictoryItem[];
+  onChange: (items: VictoryItem[]) => void;
+  cityErrors?: Record<number, string>;
+  citySuggestions?: { index: number; items: string[] } | null;
+  onCitySearch?: (index: number, query: string) => void;
+  onCitySelect?: (index: number, value: string) => void;
+  onLinkValidate?: (key: string, error: string | null) => void;
+}
+
+export function VictoryItemListField({ label, items, onChange, cityErrors, citySuggestions, onCitySearch, onCitySelect, onLinkValidate }: VictoryItemListFieldProps) {
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
+
+  function add() {
+    onChange([...items, { place: "", category: "", competition: "" }]);
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function update(index: number, field: keyof VictoryItem, value: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, [field]: value || undefined } : item)));
+  }
+
+  function removeImage(index: number) {
+    onChange(items.map((item, i) => (i === index ? { ...item, image: undefined } : item)));
+  }
+
+  async function handleUpload(index: number, e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingIndex(index);
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("folder", "team");
+    try {
+      const res = await fetch("/api/admin/upload", { method: "POST", body: formData });
+      const result = await res.json();
+      if (result.path) {
+        onChange(items.map((item, i) => (i === index ? { ...item, image: result.path } : item)));
+      }
+    } catch { /* upload failed */ } finally {
+      setUploadingIndex(null);
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div className="space-y-3">
+        {items.map((item, i) => (
+          <div key={i} className="rounded-lg border border-white/10 bg-neutral-800/50 p-3 space-y-2">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={item.place || ""}
+                onChange={(e) => update(i, "place", e.target.value)}
+                placeholder="Место (🥇, 1 место...)"
+                className="w-32 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+              <input
+                type="text"
+                value={item.category || ""}
+                onChange={(e) => update(i, "category", e.target.value)}
+                placeholder="Категория (Exotic Semi-Pro...)"
+                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+            <input
+              type="text"
+              value={item.competition || ""}
+              onChange={(e) => update(i, "competition", e.target.value)}
+              placeholder="Чемпионат (REVOLUTION 2025...)"
+              className="w-full rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+            />
+            <div className="flex gap-2">
+              <CityField
+                value={item.location || ""}
+                onChange={(v) => update(i, "location", v)}
+                error={cityErrors?.[i]}
+                onSearch={(q) => onCitySearch?.(i, q)}
+                suggestions={citySuggestions?.index === i ? citySuggestions.items : undefined}
+                onSelectSuggestion={(v) => onCitySelect?.(i, v)}
+              />
+              <div className="w-56 shrink-0">
+                <DateRangeField
+                  value={item.date || ""}
+                  onChange={(v) => update(i, "date", v)}
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-2 pl-1">
+              {item.image ? (
+                <div className="flex items-center gap-1.5 rounded-md bg-neutral-700/50 px-2 py-1 text-xs text-neutral-300">
+                  <ImageIcon size={12} className="text-gold" />
+                  <span className="max-w-[120px] truncate">{item.image.split("/").pop()}</span>
+                  <button type="button" onClick={() => removeImage(i)} className="text-neutral-500 hover:text-red-400">
+                    <X size={10} />
+                  </button>
+                </div>
+              ) : (
+                <label className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-neutral-500 hover:text-neutral-300 transition-colors">
+                  {uploadingIndex === i ? <Loader2 size={12} className="animate-spin" /> : <Upload size={12} />}
+                  {uploadingIndex === i ? "Загрузка..." : "Фото"}
+                  <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
+                </label>
+              )}
+              <ValidatedLinkField
+                value={item.link || ""}
+                onChange={(v) => update(i, "link", v)}
+                validationKey={`victory-${i}`}
+                onValidate={onLinkValidate}
+              />
+            </div>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={add}
+          className="flex items-center gap-2 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-neutral-500 hover:text-gold hover:border-gold/30 transition-colors"
+        >
+          <Plus size={14} />
+          Добавить достижение
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/admin/team/[id]/page.tsx

@@ -1,10 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter, useParams } from "next/navigation";
 import Image from "next/image";
-import { Save, Loader2, Check, ArrowLeft, Upload } from "lucide-react";
+import { Save, Loader2, Check, ArrowLeft, Upload, AlertCircle } from "lucide-react";
-import { InputField, TextareaField, ListField } from "../../_components/FormField";
+import { InputField, TextareaField, ListField, VictoryListField, VictoryItemListField } from "../../_components/FormField";
+import type { RichListItem, VictoryItem } from "@/types/content";
+
+function extractUsername(value: string): string {
+  if (!value) return "";
+  // Strip full URL → username
+  const cleaned = value.replace(/^https?:\/\/(www\.)?instagram\.com\//, "").replace(/\/$/, "").replace(/^@/, "");
+  return cleaned;
+}
 
 interface MemberForm {
   name: string;
@@ -13,8 +21,8 @@ interface MemberForm {
   instagram: string;
   description: string;
   experience: string[];
-  victories: string[];
+  victories: VictoryItem[];
-  education: string[];
+  education: RichListItem[];
 }
 
 export default function TeamMemberEditorPage() {
@@ -37,34 +45,112 @@ export default function TeamMemberEditorPage() {
   const [saved, setSaved] = useState(false);
   const [uploading, setUploading] = useState(false);
 
+  // Instagram validation
+  const [igStatus, setIgStatus] = useState<"idle" | "checking" | "valid" | "invalid">("idle");
+  const igTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const validateInstagram = useCallback((username: string) => {
+    if (igTimerRef.current) clearTimeout(igTimerRef.current);
+    if (!username) { setIgStatus("idle"); return; }
+    setIgStatus("checking");
+    igTimerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/admin/validate-instagram?username=${encodeURIComponent(username)}`);
+        const result = await res.json();
+        setIgStatus(result.valid ? "valid" : "invalid");
+      } catch {
+        setIgStatus("idle");
+      }
+    }, 800);
+  }, []);
+
+  // Link validation for bio
+  const [linkErrors, setLinkErrors] = useState<Record<string, string>>({});
+
+  function validateUrl(url: string): boolean {
+    if (!url) return true;
+    try { new URL(url); return true; } catch { return false; }
+  }
+
+  // City validation for victories
+  const [cityErrors, setCityErrors] = useState<Record<number, string>>({});
+  const [citySuggestions, setCitySuggestions] = useState<{ index: number; items: string[] } | null>(null);
+  const cityTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const searchCity = useCallback((index: number, query: string) => {
+    if (cityTimerRef.current) clearTimeout(cityTimerRef.current);
+    if (!query || query.length < 2) { setCitySuggestions(null); return; }
+    cityTimerRef.current = setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&addressdetails=1&limit=5&accept-language=ru`,
+          { headers: { "User-Agent": "BlackheartAdmin/1.0" } }
+        );
+        const results = await res.json();
+        const cities = results
+          .filter((r: Record<string, unknown>) => {
+            const type = r.type as string;
+            const cls = r.class as string;
+            return cls === "place" || type === "city" || type === "town" || type === "village" || type === "administrative";
+          })
+          .map((r: Record<string, unknown>) => {
+            const addr = r.address as Record<string, string> | undefined;
+            const city = addr?.city || addr?.town || addr?.village || (r.name as string);
+            const country = addr?.country || "";
+            return country ? `${city}, ${country}` : city;
+          })
+          .filter((v: string, i: number, a: string[]) => a.indexOf(v) === i);
+        setCitySuggestions(cities.length > 0 ? { index, items: cities } : null);
+        if (cities.length === 0 && query.length >= 3) {
+          setCityErrors((prev) => ({ ...prev, [index]: "Город не найден" }));
+        } else {
+          setCityErrors((prev) => { const n = { ...prev }; delete n[index]; return n; });
+        }
+      } catch {
+        setCitySuggestions(null);
+      }
+    }, 500);
+  }, []);
+
   useEffect(() => {
     if (isNew) return;
     fetch(`/api/admin/team/${id}`)
       .then((r) => r.json())
-      .then((member) =>
+      .then((member) => {
+        const username = extractUsername(member.instagram || "");
         setData({
           name: member.name,
           role: member.role,
           image: member.image,
-          instagram: member.instagram || "",
+          instagram: username,
           description: member.description || "",
           experience: member.experience || [],
           victories: member.victories || [],
           education: member.education || [],
-        })
+        });
-      )
+        if (username) setIgStatus("valid"); // existing data is trusted
+      })
       .finally(() => setLoading(false));
   }, [id, isNew]);
 
+  const hasErrors = igStatus === "invalid" || Object.keys(linkErrors).length > 0 || Object.keys(cityErrors).length > 0;
+
   async function handleSave() {
+    if (hasErrors) return;
     setSaving(true);
     setSaved(false);
 
+    // Build instagram as full URL for storage if username is provided
+    const payload = {
+      ...data,
+      instagram: data.instagram ? `https://instagram.com/${data.instagram}` : "",
+    };
+
     if (isNew) {
       const res = await fetch("/api/admin/team", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (res.ok) {
         router.push("/admin/team");
@@ -73,7 +159,7 @@ export default function TeamMemberEditorPage() {
       const res = await fetch(`/api/admin/team/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(payload),
       });
       if (res.ok) {
         setSaved(true);
@@ -133,7 +219,7 @@ export default function TeamMemberEditorPage() {
         </div>
         <button
           onClick={handleSave}
-          disabled={saving || !data.name || !data.role}
+          disabled={saving || !data.name || !data.role || hasErrors || igStatus === "checking"}
           className="flex items-center gap-2 rounded-lg bg-gold px-4 py-2.5 text-sm font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-50"
         >
           {saving ? (
@@ -188,13 +274,40 @@ export default function TeamMemberEditorPage() {
             value={data.role}
             onChange={(v) => setData({ ...data, role: v })}
           />
-          <InputField
+          <div>
-            label="Instagram"
+            <label className="block text-sm text-neutral-400 mb-1.5">Instagram</label>
-            value={data.instagram}
+            <div className="relative">
-            onChange={(v) => setData({ ...data, instagram: v })}
+              <span className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500 text-sm select-none">@</span>
-            type="url"
+              <input
-            placeholder="https://instagram.com/..."
+                type="text"
-          />
+                value={data.instagram}
+                onChange={(e) => {
+                  const username = extractUsername(e.target.value);
+                  setData({ ...data, instagram: username });
+                  validateInstagram(username);
+                }}
+                placeholder="username"
+                className={`w-full rounded-lg border bg-neutral-800 pl-8 pr-10 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+                  igStatus === "invalid"
+                    ? "border-red-500 focus:border-red-500"
+                    : igStatus === "valid"
+                    ? "border-green-500/50 focus:border-green-500"
+                    : "border-white/10 focus:border-gold"
+                }`}
+              />
+              <span className="absolute right-3 top-1/2 -translate-y-1/2">
+                {igStatus === "checking" && <Loader2 size={14} className="animate-spin text-neutral-400" />}
+                {igStatus === "valid" && <Check size={14} className="text-green-400" />}
+                {igStatus === "invalid" && <AlertCircle size={14} className="text-red-400" />}
+              </span>
+            </div>
+            {igStatus === "invalid" && (
+              <p className="mt-1 text-xs text-red-400">Аккаунт не найден</p>
+            )}
+            {data.instagram && igStatus !== "invalid" && (
+              <p className="mt-1 text-xs text-neutral-500">instagram.com/{data.instagram}</p>
+            )}
+          </div>
           <TextareaField
             label="Описание"
             value={data.description}
@@ -211,17 +324,37 @@ export default function TeamMemberEditorPage() {
                 onChange={(items) => setData({ ...data, experience: items })}
                 placeholder="Например: 10 лет в танцах"
               />
-              <ListField
+              <VictoryItemListField
                 label="Достижения"
                 items={data.victories}
                 onChange={(items) => setData({ ...data, victories: items })}
-                placeholder="Например: 1 место — чемпионат..."
+                cityErrors={cityErrors}
+                citySuggestions={citySuggestions}
+                onCitySearch={searchCity}
+                onCitySelect={(i, v) => {
+                  const updated = data.victories.map((item, idx) => idx === i ? { ...item, location: v } : item);
+                  setData({ ...data, victories: updated });
+                  setCitySuggestions(null);
+                  setCityErrors((prev) => { const n = { ...prev }; delete n[i]; return n; });
+                }}
+                onLinkValidate={(key, error) => {
+                  setLinkErrors((prev) => {
+                    if (error) return { ...prev, [key]: error };
+                    const n = { ...prev }; delete n[key]; return n;
+                  });
+                }}
               />
-              <ListField
+              <VictoryListField
                 label="Образование"
                 items={data.education}
                 onChange={(items) => setData({ ...data, education: items })}
                 placeholder="Например: Сертификат IPSF"
+                onLinkValidate={(key, error) => {
+                  setLinkErrors((prev) => {
+                    if (error) return { ...prev, [key]: error };
+                    const n = { ...prev }; delete n[key]; return n;
+                  });
+                }}
               />
             </div>
           </div>

src/app/admin/team/page.tsx

@@ -9,7 +9,6 @@ import {
   Plus,
   Trash2,
   GripVertical,
-  Pencil,
   Check,
 } from "lucide-react";
 import type { TeamMember } from "@/types/content";
@@ -80,16 +79,23 @@ export default function TeamEditorPage() {
       const x = e.clientX;
       const y = e.clientY;
       const pendingIndex = index;
+      let moved = false;
 
       function onMove(ev: MouseEvent) {
         const dx = ev.clientX - x;
         const dy = ev.clientY - y;
         if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
+          moved = true;
           cleanup();
           startDrag(ev.clientX, ev.clientY, pendingIndex);
         }
       }
-      function onUp() { cleanup(); }
+      function onUp() {
+        cleanup();
+        if (!moved) {
+          window.location.href = `/admin/team/${members[pendingIndex].id}`;
+        }
+      }
       function cleanup() {
         window.removeEventListener("mousemove", onMove);
         window.removeEventListener("mouseup", onUp);
@@ -97,7 +103,7 @@ export default function TeamEditorPage() {
       window.addEventListener("mousemove", onMove);
       window.addEventListener("mouseup", onUp);
     },
-    [startDrag]
+    [startDrag, members]
   );
 
   useEffect(() => {
@@ -177,7 +183,7 @@ export default function TeamEditorPage() {
           key={member.id}
           ref={(el) => { itemRefs.current[i] = el; }}
           onMouseDown={(e) => handleCardMouseDown(e, i)}
-          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors cursor-pointer"
         >
           <div
             className="cursor-grab active:cursor-grabbing text-neutral-500 hover:text-white transition-colors select-none"
@@ -192,14 +198,9 @@ export default function TeamEditorPage() {
             <p className="font-medium text-white truncate">{member.name}</p>
             <p className="text-sm text-neutral-400 truncate">{member.role}</p>
           </div>
-          <div className="flex items-center gap-1">
+          <button onClick={(e) => { e.stopPropagation(); deleteMember(member.id); }} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-            <Link href={`/admin/team/${member.id}`} className="rounded p-2 text-neutral-400 hover:text-white transition-colors">
+            <Trash2 size={16} />
-              <Pencil size={16} />
+          </button>
-            </Link>
-            <button onClick={() => deleteMember(member.id)} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-              <Trash2 size={16} />
-            </button>
-          </div>
         </div>
       ));
     }
@@ -237,7 +238,7 @@ export default function TeamEditorPage() {
           key={member.id}
           ref={(el) => { itemRefs.current[i] = el; }}
           onMouseDown={(e) => handleCardMouseDown(e, i)}
-          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className="flex items-center gap-4 rounded-lg border border-white/10 bg-neutral-900/50 p-3 mb-2 hover:border-white/25 hover:bg-neutral-800/50 transition-colors cursor-pointer"
         >
           <div
             className="cursor-grab active:cursor-grabbing text-neutral-500 hover:text-white transition-colors select-none"
@@ -252,14 +253,9 @@ export default function TeamEditorPage() {
             <p className="font-medium text-white truncate">{member.name}</p>
             <p className="text-sm text-neutral-400 truncate">{member.role}</p>
           </div>
-          <div className="flex items-center gap-1">
+          <button onClick={(e) => { e.stopPropagation(); deleteMember(member.id); }} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-            <Link href={`/admin/team/${member.id}`} className="rounded p-2 text-neutral-400 hover:text-white transition-colors">
+            <Trash2 size={16} />
-              <Pencil size={16} />
+          </button>
-            </Link>
-            <button onClick={() => deleteMember(member.id)} className="rounded p-2 text-neutral-400 hover:text-red-400 transition-colors">
-              <Trash2 size={16} />
-            </button>
-          </div>
         </div>
       );
       visualIndex++;

src/app/api/admin/team/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getTeamMembers, createTeamMember } from "@/lib/db";
 import { revalidatePath } from "next/cache";
+import type { RichListItem, VictoryItem } from "@/types/content";
 
 export async function GET() {
   const members = getTeamMembers();
@@ -15,8 +16,8 @@ export async function POST(request: NextRequest) {
     instagram?: string;
     description?: string;
     experience?: string[];
-    victories?: string[];
+    victories?: VictoryItem[];
-    education?: string[];
+    education?: RichListItem[];
   };
 
   if (!data.name || !data.role || !data.image) {

src/app/api/admin/validate-instagram/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const username = request.nextUrl.searchParams.get("username")?.trim();
+  if (!username) {
+    return NextResponse.json({ valid: false, error: "No username" });
+  }
+
+  try {
+    const res = await fetch(`https://www.instagram.com/${username}/`, {
+      method: "HEAD",
+      redirect: "follow",
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+      },
+      signal: AbortSignal.timeout(5000),
+    });
+
+    // Instagram returns 200 for existing profiles, 404 for non-existing
+    const valid = res.ok;
+    return NextResponse.json({ valid });
+  } catch {
+    // Network error or timeout — don't block the user
+    return NextResponse.json({ valid: true, uncertain: true });
+  }
+}

src/components/sections/Team.tsx

@@ -36,33 +36,35 @@ export function Team({ data: team }: TeamProps) {
         <Reveal>
           <SectionHeading centered>{team.title}</SectionHeading>
         </Reveal>
+      </div>
 
-        <Reveal>
+      <Reveal>
-          <div className="mt-10">
+        <div className="mt-10 px-4 sm:px-6">
-            {!showProfile ? (
+          {!showProfile ? (
-              <>
+            <>
-                <TeamCarousel
+              <TeamCarousel
-                  members={team.members}
+                members={team.members}
-                  activeIndex={activeIndex}
+                activeIndex={activeIndex}
-                  onActiveChange={setActiveIndex}
+                onActiveChange={setActiveIndex}
-                />
+              />
 
+              <div className="mx-auto max-w-6xl">
                 <TeamMemberInfo
                   members={team.members}
                   activeIndex={activeIndex}
                   onSelect={setActiveIndex}
                   onOpenBio={() => setShowProfile(true)}
                 />
-              </>
+              </div>
-            ) : (
+            </>
-              <TeamProfile
+          ) : (
-                member={team.members[activeIndex]}
+            <TeamProfile
-                onBack={() => setShowProfile(false)}
+              member={team.members[activeIndex]}
-              />
+              onBack={() => setShowProfile(false)}
-            )}
+            />
-          </div>
+          )}
-        </Reveal>
+        </div>
-      </div>
+      </Reveal>
     </section>
   );
 }

src/components/sections/team/TeamProfile.tsx

@@ -1,26 +1,23 @@
+import { useState } from "react";
 import Image from "next/image";
-import { ArrowLeft, Instagram, Trophy, Award, GraduationCap } from "lucide-react";
+import { ArrowLeft, Instagram, Trophy, GraduationCap, ExternalLink, X, MapPin, Calendar } from "lucide-react";
-import type { TeamMember } from "@/types/content";
+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(
+  const [lightbox, setLightbox] = useState<string | null>(null);
-    (s) => member[s.key] && member[s.key]!.length > 0
+  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 */}
@@ -32,78 +29,278 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
         Назад
       </button>
 
-      {/* Main: photo + info */}
+      {/* Magazine editorial layout */}
-      <div className="flex flex-col items-center gap-8 sm:flex-row sm:items-start">
+      <div className="relative mx-auto max-w-4xl flex flex-col sm:flex-row sm:items-start">
-        {/* Photo */}
+        {/* Photo — left column, sticky */}
-        <div className="relative w-full max-w-[260px] shrink-0 aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
+        <div className="relative shrink-0 w-full sm:w-[340px] lg:w-[380px] sm:sticky sm:top-8">
-          <Image
+          <div className="relative aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
-            src={member.image}
+            <Image
-            alt={member.name}
+              src={member.image}
-            fill
+              alt={member.name}
-            sizes="260px"
+              fill
-            className="object-cover"
+              sizes="(min-width: 1024px) 380px, (min-width: 640px) 340px, 100vw"
-          />
+              className="object-cover"
+            />
+            {/* Top gradient for name */}
+            <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-transparent" />
+            {/* Bottom gradient for mobile bio peek */}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent sm:hidden" />
+
+            {/* Name + role overlay at top */}
+            <div className="absolute top-0 left-0 right-0 p-6 sm:p-8">
+              <h3
+                className="text-3xl sm:text-4xl font-bold text-white leading-tight"
+                style={{ textShadow: "0 2px 24px rgba(0,0,0,0.6)" }}
+              >
+                {member.name}
+              </h3>
+              <p
+                className="mt-1.5 text-sm sm:text-base font-medium text-gold-light"
+                style={{ textShadow: "0 1px 12px 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>
         </div>
 
-        {/* Info */}
+        {/* Bio panel — overlaps photo edge on desktop */}
-        <div className="text-center sm:text-left">
+        <div className="relative sm:-ml-12 sm:mt-8 mt-0 flex-1 min-w-0 z-10">
-          <h3 className="text-2xl font-bold text-white">{member.name}</h3>
+          <div className="rounded-2xl border border-white/[0.08] bg-black/60 backdrop-blur-xl p-5 sm:p-6 shadow-2xl shadow-black/40">
-          <p className="mt-1 text-sm font-medium text-gold-light">
+            {/* Victories */}
-            {member.role}
+            {hasVictories && (
-          </p>
+              <div>
-
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
-          {member.instagram && (
+                  <Trophy size={14} />
-            <a
+                  Достижения
-              href={member.instagram}
+                </span>
-              target="_blank"
+                <div className="mt-4 flex flex-col sm:flex-row sm:flex-wrap gap-2.5">
-              rel="noopener noreferrer"
+                  {member.victories!.map((item, i) => (
-              className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
+                    <VictoryCard key={i} victory={item} onImageClick={setLightbox} />
-            >
+                  ))}
-              <Instagram size={14} />
-              {member.instagram.split("/").filter(Boolean).pop()}
-            </a>
-          )}
-
-          {member.description && (
-            <p className="mt-4 text-sm leading-relaxed text-white/55">
-              {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">
+              </div>
-                  {items.map((item, i) => (
+            )}
+
+            {/* Education */}
+            {hasEducation && (
+              <div className={hasVictories ? "mt-8" : ""}>
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
+                  <GraduationCap size={14} />
+                  Образование
+                </span>
+                <div className="mt-4 space-y-2">
+                  {member.education!.map((item, i) => (
+                    <RichCard key={i} item={item} onImageClick={setLightbox} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Experience */}
+            {hasExperience && (
+              <div className={hasVictories || hasEducation ? "mt-8" : ""}>
+                <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
+                  <Trophy size={15} />
+                  Опыт
+                </span>
+                <ul className="mt-4 space-y-2.5">
+                  {member.experience!.map((item, i) => (
                     <li
                       key={i}
-                      className="flex items-start gap-2 text-sm text-white/60"
+                      className="flex items-start gap-2.5 text-sm text-white/60"
                     >
-                      <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
+                      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gold/40" />
                       {item}
                     </li>
                   ))}
                 </ul>
               </div>
-            );
+            )}
-          })}
+
+            {/* Description */}
+            {member.description && (
+              <p className={`text-sm leading-relaxed text-white/45 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
+                {member.description}
+              </p>
+            )}
+
+            {/* Empty state */}
+            {!hasBio && !member.description && (
+              <p className="text-sm text-white/30 italic">
+                Информация скоро появится
+              </p>
+            )}
+          </div>
+        </div>
+      </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 w-full sm:w-44 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden">
+        <button
+          onClick={() => onImageClick(victory.image!)}
+          className="relative w-full aspect-square overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={victory.image!}
+            alt={victory.competition}
+            fill
+            sizes="176px"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+          <div className="absolute bottom-0 left-0 right-0 bg-black/80 backdrop-blur-sm p-2.5 space-y-0.5">
+            {victory.place && (
+              <p className="text-sm font-bold text-gold">{victory.place}</p>
+            )}
+            {victory.category && (
+              <p className="text-[10px] font-semibold uppercase tracking-wider text-white">{victory.category}</p>
+            )}
+            <p className="text-xs text-white/80">{victory.competition}</p>
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group w-full sm:w-56 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
+      <div className="p-2.5 space-y-0.5">
+        {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 flex rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
+        <button
+          onClick={() => onImageClick(item.image!)}
+          className="relative w-16 shrink-0 overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={item.image!}
+            alt={item.text}
+            fill
+            sizes="64px"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+        </button>
+        <div className="flex-1 min-w-0 p-2.5">
+          <p className="text-xs text-white/70">{item.text}</p>
+          {hasLink && (
+            <a
+              href={item.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>
+    );
+  }
+
+  return (
+    <div className="group rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
+      <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>
+  );
+}

src/lib/db.ts

@@ -1,6 +1,6 @@
 import Database from "better-sqlite3";
 import path from "path";
-import type { SiteContent, TeamMember } from "@/types/content";
+import type { SiteContent, TeamMember, RichListItem, VictoryItem } from "@/types/content";
 
 const DB_PATH =
   process.env.DATABASE_PATH ||
@@ -88,6 +88,32 @@ function parseJsonArray(val: string | null): string[] | undefined {
   try { const arr = JSON.parse(val); return Array.isArray(arr) && arr.length > 0 ? arr : undefined; } catch { return undefined; }
 }
 
+function parseRichList(val: string | null): RichListItem[] | undefined {
+  if (!val) return undefined;
+  try {
+    const arr = JSON.parse(val);
+    if (!Array.isArray(arr) || arr.length === 0) return undefined;
+    // Handle both old string[] and new RichListItem[] formats
+    return arr.map((item: string | RichListItem) =>
+      typeof item === "string" ? { text: item } : item
+    );
+  } catch { return undefined; }
+}
+
+function parseVictories(val: string | null): VictoryItem[] | undefined {
+  if (!val) return undefined;
+  try {
+    const arr = JSON.parse(val);
+    if (!Array.isArray(arr) || arr.length === 0) return undefined;
+    // Handle old string[], old RichListItem[], and new VictoryItem[] formats
+    return arr.map((item: string | Record<string, unknown>) => {
+      if (typeof item === "string") return { place: "", category: "", competition: item };
+      if ("text" in item && !("competition" in item)) return { place: "", category: "", competition: item.text as string, image: item.image as string | undefined, link: item.link as string | undefined };
+      return item as unknown as VictoryItem;
+    });
+  } catch { return undefined; }
+}
+
 export function getTeamMembers(): (TeamMember & { id: number })[] {
   const db = getDb();
   const rows = db
@@ -101,8 +127,8 @@ export function getTeamMembers(): (TeamMember & { id: number })[] {
     instagram: r.instagram ?? undefined,
     description: r.description ?? undefined,
     experience: parseJsonArray(r.experience),
-    victories: parseJsonArray(r.victories),
+    victories: parseVictories(r.victories),
-    education: parseJsonArray(r.education),
+    education: parseRichList(r.education),
   }));
 }
 
@@ -122,8 +148,8 @@ export function getTeamMember(
     instagram: r.instagram ?? undefined,
     description: r.description ?? undefined,
     experience: parseJsonArray(r.experience),
-    victories: parseJsonArray(r.victories),
+    victories: parseVictories(r.victories),
-    education: parseJsonArray(r.education),
+    education: parseRichList(r.education),
   };
 }
 

src/types/content.ts

@@ -7,6 +7,22 @@ export interface ClassItem {
   color?: string;
 }
 
+export interface RichListItem {
+  text: string;
+  image?: string;
+  link?: string;
+}
+
+export interface VictoryItem {
+  place: string;
+  category: string;
+  competition: string;
+  location?: string;
+  date?: string;
+  image?: string;
+  link?: string;
+}
+
 export interface TeamMember {
   name: string;
   role: string;
@@ -14,8 +30,8 @@ export interface TeamMember {
   instagram?: string;
   description?: string;
   experience?: string[];
-  victories?: string[];
+  victories?: VictoryItem[];
-  education?: string[];
+  education?: RichListItem[];
 }
 
 export interface FAQItem {