import React from 'react'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

import Layout from 'components/layout'
import Button from 'react-uikit/button'
import {Link} from 'react-router-dom'

const PageNotFound = () => {
    const classes = bem.classNames('c-page-not-found')
    const contentClasses = bem.classNames('c-page-not-found__content')
    const headingClasses = bem.classNames('c-page-not-found__heading')
    const buttonClasses = bem.classNames('c-page-not-found__button')

    return (
        <Layout.Main className={classes}>
            <div className={contentClasses}>
                <h1 className={headingClasses}>Page Not Found</h1>
                <p>
                    Sorry, we can’t seem to find the page you were looking for.
                    You may have mistyped the address or the page no longer
                    exists.
                </p>
                <Button
                    className={buttonClasses}
                    variant="fail"
                    size="large"
                    title="Return to home"
                >
                    <Link to="/">Return to home</Link>
                </Button>
            </div>
        </Layout.Main>
    )
}

PageNotFound.pageTitle = 'Not Found'

export default PageNotFound