// Letter.jsx — "A Letter From One Owner To Another"
//
// The emotional center of the Qubikos story. Not a product section, not a
// testimonial, not a pitch. The rest of the site explains what Qubikos
// does; this one exists to make the reader feel why it had to exist.
//
// Public brand line born here: "Whatever comes up. We handle it."
// (See .github/BRAND.md for the full internal note — including the internal-only
// creative archetype this section was directed against. That reference
// never appears here or anywhere public.)
//
// The letter used to occupy ~150vh of the page and reveal line-by-line as you
// scrolled past it. It now lives behind a button and opens in a dialog, so the
// page keeps the narrative beat without the height. Two consequences of that
// move are baked in below: spacing is in px rather than vh (viewport-relative
// gaps make no sense inside a fixed-height box), and lines render at once
// instead of on an IntersectionObserver — there is no page scroll to observe.
// A future voiceover pass would need its own fixed-timeline variant.
const { useState: _lUseS, useEffect: _lUseE, useRef: _lUseR } = React;
function reducedMotionPreferred() {
return typeof window !== 'undefined' && window.matchMedia &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}
function LetterLine({
children, size = 21, weight = 400, color = 'rgba(245,242,237,0.82)',
align = 'left', maxWidth = '100%', margin = '0 0 22px',
mono = false, tracked = false,
}) {
return (
{children}
);
}
const PAIN_LINES = [
'A coach didn’t show up.',
'A parent didn’t pay.',
'Someone needed to change classes.',
'A lead called while nobody was at the front desk.',
'Attendance was wrong again.',
];
const FIXER_PAIRS = [
['The phone rings.', 'We answer.'],
['Someone wants to join.', 'We book them.'],
['A payment is due.', 'We collect it.'],
['A student walks in.', 'We know they’re there.'],
['A coach can’t make it.', 'We find coverage.'],
['Someone needs to move classes.', 'It’s handled.'],
];
// The letter itself. Pure content — no open/close concerns, no observers.
function LetterBody() {
return (
A letter from one owner to another
Dear Owner,I've run a gym for over 15 years.
And somewhere along the way, I stopped doing the work I was actually good at.
{PAIN_LINES.map((l, i) => (
{l}
))}
None of these problems were big.
There were just hundreds of them.
Every day.
And somehow, they all became my problem.
{/* the turn */}
That’s why we built Qubikos.
Not to give you another piece of software to manage.
To give your business someone who handles things.
{/* the fixer sequence */}
{FIXER_PAIRS.map(([problem, resolution]) => (
{problem}{resolution}
))}
{/* closing */}
And when you want something done —just say it.You built your business.
You shouldn’t have to carry every little thing inside it.
— From one owner to another.
Qubikos
);
}
// Dialog shell. Mirrors DemoVideoModal in Sections.jsx (Escape, backdrop click,
// scroll lock, hero-video pause) and adds focus handling, since this one is a
// long read rather than a video the reader watches and dismisses.
function LetterModal({ open, onClose }) {
const closeRef = _lUseR(null);
_lUseE(() => {
if (!open) return;
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
// the looping hero background video sits behind everything on this page —
// pause it while the dialog is open so it can't bleed through the backdrop
const bgVideos = document.querySelectorAll('.hero-video-panel video');
bgVideos.forEach((v) => v.pause());
if (closeRef.current) closeRef.current.focus();
return () => {
window.removeEventListener('keydown', onKey);
document.body.style.overflow = '';
bgVideos.forEach((v) => v.play().catch(() => {}));
};
}, [open, onClose]);
if (!open) return null;
return (
);
}
// The page band that replaces the old full-height section. Keeps the letter's
// beat in the scroll — same eyebrow, same ground — at a fraction of the height.
function LetterTrigger() {
const [open, setOpen] = _lUseS(false);
const [ref, seen] = window.useOnScreen({ threshold: 0.4 });
const [reduced] = _lUseS(reducedMotionPreferred);
const triggerRef = _lUseR(null);
const show = reduced || seen;
const close = () => {
setOpen(false);
if (triggerRef.current) triggerRef.current.focus();
};
return (
A letter from one owner to another
I've run a gym for over 15 years. And somewhere along the way, I stopped
doing the work I was actually good at.
setOpen(true)}
icon={}>
Read the letter
);
}
window.QBLetter = LetterTrigger;