From 96e3333e9f5bc843000e96165f0adb6b12073dfa Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Fri, 20 Mar 2026 13:35:36 +0300
Subject: [PATCH] feat: floating contact bar, remove pricing contact links, fix
 admin hooks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add FloatingContact bar (Записаться + Instagram) visible while scrolling
- Hides on hero and near contact section, centered at bottom
- Move BackToTop button up to avoid overlap
- Remove redundant ContactHint from Pricing section (floating bar covers it)
- Fix React hooks order violation in AdminLayout (early return before useEffect)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/admin/layout.tsx              | 15 ++++---
 src/app/page.tsx                      |  2 +
 src/components/sections/Pricing.tsx   | 44 ++----------------
 src/components/ui/BackToTop.tsx       |  2 +-
 src/components/ui/FloatingContact.tsx | 65 +++++++++++++++++++++++++++
 5 files changed, 79 insertions(+), 49 deletions(-)
 create mode 100644 src/components/ui/FloatingContact.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 5ce60f4..3fd476e 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -51,15 +51,11 @@ export default function AdminLayout({
   const router = useRouter();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [unreadTotal, setUnreadTotal] = useState(0);
-
-  // Don't render admin shell on login page
-  if (pathname === "/admin/login") {
-    return <>{children}</>;
-  }
+  const isLoginPage = pathname === "/admin/login";
 
   // Fetch unread counts — poll every 30s
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
+    if (isLoginPage) return;
     function fetchCounts() {
       adminFetch("/api/admin/unread-counts")
         .then((r) => r.json())
@@ -69,7 +65,12 @@ export default function AdminLayout({
     fetchCounts();
     const interval = setInterval(fetchCounts, 30000);
     return () => clearInterval(interval);
-  }, []);
+  }, [isLoginPage]);
+
+  // Don't render admin shell on login page
+  if (isLoginPage) {
+    return <>{children}</>;
+  }
 
   async function handleLogout() {
     await fetch("/api/logout", { method: "POST" });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2d0ac49..fb0837a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import { News } from "@/components/sections/News";
 import { FAQ } from "@/components/sections/FAQ";
 import { Contact } from "@/components/sections/Contact";
 import { BackToTop } from "@/components/ui/BackToTop";
+import { FloatingContact } from "@/components/ui/FloatingContact";
 import { Header } from "@/components/layout/Header";
 import { Footer } from "@/components/layout/Footer";
 import { getContent } from "@/lib/content";
@@ -42,6 +43,7 @@ export default function HomePage() {
         <FAQ data={content.faq} />
         <Contact data={content.contact} />
         <BackToTop />
+        <FloatingContact />
       </main>
       <Footer />
     </>
diff --git a/src/components/sections/Pricing.tsx b/src/components/sections/Pricing.tsx
index 7f1d829..4ec1f5e 100644
--- a/src/components/sections/Pricing.tsx
+++ b/src/components/sections/Pricing.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { CreditCard, Building2, ScrollText, Crown, Sparkles, Instagram, Send, Phone } from "lucide-react";
+import { CreditCard, Building2, ScrollText, Crown, Sparkles } from "lucide-react";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
-import { BRAND } from "@/lib/constants";
 import type { SiteContent } from "@/types/content";
 
 type Tab = "prices" | "rental" | "rules";
@@ -13,43 +12,8 @@ interface PricingProps {
   data: SiteContent["pricing"];
 }
 
-function ContactHint() {
-  return (
-    <div className="mt-5 flex flex-wrap items-center justify-center gap-3 text-xs text-neutral-500">
-      <span>Для записи и бронирования:</span>
-      <a
-        href={BRAND.instagram}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-pink-400 hover:text-pink-300 hover:border-pink-400/30 transition-colors"
-      >
-        <Instagram size={12} />
-        Instagram
-      </a>
-      <a
-        href="https://t.me/blackheartdancehouse"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-blue-400 hover:text-blue-300 hover:border-blue-400/30 transition-colors"
-      >
-        <Send size={12} />
-        Telegram
-      </a>
-      <a
-        href="tel:+375293897001"
-        className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-emerald-400 hover:text-emerald-300 hover:border-emerald-400/30 transition-colors"
-      >
-        <Phone size={12} />
-        Позвонить
-      </a>
-    </div>
-  );
-}
-
 export function Pricing({ data: pricing }: PricingProps) {
   const [activeTab, setActiveTab] = useState<Tab>("prices");
-  const showHint = pricing.showContactHint !== false; // default true
-
   const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
     { id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> },
     { id: "rental", label: "Аренда зала", icon: <Building2 size={16} /> },
@@ -166,8 +130,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                 </div>
               )}
 
-              {showHint && <ContactHint />}
-            </div>
+                          </div>
           </Reveal>
         )}
 
@@ -196,8 +159,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                 </div>
               ))}
 
-              {showHint && <ContactHint />}
-            </div>
+                          </div>
           </Reveal>
         )}
 
diff --git a/src/components/ui/BackToTop.tsx b/src/components/ui/BackToTop.tsx
index cfd2194..9c23136 100644
--- a/src/components/ui/BackToTop.tsx
+++ b/src/components/ui/BackToTop.tsx
@@ -19,7 +19,7 @@ export function BackToTop() {
     <button
       onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
       aria-label="Наверх"
-      className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
+      className={`fixed bottom-20 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
         visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
       }`}
     >
diff --git a/src/components/ui/FloatingContact.tsx b/src/components/ui/FloatingContact.tsx
new file mode 100644
index 0000000..0a74c9a
--- /dev/null
+++ b/src/components/ui/FloatingContact.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Instagram } from "lucide-react";
+import { BRAND } from "@/lib/constants";
+import { SignupModal } from "./SignupModal";
+
+export function FloatingContact() {
+  const [visible, setVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    function handleScroll() {
+      const contactEl = document.getElementById("contact");
+
+      const pastHero = window.scrollY > window.innerHeight * 0.7;
+      const reachedContact = contactEl
+        ? window.scrollY + window.innerHeight > contactEl.offsetTop + 100
+        : false;
+
+      setVisible(pastHero && !reachedContact);
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={`fixed bottom-6 left-1/2 z-40 -translate-x-1/2 flex items-center gap-3 rounded-full border border-gold/20 bg-black/80 px-2 py-2 backdrop-blur-md shadow-lg shadow-black/40 transition-all duration-400 ${
+          visible
+            ? "translate-y-0 opacity-100"
+            : "translate-y-6 opacity-0 pointer-events-none"
+        }`}
+      >
+        <button
+          onClick={() => setModalOpen(true)}
+          className="rounded-full bg-gold px-5 py-2 text-sm font-semibold text-black transition-colors hover:bg-gold-light"
+        >
+          Записаться
+        </button>
+
+        <a
+          href={BRAND.instagram}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Instagram"
+          className="flex h-9 w-9 items-center justify-center rounded-full border border-gold/30 text-gold-light transition-colors hover:bg-gold/20 hover:border-gold/50"
+        >
+          <Instagram size={18} />
+        </a>
+      </div>
+
+      <SignupModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Записаться на занятие"
+        subtitle="Оставьте контактные данные и мы свяжемся с вами"
+        endpoint="/api/group-booking"
+      />
+    </>
+  );
+}