feat: add master classes section with registration system

- New master classes section on landing page with upcoming events grid
- Admin CRUD for master classes (image, slots, trainer, style, cost, location)
- User signup modal (name + Instagram required, Telegram optional)
- Admin registration management: view, add, edit, delete with quick-contact links
- Customizable success message for signup confirmation
- Auto-filter past events, Russian date formatting, duration auto-calculation

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

src/components/sections/MasterClasses.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import Image from "next/image";
+import { Calendar, Clock, User, MapPin, Instagram } from "lucide-react";
+import { SectionHeading } from "@/components/ui/SectionHeading";
+import { Reveal } from "@/components/ui/Reveal";
+import { MasterClassSignupModal } from "@/components/ui/MasterClassSignupModal";
+import type { SiteContent, MasterClassItem, MasterClassSlot } from "@/types";
+
+interface MasterClassesProps {
+  data: SiteContent["masterClasses"];
+}
+
+const MONTHS_RU = [
+  "января", "февраля", "марта", "апреля", "мая", "июня",
+  "июля", "августа", "сентября", "октября", "ноября", "декабря",
+];
+
+const WEEKDAYS_RU = [
+  "воскресенье", "понедельник", "вторник", "среда",
+  "четверг", "пятница", "суббота",
+];
+
+function parseDate(iso: string) {
+  return new Date(iso + "T00:00:00");
+}
+
+function formatSlots(slots: MasterClassSlot[]): string {
+  if (slots.length === 0) return "";
+  const sorted = [...slots].sort(
+    (a, b) => parseDate(a.date).getTime() - parseDate(b.date).getTime()
+  );
+
+  const dates = sorted.map((s) => parseDate(s.date)).filter((d) => !isNaN(d.getTime()));
+  if (dates.length === 0) return "";
+
+  // Time part from first slot
+  const timePart = sorted[0].startTime
+    ? `, ${sorted[0].startTime}–${sorted[0].endTime}`
+    : "";
+
+  if (dates.length === 1) {
+    const d = dates[0];
+    return `${d.getDate()} ${MONTHS_RU[d.getMonth()]} (${WEEKDAYS_RU[d.getDay()]})${timePart}`;
+  }
+
+  const sameMonth = dates.every((d) => d.getMonth() === dates[0].getMonth());
+  const sameWeekday = dates.every((d) => d.getDay() === dates[0].getDay());
+
+  if (sameMonth) {
+    const days = dates.map((d) => d.getDate()).join(" и ");
+    const weekdayHint = sameWeekday ? ` (${WEEKDAYS_RU[dates[0].getDay()]})` : "";
+    return `${days} ${MONTHS_RU[dates[0].getMonth()]}${weekdayHint}${timePart}`;
+  }
+
+  const parts = dates.map((d) => `${d.getDate()} ${MONTHS_RU[d.getMonth()]}`);
+  return parts.join(", ") + timePart;
+}
+
+function calcDuration(slot: MasterClassSlot): string {
+  if (!slot.startTime || !slot.endTime) return "";
+  const [sh, sm] = slot.startTime.split(":").map(Number);
+  const [eh, em] = slot.endTime.split(":").map(Number);
+  const mins = (eh * 60 + em) - (sh * 60 + sm);
+  if (mins <= 0) return "";
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  if (h > 0 && m > 0) return `${h} ч ${m} мин`;
+  if (h > 0) return h === 1 ? "1 час" : h < 5 ? `${h} часа` : `${h} часов`;
+  return `${m} мин`;
+}
+
+function isUpcoming(item: MasterClassItem): boolean {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const lastDate = (item.slots ?? [])
+    .map((s) => parseDate(s.date))
+    .reduce((a, b) => (a > b ? a : b), new Date(0));
+  return lastDate >= today;
+}
+
+export function MasterClasses({ data }: MasterClassesProps) {
+  const [signupTitle, setSignupTitle] = useState<string | null>(null);
+
+  const upcoming = useMemo(() => {
+    return data.items
+      .filter(isUpcoming)
+      .sort((a, b) => {
+        const aFirst = parseDate(a.slots[0]?.date ?? "");
+        const bFirst = parseDate(b.slots[0]?.date ?? "");
+        return aFirst.getTime() - bFirst.getTime();
+      });
+  }, [data.items]);
+
+  return (
+    <section
+      id="master-classes"
+      className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808] overflow-hidden"
+    >
+      <div className="section-divider absolute top-0 left-0 right-0" />
+
+      <div className="section-container">
+        <Reveal>
+          <SectionHeading centered>{data.title}</SectionHeading>
+        </Reveal>
+
+        {upcoming.length === 0 ? (
+          <Reveal>
+            <div className="mt-10 py-12 text-center">
+              <p className="text-sm text-neutral-500 dark:text-white/40">
+                Следите за анонсами мастер-классов в нашем{" "}
+                <a
+                  href="https://instagram.com/blackheartdancehouse/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gold hover:text-gold-light underline underline-offset-2 transition-colors"
+                >
+                  Instagram
+                </a>
+              </p>
+            </div>
+          </Reveal>
+        ) : (
+        <Reveal>
+          <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {upcoming.map((item, i) => {
+              const duration = item.slots[0] ? calcDuration(item.slots[0]) : "";
+              const slotsDisplay = formatSlots(item.slots);
+
+              return (
+                <div
+                  key={i}
+                  className="group rounded-2xl border border-neutral-200 bg-white overflow-hidden transition-colors dark:border-white/[0.06] dark:bg-[#0a0a0a]"
+                >
+                  {/* Image */}
+                  {item.image && (
+                    <div className="relative aspect-[16/9] w-full overflow-hidden">
+                      <Image
+                        src={item.image}
+                        alt={item.title}
+                        fill
+                        className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                      <div className="absolute bottom-3 left-3">
+                        <span className="inline-flex items-center gap-1.5 rounded-full border border-gold/40 bg-black/60 px-3 py-1 text-xs font-semibold text-gold backdrop-blur-sm">
+                          <Calendar size={12} />
+                          {slotsDisplay}
+                        </span>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Content */}
+                  <div className="p-5 space-y-3">
+                    <h3 className="text-lg font-bold text-neutral-900 dark:text-white/90 leading-tight">
+                      {item.title}
+                    </h3>
+
+                    <div className="space-y-1.5">
+                      <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
+                        <User size={14} className="shrink-0" />
+                        <span>{item.trainer}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
+                        <span className="inline-block h-2 w-2 rounded-full bg-gold shrink-0" />
+                        <span>{item.style}</span>
+                      </div>
+                      {duration && (
+                        <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-white/50">
+                          <Clock size={14} className="shrink-0" />
+                          <span>{duration}</span>
+                        </div>
+                      )}
+                      {item.location && (
+                        <div className="flex items-center gap-2 text-sm text-neutral-400 dark:text-white/35">
+                          <MapPin size={14} className="shrink-0" />
+                          <span>{item.location}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="pt-1">
+                      <span className="text-lg font-bold text-neutral-900 dark:text-white/90">
+                        {item.cost}
+                      </span>
+                    </div>
+
+                    <div className="flex gap-2 pt-1">
+                      <button
+                        onClick={() => setSignupTitle(item.title)}
+                        className="flex-1 rounded-xl bg-gold py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer"
+                      >
+                        Записаться
+                      </button>
+                      {item.instagramUrl && (
+                        <button
+                          onClick={() => window.open(item.instagramUrl, "_blank", "noopener,noreferrer")}
+                          className="flex items-center justify-center gap-1.5 rounded-xl border border-neutral-200 px-4 py-2.5 text-sm text-neutral-500 transition-colors hover:border-gold/30 hover:text-gold dark:border-white/[0.08] dark:text-white/40 dark:hover:text-gold cursor-pointer"
+                        >
+                          <Instagram size={16} />
+                          Подробнее
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </Reveal>
+        )}
+      </div>
+
+      <MasterClassSignupModal
+        open={signupTitle !== null}
+        onClose={() => setSignupTitle(null)}
+        masterClassTitle={signupTitle ?? ""}
+        successMessage={data.successMessage}
+      />
+    </section>
+  );
+}

src/components/ui/MasterClassSignupModal.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { X, Instagram, Send, CheckCircle } from "lucide-react";
+
+interface MasterClassSignupModalProps {
+  open: boolean;
+  onClose: () => void;
+  masterClassTitle: string;
+  successMessage?: string;
+}
+
+export function MasterClassSignupModal({
+  open,
+  onClose,
+  masterClassTitle,
+  successMessage,
+}: MasterClassSignupModalProps) {
+  const [name, setName] = useState("");
+  const [instagram, setInstagram] = useState("");
+  const [telegram, setTelegram] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState("");
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  // Lock body scroll
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError("");
+      setSubmitting(true);
+
+      try {
+        const res = await fetch("/api/master-class-register", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            masterClassTitle,
+            name: name.trim(),
+            instagram: `@${instagram.trim()}`,
+            telegram: telegram.trim() ? `@${telegram.trim()}` : undefined,
+          }),
+        });
+
+        if (!res.ok) {
+          const data = await res.json();
+          throw new Error(data.error || "Ошибка регистрации");
+        }
+
+        setSubmitted(true);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Ошибка регистрации");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [masterClassTitle, name, instagram, telegram]
+  );
+
+  const handleClose = useCallback(() => {
+    onClose();
+    setTimeout(() => {
+      setName("");
+      setInstagram("");
+      setTelegram("");
+      setSubmitted(false);
+      setError("");
+    }, 300);
+  }, [onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={handleClose}
+    >
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
+
+      <div
+        className="modal-content relative w-full max-w-md rounded-2xl border border-white/[0.08] bg-[#0a0a0a] p-6 sm:p-8 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={handleClose}
+          className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-neutral-500 transition-colors hover:bg-white/[0.06] hover:text-white cursor-pointer"
+        >
+          <X size={18} />
+        </button>
+
+        {submitted ? (
+          <div className="py-4 text-center">
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/10">
+              <CheckCircle size={28} className="text-emerald-500" />
+            </div>
+            <h3 className="text-lg font-bold text-white">Отлично!</h3>
+            <p className="mt-2 text-sm text-neutral-400">
+              {successMessage || "Вы записаны! Мы свяжемся с вами"}
+            </p>
+            <button
+              onClick={handleClose}
+              className="mt-6 rounded-full bg-gold px-6 py-2.5 text-sm font-semibold text-black transition-all hover:bg-gold-light cursor-pointer"
+            >
+              Закрыть
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="mb-6">
+              <h3 className="text-xl font-bold text-white">Записаться</h3>
+              <p className="mt-1 text-sm text-neutral-400">{masterClassTitle}</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-3">
+              <div>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Ваше имя"
+                  required
+                  className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-gold/40 focus:bg-white/[0.06]"
+                />
+              </div>
+
+              <div className="flex items-center gap-0 rounded-xl border border-white/[0.08] bg-white/[0.04] transition-colors focus-within:border-gold/40 focus-within:bg-white/[0.06]">
+                <span className="flex items-center gap-1.5 pl-4 text-sm text-neutral-500 select-none">
+                  <Instagram size={14} className="text-pink-400" />
+                  @
+                </span>
+                <input
+                  type="text"
+                  value={instagram}
+                  onChange={(e) => setInstagram(e.target.value.replace(/^@/, ""))}
+                  placeholder="username"
+                  required
+                  className="flex-1 bg-transparent px-2 py-3 text-sm text-white placeholder-neutral-500 outline-none"
+                />
+              </div>
+
+              <div className="flex items-center gap-0 rounded-xl border border-white/[0.08] bg-white/[0.04] transition-colors focus-within:border-gold/40 focus-within:bg-white/[0.06]">
+                <span className="flex items-center gap-1.5 pl-4 text-sm text-neutral-500 select-none">
+                  <Send size={14} className="text-blue-400" />
+                  @
+                </span>
+                <input
+                  type="text"
+                  value={telegram}
+                  onChange={(e) => setTelegram(e.target.value.replace(/^@/, ""))}
+                  placeholder="username (необязательно)"
+                  className="flex-1 bg-transparent px-2 py-3 text-sm text-white placeholder-neutral-500 outline-none"
+                />
+              </div>
+
+              {error && (
+                <p className="text-sm text-red-400">{error}</p>
+              )}
+
+              <button
+                type="submit"
+                disabled={submitting}
+                className="flex w-full items-center justify-center gap-2 rounded-xl bg-gold py-3 text-sm font-semibold text-black transition-all hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 cursor-pointer disabled:opacity-50"
+              >
+                {submitting ? "Отправка..." : "Записаться"}
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}