/* ============================================================
FounderNarrative — office photo zooms in as you scroll into
it, peaks near full-bleed, zooms back out as you leave.
============================================================ */
const FOUNDER_PARAGRAPHS = [
"Not just food labels, but also skincare, clothing, furniture — anything that comes into direct contact with the human body, I always check the components first. We cook most meals at home, from scratch. Some of the veggies, home grown from our allotment. We never cook alone. Home cooking is not a chore but a way of spending time together. Our daughter is 12. Every moment with her is precious before she flies away from the nest of mum & dad.",
"Born and bred in a food manufacturer, reading labels comes naturally to me. These days, food packaging is cunningly designed. When you see an “organic” logo or a nutrition claim, it leads you to believe the product is healthy. The reality is that even organic and “nutritious” foods can contain ultra-processed ingredients (UPFs) and additives.",
"There are over 1,000 additives approved by EU food authorities and thousands more worldwide — legal but harmful to us. Additives are sneaky — they can alter colours, create addictive flavours, and extend shelf life indefinitely. If you're not in the food industry — whether you're an engineer, an accountant, or even a doctor — reading food labels can be daunting.",
"For this reason, Emma Basic was born.",
'Emma Basic promises "Never Any Additives." We\'ve removed additives from all our products, so you don\'t have to spend 10,000 hours decoding unpronounceable ingredients. By choosing Emma Basic, you protect yourself and your family from the thousands of additives widely used in today\'s food industry.',
];
const PREVIEW_COUNT = 2;
function useScrollBell(ref) {
const [t, setT] = React.useState(0);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
let rafId = null;
function update() {
if (rafId) return;
rafId = requestAnimationFrame(() => {
rafId = null;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const elH = rect.height;
const entered = vh - rect.top;
const total = vh + elH;
const raw = entered / total;
const bell = Math.max(0, Math.min(1, 1 - Math.abs(raw - 0.5) * 2));
setT(bell);
});
}
window.addEventListener("scroll", update, { passive: true });
update();
return () => { window.removeEventListener("scroll", update); if (rafId) cancelAnimationFrame(rafId); };
}, []);
return t;
}
function FounderNarrative({ hideReadMore = false }) {
const sectionRef = React.useRef(null);
const t = useScrollBell(sectionRef);
const [revealRef, visible] = useReveal(0);
const [textRevealRef, textVisible] = useReveal(0.05);
const [expanded, setExpanded] = React.useState(false);
// t goes 0→1→0 as section scrolls through viewport
// container padding shrinks to near-zero at peak (full bleed)
// On mobile, skip the zoom effect and show full-width with minimal padding
const isMobile = typeof window !== "undefined" && window.innerWidth <= 600;
const sidePad = isMobile ? "0px" : `calc(3cm + (8vw - 3cm) * ${Math.max(0, 1 - t * 1.4).toFixed(3)})`;
const imgScale = isMobile ? 1 : 1 + t * 0.14;
const imgAspect = isMobile ? "3/4" : "auto";
const visibleParas = hideReadMore || expanded
? FOUNDER_PARAGRAPHS
: FOUNDER_PARAGRAPHS.slice(0, PREVIEW_COUNT);
return (
<>
{/* ── Office photo — zooms to full-bleed on scroll ── */}
{/* Image with gentle scale */}
{/* ── Founder prose ── */}
I am a mum, who has learned to read food labels over the years.
