// landing-app.jsx — mounts the design's with:
// • password gate (LANDING_PASSWORD env var, checked via /api/landing-login)
// • SK / CZ / EN language switcher (persisted in localStorage)
// • waitlist modal triggered by any CTA / nav / download button
//
// We don't modify the design components — we wrap them.
const { useEffect, useState, useCallback, useRef } = React;
// Accessible-dialog focus trap (a11y finding A03): when active, move focus into
// the dialog, cycle Tab/Shift+Tab within it, and restore focus to the trigger on
// close. Escape is left to each modal's existing handler (no double-close).
// Returns a ref to attach to the dialog container.
function useFocusTrap(active) {
const ref = useRef(null);
useEffect(() => {
if (!active) return;
const prev = (typeof document !== 'undefined') ? document.activeElement : null;
const node = ref.current;
const focusables = () => node ? Array.prototype.slice.call(
node.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')
).filter((el) => el.offsetParent !== null) : [];
const f0 = focusables();
if (f0[0]) { try { f0[0].focus(); } catch {} }
const onKey = (e) => {
if (e.key !== 'Tab') return;
const f = focusables(); if (!f.length) return;
const first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
};
document.addEventListener('keydown', onKey, true);
return () => {
document.removeEventListener('keydown', onKey, true);
try { if (prev && prev.focus) prev.focus(); } catch {}
};
}, [active]);
return ref;
}
const LANG_KEY = 'ippy.landing.lang';
const AUTH_KEY = 'pipi.landing.unlocked';
// Supported landing languages. Mirror of PIPI_LANGS in pipi-landing.jsx
// (that script loads first, so window.PIPI_LANGS is normally present;
// keep a literal fallback so this file is robust on its own).
const LANDING_LANGS = (typeof window !== 'undefined' && window.PIPI_LANGS) || ['sk', 'cz', 'en'];
// Pick the initial language: persisted choice → navigator.language
// (cs* → cz, en* → en, everything else → sk). Always returns a value
// that exists in LANDING_LANGS.
function pickInitialLang() {
try {
const saved = localStorage.getItem(LANG_KEY);
if (saved && LANDING_LANGS.indexOf(saved) !== -1) return saved;
} catch {}
try {
const navLang = (navigator.language || navigator.userLanguage || '').toLowerCase();
if (navLang.indexOf('cs') === 0 || navLang.indexOf('cz') === 0) return 'cz';
if (navLang.indexOf('en') === 0) return 'en';
} catch {}
return 'en';
}
// Keep the attribute in sync with the chosen UI language so
// screen readers / browsers announce the right language. Our internal
// code uses 'cz' for Czech; the correct BCP-47 subtag is 'cs'.
function applyHtmlLang(lang) {
try {
const code = lang === 'cz' ? 'cs' : lang;
document.documentElement.setAttribute('lang', code);
} catch {}
}
// ──────────────────────────────────────────────────────────────
// Password gate
// ──────────────────────────────────────────────────────────────
function PasswordGate({ lang, onUnlock }) {
const [pw, setPw] = useState('');
const [err, setErr] = useState('');
const [busy, setBusy] = useState(false);
const inputRef = useRef(null);
const trapRef = useFocusTrap(true);
useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);
const submit = async (e) => {
e.preventDefault();
setBusy(true); setErr('');
try {
const res = await fetch('/api/landing-login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password: pw }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok) {
setErr(data.error || (lang === 'en' ? 'Wrong password.' : 'Nesprávne heslo.'));
setBusy(false);
return;
}
try { localStorage.setItem(AUTH_KEY, '1'); } catch {}
onUnlock();
} catch (e) {
setErr(lang === 'en' ? 'Network glitch, try again.' : 'Sieť zlyhala, skús znova.');
setBusy(false);
}
};
// Render the gate via portal to document.body so it escapes the
// scaled .stage-inner. Without the portal the gate inherits the
// transform and becomes a postage-stamp on phones, with the input
// physically unreachable.
return ReactDOM.createPortal(
{lang === 'en' ? 'Soft launch.' : 'Tichý štart.'}
{lang === 'en'
? 'Ippy is not public yet. If you have a peek-password, type it below.'
: 'Ippy ešte nie je verejné. Ak máš heslo na náhľad, zadaj ho dolu.'}
{lang === 'en'
? 'No password yet? Email the founders. We add new previewers each week.'
: 'Nemáš heslo? Napíš zakladateľom. Pridávame náhľady postupne.'}
,
document.body
);
}
// ──────────────────────────────────────────────────────────────
// Waitlist modal
// ──────────────────────────────────────────────────────────────
function WaitlistModal({ open, onClose, lang }) {
const [email, setEmail] = useState('');
const [child, setChild] = useState('');
const [status, setStatus] = useState('idle'); // idle | sending | ok | err
const [errorMsg, setErrorMsg] = useState('');
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
window.removeEventListener('keydown', onKey);
document.body.style.overflow = prev;
};
}, [open, onClose]);
const trapRef = useFocusTrap(open);
if (!open) return null;
const tx = lang === 'en' ? {
title: 'I want in early.',
sub: 'Send me an email when Ippy opens publicly. No spam, no newsletters. One email, one link.',
email_label: 'Parent email',
email_ph: 'parent@example.com',
age_label: 'Child age (optional)',
age_ph: 'e.g. 5',
cta: 'Add me to the list',
busy: 'Sending…',
note: 'No tracking. No selling. We only use your email once, when we launch.',
invalid: 'Enter a valid email, please.',
ok_title: 'You’re on the list.',
ok_body: 'We’ll send you a link the moment Ippy can walk without wobbling.',
ok_hint: 'Watch your inbox in the next few days. We sometimes land in spam, so drag “Ippy” into known contacts.',
} : {
title: 'Chcem ako prvý.',
sub: 'Pošli mi email, keď Ippy otvoríme verejne. Žiadny spam, žiadne newslettre — jeden email, jeden odkaz.',
email_label: 'Email rodiča',
email_ph: 'rodic@example.sk',
age_label: 'Vek dieťaťa (nepovinné)',
age_ph: 'napr. 5',
cta: 'Pridať ma na zoznam',
busy: 'Posielam…',
note: 'Bez sledovania. Bez predaja kontaktov. Email použijeme iba raz — keď spustíme.',
invalid: 'Zadaj platný email, prosím.',
ok_title: 'Si na zozname.',
ok_body: 'Pošleme ti odkaz, hneď ako bude Ippy chodiť bez padania.',
ok_hint: 'Skontroluj si email v najbližších dňoch. Niekedy končíme v spame — presuň „Ippy“ medzi známych.',
};
const submit = async (e) => {
e.preventDefault();
if (!email || !email.includes('@')) {
setStatus('err'); setErrorMsg(tx.invalid);
return;
}
setStatus('sending'); setErrorMsg('');
try {
const res = await fetch('/api/waitlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: email.trim(), childAge: child.trim(), source: 'landing-cta', lang }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.error || ('HTTP ' + res.status));
}
setStatus('ok');
} catch (err) {
setStatus('err'); setErrorMsg(err.message || (lang === 'en' ? 'Something failed. Try again in a moment.' : 'Niečo zlyhalo. Skús to o chvíľu.'));
}
};
return (