import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";

const ApplicationIntro = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-one-half">
                <h1 className="govuk-heading-l">Applications</h1>
                <p className="govuk-body">The applications listed are those:</p>
                <ul className="govuk-list govuk-list--bullet">
                    <li>
                        Where the developer has advised the Planning
                        Inspectorate in writing that they intend to submit an
                        application to us in the future
                    </li>
                    <li>
                        Where an application has already been made to the
                        Planning Inspectorate and is undergoing the examination
                        process
                    </li>
                    <li>Where a proposal has been decided.</li>
                </ul>
                <p>
                    Use the table below to find applications by stage or type.
                    Alternatively, use the map by clicking on the markers to go
                    to the applications page. A list of key events and deadlines
                    for all applications is available on our calendar page.
                </p>
            </div>
            <div className="govuk-grid-column-one-half">
                <img src="https://via.placeholder.com/450" />
            </div>
        </div>
    );
};

export default ApplicationIntro;