import * as _ from 'lodash';
import * as React from 'react';
import { Circle } from 'ts/components/ui/circle';
import { Container } from 'ts/components/ui/container';
import { FilledImage } from 'ts/components/ui/filled_image';
import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const BENEFITS = [
'Comprehensive insurance. Medical, dental, and vision coverage for you and your family.',
'Unlimited vacation. Three weeks per year minimum.',
'Flexible hours and liberal work-from-home-policy.',
'Relocation Assistance.',
'Whole team offsites and community / hackathon events (often international).',
'Monthly transportation and phone reimbursement.',
'Meals and snacks provided in-office daily.',
];
interface Value {
iconSrc: string;
text: string;
}
const VALUES: Value[] = [
{
iconSrc: 'images/jobs/heart-icon.svg',
text: 'Do the right thing',
},
{
iconSrc: 'images/jobs/ship-icon.svg',
text: 'Consistently ship',
},
{
iconSrc: 'images/jobs/calendar-icon.svg',
text: 'Focus on long term impact',
},
];
export interface BenefitsProps {
screenWidth: ScreenWidths;
}
export const Benefits = (props: BenefitsProps) => {
const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
return (
<Container className="flex flex-column items-center py4 sm-px3" backgroundColor={colors.white}>
{!isSmallScreen ? (
<Container className="flex" maxWidth="800px">
<BenefitsList />
<Container marginLeft="215px">
<ValuesList />
</Container>
</Container>
) : (
<Container className="flex-column">
<BenefitsList />
<Container marginTop="50px">
<ValuesList />
</Container>
</Container>
)}
</Container>
);
};
const Header: React.StatelessComponent = ({ children }) => (
<Container marginBottom="51px">
<Text fontFamily="Roboto Mono" fontSize="24px" fontColor={colors.black}>
{children}
</Text>
</Container>
);
const BenefitsList = () => {
return (
<Container maxWidth="360px">
<Header>Benefits</Header>
{_.map(BENEFITS, benefit => <BenefitItem key={benefit} description={benefit} />)}
</Container>
);
};
interface BenefitItemProps {
description: string;
}
const BenefitItem: React.StatelessComponent<BenefitItemProps> = ({ description }) => (
<Container marginBottom="30px">
<div className="flex">
<Circle className="flex-none pr2 pt1" diameter={8} fillColor={colors.black} />
<div className="flex-auto">
<Text fontSize="14px" lineHeight="24px">
{description}
</Text>
</div>
</div>
</Container>
);
const openMissionAndValuesBlogPost = () => {
utils.openUrl(constants.URL_MISSION_AND_VALUES_BLOG_POST);
};
const ValuesList = () => {
return (
<Container maxWidth="360px">
<Header>Our Values</Header>
{_.map(VALUES, value => <ValueItem key={value.text} {...value} />)}
<Text fontSize="14px" lineHeight="26px">
We care deeply about our mission and encourage you to{' '}
<a
style={{ color: colors.mediumBlue }}
target="_blank"
href={constants.URL_MISSION_AND_VALUES_BLOG_POST}
>
read more here
</a>.
</Text>
</Container>
);
};
type ValueItemProps = Value;
const ValueItem: React.StatelessComponent<ValueItemProps> = ({ iconSrc, text }) => {
return (
<Container marginBottom="45px">
<div className="flex items-center">
<Image className="flex-none pr2" width="20px" src={iconSrc} />
<div className="flex-auto">
<Text fontSize="14px" lineHeight="24px" fontWeight="bold">
{text}
</Text>
</div>
</div>
</Container>
);
};