/* Homepage Platform showcase — a fixed, staggered cluster of compact design cards on the
left (subtle mouse parallax), with copy on the right that reveals as you scroll. */
const psReduce = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function PChip({ icon, title, sub, metric, tone }) {
const bg = tone ? tone.bg : 'var(--accent-subtle)';
const fg = tone ? tone.fg : 'var(--blue-600)';
return (
{title}{sub}
{metric && {metric.text}}
);
}
function PlatformShowcase() {
const vw = useVW();
const isMobile = vw <= 820;
const items = [
{ num: '01', eyebrow: 'One-click stems', title: 'Confirm a stem in one click.', desc: 'Full nomination, barge, and surveyor booked together — no email chains, no spreadsheets, no missed steps.', bullets: ['Nomination, barge & surveyor in one flow', 'Reuse vessel and supplier presets', 'Track every stem through to delivery'], w: 300, off: 0, Card: () => },
{ num: '02', eyebrow: 'Fix instantly', title: 'Lock your price the moment it’s right.', desc: 'Hold a price while you decide, then confirm — barge, surveyor, and all — in a single flow.', bullets: ['Lock a price', 'Full nomination and barge details', 'Surveyor booked in-flow'], w: 324, off: 52, Card: () => },
{ num: '03', eyebrow: 'Pay later', title: 'Settle on your schedule.', desc: 'Draw on a revolving credit line in any port — and settle on Net 30 or Net 60.', bullets: ['Net 30 / 60 / 90 approved', 'Limit per vessel', 'One consolidated invoice per period'], w: 300, off: 16, Card: () => },
{ num: '04', eyebrow: 'Spend analytics', title: 'See every dollar, clearly.', desc: 'Break spend down by vessel, grade, and port, follow the trend month to month, and export in one click.', bullets: ['Spend by vessel, grade, and port', 'Month-to-date and trend views', 'Export to your TMS or accounting'], w: 322, off: 56, Card: () => },
{ num: '05', eyebrow: 'Worldwide coverage', title: 'Anywhere your fleet sails.', desc: 'We sell and deliver across 100+ ports on six continents — with market pricing local to each region.', bullets: ['100+ ports, six continents', 'Local delivery in every region', 'Live regional pricing'], w: 296, off: 24, Card: () => },
{ num: '06', eyebrow: '24/7 support', title: 'Real people, around the clock.', desc: 'A dedicated bunker desk on call 24/7, in every timezone, whenever a stem needs attention.', bullets: ['Dedicated bunker desk', 'Average reply under 5 minutes', 'Claims handled in-platform'], w: 314, off: 48, Card: () => },
];
const [active, setActive] = React.useState(0);
const textRefs = React.useRef([]);
const cardRefs = React.useRef([]);
const Heading = (
Platform
The whole stem, one platform
From sourcing the right fuel to settling on flexible terms — and the monitoring to keep every vessel moving.
);
React.useEffect(() => {
let raf = 0;
const update = () => {
raf = 0;
const vh = window.innerHeight || 800;
let best = 0, bestD = Infinity;
textRefs.current.forEach((el, i) => {
if (!el) return;
const r = el.getBoundingClientRect();
const c = r.top + r.height / 2;
const d = Math.abs(c - vh / 2);
if (d < bestD) { bestD = d; best = i; }
});
setActive((prev) => (prev === best ? prev : best));
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
React.useEffect(() => {
if (psReduce) return;
const sec = document.getElementById('platform');
if (!sec) return;
let raf = 0, tx = 0, ty = 0;
const apply = () => {
raf = 0;
cardRefs.current.forEach((el, i) => { if (el) { const d = 7 + i * 2; el.style.transform = `translate(${(tx * d).toFixed(1)}px, ${(ty * d).toFixed(1)}px)`; } });
};
const onMove = (e) => { const r = sec.getBoundingClientRect(); tx = (e.clientX - r.left) / r.width - 0.5; ty = (e.clientY - r.top) / r.height - 0.5; if (!raf) raf = requestAnimationFrame(apply); };
const onLeave = () => { cardRefs.current.forEach((el) => { if (el) el.style.transform = 'translate(0,0)'; }); };
sec.addEventListener('mousemove', onMove);
sec.addEventListener('mouseleave', onLeave);
return () => { sec.removeEventListener('mousemove', onMove); sec.removeEventListener('mouseleave', onLeave); if (raf) cancelAnimationFrame(raf); };
}, []);
if (isMobile) {
return (
{Heading}
{items.map((it) => (
{it.num}{it.eyebrow}
{it.title}
{it.Card()}
{it.desc}
{it.bullets.map((b) => (
{b}
))}
))}
);
}
return (
Platform
The whole stem, one platform
From sourcing the right fuel to settling on flexible terms — and the monitoring to keep every vessel moving.
{/* LEFT — fixed staggered cluster of compact designs (mouse parallax) */}