/* global React, useScrollY, useReveal, clamp */
const { useState: svcUseState, useEffect: svcUseEffect, useRef: svcUseRef } = React;
const SERVICES = [
{
num: "01",
title: "Product design",
short: "End-to-end product design — from research and strategy through to high-fidelity UI and launch-ready assets.",
long: "We design digital products from the ground up — or join an existing product where senior design thinking is needed most. Research, IA, interaction, visual design, and launch-ready handoff.",
keywords: ["Research", "IA", "Interaction", "Visual", "Prototype", "Handoff"],
},
{
num: "02",
title: "Design engineering",
short: "From Figma to production. We bridge the gap between design and implementation with precision.",
long: "Design doesn't end at the Figma handoff. We work across both sides of it — building custom components, writing interaction logic, and ensuring what ships looks like what was designed.",
keywords: ["Components", "Motion", "AI-assisted dev", "Front-end", "Fidelity"],
},
{
num: "03",
title: "Content design",
short: "Information architecture and content strategy that serves the user at every step of the experience.",
long: "Content is a structural decision before it's a writing decision. Taxonomies, labeling, navigation, notification logic — the design of information as a system.",
keywords: ["Taxonomy", "IA", "Notification logic", "Bilingual", "Help"],
},
{
num: "04",
title: "UX writing",
short: "Every word in your product is a design decision. We make them deliberately.",
long: "UX writing at Fika is practiced by designers who understand how copy fits into UI. We write for the constraint of the screen, the context of the moment, and the voice of your brand.",
keywords: ["Onboarding", "Errors", "Empty states", "Push", "Paywall"],
},
{
num: "05",
title: "Context engineering",
short: "The design layer behind AI-powered products — system prompts, model behavior, and interaction patterns that work.",
long: "As AI components become standard, the design of model behavior is as important as the design of the interface. We design system prompts, instruction sets, interaction patterns, and guardrails.",
keywords: ["System prompts", "Guardrails", "Behavior", "Evals", "AI UX"],
},
];
function Services({ servicesLayout, motion }) {
if (servicesLayout === "editorial") return ;
if (servicesLayout === "grid") return ;
if (servicesLayout === "sticky-side") return ;
if (servicesLayout === "type-ticker") return ;
if (servicesLayout === "accordion") return ;
if (servicesLayout === "horizontal") return ;
return ;
}
/* ============================================================
Default: scroll-snap one-at-a-time reveal
- Outer container is 5 * 100vh tall (one screen per service)
- Inner sticky stage is 100vh, swaps which service is active
============================================================ */
function ServicesScrollSnap({ motion }) {
const ref = svcUseRef(null);
const [active, setActive] = svcUseState(0);
const [progress, setProgress] = svcUseState(0); // within current service (0..1)
const N = SERVICES.length;
svcUseEffect(() => {
const el = ref.current;
if (!el) return;
let raf = 0;
const measure = () => {
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const totalScroll = rect.height - vh; // pinning duration
const traveled = -rect.top;
const t = clamp(traveled / totalScroll, 0, 0.9999);
const idx = Math.floor(t * N);
const within = (t * N) - idx;
setActive(Math.min(idx, N - 1));
setProgress(within);
};
const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(measure); };
measure();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
cancelAnimationFrame(raf);
};
}, []);
return (