props => { const translations = { "en-US": { sectionTitle: "", sectionSubtitle: "", card1Front: "SJP+", card1Back: "Everything you love about our Student Job Program,<\/strong> plus more.<\/em> More personalized. More flexible. More opportunities to learn and grow. Designed for non-clinical-year vet students. Applications open 10/27—pre-enroll now! Space is limited.<\/strong>", card1Cta: "PRE-ENROLL IN SJP+", card2Front: "Externship", card2Back: "Clinical-year veterinary students<\/strong> can complete a Banfield Externship to gain experience delivering preventive care, performing exams, developing surgical skills, and managing cases alongside an experienced coach. Get paid and/or earn academic credit.", card2Cta: "APPLY NOW", card3Front: "Ambassador program", card3Back: 'Grow your leadership skills, expand your professional network, and help your classmates discover career-building opportunities while gaining an inside look at life at Banfield.

Interested? Contact
StudentPrograms@banfield.com<\/a><\/strong>', contactText: "Questions? Contact us at", contactEmail: "StudentPrograms@banfield.com" } }; const translationImages = { "en-US": { card1Img: "https://d3f70emg10ruwo.cloudfront.net/0nagj9yzd13eb/SP_1%20%281%29_batcheditor_fotor--7909e7e8-d728-4175-8bcc-d8eef3caa89e.webp", card2Img: "https://d3f70emg10ruwo.cloudfront.net/0nagj9yzd13eb/072324-banfieldsaa-day2-stills-fw-346_batcheditor_fotor_batcheditor_fotor%20%281%29--3e1a3ad2-25d0-45b5-a79b-fc81cea1270a.webp", card3Img: "https://d3f70emg10ruwo.cloudfront.net/0nagj9yzd13eb/fae8770c-bc80-4ada-901e-8deab666c835--c0b35e87-4820-4f68-9a1f-4c6464ae7283.jpeg" } }; const CloseIcon = () => createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", style: { fill: '#75787B', width: '100%', height: 'auto', transform: 'rotate(45deg)', transformOrigin: '50% 50%' } }, createElement("polygon", { points: "93,40.667 58.244,40.667 58.244,5.911 41.757,5.911 41.757,40.667 7,40.667 7,57.154 41.757,57.154 41.757,91.91 58.244,91.91 58.244,57.154 93,57.154" })); const handleCardClick = index => { setFlippedCards(prev => ({ ...prev, [index]: !prev[index] })) }; const [flippedCards, setFlippedCards] = useState({}); const lang = props.language || "en-US"; const t = translations[lang] || translations["en-US"] || {}; const img = translationImages[lang] || translationImages["en-US"] || {}; const [flipped, setFlipped] = useState({}); const cards = [{ key: "sjp", front: t.card1Front, back: t.card1Back, cta: t.card1Cta, image: img.card1Img, alt: "Business team meeting in modern conference room discussing strategy", href: "https://bph.phenompeople.com/us/en/event/6aa07e0245c7eb527d9a533f/SJP-pre-registration" }, { key: "extern", front: t.card2Front, back: t.card2Back, cta: t.card2Cta, image: img.card2Img, alt: "Three business professionals collaborating at modern office desk", href: "/externship-form" }, { key: "amb", front: t.card3Front, back: t.card3Back, cta: t.card3Cta, image: img.card3Img, alt: "Team of five coworkers celebrating with a group high-five", href: "#" }]; const toggle = key => setFlipped(prev => ({ ...prev, [key]: !prev[key] })); return createElement(Box, { component: "section", "data-eid": "flip-root", "data-etype": "bg", "aria-labelledby": "flip-title", sx: { position: "relative", width: "100%", height: "100%", boxSizing: "border-box", // backgroundColor: "background.main", // px: { mobile: 2, tablet: 4, desktop: 6 }, // py: { mobile: 5, tablet: 6, desktop: 8 }, maxWidth: '1350px', mx: 'auto', // pt: { // mobile: 4, // tablet: 6, // desktop: 10 // }, px: { mobile: 4, tablet: 8, desktop: 8 }, display: "flex", flexDirection: "column", alignItems: "center", gap: { mobile: 4, desktop: 5 } } }, createElement(Box, { "data-eid": "flip-header", "data-etype": "container", sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 1.5, width: "100%" } }, createElement(Typography, { component: "h2", id: "flip-title", variant: "h2", "data-eid": "flip-title", "data-etype": "heading", "data-i18n": "sectionTitle", sx: { color: "darkText.dark" } }, t.sectionTitle), createElement(Typography, { variant: "body1", "data-eid": "flip-subtitle", "data-etype": "text", "data-i18n": "sectionSubtitle", sx: { color: "darkText.main", maxWidth: { mobile: "100%", desktop: 680 } } }, t.sectionSubtitle)), createElement(Box, { component: "ul", "data-eid": "flip-list", "data-etype": "container", sx: { listStyle: "none", m: 0, p: 0, width: "100%", display: "grid", gridTemplateColumns: { mobile: "1fr", tablet: "repeat(2, 1fr)", desktop: "repeat(3, 1fr)" }, gap: { mobile: 3, desktop: 4 } } }, cards.map((card, index) => { const isFlipped = !!flipped[card.key]; return createElement(Box, { component: "li", key: card.key, "data-eid": "flip-card", "data-etype": "card", "data-loop": "cards", "data-loop-index": index, sx: { listStyle: "none", perspective: "1400px", minHeight: { mobile: 280, tablet: 300, desktop: 310 } } }, createElement(Box, { role: "button", tabIndex: 0, "aria-pressed": isFlipped ? "true" : "false", "aria-label": card.front, "data-eid": "flip-card-inner", "data-etype": "container", "data-active": isFlipped ? "true" : "false", onClick: () => toggle(card.key), onKeyDown: e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(card.key) } }, sx: { position: "relative", width: "100%", height: "100%", minHeight: "inherit", cursor: "pointer", transformStyle: "preserve-3d", transition: "transform 320ms ease", transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)", borderRadius: 3, outline: "none", "&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: "3px" }, "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, createElement(Box, { "data-eid": "flip-card-face-front", "data-etype": "container", sx: { position: "absolute", inset: 0, backfaceVisibility: "hidden", overflow: "hidden", backgroundColor: "#C9E6FA", display: "flex", flexDirection: "column", boxShadow: "0 8px 24px rgba(0,0,0,0.08)", borderRadius: { mobile: "24px 24px 24px 24px", tablet: "24px 24px 24px 24px", desktop: "32px 32px 32px 32px" } } }, createElement(Box, { component: "img", src: card.image, alt: card.alt, "data-eid": "flip-card-image", "data-etype": "image", "data-loop": "cards", "data-loop-index": index, "data-bind": "image", sx: { width: "100%", maxWidth: "100%", flex: "1 1 auto", minHeight: 0, aspectRatio: "1 / 2", objectFit: "cover", display: "block", m: 2, mb: 1, width: "calc(100% - 32px)", borderRadius: { mobile: "12px 12px 12px 12px", tablet: "12px 12px 12px 12px", desktop: "18px 18px 18px 18px" } } }), createElement(Box, { sx: { p: 2, display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, "data-eid": "flip-card-front-body", "data-etype": "container" }, createElement(Typography, { component: "h3", variant: "h6", "data-eid": "flip-card-front-title", "data-etype": "subheading", "data-loop": "cards", "data-loop-index": index, "data-bind": "front", sx: { color: "secondary.dark", fontWeight: 700, textAlign: "center" } }, card.front))), createElement(Box, { "data-eid": "flip-card-face-back", "data-etype": "container", sx: { position: "absolute", inset: 0, backfaceVisibility: "hidden", transform: "rotateY(180deg)", overflow: "hidden", background: '#C9E6FA', display: "flex", flexDirection: "column", // justifyContent: "space-between", p: 3, boxShadow: "0 8px 24px rgba(0,0,0,0.12)", borderRadius: { mobile: "24px 24px 24px 24px", tablet: "32px 32px 32px 32px", desktop: "32px 32px 32px 32px" } } }, createElement(Box, { sx: { position: "relative", width: "100%" } }, createElement(Button, { onClick: () => handleCardClick(index), sx: { position: "absolute", right: 0, top: 0, minWidth: "auto", p: 0, width: { mobile: "16px", tablet: "16px", desktop: "22px" }, height: { mobile: "16px", tablet: "16px", desktop: "22px" }, display: "flex", alignItems: "center", justifyContent: "center", background: "transparent", "&:hover": { backgroundColor: "transparent" } } }, createElement(CloseIcon, null))), createElement(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, "data-eid": "flip-card-back-body", "data-etype": "container" }, createElement(Typography, { component: "h3", variant: "h6", "data-eid": "flip-card-back-title", "data-etype": "subheading", "data-loop": "cards", "data-loop-index": index, "data-bind": "front", sx: { color: "secondary.dark", fontWeight: 700 } }, card.front), createElement(Typography, { variant: "body2", "data-eid": "flip-card-back-text", "data-etype": "text", "data-loop": "cards", "data-loop-index": index, "data-bind": "back", sx: { color: "gray.darker", lineHeight: 1.6 } }, createElement("div", { dangerouslySetInnerHTML: { __html: card.back } }))), card.cta && createElement(Box, { "data-eid": "flip-card-actions", "data-etype": "action-container", sx: { mt: 2, display: "flex", justifyContent: "center", width: "100%" } }, createElement(Button, { component: "a", href: card.href, "data-eid": "flip-card-cta", "data-etype": "cta", "data-loop": "cards", "data-loop-index": index, "data-bind": "cta", onClick: e => e.stopPropagation(), sx: { backgroundColor: "primary.main", color: "white", px: { mobile: 3, tablet: 3, desktop: 3 }, py: { mobile: 1.5, tablet: 1.5, desktop: 1.5 }, typography: 'subtitle2', borderRadius: 12, textTransform: "uppercase", fontSize: { mobile: '11px', tablet: '11px', desktop: '16px' }, mb: 4, mx: { mobile: "auto", tablet: "initial" }, fontWeight: 700, '&:hover': { backgroundColor: 'gray.darker' } } }, card.cta))))) })), createElement(Typography, { component: "p", variant: "subtitle1", "data-eid": "flip-contact", "data-etype": "text", sx: { color: "darkText.main", fontWeight: 600, textAlign: "center", display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 0.75 } }, createElement(Box, { component: "span", "data-eid": "flip-contact-label", "data-etype": "text", "data-i18n": "contactText", sx: { fontWeight: { mobile: "600", tablet: "600", desktop: "600" } } }, t.contactText), createElement(Box, { component: "a", href: "mailto:" + (t.contactEmail || ""), "data-eid": "flip-contact-link", "data-etype": "cta", "data-i18n": "contactEmail", sx: { color: "primary.main", fontWeight: 700, textDecoration: "underline", "&:hover": { color: "primary.dark" } } }, t.contactEmail))) }

Banfield’s opportunities for

students