import styled, { keyframes } from 'styled-components';
import { ImageWrapper } from '../../../components/MediaWrapper';
import { respondTo, useMediaSelectTo } from '../../../utils/responsive';

function StartView() {
    const { isMobile } = useMediaSelectTo();

    return (
        <StyledContainer>
            <ImageWrapper
                className="intro-kv"
                src="/images/game/start-kv.webp"
                m_src="/images/game/start-kv-m.webp"
            />
            <ImageWrapper
                src="/images/game/start-title.png"
                m_src="/images/game/start-title-m.png"
                alt="start-kv"
            />
        </StyledContainer>
    );
}

const floating = keyframes`
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
`;

const StyledContainer = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .intro-kv {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        ${respondTo.sm} {
            object-fit: cover;
        }
    }

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;

        animation: ${floating} 2s ease-in-out infinite;

        ${respondTo.sm} {
            object-fit: cover;
        }
    }
`;

export default StartView;
