import { NextPage } from "next";
import NextImage from "next/image";
import React from "react";
import tw, { styled } from "twin.macro";
import { DiscordIcon, RssIcon, TwitterIcon } from "../components/Icons";
import { Link } from "../components/Link";
import { ArrowRight, Book, Code, Database, GitHub, Zap } from "react-feather";

const Home: NextPage = () => {
  return (
    <>
      <div tw="max-w-4xl">
        <h1 tw="text-5xl md:text-6xl font-bold mb-12">Introduction</h1>
        {/* Need to make this mobile friendly */}
        <div
          css={[
            `background: linear-gradient(83.84deg, rgba(149, 203, 233, 0.9) -3.34%, rgba(71, 201, 242, 0.135) 35.77%), linear-gradient(101.71deg, rgba(227, 167, 228, 0.048) 46.42%, rgba(238, 96, 215, 0.8) 94.51%), linear-gradient(149.12deg, #3308AD 13.67%, rgba(51, 8, 173, 0) 86.42%);`,
            tw`flex relative rounded-md w-full overflow-hidden`,
          ]}
        >
          <div tw="py-12 pl-12 z-10">
            <div tw="text-3xl font-bold text-white mb-4">Quickstart Guide</div>
            <div tw="text-xl font-normal text-white mb-12 max-w-md">
              A short guide on making your first deploy on Railway in a couple
              of minutes.
            </div>
            <ButtonLink
              href="/getting-started"
              tw="w-40 bg-pink-700 text-white text-center text-lg hover:bg-pink-500"
            >
              <div tw="flex flex-row justify-center items-center font-semibold">
                <ArrowRight tw="mr-1" />
                Get Started
              </div>
            </ButtonLink>
          </div>
          <div tw="absolute -bottom-8 right-0 opacity-50 z-0 lg:opacity-100">
            <NextImage
              src="/images/code-terminal.svg"
              alt="Graphic of Terminal"
              tw=""
              layout="intrinsic"
              height={350}
              width={310}
              quality={100}
            />
          </div>
        </div>

        <div tw="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-8">
          <OverviewLink href="reference/starters">
            <OverviewLinkIcon>
              <Zap size="28" tw="text-pink-800" />
            </OverviewLinkIcon>
            <OverviewLinkTextbox tw="">
              <OverviewLinkHeading>Starters</OverviewLinkHeading>
              <OverviewLinkText>
                See all starters you can deploy to get up and running on
                Railway.
              </OverviewLinkText>
            </OverviewLinkTextbox>
          </OverviewLink>
          <OverviewLink href="deploy/builds">
            <OverviewLinkIcon>
              <Code size="28" tw="text-pink-800" />
            </OverviewLinkIcon>
            <OverviewLinkTextbox tw="">
              <OverviewLinkHeading>Language Specific Apps</OverviewLinkHeading>
              <OverviewLinkText>
                Get information on how to deploy specific applications.
              </OverviewLinkText>
            </OverviewLinkTextbox>
          </OverviewLink>
          <OverviewLink href="develop/variables">
            <OverviewLinkIcon>
              <Database size="28" tw="text-pink-800" />
            </OverviewLinkIcon>
            <OverviewLinkTextbox tw="">
              <OverviewLinkHeading>Variables</OverviewLinkHeading>
              <OverviewLinkText>
                Understand how Railway handles variables on the platform.
              </OverviewLinkText>
            </OverviewLinkTextbox>
          </OverviewLink>
          <OverviewLink href="reference/guides">
            <OverviewLinkIcon>
              <Book size="28" tw="text-pink-800" />
            </OverviewLinkIcon>
            <OverviewLinkTextbox tw="">
              <OverviewLinkHeading>Guides</OverviewLinkHeading>
              <OverviewLinkText>
                Tutorials on common developer scenarios.
              </OverviewLinkText>
            </OverviewLinkTextbox>
          </OverviewLink>
        </div>
        <div tw="grid grid-cols-1 mt-14 items-center md:grid-cols-8">
          <div tw="bg-gray-100 rounded-md col-span-5 p-6">
            <div tw="flex text-base font-semibold mb-4">
              <GitHub tw="mr-2" /> Contributing
            </div>
            <div>
              <div>
                Each page footer contains an "Edit on GitHub" Link. Make a pull
                request, and we'll merge it!
              </div>
              <Link
                tw="flex text-pink-800 items-center mt-2 hover:text-pink-600"
                href="https://github.com/railwayapp/docs"
              >
                <span tw="mr-2">Docs Repository</span> <ArrowRight />
              </Link>
            </div>
          </div>
          <div tw="mt-8 flex flex-col ml-8 col-span-3 gap-4 md:mt-0">
            <OverviewSecondaryLink href="https://discord.gg/railway">
              <DiscordIcon tw="w-8 h-8" />
              <div>Join our Discord Server </div>
              <ArrowRight />
            </OverviewSecondaryLink>
            <OverviewSecondaryLink href="https://railway.app/changelog">
              <RssIcon tw="w-8 h-8 text-pink-700" />
              Check out the Changelog <ArrowRight />
            </OverviewSecondaryLink>
            <OverviewSecondaryLink href="https://twitter.com/Railway">
              <TwitterIcon tw="w-8 h-8" />
              Follow Us on Twitter <ArrowRight />
            </OverviewSecondaryLink>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

const ButtonLink = styled(Link)`
  ${tw`block font-medium rounded shadow`}
  ${tw`px-3 py-2`}
  ${tw`focus:outline-none`}
`;

const OverviewLink = styled(Link)`
  ${tw`flex border border-gray-100 rounded-md p-6 hover:bg-gray-100 hover:shadow-lg`}
`;

const OverviewLinkIcon = styled.div`
  ${tw`flex border border-pink-200 items-center p-4 h-16 w-16 rounded-md bg-background`}
`;

const OverviewLinkTextbox = styled.div`
  ${tw`ml-6`}
`;

const OverviewLinkHeading = styled.div`
  ${tw`font-semibold text-lg mb-1`}
`;

const OverviewLinkText = styled.div`
  ${tw`font-normal text-base text-gray-600`}
`;

const OverviewSecondaryLink = styled(Link)`
  ${tw`flex items-center gap-2 hover:text-pink-700`}
`;