// ============================================================ // sections-c.jsx — Story, Fun Stats, Goal, Footer, Profile modal // ============================================================ // ---- BRAND STORY ---- function Story() { return (
// 04 — Our story

By day we defend.
By night, we run.

What started as a few friends meeting for evening runs became a community of cybersecurity professionals pushing each other to get stronger, healthier, and more disciplined.

We secure applications, investigate threats, build products, and defend organizations. We believe the mindset that builds great security professionals builds great athletes, too.
{VALUES.map((v, i) => ( {String(i + 1).padStart(2, "0")}
{v.k}
{v.d}
 ))}
); } // ---- FUN STATS + GOAL + CHALLENGES ---- function StatsGoal() { const goalPct = GOAL.targetKm ? Math.min(100, Math.round((TEAM.distance / GOAL.targetKm) * 100)) : 0; const [ref, seen] = useInView(); const animPct = useCountUp(goalPct, seen, 1600); const toGo = Math.max(GOAL.targetKm - TEAM.distance, 0); return (
// 05 — Monthly team statistics

The numbers behind the month.
{FUN_STATS.map((s, i) => (
{s.value} {s.unit && {s.unit}}
{s.label}
{s.note}
 ))}
Team goal · {GOAL.month}

{GOAL.label}

{Math.round(animPct)}%
{TEAM.distance.toLocaleString("en-US")} km logged {toGo.toLocaleString("en-US")} km to go
); } // ---- FOOTER ---- function Footer({ onJoin }) { return ( ); } // ---- PROFILE MODAL ---- function ProfileModal({ member, onClose }) { useEffect(() => { if (!member) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [member]); if (!member) return null; const m = member; const stats = [ { k: "Monthly distance", v: m.km.toFixed(1), u: "km" }, { k: "Sessions", v: m.sessions, u: "runs" }, { k: "Current streak", v: m.streak, u: "days" }, { k: "Longest run", v: m.longest.toFixed(1), u: "km" }, { k: "Avg pace", v: paceLabel(m.paceSec), u: "/km" }, { k: "Elevation", v: m.elev.toLocaleString("en-US"), u: "m" }, ]; return (
e.stopPropagation()}>
{m.name}
@{m.handle}
last active {m.last}
{stats.map(s => (
{s.v} {s.u}
{s.k}
))}
{SHOW_BADGES && (
BADGES EARNED · {m.badges.length}
{m.badges.length === 0 && none yet — keep running} {m.badges.map(bid => BADGE_MAP[bid] && (
{BADGE_MAP[bid].code} {BADGE_MAP[bid].name}
))}
)}
); } Object.assign(window, { Story, StatsGoal, Footer, ProfileModal });