import styled from 'styled-components';
import ShadedTitle from '../../components/ShadedTitle';
import CardStack from './CardStack';
import { Link } from 'react-router-dom';
import { respondTo } from '../../utils/responsive';
import getPathPrefix from '../../utils/getPathPrefix';

const KnowledgePage = () => {

    const DOMAIN = process.env.REACT_APP_DOMAIN;
  return (
      <StyledKnowledgePage>
          <Content>
              <div className="title-container">
                  <ShadedTitle title="防災知識補給" as="h2" />
                  <p>
                      防災知識是你在災難生存的重要關鍵！一起點擊下方卡片，了解完整且正確的防災知識！
                  </p>
              </div>
              <div>
                  <CardStack />
              </div>
              <div className="buttons">
                  <a href={DOMAIN} target="_blank" rel="noopener noreferrer">
                      到防災易起來提高防颱生存率
                  </a>
                  <Link to={getPathPrefix("/")}>開始遊戲</Link>
              </div>
          </Content>
      </StyledKnowledgePage>
  );
};

const StyledKnowledgePage = styled.div`
  padding-top: 104px;

  min-height: 100vh;

  ${respondTo.sm} {
    padding-bottom: 140px;
    padding-top: calc(var(--header-height) + 16px);
  }
`;

const Content = styled.div`
    width: 708px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    font: var(--paragraph-2);
    color: var(--neutrals-700);

    ${respondTo.sm} {
        width: 100vw;
    }

    .title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        font-weight: 700;


        ${respondTo.sm} {
            padding: 0 32px;
            text-align: center;
            font: var(--mobile-paragraph-2);
            font-weight: 700;
            gap: 4px;
        }
    }

    h2 {
        font-size: 48px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
        text-align: center;

        ${respondTo.sm} {
            font-size: 32px;
        }
    }

    .buttons {
        display: flex;
        gap: 20px;
        margin-top: 32px;

        ${respondTo.sm} {
            width: 100vw;
            padding: 0 32px;
        }

        a {
            width: 256px;
            height: 48px;
            font: var(--paragraph-2);
            font-weight: 700;
            border-radius: 8px;
            border: 3px solid var(--neutrals-700);
            box-shadow: 5px 4px 0px 0px #2b3247;

            display: flex;
            align-items: center;
            justify-content: center;

            transition: all 0.2s ease-out;

            ${respondTo.sm} {
                width: 100%;
                padding: 8px 12px;
                height: 58px;
                font: var(--mobile-paragraph-2);
                font-weight: 700;
                text-align: center;
            }

            &:hover {
              transform: translate(5px, 4px);
              box-shadow: 0px 0px 0px 0px #2b3247;
            }

            &:first-child {
                background: var(--main-color-a);
            }

            &:last-child {
                background: white;
            }
        }
    }
`;

export default KnowledgePage; 