/* App shell + rail nav + icons. v2. */ /* global React */ const { useState, useEffect, useLayoutEffect, useCallback, useRef } = React; /* ---------- Icons (inline SVG) ---------- */ const Icon = { Arrow: (p) => ( ), Check: (p) => ( ), Suitcase: (p) => ( ), Document: (p) => ( ), Alert: (p) => ( ), Edit: (p) => ( ), Search: (p) => ( ), Question: (p) => ( ), Plane: (p) => ( ), Plug: (p) => ( ), Trend: (p) => ( ), Handshake: (p) => ( ), Chart: (p) => ( ), Star: (p) => ( ), Dashboard: (p) => ( ), Chat: (p) => ( ), External: (p) => ( ), }; window.Icon = Icon; /* ---------- useCountUp hook ---------- */ function useCountUp(target, decimals, duration, sep) { const ref = useRef(null); const [val, setVal] = useState(() => (sep === ',' ? '0,0'.padEnd(decimals + 2, '0') : '0')); useEffect(() => { let raf, start; const node = ref.current; if (!node) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { io.disconnect(); const animate = (t) => { if (!start) start = t; const p = Math.min((t - start) / duration, 1); const eased = 1 - Math.pow(1 - p, 3); const v = target * eased; const formatted = decimals > 0 ? v.toFixed(decimals).replace('.', sep) : Math.round(v).toLocaleString('en').replace(/,/g, ' '); setVal(formatted); if (p < 1) raf = requestAnimationFrame(animate); }; raf = requestAnimationFrame(animate); } }); }, { threshold: 0.3 }); io.observe(node); return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); }; }, [target, decimals, duration, sep]); return [ref, val]; } window.useCountUp = useCountUp; /* ---------- Brand mark ---------- */ function Brand({ dark, taglineEl }) { return (
FCB.ai {taglineEl &&
{taglineEl}
}
); } /* ---------- Rail ---------- */ function Rail({ current, lang, onSelect, onLang, t, dark, progress }) { const chapters = [ { id: 1, label: t.rail.chapter1 }, { id: 2, label: t.rail.chapter2 }, { id: 3, label: t.rail.chapter3 }, { id: 4, label: t.rail.chapter4 }, { id: 5, label: t.rail.chapter5 }, { id: 6, label: t.rail.chapter6 }, ]; return ( ); } function MobileRail({ current, dark, lang, onLang, t }) { return (
FCB.ai
); } window.Rail = Rail; window.MobileRail = MobileRail; /* ---------- App ---------- */ function App() { const [current, setCurrent] = useState(1); const [lang, setLang] = useState(() => { const url = new URLSearchParams(window.location.search).get('lang'); return url === 'en' ? 'en' : 'fr'; }); const [progress, setProgress] = useState(0); const canvasRef = useRef(null); const t = window.DICT[lang]; const goTo = useCallback((n) => { const next = Math.max(1, Math.min(6, n)); setCurrent(next); // Scroll reset is handled by the useLayoutEffect below — running it here // would race with React's commit on mobile (Safari's overflow scroll // settles after the new chapter mounts, undoing our scrollTop=0). }, []); // After React commits the new chapter (but before paint), reset both // the canvas scroll AND the window scroll. The window reset matters on // iOS Safari where the body can scroll independently of the .canvas. useLayoutEffect(() => { if (canvasRef.current) canvasRef.current.scrollTop = 0; window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); }, [current]); useEffect(() => { const onKey = (e) => { const tag = (e.target && e.target.tagName) || ''; if (tag === 'INPUT' || tag === 'TEXTAREA') return; if (e.key === 'ArrowRight' || e.key === 'ArrowDown') goTo(current + 1); else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') goTo(current - 1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [current, goTo]); // URL lang sync useEffect(() => { const url = new URL(window.location.href); url.searchParams.set('lang', lang); window.history.replaceState({}, '', url); }, [lang]); // Per-chapter scroll progress useEffect(() => { const node = canvasRef.current; if (!node) return; const onScroll = () => { const max = node.scrollHeight - node.clientHeight; const p = max > 0 ? node.scrollTop / max : 0; setProgress(Math.max(0, Math.min(1, p))); }; onScroll(); node.addEventListener('scroll', onScroll, { passive: true }); return () => node.removeEventListener('scroll', onScroll); }, [current]); const dark = current >= 5; const next = () => goTo(current + 1); const ChapterComp = current === 1 ? window.Chapter1 : current === 2 ? window.Chapter2 : current === 3 ? window.Chapter3 : current === 4 ? window.Chapter4 : current === 5 ? window.Chapter5 : window.Chapter6; // Mobile "Book 30 min" floating CTA — same wa.me link + Slack ping as the // desktop rail CTA, so visitors can convert on phones too. // FR routes to Olivier; EN routes to Antoine (CEO). const waMsg = lang === 'fr' ? "Bonjour Olivier, j'aimerais réserver 30 min pour discuter de FCB.ai pour mon entreprise." : "Hi Antoine, I'd like to book 30 min to discuss FCB.ai for my airline."; const waNumber = lang === 'fr' ? '33680962279' : '33781543166'; const waUrl = `https://wa.me/${waNumber}?text=${encodeURIComponent(waMsg)}`; const pingBook = () => { let email = ''; try { email = sessionStorage.getItem('fcb-airlines-email') || ''; } catch (_) {} try { fetch('/api/notify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ event: 'book-30min-click', email, page: 'fcb-airlines-v2 (mobile-fab)', referrer: document.referrer || null, userAgent: navigator.userAgent, }), keepalive: true, }).catch(() => {}); } catch (_) {} }; return (
{ChapterComp ? ( ) : (
Chapter {current} not found.
)}
{current >= 3 && ( {lang === 'fr' ? 'Réserver 30 min' : 'Book 30 min'} )}
); } window.App = App; /* ---------- Gate (homepage email capture → Slack notify → pitch) ---------- */ const GATE_COPY = { fr: { kicker: 'FCB.ai · Compagnies aériennes · 2026', h1Pre: 'L’IA conversationnelle', h1It: 'au service de l’expérience passager.', sub: 'Document confidentiel destiné aux compagnies aériennes. Entrez votre email professionnel pour accéder à la présentation.', placeholder: 'jean@compagnie.com', cta: 'Accéder à la présentation', submitting: 'Envoi…', done: 'Ouverture…', errInvalid: 'Email invalide', metaA: 'Confidentiel', metaB: '~5 min de lecture', metaC: 'Démo intégrée', }, en: { kicker: 'FCB.ai · Airlines · 2026', h1Pre: 'Conversational AI', h1It: 'for the passenger experience.', sub: 'Confidential document for airlines. Enter your work email to access the deck.', placeholder: 'jane@airline.com', cta: 'Open the deck', submitting: 'Sending…', done: 'Opening…', errInvalid: 'Invalid email', metaA: 'Confidential', metaB: '~5 min read', metaC: 'Live demos inside', }, }; function Gate({ onUnlock }) { const initialLang = (() => { const u = new URLSearchParams(window.location.search).get('lang'); return u === 'en' ? 'en' : 'fr'; })(); const [lang, setLang] = useState(initialLang); const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); // idle | submitting | done | error const [errMsg, setErrMsg] = useState(''); const copy = GATE_COPY[lang]; // Sync the gate's lang choice into the URL so the App (which reads ?lang on // mount) picks up the user's choice when the gate unlocks. useEffect(() => { try { const url = new URL(window.location.href); url.searchParams.set('lang', lang); window.history.replaceState({}, '', url); } catch (_) {} }, [lang]); const submit = async (e) => { e.preventDefault(); const v = email.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) { setErrMsg(copy.errInvalid); setStatus('error'); return; } setStatus('submitting'); setErrMsg(''); try { await fetch('/api/notify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: v, page: 'fcb-airlines-v2', referrer: document.referrer || null, userAgent: navigator.userAgent, }), }); } catch (_) { // Slack errors shouldn't block the gate UX. } try { sessionStorage.setItem('fcb-airlines-granted', '1'); } catch (_) {} try { sessionStorage.setItem('fcb-airlines-email', v); } catch (_) {} setStatus('done'); // Blur the focused input + reset scroll *before* the App mounts. // Without this, iOS Safari can keep its on-focus zoom level even after // the input is removed from the DOM — the whole deck stays zoomed in. setTimeout(() => { try { document.activeElement && document.activeElement.blur(); } catch (_) {} try { window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); } catch (_) {} onUnlock(); }, 220); }; return (
{/* Decorative flight-path arc */}
FCB.ai
{copy.kicker}

{copy.h1Pre}
{copy.h1It}

{copy.sub}

{ setEmail(e.target.value); if (status === 'error') setStatus('idle'); }} required autoFocus disabled={status === 'submitting' || status === 'done'} />
{errMsg &&
{errMsg}
}
{copy.metaA} {copy.metaB} {copy.metaC}
); } function Root() { const [granted, setGranted] = useState(() => { try { return sessionStorage.getItem('fcb-airlines-granted') === '1'; } catch (_) { return false; } }); if (!granted) return setGranted(true)} />; return ; } window.Gate = Gate; window.Root = Root;