function useMobile(bp = 768) { const [m, setM] = React.useState(() => window.innerWidth < bp); React.useEffect(() => { const fn = () => setM(window.innerWidth < bp); window.addEventListener("resize", fn, { passive: true }); return () => window.removeEventListener("resize", fn); }, [bp]); return m; } function Shell({ user, current, onNav, onLogout, onJobChange, jobContext, children, darkMode, onToggleTheme, subscriptionPlan = "free", onUpgrade }) { const [showSetup, setShowSetup] = React.useState(false); const [userMenuOpen, setUserMenuOpen] = React.useState(false); const userMenuRef = React.useRef(null); const isMobile = useMobile(768); const shellBg = darkMode ? "radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 22%), linear-gradient(180deg, #1d1e22 0%, #15161a 100%)" : "radial-gradient(circle at 18% 8%, rgba(255,255,255,.92), transparent 22%), linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%)"; const topbarBg = darkMode ? "linear-gradient(180deg, rgba(44,47,53,.86) 0%, rgba(28,30,35,.92) 100%)" : "linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(242,245,248,.94) 100%)"; const topbarBorder = darkMode ? "rgba(214,218,226,.12)" : "rgba(154,162,176,.14)"; const topbarSubtle = darkMode ? "rgba(255,255,255,.05)" : "rgba(255,255,255,.58)"; const topbarAccentBg = darkMode ? "rgba(255,255,255,.08)" : "rgba(255,255,255,.48)"; const topbarAccentBorder = darkMode ? "rgba(188,194,204,.18)" : "rgba(171,178,189,.20)"; const topbarAccentText = darkMode ? "#d8dde6" : "#6f7785"; React.useEffect(() => { if (!userMenuOpen) return; function handleClick(e) { if (userMenuRef.current && !userMenuRef.current.contains(e.target)) { setUserMenuOpen(false); } } document.addEventListener("mousedown", handleClick); return () => document.removeEventListener("mousedown", handleClick); }, [userMenuOpen]); const isFree = subscriptionPlan === "free"; const navItems = [ { id: "dashboard", label: "Dashboard", icon: "layout-dashboard" }, { id: "mock", label: "Mock interview",icon: "video" }, { id: "progress", label: "Progress", icon: "trending-up", pro: true }, { id: "history", label: "History", icon: "bar-chart-3" }, ]; return (
{/* ── Top nav ── */}
{/* Logo */} {/* Divider — desktop only */} {!isMobile &&
} {/* Desktop nav items */} {!isMobile && ( )} {/* Mobile: page title */} {isMobile && ( {navItems.find(it => it.id === current)?.label || "Greenroom"} )} {/* Right: role chip + theme + user */}
{/* Role chip — desktop only */} {!isMobile && (jobContext?.role ? ( ) : ( ))} {/* Theme toggle */} {/* User avatar + dropdown */}
{userMenuOpen && (
{user.name}
{user.email}
{isMobile && ( )}
)}
{/* ── Content ── */}
{children}
{/* ── Mobile bottom tab bar ── */} {isMobile && ( )} {/* Setup panel */} {showSetup && ( { onJobChange(ctx); setShowSetup(false); }} onClose={() => setShowSetup(false)} darkMode={darkMode} /> )} {/* Support & feedback widget — always available */}
); } // ── Support & feedback widget ───────────────────────────────── // Minimal feedback box: heading, textarea, send button. The user's email // rides along silently (from their auth session) so we can reply. function SupportWidget({ user, darkMode, isMobile }) { const [open, setOpen] = React.useState(false); const [message, setMessage] = React.useState(""); const [sending, setSending] = React.useState(false); const [sent, setSent] = React.useState(false); const [error, setError] = React.useState(""); const panelRef = React.useRef(null); React.useEffect(() => { if (!open) return; const handleClick = e => { if (panelRef.current && !panelRef.current.contains(e.target)) setOpen(false); }; const handleKey = e => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", handleClick); document.addEventListener("keydown", handleKey); return () => { document.removeEventListener("mousedown", handleClick); document.removeEventListener("keydown", handleKey); }; }, [open]); async function submit(e) { e.preventDefault(); if (message.trim().length < 3) { setError("Please write a bit more."); return; } setSending(true); setError(""); try { const res = await fetch("https://api.usegreenroom.app/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: "feedback", message: message.trim(), email: user?.email || null, name: user?.name || null, }), }); if (!res.ok) throw new Error(); setSent(true); window.posthog?.capture('feedback_submitted'); setTimeout(() => { setOpen(false); setSent(false); setMessage(""); }, 1800); } catch { setError("Couldn't send. Try again."); } setSending(false); } const surface = darkMode ? "#1e1f23" : "#ffffff"; const surface2 = darkMode ? "#25282e" : "#f6f7f9"; const border = darkMode ? "rgba(214,218,226,.12)" : "rgba(154,162,176,.18)"; const fg1 = darkMode ? "#e8ebf0" : "#1a1b1f"; const fg3 = darkMode ? "#8a90a0" : "#6f7785"; const inputBg = darkMode ? "#2a2d34" : "#fafbfc"; const fabBottom = isMobile ? 76 : 24; return ( <> {!open && ( )} {open && (
Feedback
{sent ? (
Thanks — we got it.
) : (