import styled from '@emotion/styled';
import { blue500, gray100 } from '../styles/colors';

const BetaInfoWrapper = styled.div`
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: ${gray100};
  position: relative;
  z-index: 2;
  border-radius: 10px;
  padding: 20px;

  a {
    text-decoration: underline;
  }

  font-size: 20px;
  line-height: 1.4;
  p {
    font-size: 20px;
    margin: 0;
    & + p {
      margin-top: 20px;
    }
  }
  @media screen and (max-width: 700px) {
    font-size: 16px;
  }

  @media screen and (min-width: 1200px) {
    max-width: 600px;
  }
`;

const WaitlistMessage = styled.p`
  strong {
    font-size: 40px;
  }
  a {
    color: ${blue500};
    font-weight: 600;
  }
`;

const AccountMessage = styled.p``;

const LogOutLink = styled.a`
  color: ${blue500};
`;

const BetaInfo = () => {
  return (
    <BetaInfoWrapper>
      <WaitlistMessage>
        <strong>You are on the waitlist.</strong>
        <br />
        <br />
        Please complete the{' '}
        <a href="https://docs.google.com/forms/d/e/1FAIpQLScoAbFFQ1S4OubIO_KP9zG8H-4K14qZrCl5lsC0csLe39SUTQ/viewform?usp=sf_link">
          2-minute early access survey
        </a>{' '}
        to be considered for early access to WavTool.
        <br />
        <br />
        You will receive an email when you are given access.
      </WaitlistMessage>
      <AccountMessage>Logged in as {`{user}`}</AccountMessage>
      <LogOutLink href="/auth/logout">Log Out</LogOutLink>
    </BetaInfoWrapper>
  );
};

export default BetaInfo;