From 47210435300e2dbfda9947fe24ac7e5f766c95eb Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Mon, 23 Mar 2026 16:38:36 +0300
Subject: [PATCH] feat: redesign floating contact as vertical icon stack,
 reposition back-to-top

- Floating contact: bottom-left expandable stack (phone, Instagram, signup modal)
- Mail icon toggle button, closes on outside click
- Back-to-top: bottom-right, same size (h-14 w-14) for visual balance

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ui/BackToTop.tsx       |  2 +-
 src/components/ui/FloatingContact.tsx | 83 +++++++++++++++++++++------
 2 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/BackToTop.tsx b/src/components/ui/BackToTop.tsx
index 9c23136..b348a58 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-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 ${
+      className={`fixed bottom-6 right-6 z-40 flex h-14 w-14 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
index 0a74c9a..d41fade 100644
--- a/src/components/ui/FloatingContact.tsx
+++ b/src/components/ui/FloatingContact.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Instagram } from "lucide-react";
+import { Phone, X, Mail, Instagram } from "lucide-react";
 import { BRAND } from "@/lib/constants";
 import { SignupModal } from "./SignupModal";
 
 export function FloatingContact() {
   const [visible, setVisible] = useState(false);
+  const [expanded, setExpanded] = 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
@@ -26,31 +26,80 @@ export function FloatingContact() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  // Close when clicking outside
+  useEffect(() => {
+    if (!expanded) return;
+    function handleClick(e: MouseEvent) {
+      const target = e.target as HTMLElement;
+      if (!target.closest("[data-floating-contact]")) {
+        setExpanded(false);
+      }
+    }
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [expanded]);
+
   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"
+        data-floating-contact
+        className={`fixed bottom-6 left-6 z-40 flex flex-col-reverse items-center gap-2 transition-all duration-400 ${
+          visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0 pointer-events-none"
         }`}
       >
+        {/* Main toggle button */}
         <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"
+          onClick={() => setExpanded((v) => !v)}
+          className={`flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ${
+            expanded
+              ? "bg-neutral-700 rotate-0"
+              : "bg-[#c9a96e] hover:bg-[#d4b87a] shadow-[#c9a96e]/30"
+          }`}
         >
-          Записаться
+          {expanded ? (
+            <X size={22} className="text-white" />
+          ) : (
+            <Mail size={22} className="text-black" />
+          )}
         </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"
+        {/* Expandable contact icons */}
+        <div
+          className={`flex flex-col items-center gap-2 transition-all duration-300 ${
+            expanded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"
+          }`}
         >
-          <Instagram size={18} />
-        </a>
+          {/* Phone */}
+          <a
+            href="tel:+375293897001"
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#2ecc71] shadow-lg shadow-[#2ecc71]/20 transition-transform hover:scale-110"
+            aria-label="Позвонить"
+          >
+            <Phone size={20} className="text-white" />
+          </a>
+
+          {/* Instagram */}
+          <a
+            href={BRAND.instagram}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] shadow-lg shadow-[#e6683c]/20 transition-transform hover:scale-110"
+            aria-label="Instagram"
+          >
+            <Instagram size={20} className="text-white" />
+          </a>
+
+          {/* Записаться */}
+          <button
+            onClick={() => { setModalOpen(true); setExpanded(false); }}
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#c9a96e] shadow-lg shadow-[#c9a96e]/20 transition-transform hover:scale-110"
+            aria-label="Записаться"
+          >
+            <span className="text-xs font-bold text-black leading-tight text-center">
+              ✍
+            </span>
+          </button>
+        </div>
       </div>
 
       <SignupModal