50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2a0e,'use client'; import { useEffect, useMemo, useState } from 'react'; import { cn } from '@/lib/utils'; import { IconArrowUpRight, IconLocation, FooterBar, type FooterSocial } from './footer-kit'; const KEYFRAMES = ` @keyframes su-role-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } `; export type CareersFooterVariant = 'Ticker' | 'List'; export interface CareersRole { title: string; department: string; location: string; type: string; } export interface CareersFooterProps { socials?: FooterSocial[]; brand: string; headline?: string; roles: CareersRole[]; allRolesHref?: string; /** Link columns. Without them a careers footer is a banner, not a footer. */ groups?: { title: string; links: { label: string; href: string }[] }[]; links?: { label: string; href: string }[]; copyright?: string; interval?: number; variant?: CareersFooterVariant; className?: string; } export function CareersFooter({ socials, brand, headline = 'We are hiring across engineering, security and sales.', roles, allRolesHref = '#', groups = [], links, copyright, interval = 3400, variant = 'Ticker', className, }: CareersFooterProps) { const [department, setDepartment] = useState('All'); const [index, setIndex] = useState(0); const departments = useMemo( () => ['All', ...Array.from(new Set(roles.map((role) => role.department)))], [roles], ); const filtered = useMemo( () => (department === 'All' ? roles : roles.filter((role) => role.department === department)), [department, roles], ); useEffect(() => { if (variant !== 'Ticker' || filtered.length < 2) return; const timer = setInterval( () => setIndex((current) => (current + 1) % filtered.length), interval, ); return () => clearInterval(timer); }, [filtered.length, interval, variant]); const locations = new Set(roles.map((role) => role.location)).size; /* Three visible rows rolling one at a time: the ticker keeps its motion, and the card is no longer 76px of mostly nothing. */ const visible = filtered.length ? Array.from( { length: Math.min(3, filtered.length) }, (_, offset) => filtered[(index + offset) % filtered.length], ) : []; return (