/* What BODE Does — v2's 3-column grid restored.
Vizs render on a "screen" panel (always dark) inside each card,
so the rich visualisations read in either light or dark mode. */
function VizIntegration() {
return (
);
}
function VizInstant() {
const [t, setT] = React.useState('');
const [showAnswer, setShowAnswer] = React.useState(false);
const target = "What is occupancy by region?";
React.useEffect(() => {
let i = 0; let cancelled = false;
function step() {
if (cancelled) return;
i = (i + 1) % (target.length + 30);
setT(target.slice(0, Math.min(i, target.length)));
setShowAnswer(i > target.length + 4);
setTimeout(step, 70);
}
step();
return () => { cancelled = true; };
}, []);
return (
);
}
const CAPS = [
{ num: "01", title: "Cross-System Integration", body: "Every operational and commercial platform you already run, threaded into a single unified intelligence layer. No more siloed reporting or manual reconciliation.", Viz: VizIntegration },
{ num: "02", title: "Instant Insight on Demand", body: "Ask any question about your business and receive integrated answers in seconds, drawn from all your data sources simultaneously. What once took weeks of manual work, delivered instantly.", Viz: VizInstant },
{ num: "03", title: "Operational to Strategic", body: "Turn day-to-day operational data into forward-looking strategic intelligence. Spot patterns others miss, connect dots across your portfolio, and drive commercial outcomes with clarity.", Viz: VizStrategic },
{ num: "04", title: "Built for Every Role", body: "From the operator on the ground to the investor in the boardroom, BODE brings the voice of the user and the voice of the investor into one coherent platform, accessible to all.", Viz: VizRoles },
{ num: "05", title: "No Rip-and-Replace", body: "No migration, no re-platforming, no months-long rollout. Protect your current technology investments while gaining the intelligence layer your portfolio has always needed.", Viz: VizNoRip },
{ num: "06", title: "Sector-Native Intelligence", body: "Purpose-built for real estate: PBSA, BTR, retail, hospitality, utilities, financial services. BODE understands the language, data structures, and decisions that matter to your business.", Viz: VizSector },
];
function WhatBodeDoes() {
const gridRef = React.useRef(null);
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const grid = gridRef.current;
if (!grid) return;
const cards = Array.from(grid.querySelectorAll('.cap'));
if (!cards.length) return;
// Pre-state: cards start lower, faded, slightly scaled down.
gsap.set(cards, { opacity: 0, y: 36, scale: 0.985 });
cards.forEach((card) => {
gsap.set(card.querySelectorAll('.br'), { opacity: 0, scale: 0.4, transformOrigin: 'center center' });
gsap.set(card.querySelector('.cap__num'), { opacity: 0, y: 8 });
gsap.set(card.querySelector('.cap__viz'), { opacity: 0, y: 14, scale: 0.97 });
gsap.set(card.querySelector('.cap__title'), { opacity: 0, y: 12 });
gsap.set(card.querySelector('.cap__body'), { opacity: 0, y: 10 });
});
// ScrollTrigger.batch staggers cards as they enter — row-by-row feels
// natural in a 3-col grid because the rows cross the trigger threshold
// at slightly different scroll positions.
const triggers = ScrollTrigger.batch(cards, {
start: 'top 88%',
once: true,
onEnter: (batch) => {
batch.forEach((card, i) => {
const tl = gsap.timeline({ delay: i * 0.09 });
tl.to(card, { opacity: 1, y: 0, scale: 1, duration: 0.75, ease: 'expo.out' }, 0)
.to(card.querySelectorAll('.br'), { opacity: 0.45, scale: 1, duration: 0.45, stagger: 0.04, ease: 'back.out(2)' }, 0.1)
.to(card.querySelector('.cap__num'), { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' }, 0.18)
.to(card.querySelector('.cap__viz'), { opacity: 1, y: 0, scale: 1, duration: 0.6, ease: 'expo.out' }, 0.28)
.to(card.querySelector('.cap__title'), { opacity: 1, y: 0, duration: 0.5, ease: 'expo.out' }, 0.42)
.to(card.querySelector('.cap__body'), { opacity: 1, y: 0, duration: 0.5, ease: 'expo.out' }, 0.5);
});
},
});
return () => triggers.forEach((t) => t.kill());
}, []);
return (
03WHAT BODE DOES
The only intelligence layer
BODE is the integration layer your stack has been waiting for. Sitting above the tools you already run, turning what they each see into one picture, accessible to every person in your organisation.