/* global React */ const { useState: useStateSearch, useEffect: useEffectSearch, useRef: useRefSearch } = React; /* ============================================================= ASPACE — Immersive Search - Cinematic centered reveal (no dropdown, no standard modal) - Spring-eased capsule that emerges into focus - Editorial result cards with thumbnail + category - Ambient: backdrop blur, storyline pulse, particles ============================================================= */ const SEARCH_INDEX = [ // STUDIOS { kind: 'Studio', title: 'North Light Studio', meta: 'Daylight · 84 m² · Private', thumb: 'northLight', tag: 'studios' }, { kind: 'Studio', title: 'Black Box', meta: 'Cyclorama · 62 m² · Production', thumb: 'blackBox', tag: 'studios' }, { kind: 'Studio', title: 'Atelier 04', meta: 'Studio space · 48 m² · Maker', thumb: 'atelier', tag: 'studios' }, { kind: 'Studio', title: 'The Loft', meta: 'Mezzanine · 110 m² · Flex', thumb: 'loft', tag: 'studios' }, { kind: 'Studio', title: 'Greenroom', meta: 'Stage room · 70 m² · Hybrid', thumb: 'greenroom', tag: 'studios' }, { kind: 'Studio', title: 'Concrete Hall', meta: 'Industrial · 240 m² · Event', thumb: 'concrete', tag: 'studios' }, // PRODUCTIONS { kind: 'Production', title: 'Photography day rate', meta: 'Half / full day · Crew + lights',thumb: 'photo', tag: 'productions' }, { kind: 'Production', title: 'Video shoot package', meta: 'Up to 6 hr · Cyc + grip', thumb: 'video', tag: 'productions' }, { kind: 'Production', title: 'Cyclorama booking', meta: 'Black or white · Lighting', thumb: 'cyc', tag: 'productions' }, // JOURNAL { kind: 'Journal', title: 'Inside ASPACE — May notes', meta: 'Long read · 8 min', thumb: 'journal', tag: 'journal' }, { kind: 'Journal', title: 'A studio you can actually live in', meta: 'Field essay · 12 min', thumb: 'journal2', tag: 'journal' }, // WORKSHOPS { kind: 'Workshop', title: 'Light & shadow — open class', meta: 'Thu evenings · Limited 8', thumb: 'workshop', tag: 'workshops' }, { kind: 'Workshop', title: 'Print club', meta: 'Monthly · Riso + screen', thumb: 'print', tag: 'workshops' }, // AI { kind: 'AI', title: 'Ask ASPACE AI — find a fit', meta: 'Concierge · Live', thumb: 'ai', tag: 'ai' }, { kind: 'AI', title: 'Let AI plan your shoot day', meta: 'Concierge · Live', thumb: 'ai', tag: 'ai' }, ]; const PROMPTS = [ 'a private studio with daylight…', 'a cyclorama for a video shoot…', 'something I can rent monthly…', 'space for a workshop of 8…', 'find a creative base in Amsterdam…', ]; /* ----- thumbnail SVGs ----- */ // Temporary photo placeholders — distribute the three mockups across the // search-result kinds so each card reads with a different studio mood. const THUMB_MOCKUP = { northLight: '/site/uploads/mockup1.png', blackBox: '/site/uploads/mockup2.png', atelier: '/site/uploads/mockup3.png', loft: '/site/uploads/mockup1.png', greenroom: '/site/uploads/mockup3.png', concrete: '/site/uploads/mockup2.png', photo: '/site/uploads/mockup1.png', video: '/site/uploads/mockup2.png', cyc: '/site/uploads/mockup2.png', journal: '/site/uploads/mockup1.png', journal2: '/site/uploads/mockup3.png', workshop: '/site/uploads/mockup3.png', print: '/site/uploads/mockup3.png', ai: '/site/uploads/mockup2.png', darkroom: '/site/uploads/mockup3.png', }; function mockupForThumb(kind) { return THUMB_MOCKUP[kind] || '/site/uploads/mockup2.png'; } function ThumbSVG({ kind, blue }) { const B = blue || '#00C2FF'; const ink = '#0A0A0B'; const cream = '#F4F2EC'; switch (kind) { case 'northLight': return ( ); case 'blackBox': return ( ); case 'atelier': return ( ); case 'loft': return ( ); case 'greenroom': return ( ); case 'concrete': return ( ); case 'photo': return ( ); case 'video': return ( ); case 'cyc': return ( ); case 'journal': case 'journal2': return ( ); case 'workshop': return ( ); case 'print': return ( ); case 'ai': return ( ); default: return ; } } /* ----- Search trigger — same Apple-glass system as Menu / Let's talk. Icon-only at rest, expands to reveal "SEARCH" label on hover. ----- */ function SearchTrigger({ onClick }) { const t = (window.useT && window.useT()) || ((k) => k); const [hover, setHover] = useStateSearch(false); // Shared glass tokens (mirrored from site-header-menu.jsx). const GBG = 'linear-gradient(180deg, rgba(20,22,28,0.55) 0%, rgba(10,10,11,0.42) 100%)'; const GBGH = 'linear-gradient(180deg, rgba(28,30,38,0.62) 0%, rgba(14,14,16,0.50) 100%)'; const GSH = '0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.35) inset, 0 12px 28px -16px rgba(0,0,0,0.45), 0 0 36px rgba(0,194,255,0.06)'; const GSHH = '0 1px 0 rgba(255,255,255,0.16) inset, 0 -1px 0 rgba(0,0,0,0.40) inset, 0 18px 42px -20px rgba(0,0,0,0.55), 0 0 56px rgba(0,194,255,0.10)'; return ( ); } /* ----- main overlay ----- */ function SearchOverlay({ open, onClose, blue }) { const tx = (window.useT && window.useT()) || ((k) => k); // Localized data — prompts, category labels, kind names, and the index. const PROMPTS_T = tx('search.prompts') || PROMPTS; const KINDS_T = tx('search.kinds') || {}; const INDEX_T = (tx('search.index') || []).map((row, i) => ({ ...SEARCH_INDEX[i], title: row.title, meta: row.meta, })); const SEARCH_DATA = INDEX_T.length === SEARCH_INDEX.length ? INDEX_T : SEARCH_INDEX; const kindLabel = (k) => { const map = { Studio: KINDS_T.studio, Production: KINDS_T.production, Journal: KINDS_T.journal, Workshop: KINDS_T.workshop, AI: KINDS_T.ai }; return map[k] || k; }; const [q, setQ] = useStateSearch(''); const [activePromptIdx, setActivePromptIdx] = useStateSearch(0); const [hoverIdx, setHoverIdx] = useStateSearch(-1); const inputRef = useRefSearch(null); const fieldRef = useRefSearch(null); const [mounted, setMounted] = useStateSearch(false); // Mount on open with one frame delay so transition runs useEffectSearch(() => { if (open) { setMounted(true); const t = setTimeout(() => inputRef.current?.focus(), 380); return () => clearTimeout(t); } else { const t = setTimeout(() => setMounted(false), 520); return () => clearTimeout(t); } }, [open]); // Cycle placeholders when idle and empty useEffectSearch(() => { if (!open || q) return; const t = setInterval(() => setActivePromptIdx(i => (i + 1) % PROMPTS_T.length), 2600); return () => clearInterval(t); }, [open, q]); // Esc + body lock useEffectSearch(() => { 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'; if (window.lenis && typeof window.lenis.stop === 'function') window.lenis.stop(); return () => { window.removeEventListener('keydown', onKey); // Always reset (never restore stale 'hidden' from chained overlays). document.documentElement.style.overflow = ''; document.body.style.overflow = ''; if (window.lenis && typeof window.lenis.start === 'function') window.lenis.start(); }; }, [open, onClose]); // Filter const norm = q.trim().toLowerCase(); const results = norm ? SEARCH_DATA.filter(it => (it.title + ' ' + it.kind + ' ' + it.meta).toLowerCase().includes(norm)).slice(0, 8) : SEARCH_DATA.slice(0, 8); // Group categories present const categories = tx('search.categories') || []; // Magnetic field const [fieldMagnet, setFieldMagnet] = useStateSearch({ x: 0, y: 0 }); const onFieldMove = (e) => { const el = fieldRef.current; if (!el) return; const r = el.getBoundingClientRect(); setFieldMagnet({ x: (e.clientX - (r.left + r.width/2)) * 0.018, y: (e.clientY - (r.top + r.height/2)) * 0.020, }); }; if (!mounted) return null; const bgB = blue || '#00C2FF'; return ( {/* Ambient backdrop — soft dim + blur with a centered electric halo */}