// mobilehome.jsx — the mobile homepage. Instead of the long scrolling marketing
// page, mobile gets a native-app feel: full-screen, swipeable "screens" with
// pagination dots and a persistent bottom action bar. Desktop is untouched.
// (All top-level names are unique across the shared global scope — *MH suffix.)
const { useState: useStateMH, useEffect: useEffectMH, useRef: useRefMH } = React;
// Entrance for a carousel element: it rises + fades into place when its screen
// becomes active, and re-plays every time you land on that screen (first load
// included). `none` when inactive so the off-screen element just rests visible.
const mhRise = (active, delay = 0) => ({ animation: active ? `mh-rise .6s cubic-bezier(.16,1,.3,1) ${delay}s both` : "none" });
/* Small presentational bits, kept local so the screens read cleanly. */
function MHPhoneCard({ children, style }) {
// A soft "device panel" that the visuals sit inside — gives each screen a
// tangible, product-like centrepiece.
return (
One vault for everything you own, with the cover, all in one place.
);
}
function MHScreenCova({ active }) {
const lines = [
{ role: "user", text: "I just bought a Hilux for ₦52M" },
{ role: "bot", text: "Added to VaultLog ✓. Risk scored 58/100. Want matched quotes?" },
];
const [n, setN] = useStateMH(0);
useEffectMH(() => {
if (!active) { setN(0); return; }
if (n >= lines.length) return;
const t = setTimeout(() => setN((x) => x + 1), n === 0 ? 450 : 1100);
return () => clearTimeout(t);
}, [active, n]);
return (
Cova
Online
{lines.slice(0, n).map((l, i) => (
{l.text}
))}
{n < lines.length &&
{[0, 1, 2].map((i) => )}
}
Just say what you own.
Cova logs it, values it and scores the risk, in plain words, in seconds.
);
}
function MHScreenInsure({ active }) {
return (
save ~18%
{/* Plant pops up first in the centre; Fleet & Store then break apart
and push out to the sides (mh-chip-push). Base transform holds the
spread position for reduced-motion / off-screen. */}
Insure it your way.
Cover one thing, or bundle assets into a single policy and cut the premium.
);
}
function MHMiniChip({ cat, label }) {
return (
{label}
);
}
/* ---- the swipeable shell ----
VaultCova is chat-first, so the Cova composer is PINNED at the bottom of every
screen: the swipeable screens are a showcase, but the primary action — the one
thing always in reach — is talking to Cova. Type from screen 1 and you're in. */
function MobileHome({ onStart, onLogin, onToggleTheme, isDark, logoV = "vault" }) {
const screens = ["intro", "cova", "insure"];
const [i, setI] = useStateMH(0);
const [drag, setDrag] = useStateMH(0); // live finger offset in px
const [msg, setMsg] = useStateMH("");
const [listening, setListening] = useStateMH(false);
const [auto, setAuto] = useStateMH(true); // auto-advance until the user engages
const [instant, setInstant] = useStateMH(false); // wrap without a backward slide
const startX = useRefMH(0);
const dragging = useRefMH(false);
const wRef = useRefMH(null);
const iRef = useRefMH(0); // current index, readable inside the interval
const resumeT = useRefMH(null);
const rotating = window.useRotatingPh ? window.useRotatingPh(!listening) : "Tell Cova what you own…";
const ph = listening ? "Listening… speak now" : rotating;
const locale = window.I18N ? window.I18N.localeFor((window.useT && window.useT().lang) || "en") : "en-NG";
const clamp = (n) => Math.max(0, Math.min(screens.length - 1, n));
const goTo = (n) => setI(clamp(n));
// Auto-swipe: cycle the showcase screens forward and wrap round (1 -> 2 -> 3 ->
// 1 -> …), never running backward. The last -> first hop resets instantly (no
// reverse slide) while the intro's cards drop back in, so it reads as a clean
// loop. Pauses the moment the user takes over — swipes, taps a dot, or focuses
// the composer — and resumes after a spell of inactivity. Honours reduced-motion.
useEffectMH(() => { iRef.current = i; }, [i]);
const pauseAuto = () => { setAuto(false); if (resumeT.current) clearTimeout(resumeT.current); };
const scheduleResume = () => { if (resumeT.current) clearTimeout(resumeT.current); resumeT.current = setTimeout(() => setAuto(true), 7000); };
useEffectMH(() => {
if (!auto) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const id = setInterval(() => {
const next = iRef.current + 1;
if (next >= screens.length) { setInstant(true); setI(0); } // wrap: cut, don't rewind
else setI(next);
}, 4200);
return () => clearInterval(id);
}, [auto]);
// After the wrapped (transition-less) frame paints, re-enable the slide so the
// next 1 -> 2 move animates normally again.
useEffectMH(() => {
if (!instant) return;
const r = requestAnimationFrame(() => requestAnimationFrame(() => setInstant(false)));
return () => cancelAnimationFrame(r);
}, [instant]);
useEffectMH(() => () => { if (resumeT.current) clearTimeout(resumeT.current); }, []);
const onDown = (x) => { dragging.current = true; startX.current = x; pauseAuto(); };
const onMove = (x) => { if (dragging.current) setDrag(x - startX.current); };
const onUp = () => {
if (!dragging.current) return;
dragging.current = false;
const w = wRef.current ? wRef.current.offsetWidth : 320;
const threshold = Math.min(70, w * 0.18);
if (drag < -threshold) goTo(i + 1);
else if (drag > threshold) goTo(i - 1);
setDrag(0);
scheduleResume();
};
const submit = (e) => { e.preventDefault(); onStart(msg.trim() || undefined); };
return (