/* ============================================================ * 5. HOTEL BRAIN, architecture-accurate, card-anchored motion * ============================================================ */ const brainSources = [ { name: "Corporate website", meta: "Deep crawl · 12,400 pages", icon: "globe" }, { name: "Booking engine", meta: "Rates · rooms · packages", icon: "engine" }, { name: "PDFs · Excel · CSV", meta: "847 docs ingested", icon: "doc" }, { name: "PMS connector", meta: "Sync every 15 min", icon: "plug" }, { name: "Google Drive", meta: "284 files · auto-watch", icon: "drive" }, { name: "Image library", meta: "9,200 photos embedded", icon: "image" }, ]; const brainStores = [ { kind: "group", name: "Group Store", meta: "Brand · policies · loyalty rules" }, { kind: "property", name: "Reverence Mare", meta: "Mallorca · 142 rooms" }, { kind: "property", name: "Reverence Roca", meta: "Mallorca · 98 rooms" }, { kind: "property", name: "Reverence Petit", meta: "Ibiza · 56 rooms" }, { kind: "property", name: "Reverence Plaja", meta: "Menorca · 124 rooms" }, { kind: "property", name: "+ 96 properties", meta: "across the group" }, ]; const brainOps = [ { label: "Dedup", desc: "Same fact, two sources → one canonical entry" }, { label: "Soft-archive", desc: "Stale or contradicted content quarantined" }, { label: "Auto-update", desc: "Source changes propagate within minutes" }, { label: "Gap detection", desc: "Unanswerable questions become work items" }, ]; const brainPoints = [ { t: "One source of truth across every property.", d: "Group standards plus property-level overrides, modeled cleanly." }, { t: "Real-time, context-aware answers.", d: "The Brain knows whether the guest is browsing, booked, checked in, or post-stay, and replies accordingly." }, { t: "Handles the majority of guest interactions automatically.", d: "Repetitive questions stop reaching your team." }, { t: "A defensible data moat.", d: "The longer the Brain runs, the smarter it gets, for your hotels, not for everyone's." }, ]; /* Source icons */ const SourceIcon = ({ kind }) => { const s = "currentColor"; const w = 1.6; if (kind === "globe") return ; if (kind === "engine") return ; if (kind === "doc") return ; if (kind === "plug") return ; if (kind === "drive") return ; if (kind === "image") return ; return null; }; /* Proper brain illustration, anatomical hemispheres with neural detail */ const BrainGlyph = ({ size = 80 }) => ( {/* Left hemisphere */} {/* Right hemisphere */} {/* Cortex folds, left */} {/* Cortex folds, right */} {/* Center groove */} {/* Neural nodes pulsing */} {/* Stem */} ); const SectionBrain = () => { const [phase, setPhase] = useState(0); const sectionRef = useRef(null); const [activated, setActivated] = useState(false); // Refs for measured connections const archRef = useRef(null); const sourceRefs = useRef([]); const storeRefs = useRef([]); const kbRef = useRef(null); const [conn, setConn] = useState({ src: [], store: [], w: 0, h: 0 }); useEffect(() => { if (!sectionRef.current) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setActivated(true); }, { threshold: 0.15 }); io.observe(sectionRef.current); return () => io.disconnect(); }, []); useEffect(() => { if (!activated) return; const t1 = setTimeout(() => setPhase(1), 1400); const t2 = setTimeout(() => setPhase(2), 2800); return () => { clearTimeout(t1); clearTimeout(t2); }; }, [activated]); // Measure card positions for SVG overlay useLayoutEffect(() => { const measure = () => { const root = archRef.current; if (!root) return; const r = root.getBoundingClientRect(); const pt = (el, side) => { if (!el) return null; const b = el.getBoundingClientRect(); const x = b.left - r.left + b.width / 2; const y = side === "top" ? b.top - r.top : b.bottom - r.top; return { x, y }; }; const src = sourceRefs.current.map(el => ({ out: pt(el, "bottom"), })).filter(p => p.out); const store = storeRefs.current.map(el => ({ in: pt(el, "top"), out: pt(el, "bottom"), })).filter(p => p.in); const kbBox = kbRef.current; const kbIn = kbBox ? (() => { const b = kbBox.getBoundingClientRect(); return { x: b.left - r.left + b.width / 2, y: b.top - r.top }; })() : null; setConn({ src, store, kbIn, w: r.width, h: r.height }); }; measure(); const ro = new ResizeObserver(measure); if (archRef.current) ro.observe(archRef.current); window.addEventListener("resize", measure); const t = setTimeout(measure, 100); return () => { ro.disconnect(); window.removeEventListener("resize", measure); clearTimeout(t); }; }, [activated]); // Build curved path between two points const curve = (p1, p2) => { if (!p1 || !p2) return ""; const midY = (p1.y + p2.y) / 2; return `M ${p1.x} ${p1.y} C ${p1.x} ${midY}, ${p2.x} ${midY}, ${p2.x} ${p2.y}`; }; return (
); }; window.SectionBrain = SectionBrain;