From a4dc8173fc088221b3fda03e814b654f14c9b063 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 20:22:12 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20global=20booking=20button=20=E2=80=94?=
 =?UTF-8?q?=20header=20nav,=20mobile=20menu,=20floating=20CTA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/layout/Header.tsx | 38 ++++++++++++++++++++++++++++++++
 src/components/sections/Hero.tsx |  7 +-----
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index b03eebc..adac84d 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -5,11 +5,13 @@ import { Menu, X } from "lucide-react";
 import { useState, useEffect } from "react";
 import { BRAND, NAV_LINKS } from "@/lib/constants";
 import { HeroLogo } from "@/components/ui/HeroLogo";
+import { BookingModal } from "@/components/ui/BookingModal";
 
 export function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [activeSection, setActiveSection] = useState("");
+  const [bookingOpen, setBookingOpen] = useState(false);
 
   useEffect(() => {
     function handleScroll() {
@@ -19,6 +21,15 @@ export function Header() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  // Listen for booking open events from other components
+  useEffect(() => {
+    function onOpenBooking() {
+      setBookingOpen(true);
+    }
+    window.addEventListener("open-booking", onOpenBooking);
+    return () => window.removeEventListener("open-booking", onOpenBooking);
+  }, []);
+
   useEffect(() => {
     const sectionIds = NAV_LINKS.map((l) => l.href.replace("#", ""));
     const observers: IntersectionObserver[] = [];
@@ -99,6 +110,12 @@ export function Header() {
               </a>
             );
           })}
+          <button
+            onClick={() => setBookingOpen(true)}
+            className="rounded-full bg-[#c9a96e] px-4 py-1.5 text-sm font-semibold text-black transition-all hover:bg-[#d4b87a] hover:shadow-lg hover:shadow-[#c9a96e]/20 cursor-pointer"
+          >
+            Записаться
+          </button>
         </nav>
 
         <div className="flex items-center gap-2 md:hidden">
@@ -136,8 +153,29 @@ export function Header() {
               </a>
             );
           })}
+          <button
+            onClick={() => {
+              setMenuOpen(false);
+              setBookingOpen(true);
+            }}
+            className="mt-2 w-full rounded-full bg-[#c9a96e] py-3 text-sm font-semibold text-black transition-all hover:bg-[#d4b87a] cursor-pointer"
+          >
+            Записаться
+          </button>
         </nav>
       </div>
+
+      {/* Floating booking button — visible on scroll, mobile */}
+      <button
+        onClick={() => setBookingOpen(true)}
+        className={`fixed bottom-6 right-6 z-40 flex items-center gap-2 rounded-full bg-[#c9a96e] px-5 py-3 text-sm font-semibold text-black shadow-lg shadow-[#c9a96e]/25 transition-all duration-500 hover:bg-[#d4b87a] hover:shadow-xl hover:shadow-[#c9a96e]/30 cursor-pointer md:hidden ${
+          scrolled ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0 pointer-events-none"
+        }`}
+      >
+        Записаться
+      </button>
+
+      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
     </header>
   );
 }
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index 9cc286c..6e2d832 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -1,16 +1,13 @@
 "use client";
 
-import { useState } from "react";
 import { siteContent } from "@/data/content";
 import { Button } from "@/components/ui/Button";
 import { FloatingHearts } from "@/components/ui/FloatingHearts";
 import { HeroLogo } from "@/components/ui/HeroLogo";
-import { BookingModal } from "@/components/ui/BookingModal";
 import { ChevronDown } from "lucide-react";
 
 export function Hero() {
   const { hero } = siteContent;
-  const [bookingOpen, setBookingOpen] = useState(false);
 
   return (
     <section className="relative flex min-h-svh items-center justify-center overflow-hidden bg-[#050505]">
@@ -66,12 +63,10 @@ export function Hero() {
         </p>
 
         <div className="hero-cta mt-12">
-          <Button size="lg" onClick={() => setBookingOpen(true)}>
+          <Button size="lg" onClick={() => window.dispatchEvent(new Event("open-booking"))}>
             {hero.ctaText}
           </Button>
         </div>
-
-        <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
       </div>
 
       {/* Scroll indicator */}