From 46ad10e8a01a3aa878953ec80340c8fb897772e7 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Thu, 12 Mar 2026 21:25:11 +0300
Subject: [PATCH] feat: upgrade schedule with cross-location views, day/time
 filters, and clickable trainers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add "Все студии" tab merging all locations by weekday with location sub-headers
- Location tabs show hall name + address subtitle for clarity
- Add day multi-select and time-of-day preset filters (Утро/День/Вечер) behind collapsible "Когда" button
- Make trainer and type names clickable in day cards for inline filtering
- Add group view clustering classes by trainer+type+location
- Remove trainer dropdown from filter bar — filter by clicking names in schedule
- Add searchable icon picker and lucide-react icon rendering for classes admin/section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/admin/classes/page.tsx                | 144 +++++++--
 src/components/sections/Classes.tsx           |  23 +-
 src/components/sections/Schedule.tsx          | 282 ++++++++++++++----
 src/components/sections/schedule/DayCard.tsx  | 157 +++++++---
 .../sections/schedule/GroupView.tsx           | 186 ++++++++++++
 .../sections/schedule/MobileSchedule.tsx      | 204 +++++++++----
 .../sections/schedule/ScheduleFilters.tsx     |  79 +++--
 src/components/sections/schedule/constants.ts |  38 +++
 8 files changed, 891 insertions(+), 222 deletions(-)
 create mode 100644 src/components/sections/schedule/GroupView.tsx

diff --git a/src/app/admin/classes/page.tsx b/src/app/admin/classes/page.tsx
index 326bbec..f32c29f 100644
--- a/src/app/admin/classes/page.tsx
+++ b/src/app/admin/classes/page.tsx
@@ -1,13 +1,127 @@
 "use client";
 
+import { useState, useRef, useEffect, useMemo } from "react";
 import { SectionEditor } from "../_components/SectionEditor";
 import { InputField, TextareaField } from "../_components/FormField";
 import { ArrayEditor } from "../_components/ArrayEditor";
+import { icons, type LucideIcon } from "lucide-react";
 
-const ICON_OPTIONS = [
-  "sparkles", "flame", "wind", "zap", "star", "monitor",
-  "heart", "music", "dumbbell", "trophy",
-];
+// PascalCase "HeartPulse" → kebab "heart-pulse"
+function toKebab(name: string) {
+  return name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// All icons as { key: kebab-name, Icon: component, label: PascalCase }
+const ALL_ICONS = Object.entries(icons).map(([name, Icon]) => ({
+  key: toKebab(name),
+  Icon: Icon as LucideIcon,
+  label: name,
+}));
+
+const ICON_BY_KEY = Object.fromEntries(ALL_ICONS.map((i) => [i.key, i]));
+
+function IconPicker({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selected = ICON_BY_KEY[value];
+
+  useEffect(() => {
+    if (!open) return;
+    function handle(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!search) return ALL_ICONS.slice(0, 60);
+    const q = search.toLowerCase();
+    return ALL_ICONS.filter((i) => i.label.toLowerCase().includes(q)).slice(0, 60);
+  }, [search]);
+
+  const SelectedIcon = selected?.Icon;
+
+  return (
+    <div ref={ref} className="relative">
+      <label className="block text-sm text-neutral-400 mb-1.5">Иконка</label>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(!open);
+          setSearch("");
+          setTimeout(() => inputRef.current?.focus(), 0);
+        }}
+        className={`w-full flex items-center gap-2.5 rounded-lg border bg-neutral-800 px-4 py-2.5 text-left text-white outline-none transition-colors ${
+          open ? "border-gold" : "border-white/10"
+        }`}
+      >
+        {SelectedIcon ? (
+          <span className="flex h-6 w-6 items-center justify-center rounded-md bg-gold/20 text-gold-light">
+            <SelectedIcon size={16} />
+          </span>
+        ) : (
+          <span className="flex h-6 w-6 items-center justify-center rounded-md bg-white/10 text-neutral-500">?</span>
+        )}
+        <span className="text-sm">{selected?.label || value}</span>
+      </button>
+
+      {open && (
+        <div className="absolute z-50 mt-1 w-full rounded-lg border border-white/10 bg-neutral-800 shadow-xl overflow-hidden">
+          <div className="p-2 pb-0">
+            <input
+              ref={inputRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Поиск иконки... (flame, heart, star...)"
+              className="w-full rounded-md border border-white/10 bg-neutral-900 px-3 py-1.5 text-sm text-white outline-none focus:border-gold/50 placeholder:text-neutral-600"
+            />
+          </div>
+          <div className="p-2 max-h-56 overflow-y-auto">
+            {filtered.length === 0 ? (
+              <div className="py-3 text-center text-sm text-neutral-500">Ничего не найдено</div>
+            ) : (
+              <div className="grid grid-cols-6 gap-1">
+                {filtered.map(({ key, Icon, label }) => (
+                  <button
+                    key={key}
+                    type="button"
+                    title={label}
+                    onClick={() => {
+                      onChange(key);
+                      setOpen(false);
+                      setSearch("");
+                    }}
+                    className={`flex flex-col items-center gap-0.5 rounded-lg p-2 transition-colors ${
+                      key === value
+                        ? "bg-gold/20 text-gold-light"
+                        : "text-neutral-400 hover:bg-white/5 hover:text-white"
+                    }`}
+                  >
+                    <Icon size={20} />
+                    <span className="text-[10px] leading-tight truncate w-full text-center">{label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
 
 const COLOR_SWATCHES: { value: string; bg: string }[] = [
   { value: "rose", bg: "bg-rose-500" },
@@ -63,24 +177,10 @@ export default function ClassesEditorPage() {
                     value={item.name}
                     onChange={(v) => updateItem({ ...item, name: v })}
                   />
-                  <div>
-                    <label className="block text-sm text-neutral-400 mb-1.5">
-                      Иконка
-                    </label>
-                    <select
-                      value={item.icon}
-                      onChange={(e) =>
-                        updateItem({ ...item, icon: e.target.value })
-                      }
-                      className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors"
-                    >
-                      {ICON_OPTIONS.map((icon) => (
-                        <option key={icon} value={icon}>
-                          {icon}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
+                  <IconPicker
+                    value={item.icon}
+                    onChange={(v) => updateItem({ ...item, icon: v })}
+                  />
                 </div>
                 <div>
                   <label className="block text-sm text-neutral-400 mb-1.5">
diff --git a/src/components/sections/Classes.tsx b/src/components/sections/Classes.tsx
index fcafbfe..19a5ee2 100644
--- a/src/components/sections/Classes.tsx
+++ b/src/components/sections/Classes.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
+import { icons } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 import { ShowcaseLayout } from "@/components/ui/ShowcaseLayout";
@@ -9,14 +9,15 @@ import { useShowcaseRotation } from "@/hooks/useShowcaseRotation";
 import type { ClassItem, SiteContent } from "@/types";
 import { UI_CONFIG } from "@/lib/config";
 
-const iconMap: Record<string, React.ReactNode> = {
-  flame: <Flame size={20} />,
-  sparkles: <Sparkles size={20} />,
-  wind: <Wind size={20} />,
-  zap: <Zap size={20} />,
-  star: <Star size={20} />,
-  monitor: <Monitor size={20} />,
-};
+// kebab "heart-pulse" → PascalCase "HeartPulse"
+function toPascal(kebab: string) {
+  return kebab.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+}
+
+function getIcon(key: string) {
+  const Icon = icons[toPascal(key) as keyof typeof icons];
+  return Icon ? <Icon size={20} /> : null;
+}
 
 interface ClassesProps {
   data: SiteContent["classes"];
@@ -60,7 +61,7 @@ export function Classes({ data: classes }: ClassesProps) {
                       {/* 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-gold/20 text-gold-light backdrop-blur-sm">
-                          {iconMap[item.icon]}
+                          {getIcon(item.icon)}
                         </div>
                         <h3 className="text-2xl font-bold text-white">
                           {item.name}
@@ -87,7 +88,7 @@ export function Classes({ data: classes }: ClassesProps) {
                         : "bg-neutral-200/50 text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400"
                     }`}
                   >
-                    {iconMap[item.icon]}
+                    {getIcon(item.icon)}
                   </div>
                   <div className="min-w-0">
                     <p
diff --git a/src/components/sections/Schedule.tsx b/src/components/sections/Schedule.tsx
index 846cec9..ebb9271 100644
--- a/src/components/sections/Schedule.tsx
+++ b/src/components/sections/Schedule.tsx
@@ -1,56 +1,113 @@
 "use client";
 
 import { useState, useMemo } from "react";
-import { MapPin } from "lucide-react";
+import { CalendarDays, Users, LayoutGrid } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 import { DayCard } from "./schedule/DayCard";
 import { ScheduleFilters } from "./schedule/ScheduleFilters";
 import { MobileSchedule } from "./schedule/MobileSchedule";
-import { buildTypeDots } from "./schedule/constants";
-import type { StatusFilter } from "./schedule/constants";
+import { GroupView } from "./schedule/GroupView";
+import { buildTypeDots, shortAddress, startTimeMinutes, TIME_PRESETS } from "./schedule/constants";
+import type { StatusFilter, TimeFilter, ScheduleDayMerged, ScheduleClassWithLocation } from "./schedule/constants";
 import type { SiteContent } from "@/types/content";
 
+type ViewMode = "days" | "groups";
+type LocationMode = "all" | number;
+
 interface ScheduleProps {
   data: SiteContent["schedule"];
   classItems?: { name: string; color?: string }[];
 }
 
 export function Schedule({ data: schedule, classItems }: ScheduleProps) {
-  const [locationIndex, setLocationIndex] = useState(0);
+  const [locationMode, setLocationMode] = useState<LocationMode>("all");
+  const [viewMode, setViewMode] = useState<ViewMode>("days");
   const [filterTrainer, setFilterTrainer] = useState<string | null>(null);
   const [filterType, setFilterType] = useState<string | null>(null);
   const [filterStatus, setFilterStatus] = useState<StatusFilter>("all");
-  const [showTrainers, setShowTrainers] = useState(false);
-  const location = schedule.locations[locationIndex];
+  const [filterTime, setFilterTime] = useState<TimeFilter>("all");
+  const [filterDaySet, setFilterDaySet] = useState<Set<string>>(new Set());
+
+  const isAllMode = locationMode === "all";
 
   const typeDots = useMemo(() => buildTypeDots(classItems), [classItems]);
 
-  const { trainers, types, hasAnySlots, hasAnyRecruiting } = useMemo(() => {
-    const trainerSet = new Set<string>();
+  // Build days: either from one location or merged from all
+  const activeDays: ScheduleDayMerged[] = useMemo(() => {
+    if (locationMode !== "all") {
+      const loc = schedule.locations[locationMode];
+      if (!loc) return [];
+      return loc.days.map((day) => ({
+        ...day,
+        classes: day.classes.map((cls) => ({ ...cls })),
+      }));
+    }
+
+    // Merge all locations by weekday
+    const dayOrder = ["Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота", "Воскресенье"];
+    const dayMap = new Map<string, ScheduleDayMerged>();
+
+    for (const loc of schedule.locations) {
+      for (const day of loc.days) {
+        const existing = dayMap.get(day.day);
+        const taggedClasses: ScheduleClassWithLocation[] = day.classes.map((cls) => ({
+          ...cls,
+          locationName: loc.name,
+          locationAddress: loc.address,
+        }));
+
+        if (existing) {
+          existing.classes = [...existing.classes, ...taggedClasses];
+        } else {
+          dayMap.set(day.day, {
+            day: day.day,
+            dayShort: day.dayShort,
+            classes: taggedClasses,
+          });
+        }
+      }
+    }
+
+    // Sort by weekday order
+    return dayOrder
+      .filter((d) => dayMap.has(d))
+      .map((d) => dayMap.get(d)!);
+  }, [locationMode, schedule.locations]);
+
+  const { types, hasAnySlots, hasAnyRecruiting } = useMemo(() => {
     const typeSet = new Set<string>();
     let slots = false;
     let recruiting = false;
-    for (const day of location.days) {
+    for (const day of activeDays) {
       for (const cls of day.classes) {
-        trainerSet.add(cls.trainer);
         typeSet.add(cls.type);
         if (cls.hasSlots) slots = true;
         if (cls.recruiting) recruiting = true;
       }
     }
     return {
-      trainers: Array.from(trainerSet).sort(),
       types: Array.from(typeSet).sort(),
       hasAnySlots: slots,
       hasAnyRecruiting: recruiting,
     };
-  }, [location]);
+  }, [activeDays]);
 
-  const filteredDays = useMemo(() => {
-    const noFilter = !filterTrainer && !filterType && filterStatus === "all";
-    if (noFilter) return location.days;
-    return location.days
+  // Get the time range for the active time filter
+  const activeTimeRange = filterTime !== "all"
+    ? TIME_PRESETS.find((p) => p.value === filterTime)?.range
+    : null;
+
+  const filteredDays: ScheduleDayMerged[] = useMemo(() => {
+    const noFilter = !filterTrainer && !filterType && filterStatus === "all" && filterTime === "all" && filterDaySet.size === 0;
+    if (noFilter) return activeDays;
+
+    // First filter by day names if any selected
+    const dayFiltered = filterDaySet.size > 0
+      ? activeDays.filter((day) => filterDaySet.has(day.day))
+      : activeDays;
+
+    return dayFiltered
       .map((day) => ({
         ...day,
         classes: day.classes.filter(
@@ -59,20 +116,49 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
             (!filterType || cls.type === filterType) &&
             (filterStatus === "all" ||
               (filterStatus === "hasSlots" && cls.hasSlots) ||
-              (filterStatus === "recruiting" && cls.recruiting))
+              (filterStatus === "recruiting" && cls.recruiting)) &&
+            (!activeTimeRange || (() => {
+              const m = startTimeMinutes(cls.time);
+              return m >= activeTimeRange[0] && m < activeTimeRange[1];
+            })())
         ),
       }))
       .filter((day) => day.classes.length > 0);
-  }, [location.days, filterTrainer, filterType, filterStatus]);
+  }, [activeDays, filterTrainer, filterType, filterStatus, filterTime, activeTimeRange, filterDaySet]);
 
-  const hasActiveFilter = !!(filterTrainer || filterType || filterStatus !== "all");
+  const hasActiveFilter = !!(filterTrainer || filterType || filterStatus !== "all" || filterTime !== "all" || filterDaySet.size > 0);
 
   function clearFilters() {
     setFilterTrainer(null);
     setFilterType(null);
     setFilterStatus("all");
+    setFilterTime("all");
+    setFilterDaySet(new Set());
   }
 
+  // Available days for the day filter
+  const availableDays = useMemo(() =>
+    activeDays.map((d) => ({ day: d.day, dayShort: d.dayShort })),
+    [activeDays]
+  );
+
+  function toggleDay(day: string) {
+    setFilterDaySet((prev) => {
+      const next = new Set(prev);
+      if (next.has(day)) next.delete(day);
+      else next.add(day);
+      return next;
+    });
+  }
+
+  function switchLocation(mode: LocationMode) {
+    setLocationMode(mode);
+    clearFilters();
+  }
+
+  const activeTabClass = "bg-gold text-black shadow-[0_0_20px_rgba(201,169,110,0.3)]";
+  const inactiveTabClass = "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";
+
   return (
     <section
       id="schedule"
@@ -87,87 +173,151 @@ export function Schedule({ data: schedule, classItems }: ScheduleProps) {
 
         {/* Location tabs */}
         <Reveal>
-          <div className="mt-8 flex justify-center gap-2">
+          <div className="mt-8 flex justify-center gap-2 flex-wrap">
+            {/* "All studios" tab */}
+            <button
+              onClick={() => switchLocation("all")}
+              className={`inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium transition-all duration-300 cursor-pointer ${
+                isAllMode ? activeTabClass : inactiveTabClass
+              }`}
+            >
+              <LayoutGrid size={14} />
+              <span className="hidden sm:inline">Все студии</span>
+              <span className="sm:hidden">Все</span>
+            </button>
+
+            {/* Per-location tabs */}
             {schedule.locations.map((loc, i) => (
               <button
                 key={loc.name}
-                onClick={() => {
-                  setLocationIndex(i);
-                  clearFilters();
-                  setShowTrainers(false);
-                }}
+                onClick={() => switchLocation(i)}
                 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-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"
+                  locationMode === i ? activeTabClass : inactiveTabClass
                 }`}
               >
-                <MapPin size={14} />
-                {loc.name}
+                <span className="text-center">
+                  <span className="block leading-tight">{loc.name}</span>
+                  {loc.address && (
+                    <span className={`block text-[10px] font-normal leading-tight mt-0.5 ${
+                      locationMode === i ? "text-black/60" : "text-neutral-400 dark:text-white/25"
+                    }`}>
+                      {shortAddress(loc.address)}
+                    </span>
+                  )}
+                </span>
               </button>
             ))}
           </div>
         </Reveal>
 
+        {/* View mode toggle */}
+        <Reveal>
+          <div className="mt-4 flex justify-center">
+            <div className="inline-flex rounded-xl border border-neutral-200 bg-neutral-100 p-1 dark:border-white/[0.08] dark:bg-white/[0.04]">
+              <button
+                onClick={() => setViewMode("days")}
+                className={`inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-xs font-medium transition-all duration-200 cursor-pointer ${
+                  viewMode === "days"
+                    ? "bg-white text-neutral-900 shadow-sm dark:bg-white/10 dark:text-white"
+                    : "text-neutral-500 hover:text-neutral-700 dark:text-white/35 dark:hover:text-white/60"
+                }`}
+              >
+                <CalendarDays size={13} />
+                По дням
+              </button>
+              <button
+                onClick={() => setViewMode("groups")}
+                className={`inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-xs font-medium transition-all duration-200 cursor-pointer ${
+                  viewMode === "groups"
+                    ? "bg-white text-neutral-900 shadow-sm dark:bg-white/10 dark:text-white"
+                    : "text-neutral-500 hover:text-neutral-700 dark:text-white/35 dark:hover:text-white/60"
+                }`}
+              >
+                <Users size={13} />
+                По группам
+              </button>
+            </div>
+          </div>
+        </Reveal>
+
         {/* Compact filters — desktop only */}
         <Reveal>
           <ScheduleFilters
             typeDots={typeDots}
             types={types}
-            trainers={trainers}
             hasAnySlots={hasAnySlots}
             hasAnyRecruiting={hasAnyRecruiting}
             filterType={filterType}
             setFilterType={setFilterType}
             filterTrainer={filterTrainer}
-            setFilterTrainer={setFilterTrainer}
             filterStatus={filterStatus}
             setFilterStatus={setFilterStatus}
-            showTrainers={showTrainers}
-            setShowTrainers={setShowTrainers}
+            filterTime={filterTime}
+            setFilterTime={setFilterTime}
+            availableDays={availableDays}
+            filterDaySet={filterDaySet}
+            toggleDay={toggleDay}
             hasActiveFilter={hasActiveFilter}
             clearFilters={clearFilters}
           />
         </Reveal>
       </div>
 
-      {/* Mobile: compact agenda list with tap-to-filter */}
-      <Reveal>
-        <MobileSchedule
-          typeDots={typeDots}
-          filteredDays={filteredDays}
-          filterType={filterType}
-          setFilterType={setFilterType}
-          filterTrainer={filterTrainer}
-          setFilterTrainer={setFilterTrainer}
-          hasActiveFilter={hasActiveFilter}
-          clearFilters={clearFilters}
-        />
-      </Reveal>
+      {viewMode === "days" ? (
+        <>
+          {/* Mobile: compact agenda list with tap-to-filter */}
+          <Reveal>
+            <MobileSchedule
+              typeDots={typeDots}
+              filteredDays={filteredDays}
+              filterType={filterType}
+              setFilterType={setFilterType}
+              filterTrainer={filterTrainer}
+              setFilterTrainer={setFilterTrainer}
+              hasActiveFilter={hasActiveFilter}
+              clearFilters={clearFilters}
+              showLocation={isAllMode}
+            />
+          </Reveal>
 
-      {/* Desktop: grid layout */}
-      <Reveal>
-        <div
-          key={`${locationIndex}-${filterTrainer}-${filterType}-${filterStatus}`}
-          className={`mt-8 hidden sm:grid grid-cols-1 gap-3 px-4 sm:px-6 lg:px-8 xl:px-6 ${filteredDays.length >= 7 ? "sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7" : filteredDays.length >= 6 ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6" : filteredDays.length >= 4 ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" : filteredDays.length === 3 ? "sm:grid-cols-2 lg:grid-cols-3" : filteredDays.length === 2 ? "sm:grid-cols-2" : "justify-items-center"}`}
-          style={filteredDays.length === 1 ? undefined : filteredDays.length <= 3 && filteredDays.length > 0 ? { maxWidth: filteredDays.length * 340 + (filteredDays.length - 1) * 12, marginInline: "auto" } : undefined}
-        >
-          {filteredDays.map((day) => (
+          {/* Desktop: grid layout */}
+          <Reveal>
             <div
-              key={day.day}
-              className={filteredDays.length === 1 ? "w-full max-w-[340px]" : ""}
+              key={`${locationMode}-${filterTrainer}-${filterType}-${filterStatus}`}
+              className={`mt-8 hidden sm:grid grid-cols-1 gap-3 px-4 sm:px-6 lg:px-8 xl:px-6 ${filteredDays.length >= 7 ? "sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7" : filteredDays.length >= 6 ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6" : filteredDays.length >= 4 ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" : filteredDays.length === 3 ? "sm:grid-cols-2 lg:grid-cols-3" : filteredDays.length === 2 ? "sm:grid-cols-2" : "justify-items-center"}`}
+              style={filteredDays.length === 1 ? undefined : filteredDays.length <= 3 && filteredDays.length > 0 ? { maxWidth: filteredDays.length * 340 + (filteredDays.length - 1) * 12, marginInline: "auto" } : undefined}
             >
-              <DayCard day={day} typeDots={typeDots} />
-            </div>
-          ))}
+              {filteredDays.map((day) => (
+                <div
+                  key={day.day}
+                  className={filteredDays.length === 1 ? "w-full max-w-[340px]" : ""}
+                >
+                  <DayCard day={day} typeDots={typeDots} showLocation={isAllMode} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+                </div>
+              ))}
 
-          {filteredDays.length === 0 && (
-            <div className="col-span-full py-12 text-center text-sm text-neutral-400 dark:text-white/30">
-              Нет занятий по выбранным фильтрам
+              {filteredDays.length === 0 && (
+                <div className="col-span-full py-12 text-center text-sm text-neutral-400 dark:text-white/30">
+                  Нет занятий по выбранным фильтрам
+                </div>
+              )}
             </div>
-          )}
-        </div>
-      </Reveal>
+          </Reveal>
+        </>
+      ) : (
+        /* Group view: classes clustered by trainer+type */
+        <Reveal>
+          <GroupView
+            typeDots={typeDots}
+            filteredDays={filteredDays}
+            filterType={filterType}
+            setFilterType={setFilterType}
+            filterTrainer={filterTrainer}
+            setFilterTrainer={setFilterTrainer}
+            showLocation={isAllMode}
+          />
+        </Reveal>
+      )}
     </section>
   );
 }
diff --git a/src/components/sections/schedule/DayCard.tsx b/src/components/sections/schedule/DayCard.tsx
index 80e7208..670cb15 100644
--- a/src/components/sections/schedule/DayCard.tsx
+++ b/src/components/sections/schedule/DayCard.tsx
@@ -1,7 +1,98 @@
-import { Clock, User } from "lucide-react";
-import type { ScheduleDay } from "@/types/content";
+import { Clock, User, MapPin } from "lucide-react";
+import { shortAddress } from "./constants";
+import type { ScheduleDayMerged, ScheduleClassWithLocation } from "./constants";
+
+interface DayCardProps {
+  day: ScheduleDayMerged;
+  typeDots: Record<string, string>;
+  showLocation?: boolean;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+}
+
+function ClassRow({
+  cls,
+  typeDots,
+  filterTrainer,
+  setFilterTrainer,
+  filterType,
+  setFilterType,
+}: {
+  cls: ScheduleClassWithLocation;
+  typeDots: Record<string, string>;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+}) {
+  return (
+    <div 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>
+      <button
+        onClick={() => setFilterTrainer(filterTrainer === cls.trainer ? null : cls.trainer)}
+        className={`mt-1.5 flex items-center gap-2 text-sm font-medium cursor-pointer active:opacity-60 ${
+          filterTrainer === cls.trainer
+            ? "text-gold underline underline-offset-2"
+            : "text-neutral-800 dark:text-white/80"
+        }`}
+      >
+        <User size={13} className="shrink-0 text-neutral-400 dark:text-white/30" />
+        {cls.trainer}
+      </button>
+      <div className="mt-2 flex items-center gap-2 flex-wrap">
+        <button
+          onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
+          className="flex items-center gap-2 cursor-pointer active:opacity-60"
+        >
+          <span className={`h-2 w-2 shrink-0 rounded-full ${typeDots[cls.type] ?? "bg-white/30"}`} />
+          <span className={`text-xs ${
+            filterType === cls.type
+              ? "text-gold underline underline-offset-2"
+              : "text-neutral-500 dark:text-white/40"
+          }`}>{cls.type}</span>
+        </button>
+        {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>
+  );
+}
+
+export function DayCard({ day, typeDots, showLocation, filterTrainer, setFilterTrainer, filterType, setFilterType }: DayCardProps) {
+  // Group classes by location when showLocation is true
+  const locationGroups = showLocation
+    ? Array.from(
+        day.classes.reduce((map, cls) => {
+          const loc = cls.locationName ?? "";
+          if (!map.has(loc)) {
+            map.set(loc, { address: cls.locationAddress, classes: [] });
+          }
+          map.get(loc)!.classes.push(cls);
+          return map;
+        }, new Map<string, { address?: string; classes: ScheduleClassWithLocation[] }>())
+      )
+    : null;
 
-export function DayCard({ day, typeDots }: { day: ScheduleDay; typeDots: Record<string, string> }) {
   return (
     <div className="rounded-2xl border border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a] overflow-hidden">
       {/* Day header */}
@@ -17,43 +108,35 @@ export function DayCard({ day, typeDots }: { day: ScheduleDay; typeDots: Record<
       </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>
+      {locationGroups ? (
+        // Split by location
+        <div>
+          {locationGroups.map(([locName, { address, classes }], gi) => (
+            <div key={locName}>
+              {/* Location sub-header */}
+              <div className={`flex items-center gap-1.5 px-5 py-2 bg-neutral-100/60 dark:bg-white/[0.03] ${gi > 0 ? "border-t border-neutral-200 dark:border-white/[0.06]" : ""}`}>
+                <MapPin size={11} className="shrink-0 text-neutral-400 dark:text-white/25" />
+                <span className="text-[11px] font-medium text-neutral-400 dark:text-white/30">
+                  {locName}
+                  {address && <span className="text-neutral-300 dark:text-white/15"> · {shortAddress(address)}</span>}
+                </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 ${typeDots[cls.type] ?? "bg-white/30"}`} />
-                <span className="text-xs text-neutral-500 dark:text-white/40">{cls.type}</span>
+              <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
+                {classes.map((cls, i) => (
+                  <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+                ))}
               </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>
+      ) : (
+        // Single location — no sub-headers
+        <div className="divide-y divide-neutral-100 dark:divide-white/[0.04]">
+          {day.classes.map((cls, i) => (
+            <ClassRow key={i} cls={cls} typeDots={typeDots} filterTrainer={filterTrainer} setFilterTrainer={setFilterTrainer} filterType={filterType} setFilterType={setFilterType} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/sections/schedule/GroupView.tsx b/src/components/sections/schedule/GroupView.tsx
new file mode 100644
index 0000000..44d517c
--- /dev/null
+++ b/src/components/sections/schedule/GroupView.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { User, Clock, CalendarDays, MapPin } from "lucide-react";
+import { shortAddress } from "./constants";
+import type { ScheduleDayMerged, ScheduleClassWithLocation } from "./constants";
+
+interface ScheduleGroup {
+  trainer: string;
+  type: string;
+  level?: string;
+  hasSlots: boolean;
+  recruiting: boolean;
+  location?: string;
+  locationAddress?: string;
+  slots: { day: string; dayShort: string; time: string }[];
+}
+
+function buildGroups(days: ScheduleDayMerged[]): ScheduleGroup[] {
+  const map = new Map<string, ScheduleGroup>();
+
+  for (const day of days) {
+    for (const cls of day.classes as ScheduleClassWithLocation[]) {
+      // Include location in key so same trainer+type at different locations = separate groups
+      const locPart = cls.locationName ?? "";
+      const key = `${cls.trainer}||${cls.type}||${locPart}`;
+      const existing = map.get(key);
+      if (existing) {
+        existing.slots.push({ day: day.day, dayShort: day.dayShort, time: cls.time });
+        if (cls.hasSlots) existing.hasSlots = true;
+        if (cls.recruiting) existing.recruiting = true;
+        if (cls.level && !existing.level) existing.level = cls.level;
+      } else {
+        map.set(key, {
+          trainer: cls.trainer,
+          type: cls.type,
+          level: cls.level,
+          hasSlots: !!cls.hasSlots,
+          recruiting: !!cls.recruiting,
+          location: cls.locationName,
+          locationAddress: cls.locationAddress,
+          slots: [{ day: day.day, dayShort: day.dayShort, time: cls.time }],
+        });
+      }
+    }
+  }
+
+  return Array.from(map.values());
+}
+
+interface GroupViewProps {
+  typeDots: Record<string, string>;
+  filteredDays: ScheduleDayMerged[];
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  showLocation?: boolean;
+}
+
+export function GroupView({
+  typeDots,
+  filteredDays,
+  filterType,
+  setFilterType,
+  filterTrainer,
+  setFilterTrainer,
+  showLocation,
+}: GroupViewProps) {
+  const groups = buildGroups(filteredDays);
+
+  if (groups.length === 0) {
+    return (
+      <div className="py-12 text-center text-sm text-neutral-400 dark:text-white/30">
+        Нет занятий по выбранным фильтрам
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-8 grid grid-cols-1 gap-3 px-4 sm:grid-cols-2 lg:grid-cols-3 sm:px-6 lg:px-8 xl:px-6">
+      {groups.map((group) => {
+        const dotColor = typeDots[group.type] ?? "bg-white/30";
+
+        return (
+          <div
+            key={`${group.trainer}||${group.type}||${group.location ?? ""}`}
+            className={`rounded-2xl border overflow-hidden transition-colors ${
+              group.hasSlots
+                ? "border-emerald-500/25 bg-white dark:border-emerald-500/15 dark:bg-[#0a0a0a]"
+                : group.recruiting
+                  ? "border-sky-500/25 bg-white dark:border-sky-500/15 dark:bg-[#0a0a0a]"
+                  : "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a]"
+            }`}
+          >
+            {/* Header */}
+            <div className={`px-5 py-4 border-b ${
+              group.hasSlots
+                ? "border-emerald-500/15 bg-emerald-500/5 dark:border-emerald-500/10 dark:bg-emerald-500/[0.03]"
+                : group.recruiting
+                  ? "border-sky-500/15 bg-sky-500/5 dark:border-sky-500/10 dark:bg-sky-500/[0.03]"
+                  : "border-neutral-100 bg-neutral-50 dark:border-white/[0.04] dark:bg-white/[0.02]"
+            }`}>
+              {/* Type + badges */}
+              <div className="flex items-center gap-2 flex-wrap">
+                <button
+                  onClick={() => setFilterType(filterType === group.type ? null : group.type)}
+                  className={`flex items-center gap-2 active:opacity-60 ${
+                    filterType === group.type ? "opacity-100" : ""
+                  }`}
+                >
+                  <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} />
+                  <span className="text-base font-semibold text-neutral-900 dark:text-white/90">
+                    {group.type}
+                  </span>
+                </button>
+                {group.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">
+                    {group.level}
+                  </span>
+                )}
+                {group.hasSlots && (
+                  <span className="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>
+                )}
+                {group.recruiting && (
+                  <span className="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>
+
+              {/* Trainer */}
+              <button
+                onClick={() => setFilterTrainer(filterTrainer === group.trainer ? null : group.trainer)}
+                className={`mt-2 flex items-center gap-1.5 text-sm active:opacity-60 ${
+                  filterTrainer === group.trainer
+                    ? "text-gold underline underline-offset-2"
+                    : "text-neutral-500 dark:text-white/50"
+                }`}
+              >
+                <User size={13} className="shrink-0" />
+                {group.trainer}
+              </button>
+
+              {/* Location badge — only in "all" mode */}
+              {showLocation && group.location && (
+                <div className="mt-2 flex items-center gap-1 text-[11px] text-neutral-400 dark:text-white/30">
+                  <MapPin size={10} className="shrink-0" />
+                  {group.location}
+                  {group.locationAddress && (
+                    <span className="text-neutral-300 dark:text-white/15"> · {shortAddress(group.locationAddress)}</span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Schedule slots */}
+            <div className="px-5 py-3.5">
+              <div className="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium text-neutral-400 dark:text-white/25 uppercase tracking-wider">
+                <CalendarDays size={12} />
+                Расписание
+              </div>
+              <div className="space-y-1.5">
+                {group.slots.map((slot, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-3 rounded-lg bg-neutral-50 px-3 py-2 dark:bg-white/[0.03]"
+                  >
+                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-gold/10 text-[10px] font-bold text-gold-dark dark:text-gold-light">
+                      {slot.dayShort}
+                    </span>
+                    <div className="flex items-center gap-1.5 text-sm text-neutral-600 dark:text-white/60">
+                      <Clock size={12} className="shrink-0 text-neutral-400 dark:text-white/30" />
+                      <span className="font-medium tabular-nums">{slot.time}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/sections/schedule/MobileSchedule.tsx b/src/components/sections/schedule/MobileSchedule.tsx
index de5711b..5fd971d 100644
--- a/src/components/sections/schedule/MobileSchedule.tsx
+++ b/src/components/sections/schedule/MobileSchedule.tsx
@@ -1,17 +1,90 @@
 "use client";
 
-import { User, X } from "lucide-react";
-import type { ScheduleDay } from "@/types/content";
+import { User, X, MapPin } from "lucide-react";
+import { shortAddress } from "./constants";
+import type { ScheduleDayMerged, ScheduleClassWithLocation } from "./constants";
 
 interface MobileScheduleProps {
   typeDots: Record<string, string>;
-  filteredDays: ScheduleDay[];
+  filteredDays: ScheduleDayMerged[];
   filterType: string | null;
   setFilterType: (type: string | null) => void;
   filterTrainer: string | null;
   setFilterTrainer: (trainer: string | null) => void;
   hasActiveFilter: boolean;
   clearFilters: () => void;
+  showLocation?: boolean;
+}
+
+function ClassRow({
+  cls,
+  typeDots,
+  filterType,
+  setFilterType,
+  filterTrainer,
+  setFilterTrainer,
+  showLocation,
+}: {
+  cls: ScheduleClassWithLocation;
+  typeDots: Record<string, string>;
+  filterType: string | null;
+  setFilterType: (type: string | null) => void;
+  filterTrainer: string | null;
+  setFilterTrainer: (trainer: string | null) => void;
+  showLocation?: boolean;
+}) {
+  return (
+    <div
+      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>
+        <div className="mt-0.5 flex items-center gap-2">
+          <button
+            onClick={() => setFilterType(filterType === cls.type ? null : cls.type)}
+            className={`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 ${typeDots[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>
+          {showLocation && cls.locationName && (
+            <span className="flex items-center gap-0.5 text-[10px] text-neutral-400 dark:text-white/20">
+              <MapPin size={8} className="shrink-0" />
+              {cls.locationName}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export function MobileSchedule({
@@ -23,6 +96,7 @@ export function MobileSchedule({
   setFilterTrainer,
   hasActiveFilter,
   clearFilters,
+  showLocation,
 }: MobileScheduleProps) {
   return (
     <div className="mt-6 px-4 sm:hidden">
@@ -55,68 +129,78 @@ export function MobileSchedule({
 
       {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>
+          {filteredDays.map((day) => {
+            // Group classes by location when showLocation is true
+            const locationGroups = showLocation
+              ? Array.from(
+                  day.classes.reduce((map, cls) => {
+                    const loc = cls.locationName ?? "";
+                    if (!map.has(loc)) {
+                      map.set(loc, { address: cls.locationAddress, classes: [] });
+                    }
+                    map.get(loc)!.classes.push(cls);
+                    return map;
+                  }, new Map<string, { address?: string; classes: ScheduleClassWithLocation[] }>())
+                )
+              : null;
 
-              {/* 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>
+            return (
+              <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>
 
-                    {/* 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">
-                            места
+                {/* Class rows */}
+                <div className="ml-1 border-l-2 border-neutral-200 dark:border-white/[0.08]">
+                  {locationGroups ? (
+                    // Split by location
+                    locationGroups.map(([locName, { address, classes }]) => (
+                      <div key={locName}>
+                        {/* Location sub-header */}
+                        <div className="ml-3 flex items-center gap-1 px-3 py-1.5">
+                          <MapPin size={9} className="shrink-0 text-neutral-400 dark:text-white/20" />
+                          <span className="text-[10px] font-medium text-neutral-400 dark:text-white/25">
+                            {locName}
+                            {address && <span className="text-neutral-300 dark:text-white/15"> · {shortAddress(address)}</span>}
                           </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>
+                        {classes.map((cls, i) => (
+                          <ClassRow
+                            key={i}
+                            cls={cls}
+                            typeDots={typeDots}
+                            filterType={filterType}
+                            setFilterType={setFilterType}
+                            filterTrainer={filterTrainer}
+                            setFilterTrainer={setFilterTrainer}
+                          />
+                        ))}
                       </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 ${typeDots[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>
-                ))}
+                    ))
+                  ) : (
+                    // Single location — no sub-headers
+                    day.classes.map((cls, i) => (
+                      <ClassRow
+                        key={i}
+                        cls={cls}
+                        typeDots={typeDots}
+                        filterType={filterType}
+                        setFilterType={setFilterType}
+                        filterTrainer={filterTrainer}
+                        setFilterTrainer={setFilterTrainer}
+                      />
+                    ))
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       ) : (
         <div className="py-12 text-center text-sm text-neutral-400 dark:text-white/30">
diff --git a/src/components/sections/schedule/ScheduleFilters.tsx b/src/components/sections/schedule/ScheduleFilters.tsx
index eca7f04..d751e4e 100644
--- a/src/components/sections/schedule/ScheduleFilters.tsx
+++ b/src/components/sections/schedule/ScheduleFilters.tsx
@@ -1,27 +1,31 @@
 "use client";
 
-import { User, X, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { User, X, ChevronDown, Clock, Calendar } from "lucide-react";
 import {
   pillBase,
   pillActive,
   pillInactive,
+  TIME_PRESETS,
   type StatusFilter,
+  type TimeFilter,
 } from "./constants";
 
 interface ScheduleFiltersProps {
   typeDots: Record<string, string>;
   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;
+  filterTime: TimeFilter;
+  setFilterTime: (time: TimeFilter) => void;
+  availableDays: { day: string; dayShort: string }[];
+  filterDaySet: Set<string>;
+  toggleDay: (day: string) => void;
   hasActiveFilter: boolean;
   clearFilters: () => void;
 }
@@ -29,22 +33,27 @@ interface ScheduleFiltersProps {
 export function ScheduleFilters({
   typeDots,
   types,
-  trainers,
   hasAnySlots,
   hasAnyRecruiting,
   filterType,
   setFilterType,
   filterTrainer,
-  setFilterTrainer,
   filterStatus,
   setFilterStatus,
-  showTrainers,
-  setShowTrainers,
+  filterTime,
+  setFilterTime,
+  availableDays,
+  filterDaySet,
+  toggleDay,
   hasActiveFilter,
   clearFilters,
 }: ScheduleFiltersProps) {
+  const [showWhen, setShowWhen] = useState(false);
+  const hasTimeFilter = filterDaySet.size > 0 || filterTime !== "all";
+
   return (
     <>
+      {/* Single row: type + status + when + active trainer indicator + clear */}
       <div className="mt-5 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
         {/* Class types */}
         {types.map((type) => (
@@ -84,16 +93,24 @@ export function ScheduleFilters({
         {/* Divider */}
         <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
 
-        {/* Trainer dropdown toggle */}
+        {/* When dropdown toggle */}
         <button
-          onClick={() => setShowTrainers(!showTrainers)}
-          className={`${pillBase} ${filterTrainer ? pillActive : pillInactive}`}
+          onClick={() => setShowWhen(!showWhen)}
+          className={`${pillBase} ${hasTimeFilter ? pillActive : pillInactive}`}
         >
-          <User size={11} />
-          {filterTrainer ?? "Тренер"}
-          <ChevronDown size={10} className={`transition-transform duration-200 ${showTrainers ? "rotate-180" : ""}`} />
+          <Clock size={11} />
+          Когда
+          <ChevronDown size={10} className={`transition-transform duration-200 ${showWhen ? "rotate-180" : ""}`} />
         </button>
 
+        {/* Active trainer indicator (set by clicking trainer in cards) */}
+        {filterTrainer && (
+          <span className={`${pillBase} ${pillActive}`}>
+            <User size={11} />
+            {filterTrainer}
+          </span>
+        )}
+
         {/* Clear */}
         {hasActiveFilter && (
           <button
@@ -105,19 +122,29 @@ export function ScheduleFilters({
         )}
       </div>
 
-      {/* Trainer pills — expandable */}
-      {showTrainers && (
-        <div className="mt-2 flex flex-wrap items-center justify-center gap-1.5">
-          {trainers.map((trainer) => (
+      {/* When panel — expandable: days + time presets */}
+      {showWhen && (
+        <div className="mt-2 hidden sm:flex items-center justify-center gap-1.5 flex-wrap">
+          <Calendar size={11} className="text-neutral-400 dark:text-white/25" />
+          {availableDays.map(({ day, dayShort }) => (
             <button
-              key={trainer}
-              onClick={() => {
-                setFilterTrainer(filterTrainer === trainer ? null : trainer);
-                setShowTrainers(false);
-              }}
-              className={`${pillBase} ${filterTrainer === trainer ? pillActive : pillInactive}`}
+              key={day}
+              onClick={() => toggleDay(day)}
+              className={`${pillBase} ${filterDaySet.has(day) ? pillActive : pillInactive}`}
             >
-              {trainer}
+              {dayShort}
+            </button>
+          ))}
+
+          <span className="mx-1 h-4 w-px shrink-0 bg-neutral-200 dark:bg-white/10" />
+
+          {TIME_PRESETS.map((preset) => (
+            <button
+              key={preset.value}
+              onClick={() => setFilterTime(filterTime === preset.value ? "all" : preset.value)}
+              className={`${pillBase} ${filterTime === preset.value ? pillActive : pillInactive}`}
+            >
+              {preset.label}
             </button>
           ))}
         </div>
diff --git a/src/components/sections/schedule/constants.ts b/src/components/sections/schedule/constants.ts
index db5c40a..f31d737 100644
--- a/src/components/sections/schedule/constants.ts
+++ b/src/components/sections/schedule/constants.ts
@@ -63,6 +63,44 @@ export function buildTypeDots(
 }
 
 export type StatusFilter = "all" | "hasSlots" | "recruiting";
+export type TimeFilter = "all" | "morning" | "afternoon" | "evening";
+
+export const TIME_PRESETS: { value: TimeFilter; label: string; range: [number, number] }[] = [
+  { value: "morning", label: "Утро", range: [0, 12 * 60] },
+  { value: "afternoon", label: "День", range: [12 * 60, 18 * 60] },
+  { value: "evening", label: "Вечер", range: [18 * 60, 24 * 60] },
+];
+
+/** Parse start time from "HH:MM–HH:MM" to minutes since midnight */
+export function startTimeMinutes(time: string): number {
+  const start = time.split("–")[0]?.trim() ?? "";
+  const [h, m] = start.split(":").map(Number);
+  if (isNaN(h) || isNaN(m)) return 0;
+  return h * 60 + m;
+}
+
+/** Extended class type with location info for cross-location views */
+export interface ScheduleClassWithLocation {
+  time: string;
+  trainer: string;
+  type: string;
+  level?: string;
+  hasSlots?: boolean;
+  recruiting?: boolean;
+  locationName?: string;
+  locationAddress?: string;
+}
+
+/** Strip "г. Минск, " prefix from address for compact display */
+export function shortAddress(address: string): string {
+  return address.replace(/^г\.\s*Минск,?\s*/i, "").trim();
+}
+
+export interface ScheduleDayMerged {
+  day: string;
+  dayShort: string;
+  classes: ScheduleClassWithLocation[];
+}
 
 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";