import { BsApple, BsWindows } from "react-icons/bs";

import FullMottoLogo from "../../components/logo/fullMotto";
import Head from "next/head";
import HorizontalLogo from "../../components/logo/horizontal";
import Image from "next/image";
import { LogoType } from "../../components/logo/full";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Nirvana - virtual office</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/logos/1024x1024.ico" />
      </Head>

      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
        {/* header */}
        <div className="container mx-auto p-0 flex flex-row justify-start">
          {/* <img className="text-md" src={"/logos/horizontal.svg"} /> */}
          <HorizontalLogo className="scale-[0.5]" />
        </div>

        <div className="container mx-auto px-20">
          {/* above fold experience */}
          <div className="flex flex-row items-center space-x-10 mt-10">
            <div className="flex flex-col items-start">
              <span className="text-white text-6xl leading-[1.2] font-extrabold">
                The <span className="text-nirvanaTeal">walkie-talkie</span>{" "}
                <br /> for remote teams.
              </span>

              <span className="text-zinc-400 text-xl mt-5">
                The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
                approach. Skip zoom scheduling, <br></br> slack notifications,
                and email threads. <br /> Just talk to your team.
              </span>

              {/* download */}
              <span className="flex flex-col justify-start mt-20">
                <span className="text-white font-bold text-md mb-2">
                  Download the desktop app
                </span>

                <span className="flex flex-row space-x-2">
                  <span className="p-2 rounded bg-zinc-500 cursor-pointer">
                    <BsWindows className="text-white text-xl" />
                  </span>

                  <span className="p-2 rounded bg-zinc-500 cursor-pointer">
                    <BsApple className="text-white text-xl" />
                  </span>
                </span>
              </span>
            </div>

            <img
              src="/illustrations/undraw_co-working_re_w93t.svg"
              className="h-[30em]"
            />
          </div>

          {/* value points */}
        </div>

        {/* footer */}
        <div className="container mx-auto flex justify-center mt-auto">
          <FullMottoLogo className="mx-auto text-center scale-50" />
        </div>
      </main>
    </>
  );
};

export default Home;
