);
}
// ---------------------------------------------------------------------------
// Scroll-expand — as the user scrolls, each layer expands to fill the screen,
// building from the BASE up to the apex. Each panel explains how that layer
// helps a client. The pyramid grows bottom-up alongside, active band emphasized.
// ---------------------------------------------------------------------------
const LAYER_BENEFIT = {
capture: {
headline: "First, we find every drop of data you own.",
body: "Before a single dashboard or model, we inventory every system feeding your business — including the ones leadership forgot existed. You can't build on data you can't see.",
points: ["Full inventory of every source system", "Data profiling & quality scoring", "Historical baselines established"],
proof: "Identifying how far back usable data goes shapes everything built above it."
},
infrastructure: {
headline: "One environment. One version of the truth.",
body: "We centralize and connect your sources into a single reliable environment, so every team works from the same numbers — refreshed automatically, available on demand.",
points: ["Centralized cloud environment (Snowflake / Databricks)", "Automated pipelines & orchestration", "Role-based access control"],
proof: "Sales, inventory, labor and supplier data, all unified and traceable."
},
governance: {
headline: "Data your CFO can actually trust.",
body: "We make data trusted, not just available — catalogued, traceable from source to slide, and audit-ready. When two reports disagree, you'll know exactly why.",
points: ["Data catalog with documented owners", "Source-to-dashboard lineage", "PII policy & audit-ready logs"],
proof: "Every number traceable back to the raw transaction that produced it."
},
intelligence: {
headline: "Answers without waiting on the analytics team.",
body: "Clean data becomes role-based dashboards and a shared semantic layer, so your people self-serve the decisions they need instead of filing a request and waiting a week.",
points: ["Role-based dashboards (Power BI / Tableau)", "Shared semantic layer for one set of definitions", "Self-serve analytics for every team"],
proof: "The business can answer its own questions without waiting on IT."
},
ai: {
headline: "Now the intelligence becomes predictive.",
body: "With a solid foundation, AI finally works. Forecasting, automation and models that earn their keep — monitored, retrained, and built to hand off to your team.",
points: ["Use case identification & prioritization", "Model development & deployment", "Monitoring & continuous retraining"],
proof: "Models built and trained specifially for your company's own data."
}
};
function ScrollExpandSection({ pyramidMode, onNavigate }) {
const sectionRef = useRefH(null);
const [activeIdx, setActiveIdx] = useStateH(0);
useEffectH(() => {
let last = -1;
const onScroll = () => {
const el = sectionRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const total = rect.height - window.innerHeight;
const scrolled = Math.min(Math.max(-rect.top, 0), total);
const p = total > 0 ? scrolled / total : 0;
const idx = Math.min(4, Math.floor(p * 5 + 0.0001));
if (idx !== last) {last = idx;setActiveIdx(idx);}
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
const activeLayer = LAYERS[activeIdx];
const accent = window.HELIX_RAMP[activeIdx];
// Flood the whole stage with the active layer's colour (it "expands to cover the section").
const floodDark = activeIdx <= 2; // dark colours -> light text
const flood = `linear-gradient(155deg, ${accent} 0%, ${window.mixHex(accent, "#000000", floodDark ? 0.28 : 0.12)} 100%)`;
const b = LAYER_BENEFIT[activeLayer.id];
return (