// Products — pinned scrollytelling panel. Three tiers reveal as you scroll;
// a mountain trail SVG "grows" higher in altitude with each step.
function AltitudeMountain({ step, total }) {
// step 0..total. Draws 3-tier mountain; each peak lights up in sequence.
const active = [step >= 0, step >= 1, step >= 2];
return (
);
}
function ProductsSection() {
const stageRef = React.useRef(null);
const [step, setStep] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
if (!stageRef.current) return;
const r = stageRef.current.getBoundingClientRect();
const vh = window.innerHeight;
const total = r.height - vh;
const p = Math.max(0, Math.min(1, -r.top / total));
// 3 steps over the scroll
const s = Math.min(2, Math.floor(p * 3));
setStep(s);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const products = [
{
n: '01',
name: 'Landing',
price: '$0',
priceNote: 'Design',
recur: '$99',
recurNote: '/mo after launch',
tag: 'One page. Done well.',
desc: 'A single, hand-built page for a business that just needs to show up properly online. Content, design, build, deploy. We do the climb. After launch we host, monitor, patch and tune. You forget about it, on purpose.',
includes: [
'Custom design, no templates',
'One-page structure, written with you',
'Mobile-perfect, fast by default',
'Hosting, SSL, daily backups',
'Uptime + performance monitoring',
'Quarterly content refresh (we call you)',
],
color: 'var(--alpine-500)',
bg: 'rgba(245, 240, 235, 0.55)',
featured: false,
},
{
n: '02',
name: 'Business',
price: '$0',
priceNote: 'Design',
recur: '$399',
recurNote: '/mo after launch',
tag: 'Up to three pages, plus a quiet tool that works for you.',
desc: 'A multi-page site (up to three pages) with a custom quote estimator tuned to how you actually charge. Leads pass through a dashboard you can sign into: see who\'s asked, what they need, and how much you quoted, without digging through email.',
includes: [
'Up to 3 pages, custom-designed',
'Custom quote estimator, built to your pricing',
'Owner dashboard with login',
'Lead inbox, notes, and status',
'Automated reply + follow-up nudges',
'Monthly review call, in human English',
],
color: 'var(--summit)',
bg: 'rgba(14, 21, 32, 0.92)',
featured: true,
},
{
n: '03',
name: 'Custom',
price: 'Quote',
priceNote: 'Scoped together',
recur: 'Per project',
recurNote: 'Billed in stages',
tag: 'Whatever the work is, we scope it honestly.',
desc: 'A full site, a portal, a booking flow, a directory: anything that doesn\'t fit the shape of the first two. We write a short scope together, in plain English, before any invoice. No decks, no kick-off rituals. Five stages, in order, every time.',
includes: [
'Discovery + written scope',
'Identity or design system, if needed',
'Multi-page site or bespoke app',
'CMS, auth, integrations as required',
'Staged delivery, fixed by scope',
'Optional $99 / $399 monthly care plans',
],
color: 'var(--alpine-700)',
bg: 'rgba(245, 240, 235, 0.55)',
featured: false,
},
];
return (