From 0c8c45dcd933d6907ee491186b7af2fea7ccff5e Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 20:16:21 +0300
Subject: [PATCH] feat: booking modal with form + Instagram DM + phone link

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/sections/Hero.tsx   |   7 +-
 src/components/ui/BookingModal.tsx | 175 +++++++++++++++++++++++++++++
 2 files changed, 181 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/BookingModal.tsx

diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index e879f53..9cc286c 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -1,13 +1,16 @@
 "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]">
@@ -63,10 +66,12 @@ export function Hero() {
         </p>
 
         <div className="hero-cta mt-12">
-          <Button href={hero.ctaHref} size="lg">
+          <Button size="lg" onClick={() => setBookingOpen(true)}>
             {hero.ctaText}
           </Button>
         </div>
+
+        <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />
       </div>
 
       {/* Scroll indicator */}
diff --git a/src/components/ui/BookingModal.tsx b/src/components/ui/BookingModal.tsx
new file mode 100644
index 0000000..eab946e
--- /dev/null
+++ b/src/components/ui/BookingModal.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { X, Instagram, Send, CheckCircle, Phone } from "lucide-react";
+import { siteContent } from "@/data/content";
+
+interface BookingModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function BookingModal({ open, onClose }: BookingModalProps) {
+  const { contact } = siteContent;
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  // 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(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      // Build Instagram DM message with pre-filled text
+      const message = `Здравствуйте! Меня зовут ${name}, хочу записаться на занятие. Мой телефон: ${phone}`;
+      const instagramUrl = `https://ig.me/m/blackheartdancehouse?text=${encodeURIComponent(message)}`;
+      window.open(instagramUrl, "_blank");
+      setSubmitted(true);
+    },
+    [name, phone]
+  );
+
+  const handleClose = useCallback(() => {
+    onClose();
+    // Reset after animation
+    setTimeout(() => {
+      setName("");
+      setPhone("");
+      setSubmitted(false);
+    }, 300);
+  }, [onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={handleClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
+
+      {/* Modal */}
+      <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()}
+      >
+        {/* Close button */}
+        <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 ? (
+          /* Success state */
+          <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">
+              Сообщение отправлено в Instagram. Мы свяжемся с вами в ближайшее время!
+            </p>
+            <button
+              onClick={handleClose}
+              className="mt-6 rounded-full bg-[#c9a96e] px-6 py-2.5 text-sm font-semibold text-black transition-all hover:bg-[#d4b87a] cursor-pointer"
+            >
+              Закрыть
+            </button>
+          </div>
+        ) : (
+          <>
+            {/* Header */}
+            <div className="mb-6">
+              <h3 className="text-xl font-bold text-white">Записаться</h3>
+              <p className="mt-1 text-sm text-neutral-400">
+                Оставьте данные и мы свяжемся с вами, или напишите нам напрямую
+              </p>
+            </div>
+
+            {/* Form */}
+            <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-[#c9a96e]/40 focus:bg-white/[0.06]"
+                />
+              </div>
+              <div>
+                <input
+                  type="tel"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  placeholder="+375 (__) ___-__-__"
+                  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-[#c9a96e]/40 focus:bg-white/[0.06]"
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="flex w-full items-center justify-center gap-2 rounded-xl bg-[#c9a96e] py-3 text-sm font-semibold text-black transition-all hover:bg-[#d4b87a] hover:shadow-lg hover:shadow-[#c9a96e]/20 cursor-pointer"
+              >
+                <Send size={15} />
+                Отправить в Instagram
+              </button>
+            </form>
+
+            {/* Divider */}
+            <div className="my-5 flex items-center gap-3">
+              <span className="h-px flex-1 bg-white/[0.06]" />
+              <span className="text-xs text-neutral-500">или напрямую</span>
+              <span className="h-px flex-1 bg-white/[0.06]" />
+            </div>
+
+            {/* Direct links */}
+            <div className="flex gap-2">
+              <a
+                href={contact.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.03] py-3 text-sm font-medium text-neutral-300 transition-all hover:border-[#c9a96e]/30 hover:text-[#d4b87a] cursor-pointer"
+              >
+                <Instagram size={16} />
+                Instagram
+              </a>
+              <a
+                href={`tel:${contact.phone.replace(/\s/g, "")}`}
+                className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.03] py-3 text-sm font-medium text-neutral-300 transition-all hover:border-[#c9a96e]/30 hover:text-[#d4b87a] cursor-pointer"
+              >
+                <Phone size={16} />
+                Позвонить
+              </a>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}