import Head from 'next/head';
import Link from 'next/link';
import { Button } from '~/components/ui/button';
import {
  ArrowRight,
} from 'lucide-react';
import Image from 'next/image';
import { BackgroundGradient } from '~/components/ui/background-gradient';
import { env } from '~/env';

export default function Home() {
  return (
    <>
      <Head>
        <title>SplitwiseLocal: Split Expenses with your friends for free</title>
        <meta name="description" content="SplitwiseLocal: Split Expenses with your friends for free" />
        <link rel="icon" href="/favicon.ico" />
        {process.env.NODE_ENV === 'production' && (
          <>
            <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
            <noscript>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="https://queue.simpleanalyticscdn.com/noscript.gif"
                alt=""
                referrerPolicy="no-referrer-when-downgrade"
              />
            </noscript>
          </>
        )}
      </Head>
      <main className="min-h-screen">
        <nav className="sticky mx-auto flex max-w-5xl items-center justify-between px-4   py-4 lg:px-0 lg:py-5">
          <div className="flex items-center gap-2">
            <p className="text-2xl font-medium">SplitwiseLocal</p>
          </div>
        </nav>
        <div className="mx-auto mt-20 flex w-full items-start justify-center  gap-16 px-4 lg:max-w-5xl lg:px-0 ">
          <div>
            <div className=" mb-32 text-center lg:mb-0 lg:h-[70vh] lg:text-left">
              <h1 className="max-w-3xl text-center text-2xl font-semibold leading-loose text-gray-100 lg:text-left lg:text-5xl lg:leading-[4rem]">
                Split Expenses with your friends for{' '}
                <span className="font-bold text-primary">free</span>.
              </h1>
              <h2 className="mt-5  text-gray-300  lg:mt-8 lg:text-lg">
                An{' '}
                <a
                  className="text-primary hover:underline"
                  href="https://github.com/oss-apps/split-pro"
                  target="_blank"
                >
                  open source
                </a>{' '}
                alternative to SplitWise
              </h2>
              <div className="mt-10 flex flex-col gap-6 lg:flex-row">
                <Link href="/auth/signin" className="mx-auto lg:mx-0">
                  <Button className="flex w-[200px] items-center gap-2 rounded-full">
                    Add Expense <ArrowRight size={15} />{' '}
                  </Button>
                </Link>
              </div>
              <div className=" mt-40"></div>
            </div>
            <div className="mb-20 mt-8 flex justify-center lg:hidden">
              <MobileScreenShot />
            </div>
          </div>
          <div className="sticky top-40 hidden shrink-0 lg:flex">
            <MobileScreenShot />
          </div>
        </div>
      </main>
    </>
  );
}

const MobileScreenShot = () => {
  return (
    <BackgroundGradient>
      <Image
        src="/hero.webp"
        className=" rounded-[22px] border bg-background"
        width={300}
        height={550}
        alt="hero"
      />
    </BackgroundGradient>
  );
};
