// Philosophy. Four ideas keyed to the hero rotator: Time -> Wealth -> Scale -> Freedom.
// Scroll-driven single-active illumination: whichever card is closest to the
// viewport center is lit; the rest sit dim. Hover overrides the scroll-pick
// while the cursor is inside the grid.
const Tenet = React.forwardRef(({ n, word, body }, ref) => (
{n}
We sell you
{word}.
{body}
));
const Philosophy = () => {
const tenets = [
{
n: '01',
word: 'Time',
body:
'Time is the only non-renewable resource. We buy yours back through deterministic automation, agentic delegation, and streamlined systems. We handle the "how" so you can reclaim the "now."',
},
{
n: '02',
word: 'Wealth',
body:
'Time is leverage, and paired with strategic execution is profit. By implementing sophisticated strategies that expand your margins and compress your costs, we generate abundant value that directly benefits both you and the market you serve.',
},
{
n: '03',
word: 'Scale',
body:
'Wealth is the fuel for exponential growth. Once we have established your operational foundations and built the systems on top, capital can be poured in to generate outsized returns, ensuring your growth flows as fast as your ambition.',
},
{
n: '04',
word: 'Freedom',
body:
'The right to be unencumbered. We believe in the sovereignty of the individual; our mission is to build robust infrastructure so that your presence becomes a choice. This allows you to pursue other ventures or hone in on the vision while your enterprise fulfills on it.',
},
];
const cardsRef = React.useRef([]);
// Default accent is Time (index 0). Hover promotes a different tenet and
// that one STAYS selected after the cursor leaves — same persistent
// behavior the marquee pills and Engagement paths use.
const [activeIdx, setActiveIdx] = React.useState(0);
// Ref, not state: changing it shouldn't re-run the scroll-pick effect.
const hoverLockedRef = React.useRef(false);
// Scroll-pick only runs on mobile layouts (single-column stack). Desktop
// relies on hover persistence alone — we deliberately don't reset
// activeIdx when the media query flips, so the last-hovered tenet
// remains lit.
React.useEffect(() => {
const mq = window.matchMedia('(max-width: 900px)');
let raf = 0;
const pick = () => {
if (hoverLockedRef.current) return;
if (!mq.matches) return;
const mid = window.innerHeight / 2;
let best = 0;
let bestDist = Infinity;
cardsRef.current.forEach((el, i) => {
if (!el) return;
const r = el.getBoundingClientRect();
const c = r.top + r.height / 2;
const d = Math.abs(c - mid);
if (d < bestDist) { bestDist = d; best = i; }
});
setActiveIdx(best);
};
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(pick);
};
pick();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
mq.addEventListener?.('change', onScroll);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
mq.removeEventListener?.('change', onScroll);
};
}, []);
return (
Philosophy
Four things we sell. {' '}
In that order.
One compounds into the next. Time becomes wealth. Wealth becomes scale. Scale becomes freedom.
{ hoverLockedRef.current = true; }}
onMouseLeave={() => { hoverLockedRef.current = false; }}
style={{
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: 20,
}}
>
{/* Reveal applied to the whole grid so all four tenets blur in as
one gesture — Time/Wealth and Scale/Freedom no longer trigger
on separate scroll thresholds. The wrap itself carries the
dynamic is-active class; React re-rendering the inner
className doesn't touch the outer grid's is-revealed. */}
{tenets.map((t, i) => (