feat: add class modal with descriptions, photos and remove email from contacts

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

src/components/sections/Classes.tsx

@@ -1,7 +1,12 @@
+"use client";
+
+import { useState } from "react";
 import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { ClassModal } from "@/components/ui/ClassModal";
+import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
   flame: <Flame size={32} />,
@@ -14,6 +19,7 @@ const iconMap: Record<string, React.ReactNode> = {
 
 export function Classes() {
   const { classes } = siteContent;
+  const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);
 
   return (
     <section id="classes" className="surface-muted section-padding">
@@ -24,8 +30,11 @@ export function Classes() {
 
         <div className="mt-12 grid gap-6 sm:grid-cols-2">
           {classes.items.map((item) => (
-            <Reveal key={item.name}>
-              <div className="card">
+            <Reveal key={item.name} className="h-full">
+              <div
+                className="card h-full flex flex-col cursor-pointer transition-transform hover:scale-[1.02]"
+                onClick={() => setSelectedClass(item)}
+              >
                 <div className="heading-text">{iconMap[item.icon]}</div>
                 <h3 className="heading-text mt-4 text-xl font-semibold">{item.name}</h3>
                 <p className="body-text mt-2">{item.description}</p>
@@ -34,6 +43,11 @@ export function Classes() {
           ))}
         </div>
       </div>
+
+      <ClassModal
+        classItem={selectedClass}
+        onClose={() => setSelectedClass(null)}
+      />
     </section>
   );
 }

src/components/sections/Contact.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Phone, Mail, Clock, Instagram } from "lucide-react";
+import { MapPin, Phone, Clock, Instagram } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { BRAND } from "@/lib/constants";
 import { SectionHeading } from "@/components/ui/SectionHeading";
@@ -28,13 +28,6 @@ export function Contact() {
               </a>
             </div>
 
-            <div className="contact-item">
-              <Mail size={20} className="contact-icon" />
-              <a href={`mailto:${contact.email}`} className="nav-link text-base">
-                {contact.email}
-              </a>
-            </div>
-
             <div className="contact-item">
               <Clock size={20} className="contact-icon" />
               <p className="body-text">{contact.workingHours}</p>

src/components/ui/ClassModal.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { X, Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
+import type { ClassItem } from "@/types";
+
+const iconMap: Record<string, React.ReactNode> = {
+  flame: <Flame size={40} />,
+  sparkles: <Sparkles size={40} />,
+  wind: <Wind size={40} />,
+  zap: <Zap size={40} />,
+  star: <Star size={40} />,
+  monitor: <Monitor size={40} />,
+};
+
+interface ClassModalProps {
+  classItem: ClassItem | null;
+  onClose: () => void;
+}
+
+export function ClassModal({ classItem, onClose }: ClassModalProps) {
+  useEffect(() => {
+    if (!classItem) return;
+
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [classItem, onClose]);
+
+  if (!classItem) return null;
+
+  return (
+    <div
+      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div
+        className="modal-content surface-base relative w-full max-w-md md:max-w-2xl max-h-[85vh] flex flex-col rounded-2xl shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="heading-text absolute right-4 top-4 z-10 rounded-full p-1 transition-opacity hover:opacity-70"
+          aria-label="Закрыть"
+        >
+          <X size={20} />
+        </button>
+
+        <div className="overflow-y-auto p-6">
+          <div className="flex items-center gap-4">
+            <div className="heading-text shrink-0">{iconMap[classItem.icon]}</div>
+            <h3 className="heading-text text-xl font-semibold">
+              {classItem.name}
+            </h3>
+          </div>
+
+          {classItem.detailedDescription && (
+            <div className="body-text mt-4 text-sm leading-relaxed whitespace-pre-line">
+              {classItem.detailedDescription}
+            </div>
+          )}
+
+          {classItem.images && classItem.images.length > 0 && (
+            <div className={`mt-6 flex gap-3 pb-2 ${classItem.images.length === 1 ? "justify-center" : "overflow-x-auto"}`}>
+              {classItem.images.map((src, i) => (
+                <div
+                  key={i}
+                  className="h-48 w-72 shrink-0 overflow-hidden rounded-xl"
+                >
+                  <Image
+                    src={src}
+                    alt={`${classItem.name} ${i + 1}`}
+                    width={288}
+                    height={192}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}