refactor: centralize gold tokens, extract sub-components, clean up unused code

- Replace hardcoded hex colors with gold/gold-light/gold-dark Tailwind tokens
- Extract Schedule into DayCard, ScheduleFilters, MobileSchedule sub-components
- Extract Team into TeamCarousel, TeamMemberInfo sub-components
- Add UI_CONFIG for centralized magic numbers (timings, thresholds)
- Add reusable IconBadge component, simplify Contact section
- Convert Pricing clickable divs to semantic buttons for a11y
- Remove unused SocialLinks, btn-outline, btn-ghost, nav-link CSS classes
- Fix React setState-during-render error in TeamCarousel (deferred update pattern)

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

src/components/sections/About.tsx

@@ -36,9 +36,9 @@ export function About() {
             {stats.map((stat, i) => (
               <div
                 key={i}
-                className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/50 p-6 transition-all duration-300 hover:border-[#c9a96e]/30 sm:p-8 dark:border-white/[0.06] dark:bg-white/[0.02] dark:hover:border-[#c9a96e]/20"
+                className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/50 p-6 transition-all duration-300 hover:border-gold/30 sm:p-8 dark:border-white/[0.06] dark:bg-white/[0.02] dark:hover:border-gold/20"
               >
-                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/20 dark:text-[#d4b87a]">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gold/10 text-gold-dark transition-colors group-hover:bg-gold/20 dark:text-gold-light">
                   {stat.icon}
                 </div>
                 <span className="font-display text-3xl font-bold text-neutral-900 sm:text-4xl dark:text-white">

src/components/sections/Classes.tsx

@@ -8,6 +8,7 @@ import { Reveal } from "@/components/ui/Reveal";
 import { ShowcaseLayout } from "@/components/ui/ShowcaseLayout";
 import { useShowcaseRotation } from "@/hooks/useShowcaseRotation";
 import type { ClassItem } from "@/types";
+import { UI_CONFIG } from "@/lib/config";
 
 const iconMap: Record<string, React.ReactNode> = {
   flame: <Flame size={20} />,
@@ -22,7 +23,7 @@ export function Classes() {
   const { classes } = siteContent;
   const { activeIndex, select, setHovering } = useShowcaseRotation({
     totalItems: classes.items.length,
-    autoPlayInterval: 5000,
+    autoPlayInterval: UI_CONFIG.showcase.autoPlayInterval,
   });
 
   return (
@@ -56,7 +57,7 @@ export function Classes() {
 
                       {/* Icon + name overlay */}
                       <div className="absolute bottom-0 left-0 right-0 p-6">
-                        <div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[#c9a96e]/20 text-[#d4b87a] backdrop-blur-sm">
+                        <div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-gold/20 text-gold-light backdrop-blur-sm">
                           {iconMap[item.icon]}
                         </div>
                         <h3 className="text-2xl font-bold text-white">
@@ -80,7 +81,7 @@ export function Classes() {
                   <div
                     className={`flex h-7 w-7 lg:h-9 lg:w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
                       isActive
-                        ? "bg-[#c9a96e]/20 text-[#d4b87a]"
+                        ? "bg-gold/20 text-gold-light"
                         : "bg-neutral-200/50 text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400"
                     }`}
                   >
@@ -90,7 +91,7 @@ export function Classes() {
                     <p
                       className={`text-xs lg:text-sm font-semibold truncate transition-colors ${
                         isActive
-                          ? "text-[#c9a96e]"
+                          ? "text-gold"
                           : "text-neutral-700 dark:text-neutral-300"
                       }`}
                     >

src/components/sections/Contact.tsx

@@ -3,6 +3,7 @@ import { siteContent } from "@/data/content";
 import { BRAND } from "@/lib/constants";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { IconBadge } from "@/components/ui/IconBadge";
 
 export function Contact() {
   const { contact } = siteContent;
@@ -17,42 +18,34 @@ export function Contact() {
           <div className="mt-10 space-y-5">
             {contact.addresses.map((address, i) => (
               <div key={i} className="group flex items-center gap-4">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/15 dark:bg-[#c9a96e]/10 dark:text-[#d4b87a] dark:group-hover:bg-[#c9a96e]/15">
-                  <MapPin size={18} />
-                </div>
+                <IconBadge><MapPin size={18} /></IconBadge>
                 <p className="body-text">{address}</p>
               </div>
             ))}
 
             <div className="group flex items-center gap-4">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/15 dark:bg-[#c9a96e]/10 dark:text-[#d4b87a] dark:group-hover:bg-[#c9a96e]/15">
-                <Phone size={18} />
-              </div>
+              <IconBadge><Phone size={18} /></IconBadge>
               <a
                 href={`tel:${contact.phone}`}
-                className="text-neutral-600 transition-colors hover:text-[#a08050] dark:text-neutral-300 dark:hover:text-[#d4b87a]"
+                className="text-neutral-600 transition-colors hover:text-gold-dark dark:text-neutral-300 dark:hover:text-gold-light"
               >
                 {contact.phone}
               </a>
             </div>
 
             <div className="group flex items-center gap-4">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/15 dark:bg-[#c9a96e]/10 dark:text-[#d4b87a] dark:group-hover:bg-[#c9a96e]/15">
-                <Clock size={18} />
-              </div>
+              <IconBadge><Clock size={18} /></IconBadge>
               <p className="body-text">{contact.workingHours}</p>
             </div>
 
             <div className="border-t border-neutral-200 pt-5 dark:border-white/[0.08]">
               <div className="group flex items-center gap-4">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-[#a08050] transition-colors group-hover:bg-[#c9a96e]/15 dark:bg-[#c9a96e]/10 dark:text-[#d4b87a] dark:group-hover:bg-[#c9a96e]/15">
-                  <Instagram size={18} />
-                </div>
+                <IconBadge><Instagram size={18} /></IconBadge>
                 <a
                   href={contact.instagram}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-neutral-600 transition-colors hover:text-[#a08050] dark:text-neutral-300 dark:hover:text-[#d4b87a]"
+                  className="text-neutral-600 transition-colors hover:text-gold-dark dark:text-neutral-300 dark:hover:text-gold-light"
                 >
                   {BRAND.instagramHandle}
                 </a>

src/components/sections/FAQ.tsx

@@ -6,7 +6,9 @@ import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 
-const VISIBLE_COUNT = 4;
+import { UI_CONFIG } from "@/lib/config";
+
+const VISIBLE_COUNT = UI_CONFIG.faq.visibleCount;
 
 export function FAQ() {
   const { faq } = siteContent;
@@ -36,7 +38,7 @@ export function FAQ() {
                 <div
                   className={`rounded-xl border transition-all duration-300 ${
                     isOpen
-                      ? "border-[#c9a96e]/30 bg-gradient-to-br from-[#c9a96e]/[0.06] via-transparent to-[#c9a96e]/[0.03] shadow-md shadow-[#c9a96e]/5"
+                      ? "border-gold/30 bg-gradient-to-br from-gold/[0.06] via-transparent to-gold/[0.03] shadow-md shadow-gold/5"
                       : "border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
                   }`}
                 >
@@ -48,8 +50,8 @@ export function FAQ() {
                     <span
                       className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors duration-300 ${
                         isOpen
-                          ? "bg-[#c9a96e] text-black"
-                          : "bg-[#c9a96e]/10 text-[#a08050] dark:text-[#d4b87a]"
+                          ? "bg-gold text-black"
+                          : "bg-gold/10 text-gold-dark dark:text-gold-light"
                       }`}
                     >
                       {idx + 1}
@@ -62,7 +64,7 @@ export function FAQ() {
                     <ChevronDown
                       size={16}
                       className={`shrink-0 transition-all duration-300 ${
-                        isOpen ? "text-[#c9a96e] rotate-180" : "text-neutral-400 dark:text-neutral-500"
+                        isOpen ? "text-gold rotate-180" : "text-neutral-400 dark:text-neutral-500"
                       }`}
                     />
                   </button>
@@ -92,7 +94,7 @@ export function FAQ() {
                     setExpanded(!expanded);
                     if (expanded) setOpenIndex(null);
                   }}
-                  className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-5 py-2 text-sm font-medium text-neutral-600 transition-all hover:border-[#c9a96e]/40 hover:text-[#c9a96e] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-neutral-400 dark:hover:border-[#c9a96e]/30 dark:hover:text-[#c9a96e] cursor-pointer"
+                  className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-5 py-2 text-sm font-medium text-neutral-600 transition-all hover:border-gold/40 hover:text-gold dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-neutral-400 dark:hover:border-gold/30 dark:hover:text-gold cursor-pointer"
                 >
                   {expanded ? "Скрыть" : `Ещё ${faq.items.length - VISIBLE_COUNT} вопросов`}
                   <ChevronDown

src/components/sections/Hero.tsx

@@ -73,7 +73,7 @@ export function Hero() {
       <div className="hero-cta absolute bottom-8 left-1/2 -translate-x-1/2">
         <a
           href="#about"
-          className="flex flex-col items-center gap-1 text-neutral-600 transition-colors hover:text-[#d4b87a]"
+          className="flex flex-col items-center gap-1 text-neutral-600 transition-colors hover:text-gold-light"
         >
           <span className="text-xs uppercase tracking-widest">Scroll</span>
           <ChevronDown size={20} className="animate-bounce" />

src/components/sections/Pricing.tsx

@@ -41,7 +41,7 @@ export function Pricing() {
                 onClick={() => setActiveTab(tab.id)}
                 className={`inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-medium transition-all duration-300 cursor-pointer ${
                   activeTab === tab.id
-                    ? "bg-[#c9a96e] text-black shadow-lg shadow-[#c9a96e]/25"
+                    ? "bg-gold text-black shadow-lg shadow-gold/25"
                     : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-white/[0.06] dark:text-neutral-300 dark:hover:bg-white/[0.1]"
                 }`}
               >
@@ -65,19 +65,19 @@ export function Pricing() {
                 {regularItems.map((item, i) => {
                   const isPopular = i === 0;
                   return (
-                    <div
+                    <button
                       key={i}
                       onClick={() => setBookingOpen(true)}
-                      className={`group relative cursor-pointer rounded-2xl border p-5 transition-all duration-300 ${
+                      className={`group relative cursor-pointer rounded-2xl border p-5 transition-all duration-300 text-left ${
                         isPopular
-                          ? "border-[#c9a96e]/40 bg-gradient-to-br from-[#c9a96e]/10 via-transparent to-[#c9a96e]/5 dark:from-[#c9a96e]/[0.07] dark:to-[#c9a96e]/[0.02] shadow-lg shadow-[#c9a96e]/10 hover:shadow-xl hover:shadow-[#c9a96e]/20"
+                          ? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10 hover:shadow-xl hover:shadow-gold/20"
                           : "border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
                       }`}
                     >
                       {/* Popular badge */}
                       {isPopular && (
                         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-                          <span className="inline-flex items-center gap-1 rounded-full bg-[#c9a96e] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-[#c9a96e]/30">
+                          <span className="inline-flex items-center gap-1 rounded-full bg-gold px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-md shadow-gold/30">
                             <Sparkles size={10} />
                             Популярный
                           </span>
@@ -86,7 +86,7 @@ export function Pricing() {
 
                       <div className={isPopular ? "mt-1" : ""}>
                         {/* Name */}
-                        <p className={`text-sm font-medium ${isPopular ? "text-[#a08050] dark:text-[#d4b87a]" : "text-neutral-700 dark:text-neutral-300"}`}>
+                        <p className={`text-sm font-medium ${isPopular ? "text-gold-dark dark:text-gold-light" : "text-neutral-700 dark:text-neutral-300"}`}>
                           {item.name}
                         </p>
 
@@ -98,22 +98,22 @@ export function Pricing() {
                         )}
 
                         {/* Price */}
-                        <p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-[#c9a96e]" : "text-neutral-900 dark:text-white"}`}>
+                        <p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
                           {item.price}
                         </p>
                       </div>
-                    </div>
+                    </button>
                   );
                 })}
               </div>
 
               {/* Unlimited — featured card */}
               {unlimitedItem && (
-                <div onClick={() => setBookingOpen(true)} className="mt-6 cursor-pointer team-card-glitter rounded-2xl border border-[#c9a96e]/30 bg-gradient-to-r from-[#c9a96e]/10 via-[#c9a96e]/5 to-[#c9a96e]/10 dark:from-[#c9a96e]/[0.06] dark:via-transparent dark:to-[#c9a96e]/[0.06] p-6 sm:p-8 transition-shadow duration-300 hover:shadow-xl hover:shadow-[#c9a96e]/20">
+                <button onClick={() => setBookingOpen(true)} className="mt-6 w-full cursor-pointer text-left team-card-glitter rounded-2xl border border-gold/30 bg-gradient-to-r from-gold/10 via-gold/5 to-gold/10 dark:from-gold/[0.06] dark:via-transparent dark:to-gold/[0.06] p-6 sm:p-8 transition-shadow duration-300 hover:shadow-xl hover:shadow-gold/20">
                   <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
                     <div className="text-center sm:text-left">
                       <div className="flex items-center justify-center gap-2 sm:justify-start">
-                        <Crown size={18} className="text-[#c9a96e]" />
+                        <Crown size={18} className="text-gold" />
                         <p className="text-lg font-bold text-neutral-900 dark:text-white">
                           {unlimitedItem.name}
                         </p>
@@ -124,11 +124,11 @@ export function Pricing() {
                         </p>
                       )}
                     </div>
-                    <p className="shrink-0 font-display text-3xl font-bold text-[#c9a96e]">
+                    <p className="shrink-0 font-display text-3xl font-bold text-gold">
                       {unlimitedItem.price}
                     </p>
                   </div>
-                </div>
+                </button>
               )}
             </div>
           </Reveal>
@@ -139,10 +139,10 @@ export function Pricing() {
           <Reveal>
             <div className="mx-auto mt-10 max-w-2xl space-y-3">
               {pricing.rentalItems.map((item, i) => (
-                <div
+                <button
                   key={i}
                   onClick={() => setBookingOpen(true)}
-                  className="cursor-pointer flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 transition-colors hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
+                  className="w-full cursor-pointer text-left flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 transition-colors hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
                 >
                   <div>
                     <p className="font-medium text-neutral-900 dark:text-white">
@@ -154,10 +154,10 @@ export function Pricing() {
                       </p>
                     )}
                   </div>
-                  <span className="shrink-0 font-display text-xl font-bold text-[#a08050] dark:text-[#d4b87a]">
+                  <span className="shrink-0 font-display text-xl font-bold text-gold-dark dark:text-gold-light">
                     {item.price}
                   </span>
-                </div>
+                </button>
               ))}
             </div>
           </Reveal>
@@ -172,7 +172,7 @@ export function Pricing() {
                   key={i}
                   className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
                 >
-                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#c9a96e]/10 text-xs font-bold text-[#a08050] dark:bg-[#c9a96e]/10 dark:text-[#d4b87a]">
+                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
                     {i + 1}
                   </span>
                   <p className="text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">

src/components/sections/Schedule.tsx

@@ -1,77 +1,14 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { MapPin, Clock, User, X, ChevronDown } from "lucide-react";
+import { MapPin } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
-import type { ScheduleDay } from "@/types/content";
-
-const TYPE_DOT: Record<string, string> = {
-  "Exotic Pole Dance": "bg-[#c9a96e]",
-  "Pole Dance": "bg-rose-500",
-  "Body Plastic": "bg-purple-500",
-  "Трюковые комбинации с пилоном": "bg-amber-500",
-};
-
-type StatusFilter = "all" | "hasSlots" | "recruiting";
-
-function DayCard({ day }: { day: ScheduleDay }) {
-  return (
-    <div className="rounded-2xl border border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a] overflow-hidden">
-      {/* Day header */}
-      <div className="border-b border-neutral-100 bg-neutral-50 px-5 py-4 dark:border-white/[0.04] dark:bg-white/[0.02]">
-        <div className="flex items-center gap-3">
-          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#c9a96e]/10 text-sm font-bold text-[#a08050] dark:bg-[#c9a96e]/10 dark:text-[#d4b87a]">
-            {day.dayShort}
-          </span>
-          <span className="text-base font-semibold text-neutral-900 dark:text-white/90">
-            {day.day}
-          </span>
-        </div>
-      </div>
-
-      {/* Classes */}
-      <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
-        {day.classes.map((cls, i) => (
-          <div key={i} className={`px-5 py-3.5 ${cls.hasSlots ? "bg-emerald-500/5" : cls.recruiting ? "bg-sky-500/5" : ""}`}>
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-white/40">
-                <Clock size={13} />
-                <span className="font-semibold">{cls.time}</span>
-              </div>
-              {cls.hasSlots && (
-                <span className="shrink-0 rounded-full bg-emerald-500/15 border border-emerald-500/25 px-2 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
-                  есть места
-                </span>
-              )}
-              {cls.recruiting && (
-                <span className="shrink-0 rounded-full bg-sky-500/15 border border-sky-500/25 px-2 py-0.5 text-[10px] font-semibold text-sky-600 dark:text-sky-400">
-                  набор
-                </span>
-              )}
-            </div>
-            <div className="mt-1.5 flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-white/80">
-              <User size={13} className="shrink-0 text-neutral-400 dark:text-white/30" />
-              {cls.trainer}
-            </div>
-            <div className="mt-2 flex items-center gap-2 flex-wrap">
-              <div className="flex items-center gap-2">
-                <span className={`h-2 w-2 shrink-0 rounded-full ${TYPE_DOT[cls.type] ?? "bg-white/30"}`} />
-                <span className="text-xs text-neutral-500 dark:text-white/40">{cls.type}</span>
-              </div>
-              {cls.level && (
-                <span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-0.5 text-[10px] font-semibold text-rose-600 dark:text-rose-400">
-                  {cls.level}
-                </span>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import { DayCard } from "./schedule/DayCard";
+import { ScheduleFilters } from "./schedule/ScheduleFilters";
+import { MobileSchedule } from "./schedule/MobileSchedule";
+import type { StatusFilter } from "./schedule/constants";
 
 export function Schedule() {
   const { schedule } = siteContent;
@@ -121,7 +58,7 @@ export function Schedule() {
       .filter((day) => day.classes.length > 0);
   }, [location.days, filterTrainer, filterType, filterStatus]);
 
-  const hasActiveFilter = filterTrainer || filterType || filterStatus !== "all";
+  const hasActiveFilter = !!(filterTrainer || filterType || filterStatus !== "all");
 
   function clearFilters() {
     setFilterTrainer(null);
@@ -129,10 +66,6 @@ export function Schedule() {
     setFilterStatus("all");
   }
 
-  const pillBase = "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] font-medium transition-all duration-200 cursor-pointer whitespace-nowrap";
-  const pillActive = "bg-[#c9a96e]/20 text-[#a08050] border border-[#c9a96e]/40 dark:text-[#d4b87a] dark:border-[#c9a96e]/30";
-  const pillInactive = "border border-neutral-200 text-neutral-500 hover:border-neutral-300 dark:border-white/[0.08] dark:text-white/35 dark:hover:border-white/15";
-
   return (
     <section
       id="schedule"
@@ -158,7 +91,7 @@ export function Schedule() {
                 }}
                 className={`inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-all duration-300 cursor-pointer ${
                   i === locationIndex
-                    ? "bg-[#c9a96e] text-black shadow-[0_0_20px_rgba(201,169,110,0.3)]"
+                    ? "bg-gold text-black shadow-[0_0_20px_rgba(201,169,110,0.3)]"
                     : "border border-neutral-300 text-neutral-500 hover:border-neutral-400 hover:text-neutral-700 dark:border-white/10 dark:text-neutral-400 dark:hover:text-white dark:hover:border-white/20"
                 }`}
               >
@@ -171,187 +104,36 @@ export function Schedule() {
 
         {/* Compact filters — desktop only */}
         <Reveal>
-          <div className="mt-5 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
-            {/* Class types */}
-            {types.map((type) => (
-              <button
-                key={type}
-                onClick={() => setFilterType(filterType === type ? null : type)}
-                className={`${pillBase} ${filterType === type ? pillActive : pillInactive}`}
-              >
-                <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${TYPE_DOT[type] ?? "bg-white/30"}`} />
-                {type}
-              </button>
-            ))}
-
-            {/* Divider */}
-            <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
-
-            {/* Status filters */}
-            {hasAnySlots && (
-              <button
-                onClick={() => setFilterStatus(filterStatus === "hasSlots" ? "all" : "hasSlots")}
-                className={`${pillBase} ${filterStatus === "hasSlots" ? "bg-emerald-500/20 text-emerald-700 border border-emerald-500/40 dark:text-emerald-400 dark:border-emerald-500/30" : pillInactive}`}
-              >
-                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
-                Есть места
-              </button>
-            )}
-            {hasAnyRecruiting && (
-              <button
-                onClick={() => setFilterStatus(filterStatus === "recruiting" ? "all" : "recruiting")}
-                className={`${pillBase} ${filterStatus === "recruiting" ? "bg-sky-500/20 text-sky-700 border border-sky-500/40 dark:text-sky-400 dark:border-sky-500/30" : pillInactive}`}
-              >
-                <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
-                Набор
-              </button>
-            )}
-
-            {/* Divider */}
-            <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
-
-            {/* Trainer dropdown toggle */}
-            <button
-              onClick={() => setShowTrainers(!showTrainers)}
-              className={`${pillBase} ${filterTrainer ? pillActive : pillInactive}`}
-            >
-              <User size={11} />
-              {filterTrainer ?? "Тренер"}
-              <ChevronDown size={10} className={`transition-transform duration-200 ${showTrainers ? "rotate-180" : ""}`} />
-            </button>
-
-            {/* Clear */}
-            {hasActiveFilter && (
-              <button
-                onClick={clearFilters}
-                className="inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-[11px] text-neutral-400 hover:text-neutral-600 dark:text-white/25 dark:hover:text-white/50 transition-colors cursor-pointer"
-              >
-                <X size={11} />
-              </button>
-            )}
-          </div>
-
-          {/* Trainer pills — expandable */}
-          {showTrainers && (
-            <div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
-              {trainers.map((trainer) => (
-                <button
-                  key={trainer}
-                  onClick={() => {
-                    setFilterTrainer(filterTrainer === trainer ? null : trainer);
-                    setShowTrainers(false);
-                  }}
-                  className={`${pillBase} ${filterTrainer === trainer ? pillActive : pillInactive}`}
-                >
-                  {trainer}
-                </button>
-              ))}
-            </div>
-          )}
+          <ScheduleFilters
+            types={types}
+            trainers={trainers}
+            hasAnySlots={hasAnySlots}
+            hasAnyRecruiting={hasAnyRecruiting}
+            filterType={filterType}
+            setFilterType={setFilterType}
+            filterTrainer={filterTrainer}
+            setFilterTrainer={setFilterTrainer}
+            filterStatus={filterStatus}
+            setFilterStatus={setFilterStatus}
+            showTrainers={showTrainers}
+            setShowTrainers={setShowTrainers}
+            hasActiveFilter={hasActiveFilter}
+            clearFilters={clearFilters}
+          />
         </Reveal>
       </div>
 
       {/* Mobile: compact agenda list with tap-to-filter */}
       <Reveal>
-        <div className="mt-6 px-4 sm:hidden">
-          {/* Active filter indicator */}
-          {hasActiveFilter && (
-            <div className="mb-3 flex items-center justify-between rounded-xl bg-[#c9a96e]/10 px-4 py-2.5 dark:bg-[#c9a96e]/5">
-              <div className="flex items-center gap-2 text-xs font-medium text-[#a08050] dark:text-[#d4b87a]">
-                {filterTrainer && (
-                  <span className="flex items-center gap-1">
-                    <User size={11} />
-                    {filterTrainer}
-                  </span>
-                )}
-                {filterType && (
-                  <span className="flex items-center gap-1">
-                    <span className={`h-1.5 w-1.5 rounded-full ${TYPE_DOT[filterType] ?? "bg-white/30"}`} />
-                    {filterType}
-                  </span>
-                )}
-              </div>
-              <button
-                onClick={clearFilters}
-                className="flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-[#a08050] dark:text-[#d4b87a] active:bg-[#c9a96e]/20"
-              >
-                <X size={12} />
-                Сбросить
-              </button>
-            </div>
-          )}
-
-          {filteredDays.length > 0 ? (
-            <div className="space-y-1">
-              {filteredDays.map((day) => (
-                <div key={day.day}>
-                  {/* Day header */}
-                  <div className="flex items-center gap-2.5 py-2.5">
-                    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#c9a96e]/10 text-xs font-bold text-[#a08050] dark:bg-[#c9a96e]/10 dark:text-[#d4b87a]">
-                      {day.dayShort}
-                    </span>
-                    <span className="text-sm font-semibold text-neutral-900 dark:text-white/90">
-                      {day.day}
-                    </span>
-                  </div>
-
-                  {/* Class rows */}
-                  <div className="ml-1 border-l-2 border-neutral-200 dark:border-white/[0.08]">
-                    {day.classes.map((cls, i) => (
-                      <div
-                        key={i}
-                        className={`ml-3 flex items-start gap-3 rounded-lg px-3 py-2 ${cls.hasSlots ? "bg-emerald-500/5" : cls.recruiting ? "bg-sky-500/5" : ""}`}
-                      >
-                        {/* Time */}
-                        <span className="shrink-0 w-[72px] text-xs font-semibold tabular-nums text-neutral-500 dark:text-white/40 pt-0.5">
-                          {cls.time}
-                        </span>
-
-                        {/* Info — tappable trainer & type */}
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-1.5">
-                            <button
-                              onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)}
-                              className={`truncate text-sm font-medium text-left active:opacity-60 ${filterTrainer === cls.trainer ? "text-[#c9a96e] underline underline-offset-2" : "text-neutral-800 dark:text-white/80"}`}
-                            >
-                              {cls.trainer}
-                            </button>
-                            {cls.hasSlots && (
-                              <span className="shrink-0 rounded-full bg-emerald-500/15 border border-emerald-500/25 px-1.5 py-px text-[9px] font-semibold text-emerald-600 dark:text-emerald-400">
-                                места
-                              </span>
-                            )}
-                            {cls.recruiting && (
-                              <span className="shrink-0 rounded-full bg-sky-500/15 border border-sky-500/25 px-1.5 py-px text-[9px] font-semibold text-sky-600 dark:text-sky-400">
-                                набор
-                              </span>
-                            )}
-                            {cls.level && (
-                              <span className="shrink-0 rounded-full bg-rose-500/15 border border-rose-500/25 px-1.5 py-px text-[9px] font-semibold text-rose-600 dark:text-rose-400">
-                                {cls.level}
-                              </span>
-                            )}
-                          </div>
-                          <button
-                            onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
-                            className={`mt-0.5 flex items-center gap-1.5 active:opacity-60 ${filterType === cls.type ? "opacity-100" : ""}`}
-                          >
-                            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${TYPE_DOT[cls.type] ?? "bg-white/30"}`} />
-                            <span className={`text-[11px] ${filterType === cls.type ? "text-[#c9a96e] underline underline-offset-2" : "text-neutral-400 dark:text-white/30"}`}>{cls.type}</span>
-                          </button>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="py-12 text-center text-sm text-neutral-400 dark:text-white/30">
-              Нет занятий по выбранным фильтрам
-            </div>
-          )}
-        </div>
+        <MobileSchedule
+          filteredDays={filteredDays}
+          filterType={filterType}
+          setFilterType={setFilterType}
+          filterTrainer={filterTrainer}
+          setFilterTrainer={setFilterTrainer}
+          hasActiveFilter={hasActiveFilter}
+          clearFilters={clearFilters}
+        />
       </Reveal>
 
       {/* Desktop: grid layout */}

src/components/sections/Team.tsx

@@ -1,165 +1,15 @@
 "use client";
 
-import { useState, useRef, useCallback, useEffect } from "react";
-import Image from "next/image";
-import { Instagram } from "lucide-react";
+import { useState } from "react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
-
-const AUTO_PLAY_MS = 4500;
-const PAUSE_MS = 12000;
-const CARD_SPACING = 260; // px between card centers
-
-function wrapIndex(i: number, total: number) {
-  return ((i % total) + total) % total;
-}
-
-function getDiff(index: number, active: number, total: number) {
-  let diff = index - active;
-  if (diff > total / 2) diff -= total;
-  if (diff < -total / 2) diff += total;
-  return diff;
-}
-
-// Interpolation helpers
-function lerp(a: number, b: number, t: number) {
-  return a + (b - a) * t;
-}
-function clamp(v: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, v));
-}
-
-// Slot properties for each position (0=center, 1=near, 2=mid, 3=far, 4=hidden)
-const SLOTS = [
-  { w: 280, h: 400, opacity: 1, scale: 1, x: 0, brightness: 1, grayscale: 0, z: 10, border: true },
-  { w: 220, h: 340, opacity: 0.8, scale: 0.97, x: 260, brightness: 0.6, grayscale: 0.2, z: 5, border: false },
-  { w: 180, h: 280, opacity: 0.6, scale: 0.93, x: 470, brightness: 0.45, grayscale: 0.35, z: 3, border: false },
-  { w: 150, h: 230, opacity: 0.35, scale: 0.88, x: 640, brightness: 0.3, grayscale: 0.5, z: 2, border: false },
-  { w: 120, h: 180, opacity: 0, scale: 0.83, x: 780, brightness: 0.2, grayscale: 0.8, z: 1, border: false },
-];
+import { TeamCarousel } from "@/components/sections/team/TeamCarousel";
+import { TeamMemberInfo } from "@/components/sections/team/TeamMemberInfo";
 
 export function Team() {
   const { team } = siteContent;
-  const total = team.members.length;
   const [activeIndex, setActiveIndex] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
-  const isDraggingRef = useRef(false);
-  const pausedUntilRef = useRef(0);
-  const dragStartRef = useRef<{ x: number; startIndex: number } | null>(null);
-
-  const member = team.members[activeIndex];
-
-  const goTo = useCallback(
-    (i: number) => {
-      setActiveIndex(wrapIndex(i, total));
-      setDragOffset(0);
-      pausedUntilRef.current = Date.now() + PAUSE_MS;
-    },
-    [total]
-  );
-
-  // Auto-rotate — completely skip while dragging
-  useEffect(() => {
-    const id = setInterval(() => {
-      if (isDraggingRef.current) return;
-      if (Date.now() < pausedUntilRef.current) return;
-      setActiveIndex((i) => (i + 1) % total);
-    }, AUTO_PLAY_MS);
-    return () => clearInterval(id);
-  }, [total]);
-
-  // Pointer handlers
-  const onPointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-      isDraggingRef.current = true;
-      setActiveIndex((cur) => {
-        dragStartRef.current = { x: e.clientX, startIndex: cur };
-        return cur;
-      });
-      setDragOffset(0);
-    },
-    []
-  );
-
-  const onPointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (!dragStartRef.current) return;
-      const dx = e.clientX - dragStartRef.current.x;
-      setDragOffset(dx);
-    },
-    []
-  );
-
-  const onPointerUp = useCallback(() => {
-    if (!dragStartRef.current) return;
-    const startIdx = dragStartRef.current.startIndex;
-    // Read current dragOffset from state via functional update trick
-    setDragOffset((currentOffset) => {
-      const wasDrag = Math.abs(currentOffset) > 10;
-      const steps = wasDrag ? Math.round(currentOffset / CARD_SPACING) : 0;
-      if (steps !== 0) {
-        const newIndex = wrapIndex(startIdx - steps, total);
-        setActiveIndex(newIndex);
-      }
-      return 0; // reset offset
-    });
-    dragStartRef.current = null;
-    isDraggingRef.current = false;
-    pausedUntilRef.current = Date.now() + PAUSE_MS;
-  }, [total]);
-
-  // Compute interpolated style for each card
-  // During drag, base position is startIndex; otherwise activeIndex
-  const baseIndex = dragStartRef.current ? dragStartRef.current.startIndex : activeIndex;
-
-  function getCardStyle(index: number) {
-    const baseDiff = getDiff(index, baseIndex, total);
-    const fractionalShift = dragOffset / CARD_SPACING;
-    const continuousDiff = baseDiff + fractionalShift;
-    const absDiff = Math.abs(continuousDiff);
-
-    if (absDiff > 4) return null;
-
-    // Interpolate between the two nearest slot positions
-    const lowerSlot = Math.floor(absDiff);
-    const upperSlot = Math.ceil(absDiff);
-    const t = absDiff - lowerSlot;
-
-    const s0 = SLOTS[clamp(lowerSlot, 0, 4)];
-    const s1 = SLOTS[clamp(upperSlot, 0, 4)];
-
-    const sign = continuousDiff >= 0 ? 1 : -1;
-    const x = sign * lerp(s0.x, s1.x, t);
-    const w = lerp(s0.w, s1.w, t);
-    const h = lerp(s0.h, s1.h, t);
-    const opacity = lerp(s0.opacity, s1.opacity, t);
-    const scale = lerp(s0.scale, s1.scale, t);
-    const brightness = lerp(s0.brightness, s1.brightness, t);
-    const grayscale = lerp(s0.grayscale, s1.grayscale, t);
-    const z = Math.round(lerp(s0.z, s1.z, t));
-    const showBorder = absDiff < 0.5;
-
-    if (opacity < 0.02) return null;
-
-    return {
-      width: w,
-      height: h,
-      opacity,
-      zIndex: z,
-      transform: `translateX(${x}px) scale(${scale})`,
-      filter: `brightness(${brightness}) grayscale(${grayscale})`,
-      borderColor: showBorder ? "rgba(201,169,110,0.3)" : "transparent",
-      boxShadow: showBorder
-        ? "0 0 60px rgba(201,169,110,0.12)"
-        : "none",
-      transition: isDraggingRef.current
-        ? "none"
-        : "all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-      isCenter: absDiff < 0.5,
-    };
-  }
 
   return (
     <section
@@ -184,119 +34,17 @@ export function Team() {
 
         <Reveal>
           <div className="mt-10">
-            {/* Stage */}
-            <div
-              className="relative mx-auto flex items-end justify-center cursor-grab select-none active:cursor-grabbing touch-pan-y"
-              style={{ height: 440 }}
-              onPointerDown={onPointerDown}
-              onPointerMove={onPointerMove}
-              onPointerUp={onPointerUp}
-              onPointerCancel={onPointerUp}
-              onLostPointerCapture={onPointerUp}
-            >
-              {/* Spotlight cone */}
-              <div
-                className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0"
-                style={{
-                  width: 400,
-                  height: 500,
-                  background:
-                    "conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(201,169,110,0.06) 45%, rgba(201,169,110,0.1) 50%, rgba(201,169,110,0.06) 55%, transparent 70%)",
-                }}
-              />
+            <TeamCarousel
+              members={team.members}
+              activeIndex={activeIndex}
+              onActiveChange={setActiveIndex}
+            />
 
-              {/* Cards */}
-              {team.members.map((m, i) => {
-                const style = getCardStyle(i);
-                if (!style) return null;
-
-                return (
-                  <div
-                    key={m.name}
-                    className={`absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none ${style.isCenter ? "team-card-glitter" : ""}`}
-                    style={{
-                      width: style.width,
-                      height: style.height,
-                      opacity: style.opacity,
-                      zIndex: style.zIndex,
-                      transform: style.transform,
-                      filter: style.filter,
-                      borderColor: style.isCenter ? "transparent" : style.borderColor,
-                      boxShadow: style.isCenter
-                        ? "0 0 40px rgba(201,169,110,0.15), 0 0 80px rgba(201,169,110,0.08)"
-                        : style.boxShadow,
-                      transition: style.transition,
-                    }}
-                  >
-                    <Image
-                      src={m.image}
-                      alt={m.name}
-                      fill
-                      sizes="280px"
-                      className="object-cover"
-                      draggable={false}
-                    />
-
-                    {style.isCenter && (
-                      <>
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" />
-                        <div className="absolute bottom-0 left-0 right-0 p-5">
-                          <h3 className="text-lg font-bold text-white sm:text-xl drop-shadow-lg">
-                            {m.name}
-                          </h3>
-                          <p className="text-sm font-medium text-[#d4b87a] drop-shadow-lg">
-                            {m.role}
-                          </p>
-                        </div>
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-
-            </div>
-
-            {/* Member info */}
-            <div
-              key={activeIndex}
-              className="mx-auto mt-8 max-w-lg text-center"
-              style={{
-                animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
-              }}
-            >
-              {member.instagram && (
-                <a
-                  href={member.instagram}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-[#d4b87a]"
-                >
-                  <Instagram size={14} />
-                  {member.instagram.split("/").filter(Boolean).pop()}
-                </a>
-              )}
-
-              {member.description && (
-                <p className="mt-3 text-sm leading-relaxed text-white/55">
-                  {member.description}
-                </p>
-              )}
-
-              {/* Progress dots */}
-              <div className="mt-6 flex items-center justify-center gap-1.5">
-                {team.members.map((_, i) => (
-                  <button
-                    key={i}
-                    onClick={() => goTo(i)}
-                    className={`h-1.5 rounded-full transition-all duration-500 cursor-pointer ${
-                      i === activeIndex
-                        ? "w-6 bg-[#c9a96e]"
-                        : "w-1.5 bg-white/15 hover:bg-white/30"
-                    }`}
-                  />
-                ))}
-              </div>
-            </div>
+            <TeamMemberInfo
+              members={team.members}
+              activeIndex={activeIndex}
+              onSelect={setActiveIndex}
+            />
           </div>
         </Reveal>
       </div>

src/components/sections/schedule/DayCard.tsx

@@ -0,0 +1,60 @@
+import { Clock, User } from "lucide-react";
+import type { ScheduleDay } from "@/types/content";
+import { TYPE_DOT } from "./constants";
+
+export function DayCard({ day }: { day: ScheduleDay }) {
+  return (
+    <div className="rounded-2xl border border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a] overflow-hidden">
+      {/* Day header */}
+      <div className="border-b border-neutral-100 bg-neutral-50 px-5 py-4 dark:border-white/[0.04] dark:bg-white/[0.02]">
+        <div className="flex items-center gap-3">
+          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gold/10 text-sm font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
+            {day.dayShort}
+          </span>
+          <span className="text-base font-semibold text-neutral-900 dark:text-white/90">
+            {day.day}
+          </span>
+        </div>
+      </div>
+
+      {/* Classes */}
+      <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
+        {day.classes.map((cls, i) => (
+          <div key={i} className={`px-5 py-3.5 ${cls.hasSlots ? "bg-emerald-500/5" : cls.recruiting ? "bg-sky-500/5" : ""}`}>
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-white/40">
+                <Clock size={13} />
+                <span className="font-semibold">{cls.time}</span>
+              </div>
+              {cls.hasSlots && (
+                <span className="shrink-0 rounded-full bg-emerald-500/15 border border-emerald-500/25 px-2 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
+                  есть места
+                </span>
+              )}
+              {cls.recruiting && (
+                <span className="shrink-0 rounded-full bg-sky-500/15 border border-sky-500/25 px-2 py-0.5 text-[10px] font-semibold text-sky-600 dark:text-sky-400">
+                  набор
+                </span>
+              )}
+            </div>
+            <div className="mt-1.5 flex items-center gap-2 text-sm font-medium text-neutral-800 dark:text-white/80">
+              <User size={13} className="shrink-0 text-neutral-400 dark:text-white/30" />
+              {cls.trainer}
+            </div>
+            <div className="mt-2 flex items-center gap-2 flex-wrap">
+              <div className="flex items-center gap-2">
+                <span className={`h-2 w-2 shrink-0 rounded-full ${TYPE_DOT[cls.type] ?? "bg-white/30"}`} />
+                <span className="text-xs text-neutral-500 dark:text-white/40">{cls.type}</span>
+              </div>
+              {cls.level && (
+                <span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-0.5 text-[10px] font-semibold text-rose-600 dark:text-rose-400">
+                  {cls.level}
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/sections/schedule/MobileSchedule.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { User, X } from "lucide-react";
+import type { ScheduleDay } from "@/types/content";
+import { TYPE_DOT } from "./constants";
+
+interface MobileScheduleProps {
+  filteredDays: ScheduleDay[];
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  hasActiveFilter: boolean;
+  clearFilters: () => void;
+}
+
+export function MobileSchedule({
+  filteredDays,
+  filterType,
+  setFilterType,
+  filterTrainer,
+  setFilterTrainer,
+  hasActiveFilter,
+  clearFilters,
+}: MobileScheduleProps) {
+  return (
+    <div className="mt-6 px-4 sm:hidden">
+      {/* Active filter indicator */}
+      {hasActiveFilter && (
+        <div className="mb-3 flex items-center justify-between rounded-xl bg-gold/10 px-4 py-2.5 dark:bg-gold/5">
+          <div className="flex items-center gap-2 text-xs font-medium text-gold-dark dark:text-gold-light">
+            {filterTrainer && (
+              <span className="flex items-center gap-1">
+                <User size={11} />
+                {filterTrainer}
+              </span>
+            )}
+            {filterType && (
+              <span className="flex items-center gap-1">
+                <span className={`h-1.5 w-1.5 rounded-full ${TYPE_DOT[filterType] ?? "bg-white/30"}`} />
+                {filterType}
+              </span>
+            )}
+          </div>
+          <button
+            onClick={clearFilters}
+            className="flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-gold-dark dark:text-gold-light active:bg-gold/20"
+          >
+            <X size={12} />
+            Сбросить
+          </button>
+        </div>
+      )}
+
+      {filteredDays.length > 0 ? (
+        <div className="space-y-1">
+          {filteredDays.map((day) => (
+            <div key={day.day}>
+              {/* Day header */}
+              <div className="flex items-center gap-2.5 py-2.5">
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
+                  {day.dayShort}
+                </span>
+                <span className="text-sm font-semibold text-neutral-900 dark:text-white/90">
+                  {day.day}
+                </span>
+              </div>
+
+              {/* Class rows */}
+              <div className="ml-1 border-l-2 border-neutral-200 dark:border-white/[0.08]">
+                {day.classes.map((cls, i) => (
+                  <div
+                    key={i}
+                    className={`ml-3 flex items-start gap-3 rounded-lg px-3 py-2 ${cls.hasSlots ? "bg-emerald-500/5" : cls.recruiting ? "bg-sky-500/5" : ""}`}
+                  >
+                    {/* Time */}
+                    <span className="shrink-0 w-[72px] text-xs font-semibold tabular-nums text-neutral-500 dark:text-white/40 pt-0.5">
+                      {cls.time}
+                    </span>
+
+                    {/* Info — tappable trainer & type */}
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1.5">
+                        <button
+                          onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)}
+                          className={`truncate text-sm font-medium text-left active:opacity-60 ${filterTrainer === cls.trainer ? "text-gold underline underline-offset-2" : "text-neutral-800 dark:text-white/80"}`}
+                        >
+                          {cls.trainer}
+                        </button>
+                        {cls.hasSlots && (
+                          <span className="shrink-0 rounded-full bg-emerald-500/15 border border-emerald-500/25 px-1.5 py-px text-[9px] font-semibold text-emerald-600 dark:text-emerald-400">
+                            места
+                          </span>
+                        )}
+                        {cls.recruiting && (
+                          <span className="shrink-0 rounded-full bg-sky-500/15 border border-sky-500/25 px-1.5 py-px text-[9px] font-semibold text-sky-600 dark:text-sky-400">
+                            набор
+                          </span>
+                        )}
+                        {cls.level && (
+                          <span className="shrink-0 rounded-full bg-rose-500/15 border border-rose-500/25 px-1.5 py-px text-[9px] font-semibold text-rose-600 dark:text-rose-400">
+                            {cls.level}
+                          </span>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
+                        className={`mt-0.5 flex items-center gap-1.5 active:opacity-60 ${filterType === cls.type ? "opacity-100" : ""}`}
+                      >
+                        <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${TYPE_DOT[cls.type] ?? "bg-white/30"}`} />
+                        <span className={`text-[11px] ${filterType === cls.type ? "text-gold underline underline-offset-2" : "text-neutral-400 dark:text-white/30"}`}>{cls.type}</span>
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="py-12 text-center text-sm text-neutral-400 dark:text-white/30">
+          Нет занятий по выбранным фильтрам
+        </div>
+      )}
+    </div>
+  );
+}

src/components/sections/schedule/ScheduleFilters.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { User, X, ChevronDown } from "lucide-react";
+import {
+  TYPE_DOT,
+  pillBase,
+  pillActive,
+  pillInactive,
+  type StatusFilter,
+} from "./constants";
+
+interface ScheduleFiltersProps {
+  types: string[];
+  trainers: string[];
+  hasAnySlots: boolean;
+  hasAnyRecruiting: boolean;
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  filterStatus: StatusFilter;
+  setFilterStatus: (status: StatusFilter) => void;
+  showTrainers: boolean;
+  setShowTrainers: (show: boolean) => void;
+  hasActiveFilter: boolean;
+  clearFilters: () => void;
+}
+
+export function ScheduleFilters({
+  types,
+  trainers,
+  hasAnySlots,
+  hasAnyRecruiting,
+  filterType,
+  setFilterType,
+  filterTrainer,
+  setFilterTrainer,
+  filterStatus,
+  setFilterStatus,
+  showTrainers,
+  setShowTrainers,
+  hasActiveFilter,
+  clearFilters,
+}: ScheduleFiltersProps) {
+  return (
+    <>
+      <div className="mt-5 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
+        {/* Class types */}
+        {types.map((type) => (
+          <button
+            key={type}
+            onClick={() => setFilterType(filterType === type ? null : type)}
+            className={`${pillBase} ${filterType === type ? pillActive : pillInactive}`}
+          >
+            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${TYPE_DOT[type] ?? "bg-white/30"}`} />
+            {type}
+          </button>
+        ))}
+
+        {/* Divider */}
+        <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
+
+        {/* Status filters */}
+        {hasAnySlots && (
+          <button
+            onClick={() => setFilterStatus(filterStatus === "hasSlots" ? "all" : "hasSlots")}
+            className={`${pillBase} ${filterStatus === "hasSlots" ? "bg-emerald-500/20 text-emerald-700 border border-emerald-500/40 dark:text-emerald-400 dark:border-emerald-500/30" : pillInactive}`}
+          >
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />
+            Есть места
+          </button>
+        )}
+        {hasAnyRecruiting && (
+          <button
+            onClick={() => setFilterStatus(filterStatus === "recruiting" ? "all" : "recruiting")}
+            className={`${pillBase} ${filterStatus === "recruiting" ? "bg-sky-500/20 text-sky-700 border border-sky-500/40 dark:text-sky-400 dark:border-sky-500/30" : pillInactive}`}
+          >
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
+            Набор
+          </button>
+        )}
+
+        {/* Divider */}
+        <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
+
+        {/* Trainer dropdown toggle */}
+        <button
+          onClick={() => setShowTrainers(!showTrainers)}
+          className={`${pillBase} ${filterTrainer ? pillActive : pillInactive}`}
+        >
+          <User size={11} />
+          {filterTrainer ?? "Тренер"}
+          <ChevronDown size={10} className={`transition-transform duration-200 ${showTrainers ? "rotate-180" : ""}`} />
+        </button>
+
+        {/* Clear */}
+        {hasActiveFilter && (
+          <button
+            onClick={clearFilters}
+            className="inline-flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1 text-[11px] text-neutral-400 hover:text-neutral-600 dark:text-white/25 dark:hover:text-white/50 transition-colors cursor-pointer"
+          >
+            <X size={11} />
+          </button>
+        )}
+      </div>
+
+      {/* Trainer pills — expandable */}
+      {showTrainers && (
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
+          {trainers.map((trainer) => (
+            <button
+              key={trainer}
+              onClick={() => {
+                setFilterTrainer(filterTrainer === trainer ? null : trainer);
+                setShowTrainers(false);
+              }}
+              className={`${pillBase} ${filterTrainer === trainer ? pillActive : pillInactive}`}
+            >
+              {trainer}
+            </button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

src/components/sections/schedule/constants.ts

@@ -0,0 +1,15 @@
+export const TYPE_DOT: Record<string, string> = {
+  "Exotic Pole Dance": "bg-gold",
+  "Pole Dance": "bg-rose-500",
+  "Body Plastic": "bg-purple-500",
+  "Трюковые комбинации с пилоном": "bg-amber-500",
+};
+
+export type StatusFilter = "all" | "hasSlots" | "recruiting";
+
+export const pillBase =
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[11px] font-medium transition-all duration-200 cursor-pointer whitespace-nowrap";
+export const pillActive =
+  "bg-gold/20 text-gold-dark border border-gold/40 dark:text-gold-light dark:border-gold/30";
+export const pillInactive =
+  "border border-neutral-200 text-neutral-500 hover:border-neutral-300 dark:border-white/[0.08] dark:text-white/35 dark:hover:border-white/15";

src/components/sections/team/TeamCarousel.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import Image from "next/image";
+import { UI_CONFIG } from "@/lib/config";
+import type { TeamMember } from "@/types/content";
+
+const {
+  autoPlayMs: AUTO_PLAY_MS,
+  pauseMs: PAUSE_MS,
+  cardSpacing: CARD_SPACING,
+} = UI_CONFIG.team;
+
+function wrapIndex(i: number, total: number) {
+  return ((i % total) + total) % total;
+}
+
+function getDiff(index: number, active: number, total: number) {
+  let diff = index - active;
+  if (diff > total / 2) diff -= total;
+  if (diff < -total / 2) diff += total;
+  return diff;
+}
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
+// Slot properties for each position (0=center, 1=near, 2=mid, 3=far, 4=hidden)
+const SLOTS = [
+  { w: 280, h: 400, opacity: 1, scale: 1, x: 0, brightness: 1, grayscale: 0, z: 10, border: true },
+  { w: 220, h: 340, opacity: 0.8, scale: 0.97, x: 260, brightness: 0.6, grayscale: 0.2, z: 5, border: false },
+  { w: 180, h: 280, opacity: 0.6, scale: 0.93, x: 470, brightness: 0.45, grayscale: 0.35, z: 3, border: false },
+  { w: 150, h: 230, opacity: 0.35, scale: 0.88, x: 640, brightness: 0.3, grayscale: 0.5, z: 2, border: false },
+  { w: 120, h: 180, opacity: 0, scale: 0.83, x: 780, brightness: 0.2, grayscale: 0.8, z: 1, border: false },
+];
+
+interface TeamCarouselProps {
+  members: TeamMember[];
+  activeIndex: number;
+  onActiveChange: (index: number) => void;
+}
+
+export function TeamCarousel({ members, activeIndex, onActiveChange }: TeamCarouselProps) {
+  const total = members.length;
+  const [dragOffset, setDragOffset] = useState(0);
+  const isDraggingRef = useRef(false);
+  const pausedUntilRef = useRef(0);
+  const dragStartRef = useRef<{ x: number; startIndex: number } | null>(null);
+
+  // Pause auto-rotation when activeIndex changes externally (e.g. dot click)
+  const prevIndexRef = useRef(activeIndex);
+  useEffect(() => {
+    if (prevIndexRef.current !== activeIndex) {
+      prevIndexRef.current = activeIndex;
+      pausedUntilRef.current = Date.now() + PAUSE_MS;
+    }
+  }, [activeIndex]);
+
+  // Auto-rotate — completely skip while dragging
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (isDraggingRef.current) return;
+      if (Date.now() < pausedUntilRef.current) return;
+      onActiveChange((activeIndex + 1) % total);
+    }, AUTO_PLAY_MS);
+    return () => clearInterval(id);
+  }, [total, activeIndex, onActiveChange]);
+
+  // Pointer handlers
+  const onPointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      isDraggingRef.current = true;
+      dragStartRef.current = { x: e.clientX, startIndex: activeIndex };
+      setDragOffset(0);
+    },
+    [activeIndex]
+  );
+
+  const onPointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!dragStartRef.current) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      setDragOffset(dx);
+    },
+    []
+  );
+
+  // Deferred index update — avoids calling parent setState during render
+  // (onLostPointerCapture can fire during React reconciliation)
+  const pendingIndexRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (pendingIndexRef.current !== null) {
+      onActiveChange(pendingIndexRef.current);
+      pendingIndexRef.current = null;
+    }
+  });
+
+  const onPointerUp = useCallback(() => {
+    if (!dragStartRef.current) return;
+    const startIdx = dragStartRef.current.startIndex;
+    const currentOffset = dragOffset;
+    const wasDrag = Math.abs(currentOffset) > 10;
+    const steps = wasDrag ? Math.round(currentOffset / CARD_SPACING) : 0;
+    setDragOffset(0);
+    if (steps !== 0) {
+      pendingIndexRef.current = wrapIndex(startIdx - steps, total);
+    }
+    dragStartRef.current = null;
+    isDraggingRef.current = false;
+    pausedUntilRef.current = Date.now() + PAUSE_MS;
+  }, [total, dragOffset]);
+
+  // Compute interpolated style for each card
+  const baseIndex = dragStartRef.current ? dragStartRef.current.startIndex : activeIndex;
+
+  function getCardStyle(index: number) {
+    const baseDiff = getDiff(index, baseIndex, total);
+    const fractionalShift = dragOffset / CARD_SPACING;
+    const continuousDiff = baseDiff + fractionalShift;
+    const absDiff = Math.abs(continuousDiff);
+
+    if (absDiff > 4) return null;
+
+    const lowerSlot = Math.floor(absDiff);
+    const upperSlot = Math.ceil(absDiff);
+    const t = absDiff - lowerSlot;
+
+    const s0 = SLOTS[clamp(lowerSlot, 0, 4)];
+    const s1 = SLOTS[clamp(upperSlot, 0, 4)];
+
+    const sign = continuousDiff >= 0 ? 1 : -1;
+    const x = sign * lerp(s0.x, s1.x, t);
+    const w = lerp(s0.w, s1.w, t);
+    const h = lerp(s0.h, s1.h, t);
+    const opacity = lerp(s0.opacity, s1.opacity, t);
+    const scale = lerp(s0.scale, s1.scale, t);
+    const brightness = lerp(s0.brightness, s1.brightness, t);
+    const grayscale = lerp(s0.grayscale, s1.grayscale, t);
+    const z = Math.round(lerp(s0.z, s1.z, t));
+    const showBorder = absDiff < 0.5;
+
+    if (opacity < 0.02) return null;
+
+    return {
+      width: w,
+      height: h,
+      opacity,
+      zIndex: z,
+      transform: `translateX(${x}px) scale(${scale})`,
+      filter: `brightness(${brightness}) grayscale(${grayscale})`,
+      borderColor: showBorder ? "rgba(201,169,110,0.3)" : "transparent",
+      boxShadow: showBorder
+        ? "0 0 60px rgba(201,169,110,0.12)"
+        : "none",
+      transition: isDraggingRef.current
+        ? "none"
+        : "all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      isCenter: absDiff < 0.5,
+    };
+  }
+
+  return (
+    <div
+      className="relative mx-auto flex items-end justify-center cursor-grab select-none active:cursor-grabbing touch-pan-y"
+      style={{ height: UI_CONFIG.team.stageHeight }}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onLostPointerCapture={onPointerUp}
+    >
+      {/* Spotlight cone */}
+      <div
+        className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0"
+        style={{
+          width: 400,
+          height: 500,
+          background:
+            "conic-gradient(from 180deg at 50% 0%, transparent 30%, rgba(201,169,110,0.06) 45%, rgba(201,169,110,0.1) 50%, rgba(201,169,110,0.06) 55%, transparent 70%)",
+        }}
+      />
+
+      {/* Cards */}
+      {members.map((m, i) => {
+        const style = getCardStyle(i);
+        if (!style) return null;
+
+        return (
+          <div
+            key={m.name}
+            className={`absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none ${style.isCenter ? "team-card-glitter" : ""}`}
+            style={{
+              width: style.width,
+              height: style.height,
+              opacity: style.opacity,
+              zIndex: style.zIndex,
+              transform: style.transform,
+              filter: style.filter,
+              borderColor: style.isCenter ? "transparent" : style.borderColor,
+              boxShadow: style.isCenter
+                ? "0 0 40px rgba(201,169,110,0.15), 0 0 80px rgba(201,169,110,0.08)"
+                : style.boxShadow,
+              transition: style.transition,
+            }}
+          >
+            <Image
+              src={m.image}
+              alt={m.name}
+              fill
+              sizes="280px"
+              className="object-cover"
+              draggable={false}
+            />
+
+            {style.isCenter && (
+              <>
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-5">
+                  <h3 className="text-lg font-bold text-white sm:text-xl drop-shadow-lg">
+                    {m.name}
+                  </h3>
+                  <p className="text-sm font-medium text-gold-light drop-shadow-lg">
+                    {m.role}
+                  </p>
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/sections/team/TeamMemberInfo.tsx

@@ -0,0 +1,55 @@
+import { Instagram } from "lucide-react";
+import type { TeamMember } from "@/types/content";
+
+interface TeamMemberInfoProps {
+  members: TeamMember[];
+  activeIndex: number;
+  onSelect: (index: number) => void;
+}
+
+export function TeamMemberInfo({ members, activeIndex, onSelect }: TeamMemberInfoProps) {
+  const member = members[activeIndex];
+
+  return (
+    <div
+      key={activeIndex}
+      className="mx-auto mt-8 max-w-lg text-center"
+      style={{
+        animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
+      }}
+    >
+      {member.instagram && (
+        <a
+          href={member.instagram}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="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>
+      )}
+
+      {member.description && (
+        <p className="mt-3 text-sm leading-relaxed text-white/55">
+          {member.description}
+        </p>
+      )}
+
+      {/* Progress dots */}
+      <div className="mt-6 flex items-center justify-center gap-1.5">
+        {members.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => onSelect(i)}
+            className={`h-1.5 rounded-full transition-all duration-500 cursor-pointer ${
+              i === activeIndex
+                ? "w-6 bg-gold"
+                : "w-1.5 bg-white/15 hover:bg-white/30"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}