// Pet MBTI — shared UI. Exports: PawIcon, Sparkle, Cloud, AppIcon, NavBar, Footer, Btn, TraitBar, TypeThumb, AppStoreBadge, AppQR const C = window.PM_C; const S = window.PM_STR; // Real Paws app icon (resized from the shipping iOS icon). Paths are root-relative; // per-type pages under /t/ set so this resolves everywhere. const APP_ICON = 'assets/app-icon.png'; // ── little vector marks (no emoji, no black stroke) ── function PawIcon({ size = 24, color = C.paw, style, className }) { return ( ); } function Sparkle({ size = 20, color = C.paw, style, className }) { return ( ); } function Cloud({ w = 90, color = '#fff', style }) { return ( ); } // Real app-icon tile, used for the brand mark and app-download bands. function AppIcon({ size = 38, radius = 13, shadow = true }) { return ( Paws — pet diary app icon

); } // ── buttons ── function Btn({ children, onClick, kind = 'primary', color = C.pawDeep, size = 'md', style, disabled }) { const pads = size === 'lg' ? '17px 34px' : size === 'sm' ? '9px 18px' : '13px 26px'; const fs = size === 'lg' ? 20 : size === 'sm' ? 14 : 16; const base = { fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: fs, cursor: disabled ? 'default' : 'pointer', border: 'none', borderRadius: 999, padding: pads, letterSpacing: '.2px', transition: 'transform .15s ease, box-shadow .15s ease, background .15s ease', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, opacity: disabled ? .5 : 1, whiteSpace: 'nowrap', }; const kinds = { primary: { background: color, color: '#fff', boxShadow: `0 8px 20px ${color}44` }, soft: { background: C.panel, color: C.ink, boxShadow: '0 3px 12px rgba(168,107,52,0.10)' }, ghost: { background: 'transparent', color: C.ink2, boxShadow: 'none' }, }; return ( ); } // ── language switcher (top-right). Each menu item is a hard navigation to the // mirrored page in that language's static shell tree — a real page load is what // swaps in the localized . Root-absolute hrefs (pmLangHref) so they are // immune to and stay crawlable (hreflang counterparts). Driven off // PM_LANGS, so it grows automatically as languages are added. ── function LangSwitch() { const [open, setOpen] = React.useState(false); const wrapRef = React.useRef(null); const langs = window.PM_LANGS; const current = langs.find((l) => l.code === window.PM_LANG) || langs[0]; // Close on outside click / Escape. React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); }; }, [open]); return (

{open && ( )}

); } // ── top nav ── function NavBar({ onHome, onTypes, onStart, active }) { return (

); } // ── Apple mark + App Store badge ── const APP_URL = 'https://apps.apple.com/us/app/paws-pet-diary/id6770104992'; function AppleMark({ size = 22, color = '#fff' }) { return ( ); } function AppStoreBadge() { return ( Download on the App Store ); } // QR code linking to the app (renders via qrcode-generator, falls back gracefully) function AppQR({ size = 96, caption = S.qrCaption }) { const src = React.useMemo(() => { try { if (typeof qrcode === 'undefined') return null; const qr = qrcode(0, 'M'); qr.addData(APP_URL); qr.make(); return qr.createDataURL(6, 8); } catch (e) { return null; } }, []); if (!src) return null; return ( QR code to download Paws on the App Store

QR code to download Paws on the App Store

{caption && {caption}} ); } // ── footer ── function Footer() { return ( ); } // ── trait bar (result page) ── function TraitBar({ axis, pct, colors }) { const winnerB = axis._winner === axis.b.k; const side = winnerB ? axis.b : axis.a; const other = winnerB ? axis.a : axis.b; return (

{axis.label} {side.name} {pct}%

{other.name} {side.name}

); } // ── type thumbnail card ── function TypeThumb({ type, onClick, size = 'md' }) { const g = type.colors; const h = size === 'lg' ? 148 : 116; return ( ); } Object.assign(window, { PawIcon, Sparkle, Cloud, AppIcon, NavBar, Footer, Btn, TraitBar, TypeThumb, AppStoreBadge, AppQR });