/* global React */ const { useEffect: useEffCT, useState: useStateCT, useRef: useRefCT } = React; /* ----------------------------------------------------------------- */ /* ASPACE Contact — immersive editorial layer */ /* Single scroll surface (the panel itself), ambient atmosphere, */ /* magnetic socials, glass inquiry pills, cinematic focus states. */ /* ----------------------------------------------------------------- */ function ContactPanel({ open, onClose }) { const tx = (window.useT && window.useT()) || ((k) => k); const [step, setStep] = useStateCT(0); const [hoverSubmit, setHoverSubmit] = useStateCT(false); const [magnet, setMagnet] = useStateCT({ x: 0, y: 0 }); const submitRef = useRefCT(null); const scrollerRef = useRefCT(null); const [form, setForm] = useStateCT({ name: '', email: '', topic: (tx('contact.inquiry.topics') || ['Private studio'])[0], message: '', }); const [clock, setClock] = useStateCT(0); // Idle ambient breathing for the blue light pool useEffCT(() => { if (!open) return; let raf, t0 = performance.now(); const tick = (n) => { setClock((n - t0) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [open]); // Body lock + Esc — overlay becomes the only scroll layer useEffCT(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; // pause Lenis if present so the page underneath doesn't scroll if (window.lenis && typeof window.lenis.stop === 'function') window.lenis.stop(); if (scrollerRef.current) scrollerRef.current.scrollTop = 0; return () => { window.removeEventListener('keydown', onKey); // Always reset to empty — never restore to a stale 'hidden' value // captured while another overlay was already open (chained-modal bug). // The CSS in styles.css reapplies overflow-x: clip / overflow-y: visible. document.documentElement.style.overflow = ''; document.body.style.overflow = ''; if (window.lenis && typeof window.lenis.start === 'function') window.lenis.start(); }; }, [open, onClose]); useEffCT(() => { if (!open) { setStep(0); setMagnet({ x: 0, y: 0 }); } }, [open]); const onMagnet = (e) => { if (!submitRef.current) return; const r = submitRef.current.getBoundingClientRect(); setMagnet({ x: (e.clientX - (r.left + r.width / 2)) * 0.18, y: (e.clientY - (r.top + r.height / 2)) * 0.18, }); }; const onMagnetLeave = () => setMagnet({ x: 0, y: 0 }); const topics = tx('contact.inquiry.topics') || []; // Featured studios — directly bookable from inside the contact panel. // Each entry maps to a booking deep-link so clicking a card jumps the // user straight into the booking flow with the studio pre-selected. // Featured studios shown inside the contact panel. Each card gets a // real mockup image (the same three rotated across the rest of the // site) so the contact experience feels like a curated booking // showcase instead of a generic inquiry form. const STUDIO_META = [ { priceFrom: 65, img: '/site/uploads/mockup1.png' }, { priceFrom: 145, img: '/site/uploads/mockup2.png' }, { priceFrom: 55, img: '/site/uploads/mockup3.png' }, { priceFrom: 45, img: '/site/uploads/mockup2.png' }, ]; const STUDIOS = (tx('contact.studios.items') || []).map((s, i) => ({ ...s, ...STUDIO_META[i] })); // Quick action pills — secondary entry-points sitting between the studios // grid and the (now optional) inquiry form. const QUICK_HREFS = [ '/site/booking.html?intent=viewing', '/site/studios.html', '/site/booking.html?intent=availability', '#contact', '#contact', ]; const QUICK_ACTIONS = (tx('contact.quickActions.items') || []).map((label, i) => ({ label, href: QUICK_HREFS[i] })); // Slowly drifting ambient gradient anchor const ax = 78 + Math.sin(clock * 0.18) * 5; const ay = 18 + Math.cos(clock * 0.22) * 4; const ap = 0.55 + (Math.sin(clock * 0.7) + 1) * 0.18; return ( {/* Backdrop — strong scrim so the panel reads as a separate layer */}