text: import React, { useEffect, useRef } from 'react';
  import PropTypes from 'prop-types';
  import sr from '@utils/sr';
  import { srConfig, email } from '@config';
  import styled from 'styled-components';
  import { Section, Heading } from '@styles';
  
  const StyledContainer = styled(Section)`
    text-align: center;
    max-width: 600px;
    margin: 0 auto 100px;
    a {
      ${({ theme }) => theme.mixins.inlineLink};
    }
  `;
  const StyledHeading = styled(Heading)`
    display: block;
    color: ${({ theme }) => theme.colors.green};
    font-size: ${({ theme }) => theme.fontSizes.md};
    font-family: ${({ theme }) => theme.fonts.SFMono};
    font-weight: 400;
    margin-bottom: 20px;
    justify-content: center;
    @media (${({ theme }) => theme.bp.desktopS}) {
      font-size: ${({ theme }) => theme.fontSizes.sm};
    }
  
    &:before {
      bottom: 0;
      font-size: ${({ theme }) => theme.fontSizes.sm};
      @media (${({ theme }) => theme.bp.desktopS}) {
        font-size: ${({ theme }) => theme.fontSizes.smish};
      }
    }
    &:after {
      display: none;
    }
  `;
  const StyledTitle = styled.h4`
    margin: 0 0 20px;
    font-size: 60px;
    @media (${({ theme }) => theme.bp.desktopS}) {
      font-size: 50px;
    }
    @media (${({ theme }) => theme.bp.tabletL}) {
      font-size: 40px;
    }
  `;
  const StyledEmailLink = styled.a`
    ${({ theme }) => theme.mixins.bigButton};
    margin-top: 50px;
  `;
  
  const Contact = ({ data }) => {
    const { frontmatter, html } = data[0].node;
    const { title, buttonText } = frontmatter;
    const revealContainer = useRef(null);
    useEffect(() => sr.reveal(revealContainer.current, srConfig()), []);
  
    return (
      <StyledContainer id="contact" ref={revealContainer}>
        <StyledHeading>What&apos;s Next?</StyledHeading>
  
        <StyledTitle>{title}</StyledTitle>
  
        <div dangerouslySetInnerHTML={{ __html: html }} />
  
        <StyledEmailLink href={`mailto:${email}`} target="_blank" rel="nofollow noopener noreferrer">
          {buttonText}
        </StyledEmailLink>
      </StyledContainer>
    );
  };
  
  Contact.propTypes = {
    data: PropTypes.array.isRequired,
  };
  
  export default Contact;
  