// ZION Story — "Meet the Founder" video page.
// Levi's 2:53 founder film tells the whole story, so the page is built around it:
// a title, the film, then a CTA back into the shop. (Video sourced from
// thefireballguy.com → assets/founder-story.mp4, web-optimized with faststart.)
// Founder film: autoplays muted + looping, baked into the page with a glowing
// orange frame. Click it → "cinema mode": it enlarges to center with sound, and
// the rest of the site dims + blurs behind it. Click outside / ✕ / Esc to exit.
function FounderVideo() {
const SRC = 'assets/founder-story.mp4';
const POSTER = 'assets/founder-story-poster.jpg';
const [focused, setFocused] = React.useState(false);
const vref = React.useRef(null);
// Autoplay muted on mount (muted attr set imperatively — most reliable).
React.useEffect(() => {
const v = vref.current;
if (v) { v.muted = true; v.play().catch(() => {}); }
}, []);
const open = () => {
const v = vref.current;
// Unmute inside the click gesture so the browser allows sound.
if (v) { v.muted = false; v.loop = false; v.play().catch(() => {}); }
setFocused(true);
document.body.style.overflow = 'hidden';
};
const close = () => {
const v = vref.current;
if (v) { v.muted = true; v.loop = true; }
setFocused(false);
document.body.style.overflow = '';
};
// Esc closes; keep muted state in sync with focus.
React.useEffect(() => {
const v = vref.current;
if (v) v.muted = !focused;
if (!focused) return;
const onKey = (e) => { if (e.key === 'Escape') close(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [focused]);
return (
{/* Dim + blur backdrop over the rest of the site */}
{/* Video card — inline by default, fixed + centered + enlarged when focused */}