import React from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { ChevUpGlyph } from '@orchard/frontend-react-components';

import heroGraphic from 'src/assets/splash-page-hero.svg';
import learnMoreIcon from 'src/assets/splash-page-learn-more.svg';
import feature1Icon from 'src/assets/splash-page-feature-1-icon.svg';
import feature2Icon from 'src/assets/splash-page-feature-2-icon.svg';
import feature3Icon from 'src/assets/splash-page-feature-3-icon.svg';
import feature1Graphic from 'src/assets/splash-page-feature-1-graphic.svg';
import feature2Graphic from 'src/assets/splash-page-feature-2-graphic.svg';
import feature3Graphic from 'src/assets/splash-page-feature-3-graphic.svg';

import messages from './i18n';

export const CLASS_NAME = 'SplashPage';

type NumberProps = {
    variant: 'orange' | 'indigo' | 'cyan';
    number: string;
};

const Number: React.FC<NumberProps> = ({ variant, number }) => (
    <div className={ `${CLASS_NAME}-number ${CLASS_NAME}-number--${variant}` }>
        <div className={ `${CLASS_NAME}-number-background` } />
        <div className={ `${CLASS_NAME}-number-content` }>
            { number }
        </div>
    </div>
);

const NewSplashPage = () => (
    <div className={ CLASS_NAME }>
        <div className={ `${CLASS_NAME}-content` }>
            <div className={ `${CLASS_NAME}-hero` }>
                <div className={ `${CLASS_NAME}-hero-text` }>
                    <div className={ `${CLASS_NAME}-hero-heading` }>
                        { formatMessage(messages.newHeadingLine1) }
                        <br />
                        { formatMessage(messages.newHeadingLine2) }
                    </div>
                    <div className={ `${CLASS_NAME}-hero-paragraph` }>{ formatMessage(messages.heroBodyText1) }</div>
                    <div className={ `${CLASS_NAME}-hero-paragraph` }>{ formatMessage(messages.heroBodyText2) }</div>
                    <div className={ `${CLASS_NAME}-hero-paragraph` }>{ formatMessage(messages.heroBodyText3) }</div>
                </div>
                <div className={ `${CLASS_NAME}-hero-image-container` }>
                    <img className={ `${CLASS_NAME}-hero-image` } src={ heroGraphic } alt="" />
                </div>
            </div>
            <div className={ `${CLASS_NAME}-summary` }>
                <div className={ `${CLASS_NAME}-summary-feature` }>
                    <img src={ feature1Icon } alt="" />
                    <div className={ `${CLASS_NAME}-summary-feature-heading` }>{ formatMessage(messages.feature1Heading) }</div>
                </div>
                <div className={ `${CLASS_NAME}-summary-feature` }>
                    <img src={ feature2Icon } alt="" />
                    <div className={ `${CLASS_NAME}-summary-feature-heading` }>{ formatMessage(messages.feature2Heading) }</div>
                </div>
                <div className={ `${CLASS_NAME}-summary-feature` }>
                    <img src={ feature3Icon } alt="" />
                    <div className={ `${CLASS_NAME}-summary-feature-heading` }>{ formatMessage(messages.feature3Heading) }</div>
                </div>
            </div>
            <div className={ `${CLASS_NAME}-learn-more` }>
                <img src={ learnMoreIcon } alt="" />
                <div className={ `${CLASS_NAME}-learn-more-text` }>{ formatMessage(messages.learnMore) }</div>
            </div>
            <div className={ `${CLASS_NAME}-feature` }>
                <div className={ `${CLASS_NAME}-feature-text` }>
                    <Number number="1" variant="orange" />
                    <div className={ `${CLASS_NAME}-feature-text-header` }>{ formatMessage(messages.feature1Heading) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature1BodyText1) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature1BodyText2) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature1BodyText3) }</div>
                </div>
                <div className={ `${CLASS_NAME}-feature-image-container` }>
                    <img className={ `${CLASS_NAME}-feature-image` } src={ feature1Graphic } alt="" />
                </div>
            </div>
            <div className={ `${CLASS_NAME}-feature` }>
                <div className={ `${CLASS_NAME}-feature-image-container` }>
                    <img className={ `${CLASS_NAME}-feature-image` } src={ feature2Graphic } alt="" />
                </div>
                <div className={ `${CLASS_NAME}-feature-text` }>
                    <Number number="2" variant="indigo" />
                    <div className={ `${CLASS_NAME}-feature-text-header` }>{ formatMessage(messages.feature2Heading) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature2BodyText1) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature2BodyText2) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature2BodyText3) }</div>
                </div>
            </div>
            <div className={ `${CLASS_NAME}-feature` }>
                <div className={ `${CLASS_NAME}-feature-text` }>
                    <Number number="3" variant="cyan" />
                    <div className={ `${CLASS_NAME}-feature-text-header` }>{ formatMessage(messages.feature3Heading) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature3BodyText1) }</div>
                    <div className={ `${CLASS_NAME}-feature-text-paragraph` }>{ formatMessage(messages.feature3BodyText2) }</div>
                </div>
                <div className={ `${CLASS_NAME}-feature-image-container` }>
                    <img className={ `${CLASS_NAME}-feature-image` } src={ feature3Graphic } alt="" />
                </div>
            </div>
            <button className={ `${CLASS_NAME}-back-to-top-button` } onClick={ () => window.scrollTo(0, 0) } type="button">
                <ChevUpGlyph />
                <div>{ formatMessage(messages.backToTop) }</div>
            </button>
        </div>
    </div>
);

export default NewSplashPage;