/* global React */ const { useState: useStateAI, useEffect: useEffectAI, useRef: useRefAI, useMemo: useMemoAI } = React; /* ----------------------------------------------------------------- */ /* ASPACE AI — Creative Concierge */ /* */ /* Design intent: */ /* - A spatial design object, not a chat widget */ /* - Single-screen layout, never scrolls internally */ /* - Header / breathing void / cinematic input */ /* - Editorial typography over chat bubbles */ /* - Ambient electric-blue atmosphere with restraint */ /* ----------------------------------------------------------------- */ const SUGGESTIONS = [ { k: 'find', label: 'Find a private studio', hint: 'Match a room to your work.' }, { k: 'viewing', label: 'Book a viewing', hint: '30-min in-person tour.' }, { k: 'shoot', label: 'Plan a shoot', hint: 'Photo, video, LED wall.' }, { k: 'explore', label: 'Explore ASPACE', hint: 'Take the long way through.' }, ]; const AI_REPLIES = { find: { text: "Tell me what you're making — light-driven photography, video with an LED wall, fashion, or workshop work — and I'll match a room to your workflow.", rec: { id: '03', title: 'Atelier 03', label: 'PRIVATE · 18M²' }, }, viewing: { text: "I can hold a 30-minute viewing for you. Wednesday the 13th at 10:00 is open. Want me to pencil it in?", rec: { id: '01', title: 'North Light', label: 'PRIVATE · 16M²' }, }, shoot: { text: "For a shoot we have natural light, an LED wall room and a treated voice room. Tell me the format and I'll suggest the right one.", rec: { id: '02', title: 'Motion Lab', label: 'CREATIVE · 22M²' }, }, explore: { text: "ASPACE is six private studios, a production room and a long communal table — five minutes from Centraal, in the middle of where things actually get made.", rec: { id: '06', title: 'The Living Room', label: 'LOUNGE · COMMUNAL' }, }, }; /* ----------------------------------------------------------------- */ /* TRIGGER — boutique-hotel concierge launcher */ /* */ /* Reference language: members club door · suite intercom · Apple */ /* retail genius bar invitation. Smoked graphite glass, monochrome */ /* spatial orb with a single electric-blue centre, no pulse. */ /* Mobile collapses to a compact orb-only chip. */ /* ----------------------------------------------------------------- */ function AITrigger({ onOpen, blue, hidden }) { const t = (window.useT && window.useT()) || ((k) => k); const [hover, setHover] = useStateAI(false); const [compact, setCompact] = useStateAI(typeof window !== 'undefined' ? window.innerWidth < 560 : false); useEffectAI(() => { const onR = () => setCompact(window.innerWidth < 560); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); return ( ); } /* ----------------------------------------------------------------- */ /* PRESENCE ORB — alive breathing AI signature next to the title */ /* ----------------------------------------------------------------- */ function PresenceOrb({ blue, hovered }) { const [t, setT] = useStateAI(0); useEffectAI(() => { let raf, t0 = performance.now(); const tick = (n) => { setT((n - t0) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const breath = (Math.sin(t * 1.6) + 1) * 0.5; const orbit = (t * 30) % 360; const halo = hovered ? 1 : 0; return ( {/* outer halo */} {/* core ring rotation */} {/* inner ring counter-rotation */} {/* breathing core */} ); } /* ----------------------------------------------------------------- */ /* PANEL — the cinematic spatial interface */ /* ----------------------------------------------------------------- */ function AIPanel({ open, onClose, blue }) { const tx = (window.useT && window.useT()) || ((k) => k); const suggestions = tx('ai.suggestions') || []; const replies = tx('ai.replies') || {}; // Only the most recent exchange lives on screen — no scroll, ever. const [exchange, setExchange] = useStateAI(null); // { user, ai, rec } | null const [input, setInput] = useStateAI(''); const [thinking, setThinking] = useStateAI(false); const [closeHover, setCloseHover] = useStateAI(false); const [orbHover, setOrbHover] = useStateAI(false); const [focused, setFocused] = useStateAI(false); const [pillHoverIdx, setPillHoverIdx] = useStateAI(-1); const [magnets, setMagnets] = useStateAI({}); const [clock, setClock] = useStateAI(0); const inputRef = useRefAI(null); // Ambient time (for atmosphere drift + send button core) useEffectAI(() => { let raf, t0 = performance.now(); const tick = (n) => { setClock((n - t0) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Esc, body lock, focus input on open. Reset state on close. useEffectAI(() => { if (!open) { const t = setTimeout(() => { setExchange(null); setInput(''); setThinking(false); }, 520); return () => clearTimeout(t); } 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(); const focus = setTimeout(() => inputRef.current?.focus(), 600); 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(); clearTimeout(focus); }; }, [open, onClose]); const respond = (key, label) => { const fb = AI_REPLIES[key] || AI_REPLIES.find; const r = replies[key] || replies.find || {}; const text = r.text || fb.text; const recTitle = r.recTitle || (fb.rec && fb.rec.title); const recLabel = r.recLabel || (fb.rec && fb.rec.label); setExchange({ user: label, ai: null, rec: null }); setThinking(true); setTimeout(() => { setThinking(false); setExchange({ user: label, ai: text, rec: { title: recTitle, label: recLabel } }); }, 900); }; const sendInput = () => { if (!input.trim()) return; const guess = Object.keys(AI_REPLIES).find(k => input.toLowerCase().includes(k.slice(0, 4))) || 'find'; respond(guess, input.trim()); setInput(''); }; const reset = () => { setExchange(null); setInput(''); inputRef.current?.focus(); }; // Magnetic pill hover handler const onPillMove = (i, e) => { const el = e.currentTarget; const r = el.getBoundingClientRect(); const dx = (e.clientX - (r.left + r.width / 2)) * 0.10; const dy = (e.clientY - (r.top + r.height / 2)) * 0.10; setMagnets(prev => ({ ...prev, [i]: { x: dx, y: dy } })); }; const onPillLeave = (i) => { setMagnets(prev => ({ ...prev, [i]: { x: 0, y: 0 } })); setPillHoverIdx(idx => idx === i ? -1 : idx); }; // Slow ambient atmosphere drift const ambientX = 50 + Math.sin(clock * 0.18) * 6; const ambientY = 38 + Math.cos(clock * 0.22) * 4; const ambientPulse = 0.5 + (Math.sin(clock * 0.9) + 1) * 0.25; // Send button live core const sendBreath = (Math.sin(clock * 2.4) + 1) * 0.5; const sendOrbit = (clock * 90) % 360; return ( {/* Backdrop — strong scrim so the panel reads as a separate layer */}

{/* Stage — the design object itself */}

{/* ----- ATMOSPHERE LAYER (light pools + grain) ----- */}

{/* fine grain (does NOT block fixed positioning since it's inside the panel) */}

\")", }}/> {/* faint storyline line entering from top-right */} {/* ----- CONTENT LAYER ----- */}

{/* ===== HEADER ===== */}

setOrbHover(true)} onMouseLeave={() => setOrbHover(false)} style={{ display: 'flex', alignItems: 'center', gap: 'clamp(14px, 1.6vw, 22px)' }} >

{tx('ai.panelEyebrow')} {tx('ai.panelHeading')}

{/* ===== BODY (suggestions OR exchange) ===== */}

{/* Initial state: floating editorial suggestions */}

{suggestions.map((s, i) => { const m = magnets[i] || { x: 0, y: 0 }; const active = pillHoverIdx === i; return ( ); })}

{/* Active exchange: editorial layout */}

{exchange && (

{tx('ai.exchange.you')} {exchange.user}

{tx('ai.exchange.concierge')} {thinking ? (

) : (

{exchange.ai}

)}

{exchange.rec && !thinking && ( {tx('ai.exchange.recPrefix')}{exchange.rec.label} {exchange.rec.title} )} )}

{/* ===== INPUT — cinematic capsule + energy send ===== */}

{/* ----- styles ----- */} ); } function ASpaceAI({ blue }) { const [open, setOpen] = useStateAI(false); // Allow other components to open the panel via custom event useEffectAI(() => { const onOpen = () => setOpen(true); window.addEventListener('aspace:openAI', onOpen); return () => window.removeEventListener('aspace:openAI', onOpen); }, []); return ( ); } window.ASpaceAI = ASpaceAI;