import * as _ from 'lodash';
import * as React from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import styled from 'styled-components';

import {Hero} from 'ts/@next/components/hero';

import { Banner } from 'ts/@next/components/banner';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';

import {Section, WrapSticky} from 'ts/@next/components/newLayout';

const offersData = [
    {
        icon: 'supportForAllEthereumStandards',
        title: 'Perfect for developers who need a simple drop-in marketplace',
        description: (
            <ul>
                <li>
                    Quickly launch a market for your project’s token
                </li>
                <li>
                    Seamlessly create an in-game marketplace for digital items and collectables
                </li>
                <li>
                    Easily build a 0x relayer for your local market
                </li>
            </ul>
        ),
    },
];

export class NextLaunchKit extends React.PureComponent {
    public render(): React.ReactNode {
        return (
            <SiteWrap theme="dark">
                <Hero
                    isLargeTitle={false}
                    isFullWidth={false}
                    title="0x Launch Kit"
                    description="Launch a relayer in under a minute"
                    figure={<Icon name="launchKit" size="hero" margin={['small', 0, 'small', 0]} />}
                    actions={<HeroActions/>}
                />

                <Section
                    bgColor="dark"
                    isFlex={true}
                    maxWidth="1170px"
                >
                    <Definition
                        title="Networked Liquidity Pool"
                        titleSize="small"
                        description="Tap into and share liquidity with other relayers"
                        icon="supportForAllEthereumStandards"
                        iconSize="medium"
                        isInline={true}
                    />

                    <Definition
                        title="Extensible Code Repo"
                        titleSize="small"
                        description="Fork and extend to support modes of exchange"
                        icon="code-repo"
                        iconSize="medium"
                        isInline={true}
                    />

                    <Definition
                        title="Exchange Ethereum based Tokens"
                        titleSize="small"
                        description="Enable trading for any ERC-20 or ERC-721 asset"
                        icon="eth-based-tokens"
                        iconSize="medium"
                        isInline={true}
                    />
                </Section>

                <Section>
                {_.map(offersData, (item, index) => (
                    <Definition
                        key={`offers-${index}`}
                        icon={item.icon}
                        title={item.title}
                        description={item.description}
                        isInlineIcon={true}
                        iconSize={240}
                    />
                ))}
                </Section>

                <Banner
                    heading="Need more flexibility?"
                    subline="Dive into our docs, or contact us if needed"
                    mainCta={{ text: 'Get Started', href: '/docs' }}
                    secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
                />
            </SiteWrap>
        );
    }
}

const HeroActions = () => (
    <>
        <Button href="https://0xproject.com/docs" isInline={true}>
            Get Started
        </Button>

        <Button to="/next/why" isTransparent={true} isInline={true}>
            Learn More
        </Button>
    </>
);

interface SectionProps {
    isNotRelative?: boolean;
}

const SectionWrap = styled.div<SectionProps>`
    position: ${props => !props.isNotRelative && 'relative'};

    & + & {
        padding-top: 60px;
        margin-top: 60px;
    }

    & + &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        background-color: #3d3d3d;
    }

    @media (min-width: 768px) {
        & + &:before {
            width: 100vw;
        }
    }

    @media (max-width: 768px) {
        text-align: left;

        & + &:before {
            width: 100%;
        }
    }
`;