import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTractor } from '@fortawesome/free-solid-svg-icons'
import { faBatteryFull } from '@fortawesome/free-solid-svg-icons'
import { faHandshake } from '@fortawesome/free-solid-svg-icons'
import { faMoneyBillWave } from '@fortawesome/free-solid-svg-icons'
import { faForward } from '@fortawesome/free-solid-svg-icons'
import { faStream } from '@fortawesome/free-solid-svg-icons'

export default function Home() {
    return (
        <div className="page">
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME}</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
            </Head>

            <section className="container">
                <section className={styles.banner}>
                    <h1>{process.env.NEXT_PUBLIC_MOTTO}</h1>
                </section>

                <article className={"content " + styles.indexanim}>
                    <h1 className={styles.description}>
                        DubbelNull is a small 2-man startup from The Netherlands developing and designing web applications. 
                        We make all kinds of things with a range of technologies like Laravel, NextJS and Wordpress.
                    </h1>

                    <hr />

                    <div className={styles.features}>
                        <div>
                            <section>
                                <FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Crystal clear sense</h3>
                                    <p>Farm based hosting</p>
                                </div>
                            </section>

                            <section>
                                <FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Service focused</h3>
                                    <p>Need something we don't explicitly offer? We can always work something out.</p>
                                </div>
                            </section>

                            <section>
                                <FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Future proof</h3>
                                    <p>Yes</p>
                                </div>
                            </section>
                        </div>

                        <div>
                            <section>
                                <FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Involved and committed</h3>
                                    <p>Yes</p>
                                </div>
                            </section>

                            <section>
                                <FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Price minded</h3>
                                    <p>Take advantage of the small scale of a startup's cost advantage</p>
                                </div>
                            </section>

                            <section>
                                <FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
                                <div>
                                    <h3>Flexible and versatile</h3>
                                    <p>Yes</p>
                                </div>
                            </section>
                        </div>
                    </div>
                </article>
            </section>
        </div>
    )
}