import Head from 'next/head';
import styles from '../styles/Showcase.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'
import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'
import { faQuoteRight } from '@fortawesome/free-solid-svg-icons'

export default function Showcase() {
    return (
        <div className={"page " + styles.showcase}>
            <Head>
                <title>{process.env.NEXT_PUBLIC_NAME} | Showcase</title>
            </Head>

            <section className="container">
                <article className="content">
                    <section>
                        <h2 className={"mt-reset"}>⭐ Highlighted clients</h2>
                        <h5>
                            {`
                                Take a look at some of our happy past clients and the websites we built for them.
                            `}
                        </h5>
                    </section>

                    <section className={styles.showcaseClient}>
                        <div>
                            <h3>🏘️ Larum Nidis</h3>
                            <p>{`
                                This site was built with Wordpress in 2019 for a Dutch client.
                                It is designed to mostly be a one-pager design, but can be extended to have more pages with ease.
                            `}</p>
                            <p>🌍 Visit <a href="https://larumnidis.nl/" target="_blank" rel="noreferrer">laurmnidis.nl</a></p>
                        </div>
                        <div>
                            <img src="/img/larumnidis.png" />
                        </div>
                    </section>

                    <section className={styles.showcaseClient}>
                        <div>
                            <h3>😎 Invesvpo</h3>
                            <p>
                                <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
                                {" Even though I had no idea of how I wanted my website to look, I think it turned out looking good. All I gave them to work with was a moodboard, but they kept in touch with me to make sure it was perfect. "}
                                <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
                            </p>
                            <p>🌍 Visit <a href="https://invesvpo.com/" target="_blank" rel="noreferrer">invesvpo.com</a></p>
                        </div>
                        <div>
                            <img src="/img/invesvpo.png" />
                        </div>
                    </section>

                    <section className={styles.showcaseClient}>
                        <div>
                            <h3>⛪ Life Centre Livingston</h3>
                            <p>{`
                                This site was made in 2018 with Wordpress for a local church and has many features like galleries, calendar,
                                blogging and file uploads.
                            `}</p>
                            <p>🌍 Visit <a href="https://lifecentrelivingston.com/" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></p>
                        </div>
                        <div>
                            <img src="/img/lifecentrelivingston.png" />
                        </div>
                    </section>

                    {/* <section className={styles.showcaseClient}>
                        <div>
                            <h3>🦊 Trick The Fox</h3>
                            <p>
                                <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
                                {" The site is amazing, the work that went into it is incredible. "}
                                {" The look and small details make it so 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>
                            <p>🌍 Visit <a href="https://trickthefox.com/" target="_blank" rel="noreferrer">trickthefox.com</a></p>
                        </div>
                        <div>
                            <img src="/img/trickthefox.png" />
                        </div>
                    </section> */}

                    {/* <hr/>

                    <section>
                        <h2>🏗️ Other experiences and projects</h2>
                        <h5>{`
                            In our every day lives we come across shortcomings or needs in technology, and sometimes we create our own solutions for them.
                            Sometimes we believe that these solutions could help more people and decide to release them publicly so that anyone can use them.
                            These applications also help us further showcase our quality and abilities to potential clients.
                            They are not ready for use yet, but you can still read more about them below.
                        `}</h5>

                        {`Maker, Picto Designer, Flame, The Moonlit Den, UNIVERSE`}
                    </section> */}
                </article>
            </section>
        </div>
    )
}