// Direction 1: "THE REEL" — Netflix-documentary cinematic // Full-bleed autoplaying hero reel; crossfading era panels; bold sans headline. function useIsMobile() { const [m, setM] = React.useState(false); React.useEffect(() => { const q = window.matchMedia('(max-width: 768px)'); const u = () => setM(q.matches); u(); q.addEventListener('change', u); return () => q.removeEventListener('change', u); }, []); return m; } function Direction1() { const isMobile = useIsMobile(); const [eraIdx, setEraIdx] = React.useState(0); const [formOpen, setFormOpen] = React.useState(false); const [soonOpen, setSoonOpen] = React.useState(false); const audioRef = React.useRef(null); const [soundOn, setSoundOn] = React.useState(true); React.useEffect(() => { const a = audioRef.current; if (!a) return; a.volume = 0.45; a.muted = false; let unlocked = false; const unlock = () => { if (unlocked) return; unlocked = true; a.muted = false; a.play().then(() => setSoundOn(true)).catch(() => {}); }; a.play().then(() => setSoundOn(true)).catch(() => { // Autoplay blocked — wait for ANY user signal a.muted = true; setSoundOn(false); const events = ['pointerdown', 'pointermove', 'keydown', 'scroll', 'touchstart', 'wheel']; const handler = () => { events.forEach(ev => window.removeEventListener(ev, handler, true)); unlock(); }; events.forEach(ev => window.addEventListener(ev, handler, { capture: true, passive: true })); }); }, []); // Pause background music when the tab/app is hidden, resume when visible (if it was on). // visibilitychange is the only event we trust — pagehide/blur/focus can fire during page load // and would interrupt the initial autoplay sequence. React.useEffect(() => { const onVisibility = () => { const a = audioRef.current; if (!a) return; if (document.hidden) { try { a.pause(); } catch (_) {} } else if (soundOn) { try { a.play().catch(() => {}); } catch (_) {} } }; document.addEventListener('visibilitychange', onVisibility); return () => document.removeEventListener('visibilitychange', onVisibility); }, [soundOn]); const toggleSound = () => { const a = audioRef.current; if (!a) return; if (a.paused || a.muted) { a.muted = false; a.volume = 0.45; a.play().catch(() => {}); setSoundOn(true); } else { a.muted = true; setSoundOn(false); } }; const WA_NUMBER = '4915775234901'; const eras = ['titanic', 'ww2', 'renaissance', 'western']; const ERA_VIDEOS = { titanic: 'https://zbvtwa21cszzjg90.public.blob.vercel-storage.com/reel/Titanic_Teaser.mp4', ww2: 'https://zbvtwa21cszzjg90.public.blob.vercel-storage.com/reel/ww2_2.mp4', renaissance: 'https://zbvtwa21cszzjg90.public.blob.vercel-storage.com/reel/monalisa.mp4', western: 'https://zbvtwa21cszzjg90.public.blob.vercel-storage.com/reel/western.mp4', }; const [durations, setDurations] = React.useState({}); const videoRefs = React.useRef({}); React.useEffect(() => { // play the active video from the start, pause others Object.entries(videoRefs.current).forEach(([key, el]) => { if (!el) return; if (key === eras[eraIdx]) { try { el.currentTime = 0; el.play().catch(() => {}); } catch (_) {} } else { try { el.pause(); } catch (_) {} } }); const dur = durations[eras[eraIdx]]; const ms = dur ? Math.max(3000, Math.round(dur * 1000)) : 15000; const t = setTimeout(() => setEraIdx((i) => (i + 1) % eras.length), ms); return () => clearTimeout(t); }, [eraIdx, durations]); const C = { bg: '#0a0807', fg: '#f4ede0', dim: 'rgba(244,237,224,0.6)', accent: '#e8a156', line: 'rgba(244,237,224,0.12)', sans: '"Geist", "Helvetica Neue", system-ui, sans-serif', serif: '"Spectral", "Times New Roman", serif', mono: '"JetBrains Mono", ui-monospace, monospace', }; return (
); } function StartProjectModal({ onClose, waNumber, C }) { const isMobile = useIsMobile(); const [name, setName] = React.useState(''); const [org, setOrg] = React.useState(''); const [contact, setContact] = React.useState(''); const [msg, setMsg] = React.useState(''); const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error const canSend = name.trim() && contact.trim() && msg.trim(); const send = async (e) => { e.preventDefault(); if (!canSend || status === 'sending') return; setStatus('sending'); try { const res = await fetch('https://formsubmit.co/ajax/work@larsreese.de', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ _subject: `Lebenswerk · neue Anfrage von ${name}`, _captcha: 'false', _template: 'table', Name: name, Organisation: org || '—', Kontakt: contact, Nachricht: msg, }), }); if (!res.ok) throw new Error('send failed'); setStatus('sent'); } catch (_) { setStatus('error'); } }; const inputStyle = { width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${C.line}`, padding: '14px 0', fontSize: 16, fontFamily: C.sans, color: C.fg, outline: 'none', fontWeight: 300 }; const labelStyle = { fontFamily: C.mono, fontSize: 10, letterSpacing: 2, color: C.dim, display: 'block' }; return (
e.stopPropagation()} onSubmit={send} style={{ width: '100%', maxWidth: 520, background: '#14110d', border: `1px solid ${C.line}`, padding: isMobile ? '36px 24px' : '48px 44px', color: C.fg, position: 'relative' }}>
LEBENSWERK LEBENDIG MACHEN

Erzählen Sie von den Erinnerungen, die Sie unvergesslich machen wollen.

Hinterlassen Sie Ihre Kontaktdaten und ein paar Zeilen. Antwort meist innerhalb eines Tages.

setName(e.target.value)} placeholder="Ihr Name" autoFocus />
setOrg(e.target.value)} placeholder="Optional" />
setContact(e.target.value)} placeholder="Wie kann ich Sie erreichen?" />