{/* Mobile header */}

navigate(`/${role}/overview`)}>

GUIDKO

{(cfg[lang] || cfg.fr || "").toUpperCase()}

{/* Page body */}

{store.state.user && store.state.user.guest && }{children}

{/* More sheet */} {moreOpen && (

setMoreOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(8,11,24,0.5)", zIndex: 700, display: "flex", alignItems: "flex-end" }}>

e.stopPropagation()} style={{ background: "#fff", width: "100%", borderRadius: "18px 18px 0 0", padding: "10px 14px 26px", maxHeight: "70vh", overflowY: "auto" }}>

{more.map(item => ( ))}

)} {/* Bottom tab bar */}

{tabs.map(item => { const on = item.k === section; return ( ); })} {more.length > 0 && ( )}

); } // ===== TABLET: icon rail (72px) ===== const railWidth = vp === "tablet" ? 72 : 240; const compact = vp === "tablet"; return (

{/* Sidebar */}

navigate(`/${role}/overview`)}> {compact ? : }

{!compact && (

{sideInfo ? t("Espace actif", "Active space") : t("Espace", "Workspace")}

{sideInfo ? (sideInfo.space.label[lang] || sideInfo.space.label.fr) : cfg[lang]}

{sideInfo ? ( ) : (

{cfg.place}

)}

{navItems.map(item => { const on = item.k === section; if (compact) { return (

navigate(`/${role}/${item.k}`)} title={navLabel(item, lang)} style={{ width: 46, height: 46, borderRadius: 11, display: "grid", placeItems: "center", cursor: "pointer", background: on ? "#1F2542" : "transparent", color: on ? C.flame : "#8A91B0", fontSize: 17, borderLeft: on ? `2px solid ${C.flame}` : "2px solid transparent", }}>

); } return (

navigate(`/${role}/${item.k}`)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", borderRadius: 8, fontSize: 14, cursor: "pointer", background: on ? "#1F2542" : "transparent", color: on ? "#fff" : "#C9CEE3", borderLeft: on ? `2px solid ${C.flame}` : "2px solid transparent", transition: "background .12s", }} onMouseEnter={e => { if (!on) e.currentTarget.style.background = "#141A30"; }} onMouseLeave={e => { if (!on) e.currentTarget.style.background = "transparent"; }}> {navLabel(item, lang)} {item.market && B2B}

); })}

{compact ? (

setMenuOpen(o => !o)} style={{ display: "grid", placeItems: "center", cursor: "pointer" }}>

) : (

setMenuOpen(o => !o)} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>

{person.name}

{person.email}

{menuOpen ? "▾" : "▴"}

)} {menuOpen && (

{ navigate("/login"); }} style={{ padding: "11px 14px", fontSize: 13, cursor: "pointer", display: "flex", gap: 8 }} onMouseEnter={e => e.currentTarget.style.background = "#1F2542"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}> ⇄ {t("Changer de rôle", "Switch role")}

{ store.logout(); navigate("/login"); }} style={{ padding: "11px 14px", fontSize: 13, cursor: "pointer", display: "flex", gap: 8, color: "#FF8854", borderTop: "1px solid #1F2542" }} onMouseEnter={e => e.currentTarget.style.background = "#1F2542"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}> ⏻ {t("Déconnexion", "Sign out")}

)}

{/* Main column */}

{store.state.user && store.state.user.guest && } {children}

{/* Lang toggle floats */} {/* Universal language selector floats */}

); } // Bannière invité : présente partout en mode visiteur, invite à créer un compte. function GuestBanner({ navigate }) { const C = GK.colors; const { t } = useI18n(); return (

👁 {t("MODE VISITEUR","GUEST MODE")} {t("Tu explores en invité. Crée ton compte pour réserver, gagner et tout débloquer.","You're exploring as a guest. Create your account to book, earn and unlock everything.")}

); } // ---------- Topbar (inside main column) ---------- function Topbar({ subtitle, title, actions, search = true }) { const C = GK.colors; const { t } = useI18n(); const vp = (window.useViewport ? window.useViewport() : "desktop"); const mobile = vp === "mobile"; return (

{subtitle && {subtitle}}

{title}

{search && !mobile && (

window.dispatchEvent(new CustomEvent("gk-cmdk"))} style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", background: "#fff", border: `1px solid ${C.softLine}`, borderRadius: 9, fontSize: 13, color: C.slate, minWidth: 160, cursor: "pointer" }}> ⌕ {t("Rechercher…", "Search…")} ⌘K

)} {actions}

); } // Scroll container for page bodies function PageBody({ children, style = {} }) { return

{children}

; } // KPI card // Mappe les symboles KPI usuels vers des icônes premium const KPI_ICON = { "€": "finance", "$": "finance", "★": "star", "◎": "target", "⇄": "auto", "▲": "trendup", "▼": "trenddown", "!": "alert", "🔥": "flame", "📋": "clipboard", "✎": "edit", "✆": "phone", "⇅": "covoit", "♥": "heart", "♡": "heart", }; function KPI({ label, value, delta, deltaTone = "signal", sub, icon }) { const C = GK.colors; const iconName = icon && KPI_ICON[icon]; return (

{label} {icon &&

{iconName && window.hasGKIcon && window.hasGKIcon(iconName) ? : icon}

}

{value}

{delta && {delta}} {sub && {sub}}

); } Object.assign(window, { BRAND, GuidkoMark, GuidkoLogo, ROLES, AppShell, Topbar, PageBody, KPI });