import Head from 'next/head'
import Link from 'next/link';
import Image from 'next/image'
import styles from '../styles/Index.module.css'
import Buttons from '../components/buttons'

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'
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'

import logo from '../public/img/logoblue.png'
import trick from '../public/img/trick.png'

export default function Home() {
    return (
        <div className={"page " + styles.index}>
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME} | {process.env.NEXT_PUBLIC_MOTTO}</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 IT development team from The Netherlands. We make and design web-based applications of all kinds including; "}
                        {"back-end servers, front-end experiences, mobile apps, and PWA. "}
                        {"As long as it's based on web protocols, we can make it."}
                    </h1>

                    <hr />

                    <section className={styles.features}>
                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faTractor} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Crystal clear sense</h3>
                                <p>
                                    {"We understand the struggle of long meetings only to still have misunderstandings. "}
                                    {"We are straight to the point and will inform you of your options upfront."}
                                </p>
                            </div>
                        </div>

                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faHandshake} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Service focused</h3>
                                <p>
                                    {"We can always work something out, even if what you need is not technically in our range of offerings. "}
                                    {"Our mission is to help make you succeed and own the IT space."}
                                </p>
                            </div>
                        </div>

                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faForward} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Future proof</h3>
                                <p>
                                    {"We work with the newest technologies and use agnostic systems to ensure they will keep working even if an individual piece gets outdated."}
                                </p>
                            </div>
                        </div>

                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faBatteryFull} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Involved and committed</h3>
                                <p>
                                    {"Our job resulted from our hobby as IT enthusiasts. Our enjoyment is to see your product succeed, so everything we do is geared towards that goal. "}
                                </p>
                            </div>
                        </div>

                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faMoneyBillWave} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Price minded</h3>
                                <p>
                                    {"We are a small startup with very little background costs. "}
                                    {"Those cost savings are directly forwarded to you, the client."}
                                </p>
                            </div>
                        </div>

                        <div className={styles.block}>
                            <FontAwesomeIcon fixedWidth icon={faStream} size="2x" style={{color: "var(--theme-color)"}} />
                            <div>
                                <h3>Flexible and versatile</h3>
                                <p>
                                    {"We work with a large range of technologies, "}
                                    {"but we're not afraid to try out new things if the situation calls for it either."}
                                </p>
                            </div>
                        </div>
                    </section>

                    <hr />

                    <section>
                        <h2>See what our customers say</h2>

                        <div className={styles.quote}>
                            <img src="/img/trick.png"/>
                            <div>
                                <p>
                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
                                    {" The site is amazing, the work that went into this is incredible. "}
                                    {" The look and small details make it so amazing. "}
                                    {" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "}
                                    {" They were always there to answer any questions I had and were happy to change the things I wanted. "}
                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
                                </p>
                                <br/>
                                <i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
                            </div>
                        </div>

                        <br/>

                        {/* <div className={styles.quote}>
                            <div>
                                <p>
                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
                                    {" Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    {"Lorem ipsum sodor dolor amalet. "}
                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
                                </p>
                                <br/>
                                <i>— Melvyn & Merete @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
                            </div>
                            <div>
                                <FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
                            </div>
                        </div> */}
                    </section>

                    <hr/>

                    <section>
                        <Buttons />
                    </section>
                </article>
            </section>
        </div>
    )
}