import { darkLine, gray200 } from '@/styles/colors';
import styled from '@emotion/styled';

const Container = styled.div`
  position: fixed;
  top: 0;
  height: 100vh;
  min-height: 840px;
  width: 50svw;
  background: ${gray200};
  z-index: 14;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  transition: background 0.5s;
  background: none;
  @media screen and (max-width: 768px) {
    height: 100vh;
    width: 100vw;
  }
`;

const Wrapper = styled.div`
  flex-shrink: 0;
  border-radius: 10px;
  background-color: white;
  padding: 30px;
  max-width: 580px;
  width: 100%;
  min-height: 610px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  @media screen and (max-width: 768px) {
    padding: 20px;
    max-width: 80%;
    border-radius: 0;
    min-height: 0;
    border-bottom: 1px solid ${darkLine};
  }
`;

const H1 = styled.h1`
  font-family: Montreal;
  letter-spacing: -3px;
  font-size: 48px;
  font-weight: 500;
  margin: 2rem 0;
  @media screen and (max-width: 860px) {
    font-size: 36px;
    letter-spacing: -2.6px;
  }
`;

const Paragraph = styled.p`
  font-weight: 100;
  font-size: 18px;
  margin: 2rem 0;
`;

const SectionTitle = styled.h4`
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;

  align-items: baseline;
`;

const GoodbyePanel = () => {
  return (
    <Container>
      <Wrapper>
        <H1>Thank you.</H1>
        <SectionTitle>WavTool has gone offline.</SectionTitle>
        <Paragraph>
          We built WavTool to ensure that AI creates a world with even more precious, creative, and obsession-worthy
          music. Although the product has been taken offline, we are far from done with the mission. Everything you love
          about WavTool will return soon, and let us assure you: it will be worth the wait.
        </Paragraph>

        <Paragraph>
          We'll have more to announce in the coming months, and in the mean time we would love to hear your feedback and
          ideas for the future of AI-accelerated music production - just send us an email at{' '}
          <a href="mailto:hello@wavtool.com">hello@wavtool.com</a>.
        </Paragraph>

        <Paragraph>Thanks for being with us,</Paragraph>

        <Paragraph>The WavTool Team</Paragraph>
      </Wrapper>
    </Container>
  );
};

export default GoodbyePanel;