import styled from 'styled-components';
import VideoController from './VideoController';
import Footer from '../../components/PageLayout/Footer';
import ShadedTitle from '../../components/ShadedTitle';
import { ImageWrapper } from '../../components/MediaWrapper';
import { Link } from 'react-router-dom';
import { respondTo } from '../../utils/responsive';
import getPathPrefix from '../../utils/getPathPrefix';

const AboutPage = () => {

    const DOMAIN = process.env.REACT_APP_DOMAIN;
  return (
      <StyledAboutPage>
          <Wrapper>
              <Intro>
                  <ShadedTitle title="關於《颱會準備了吧》遊戲" as="h2" />
                  <p>
                      我們不僅僅是設計了一款遊戲，更希望能帶來一場防災觀念的轉變。透過「颱會準備了吧」，我們希望讓每個人理解，防災不只是政府或專家的責任，更是每個人都應該具備的基本能力。當災害來臨時，正確的準備與行動可以大幅降低風險，守護自己與家人。
                      <br />
                      真正的防災，從準備開始。
                      <br />
                      你準備好了嗎？
                  </p>
              </Intro>
              <EndingSection>
                  <h3>從數據到行動，讓防災更貼近生活</h3>
                  <p>
                      「颱會準備了吧」的誕生靈感來自於2022年減災資料數據溝通競賽的第三名作品──「Typhoon
                      Journey」。該作品以莫拉克風災的真實資料為基礎，透過機器學習分析1,485筆數據，深入探討影響生存率的關鍵因素，成功將複雜的數據轉化為直觀易懂的互動遊戲，並榮獲佳績。
                      <br />
                      <br />
                  </p>
                  <p>
                      我們延續這項創意，將資料分析與風險預測結合，打造出更豐富、更貼近生活的「颱會準備了吧」。我們的目標不只是設計一款遊戲，更希望透過遊戲讓防災知識自然地融入每個人的生活中。
                      <br />
                      <br />
                  </p>
                  <p>
                      為了達成這個目標，我們採用了吸引人的視覺設計與當紅的AI技術，讓玩家在輕鬆互動的過程中，逐步學會如何面對災害風險。透過分數評比與分享機制，我們希望激發玩家挑戰自我、持續學習防災知識，進一步連結至「防災易起來」平台，學習如何善用各種工具來保護自己與家人。
                      <br />
                      <br />
                  </p>
                  <p>
                      「颱會準備了吧」不僅是一款遊戲，更是一場從數據啟發到行動實踐的防災革命。
                      <br />
                      <br />
                      製作團隊：國家災害防救科技中心、簡訊設計
                      <br />
                      原始創意：簡詩汶、江晨瑜、李世寰
                  </p>
                  <div className="link-group">
                      <a
                          href={DOMAIN}
                          target="_blank"
                          rel="noopener noreferrer"
                      >
                          到防災易起來
                          <br />
                          提高防颱生存率
                      </a>
                      <Link to={getPathPrefix("/knowledge")} target="_blank">
                          看更多
                          <br />
                          防災知識補給
                      </Link>
                      <Link to={getPathPrefix("/")}>回到遊戲</Link>
                  </div>
              </EndingSection>
          </Wrapper>
          <Footer />
      </StyledAboutPage>
  );
};

const StyledAboutPage = styled.div`
  padding-top: 152px;

  ${respondTo.lg} {
    padding-top: 96px;
  }
`;

const Wrapper = styled.div`
    width: 734px;
    margin: 0 auto;

    color: var(--neutrals-700);
    padding-bottom: 150px;

    ${respondTo.lg} {
        width: 100vw;
        padding: 0 24px;
        padding-bottom: 120px;
    }

    .video-controller {
        margin-top: 40px;

        ${respondTo.lg} {
            margin-top: 24px;
        }
    }
`;

const Intro = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    font: var(--paragraph-2);
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;

    ${respondTo.lg} {
        margin-bottom: 32px;
        font: var(--mobile-paragraph-2);
    }

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

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

const ImageAndText = styled.div`
    padding: 48px;
    background: white;
    border: 4px solid var(--main-color-e);
    border-radius: 32px;
    box-shadow: 8px 9px 4px 0px rgba(0, 0, 0, 0.25);

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

    ${respondTo.lg} {
        padding: 56px 20px;
    }

    h2,
    h3 {
        text-align: center;
    }

    h2 {
        font: var(--headline-3);

        ${respondTo.lg} {
            font: var(--mobile-headline-3);
        }
    }

    h3 {
        font: var(--headline-5);
        margin-top: 8px;

        ${respondTo.lg} {
            font: var(--mobile-headline-5);
        }
    }

    p {
        font: var(--paragraph-2);
        margin-top: 16px;
        text-align: center;

        ${respondTo.lg} {
            font: var(--mobile-paragraph-2);
        }
    }

    .images {
        display: flex;
        gap: 16px;
        margin-top: 24px;

        ${respondTo.lg} {
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        figure {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            font: var(--small-text-1);
            font-weight: 700;

            ${respondTo.lg} {
                width: 100%;
            }

            img {
                border-radius: 24px;
                border: 2px solid var(--neutrals-700);

                ${respondTo.lg} {
                    width: 100%;
                    height: auto;
                    max-width: 400px;
                }
            }
        }
    }
`;

const EndingSection = styled.div`
    background: white;
    width: 716px;
    margin: 0 auto;
    margin-top: 72px;
    padding: 38px;
    border-radius: 20px;
    border: 4px solid var(--neutrals-700);
    color: var(--neutrals-700);
    padding-bottom: 60px;

    position: relative;
    

    ${respondTo.lg} {
        width: 100%;
        padding: 40px 28px;
        padding-bottom: 0;
        margin-top: 24px;
    }

    h3 {
        font: var(--headline-5);
        text-align: left;
        margin-bottom: 16px;

        ${respondTo.lg} {
            font: var(--mobile-headline-5);
        }
    }

    p {
        font: var(--paragraph-2);
        text-align: left;

        ${respondTo.lg} {
            font: var(--mobile-paragraph-2);
        }
    }

    .link-group {
        display: flex;
        gap: 24px;

        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 50%);

        ${respondTo.lg} {
            position: relative;
            left: 0;
            transform: none;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            margin: 0 auto;

            align-items: center;
            margin-bottom: -24px;
            margin-top: 40px;
        }

        a,
        button {
            padding: 12px 16px;
            border-radius: 8px;
            border: 3px solid var(--neutrals-700);

            text-align: center;
            font: var(--paragraph-2);
            font-weight: 700;
            background: white;

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

            width: 170px;
            box-shadow: 5px 4px 0px 0px #2b3247;
            transition: all 0.2s ease;

            ${respondTo.lg} {
                width: 100%;
                max-width: 400px;

                br {
                    display: none;
                }
            }

            &:hover {
                background: var(--main-color-a);
                transform: translate(5px, 4px);
                box-shadow: 0px 0px 0px 0px #2b3247;
            }
        }
    }
`;

export default AboutPage; 