/* ============================================================
sections.jsx — Services (stacking cards), Featured case (HVAC)
============================================================ */
const { useEffect: useEffectSE, useRef: useRefSE, useState: useStateSE } = React;
/* ---------------------------------------------------------------
Services — stacking sticky cards. Each card pins, the next
slides up over it. Built so depth and scale read naturally.
--------------------------------------------------------------- */
const SERVICES_DATA = [
{
label: "01 — Custom AI automations",
h: <>AI automations that do the work for you.,
p: "No matter how complex the task — agents that plan, decompose, and execute end-to-end. Built to your operation, with a custom interface to control them.",
bullets: [
"Plan → execute → deliver, with logs you can read",
"Wired into the tools your team already uses",
"A custom panel so you stay in the driver's seat",
],
Scene: () => ,
},
{
label: "02 — Beautifully designed sites",
h: <>Custom sites that look like the brand they sell.,
p: "Landing pages, e-commerce, photo portfolios, full product sites. Each one custom — designed to its own voice, not poured into a template.",
bullets: [
"Designed from a blank page, not a theme",
"Fast, responsive, accessible by default",
"Editable content blocks for your team",
],
Scene: () => ,
},
{
label: "03 — Get discovered",
h: <>Show up where buyers are looking.,
p: "Search, AI overviews, Meta ads, social mentions. A discovery engine that gets your brand cited, recommended, and clicked.",
bullets: [
"SEO + AEO so models cite you, not competitors",
"Meta ad systems with creative that actually converts",
"Earned mentions and review momentum",
],
Scene: () => ,
},
];
function Services() {
const cardsRef = useRefSE([]);
const [shrinkSet, setShrinkSet] = useStateSE(new Set());
useEffectSE(() => {
const onScroll = () => {
const next = new Set();
cardsRef.current.forEach((el, i) => {
if (!el) return;
const r = el.getBoundingClientRect();
// when next card has scrolled meaningfully over us, mark shrink
const nextEl = cardsRef.current[i + 1];
if (nextEl) {
const nr = nextEl.getBoundingClientRect();
const stickyTop = r.top; // current pinned position
// when next card top is within ~70% of viewport above current card
if (nr.top < window.innerHeight * 0.55) {
next.add(i);
}
}
});
setShrinkSet(next);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
/* ---------------------------------------------------------------
Featured case — HVAC reporting software, accurate-feeling
--------------------------------------------------------------- */
function HVACPreview() {
// The accurate-feeling reporting dashboard.
// Generic name (not Elevate). Uses real-looking numbers from the screenshot.
return (