// services.jsx - "How we move your business forward".
// Impact-led (not product-led): four problems we solve, end-to-end.
// 2×2 grid of static glass cards (>3 cards → no hover-lift, per the glass rule);
// the brand-gradient edge still comes alive on hover. Unified CTA bridge to Contact.
const SVC_MONO = 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace';
const SERVICES = [
{
n: '01',
title: "Software your team can't buy off the shelf",
body: "No off-the-shelf SaaS fits how you actually work. We build the system that does, and you own it.",
tags: ['Built around your workflow', 'Owned by you'],
},
{
n: '02',
title: 'AI that does the boring work, not the demo',
body: 'Most AI impresses in a meeting and never ships. We build the few automations that remove real hours.',
tags: ['Automate the repetitive', 'Ship in weeks, not quarters'],
},
{
n: '03',
title: 'Make your tools talk to each other',
body: 'Salesforce, QuickBooks, HubSpot, Slack: all in silos. We connect them into one operation, not fifteen.',
tags: ['Connect your stack', 'One source of truth'],
},
{
n: '04',
title: 'The old system nobody wants to touch',
body: 'Every company has the codebase that breaks if you touch it. We stabilize, document, and modernize it.',
tags: ['Stop the bleeding first', 'Modernize piece by piece'],
},
];
function SvcChip({ children }) {
return (
{children}
);
}
function ServiceCard({ item, index }) {
const [open, setOpen] = React.useState(false);
const [hover, setHover] = React.useState(false);
const shown = open || hover;
return (
setOpen((o) => !o)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
style={{ borderRadius: 20, padding: 'clamp(14px, 2vh, 22px)', display: 'flex', flexDirection: 'column', gap: 'clamp(6px, 0.9vh, 10px)' }}>
{/* top row: number + interactive affordance */}
{item.n}
{item.title}
{/* lower region: chips (default) crossfade to body (hover/open) */}
{item.tags.map((tg) => {tg})}
{item.body}
);
}
function Services() {
const goToContact = (e) => {
e.preventDefault();
const el = document.getElementById('contact');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
return (