import { type NextPage } from "next";
import Head from "next/head";
import { useSession } from "next-auth/react";
import { usePostHog } from "posthog-js/react";
import { useAtom } from "jotai";
import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
import VideoRecordModal from "~/components/VideoRecordModal";
import { ShareIcon } from "@heroicons/react/24/solid";
import { CheckIcon } from "@heroicons/react/20/solid";
import { CheckCircleIcon } from "@heroicons/react/24/outline";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import Image from "next/image";
import CTA from "~/components/CTA";
import engineeringUsecase from "~/assets/engineering usecase.png";
import supportUsecase from "~/assets/support usecase.png";
import logo from "~/assets/logo.png";
import { useRouter } from "next/router";
import { useEffect } from "react";

const Home: NextPage = () => {
  const [recordModalOpen, setRecordOpen] = useAtom(recordVideoModalOpen);
  const posthog = usePostHog();
  const session = useSession();
  const router = useRouter();

  useEffect(() => {
    if (session.status === "authenticated" && !recordModalOpen) {
      void router.push("/videos");
    }
  }, [session, router]);

  const openRecordModal = () => {
    if (
      !navigator?.mediaDevices?.getDisplayMedia &&
      !navigator?.mediaDevices?.getDisplayMedia
    ) {
      return alert("Your browser is currently NOT supported.");
    }
    setRecordOpen(true);

    posthog?.capture("open record video modal", {
      cta: "landing page",
    });
  };

  return (
    <>
      <Head>
        <title>Snapify | The Open Source Loom Alternative</title>
        <meta
          name="description"
          content="Share high-quality videos asynchronously and collaborate on your own schedule"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="bg-white">
        <Header />

        <div className="relative isolate px-6 pt-14 lg:px-8">
          <div className="mx-auto max-w-7xl py-32 sm:py-48 lg:py-56">
            {/*<div className="hidden sm:mb-8 sm:flex sm:justify-center">*/}
            {/*  <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">*/}
            {/*    Announcing our next round of funding.{" "}*/}
            {/*    <Link href="/blog" className="font-semibold text-indigo-600">*/}
            {/*      <span className="absolute inset-0" aria-hidden="true" />*/}
            {/*      Read more <span aria-hidden="true">&rarr;</span>*/}
            {/*    </Link>*/}
            {/*  </div>*/}
            {/*</div>*/}
            <div className="text-center">
              <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
                The open source Loom alternative.
              </h1>
              <p className="mt-6 text-lg leading-8 text-gray-600">
                Self-hosted or hosted by us. You are in control of your own
                data.
              </p>
              <div className="mt-10 flex items-center justify-center gap-x-6">
                <button
                  onClick={openRecordModal}
                  className="inline-flex h-[70px] flex-col items-center justify-between rounded-md border border-transparent bg-red-600 px-8 py-4 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                >
                  <span>Record a video</span>
                  <span className="text-xs">(no account required)</span>
                </button>
                <a
                  onClick={() => posthog?.capture("clicked schedule demo")}
                  target="_blank"
                  href="https://cal.com/marcon/snapify-demo"
                  className="text-sm font-semibold leading-6"
                >
                  Schedule Demo <span aria-hidden="true">→</span>
                </a>
              </div>
            </div>
          </div>

          <div className="mx-auto hidden max-w-7xl py-6 sm:py-6 lg:py-6">
            <div className="text-center">
              <p className="mt-6 text-xl font-semibold leading-8 text-gray-600">
                TRUSTED BY THE BEST BRANDS
              </p>
              <div className="relative flex overflow-x-hidden before:absolute before:left-0 before:z-10 before:h-full before:w-[15vw] before:bg-gradient-to-r before:from-white before:to-transparent after:absolute after:right-0 after:h-full after:w-[15vw] after:bg-gradient-to-r after:from-transparent after:to-white">
                {[1, 2].map((x) => (
                  <div
                    key={x}
                    className={`flex flex-row whitespace-nowrap py-12 ${
                      x === 1
                        ? "animate-marquee"
                        : "absolute top-0 animate-marquee2"
                    }`}
                  >
                    {[
                      {
                        url: "https://producthunt.com/",
                        image:
                          "data:image/svg+xml;base64, ",
                        title: "",
                      },
                      {
                        url: "https://samsung.com",
                        image:
                          "data:image/svg+xml,%3Csvg xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' id='svg2' xml:space='preserve' width='7051.4023' height='1080' viewBox='0 0 7051.4024 1080' sodipodi:docname='Samsung_wordmark.svg' inkscape:version='1.1 (c68e22c387, 2021-05-23)'%3E%3Csodipodi:namedview id='namedview11' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:pageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' showgrid='false' fit-margin-top='0' fit-margin-left='0' fit-margin-right='0' fit-margin-bottom='0' inkscape:zoom='0.059829465' inkscape:cx='2849.7664' inkscape:cy='1429.0617' inkscape:window-width='1920' inkscape:window-height='1017' inkscape:window-x='1912' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:current-layer='svg2'/%3E%3Cdefs id='defs6'%3E%3CclipPath clipPathUnits='userSpaceOnUse' id='clipPath16'%3E%3Cpath d='M 0,166.885 H 628.238 V 0 H 0 Z' id='path14'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='g8' transform='matrix(12.944053,0,0,-12.944053,-540.03625,1620.0233)'%3E%3Cg id='g10'%3E%3Cg id='g12' clip-path='url(%23clipPath16)'%3E%3Cg id='g18' transform='translate(558.9328,88.5098)'%3E%3Cpath d='m 0,0 v -11.358 h 7.982 v -11.269 c 0.025,-1.007 -0.03,-2.093 -0.203,-2.962 -0.317,-2.102 -2.314,-5.681 -7.98,-5.681 -5.632,0 -7.593,3.579 -7.933,5.681 -0.143,0.869 -0.204,1.955 -0.204,2.962 v 35.593 c 0,1.259 0.085,2.637 0.352,3.68 0.387,1.897 2.068,5.638 7.743,5.638 5.957,0 7.444,-3.944 7.785,-5.638 0.224,-1.122 0.237,-3.004 0.237,-3.004 V 9.32 h 19.613 v 2.555 c 0,0 0.089,2.666 -0.149,5.154 C 25.769,31.638 13.732,36.26 -0.07,36.26 c -13.827,0 -25.62,-4.665 -27.338,-19.231 -0.155,-1.332 -0.392,-3.728 -0.392,-5.154 v -32.742 c 0,-1.426 0.046,-2.53 0.31,-5.136 1.28,-14.207 13.593,-19.243 27.365,-19.243 13.857,0 26.085,5.036 27.387,19.243 0.231,2.606 0.255,3.71 0.286,5.136 V 0 Z m -135.235,34.165 h -19.696 v -57.613 c 0.031,-1.004 0,-2.132 -0.173,-2.959 -0.411,-1.934 -2.05,-5.656 -7.484,-5.656 -5.364,0 -7.046,3.722 -7.426,5.656 -0.197,0.827 -0.222,1.955 -0.197,2.959 v 57.613 h -19.69 V -21.66 c -0.025,-1.439 0.088,-4.379 0.173,-5.149 1.359,-14.547 12.824,-19.27 27.14,-19.27 14.344,0 25.802,4.723 27.186,19.27 0.109,0.77 0.252,3.71 0.167,5.149 z m -180.97,0 -9.825,-60.876 -9.819,60.876 h -31.771 l -1.685,-77.878 h 19.464 l 0.527,72.094 13.392,-72.094 h 19.748 l 13.404,72.094 0.529,-72.094 h 19.513 l -1.742,77.878 z m -117.631,0 -14.426,-77.878 h 21.037 l 10.871,72.094 10.61,-72.094 h 20.891 l -14.366,77.878 z m 367.435,-62.701 -18.34,62.701 h -28.9 v -77.066 h 19.118 l -1.11,64.707 19.696,-64.707 h 27.717 v 77.066 h -19.243 z m -176.838,42.433 c -0.346,1.538 -0.246,3.172 -0.067,4.026 0.557,2.493 2.232,5.212 7.058,5.212 4.498,0 7.135,-2.804 7.135,-7.012 v -4.762 h 19.2 v 5.428 c 0,16.78 -15.044,19.416 -25.936,19.416 -13.718,0 -24.921,-4.522 -26.967,-17.148 -0.541,-3.436 -0.675,-6.486 0.186,-10.378 3.336,-15.743 30.743,-20.31 34.721,-30.266 0.702,-1.886 0.501,-4.291 0.143,-5.708 -0.596,-2.591 -2.339,-5.197 -7.506,-5.197 -4.846,0 -7.763,2.786 -7.763,6.985 l -0.006,7.474 h -20.666 v -5.941 c 0,-17.215 13.484,-22.409 28.007,-22.409 13.909,0 25.397,4.753 27.24,17.637 0.879,6.657 0.216,10.993 -0.137,12.626 -3.22,16.147 -32.431,21.004 -34.642,30.017 m -253.273,0.191 c -0.377,1.57 -0.289,3.227 -0.079,4.091 0.532,2.481 2.217,5.248 7.128,5.248 4.555,0 7.237,-2.831 7.237,-7.073 v -4.82 h 19.425 v 5.471 c 0,16.941 -15.274,19.641 -26.285,19.641 -13.833,0 -25.136,-4.592 -27.204,-17.309 -0.566,-3.491 -0.663,-6.562 0.155,-10.497 3.372,-15.922 31.05,-20.526 35.077,-30.601 0.754,-1.873 0.526,-4.278 0.152,-5.75 -0.639,-2.618 -2.396,-5.261 -7.606,-5.261 -4.865,0 -7.775,2.834 -7.775,7.091 l -0.027,7.494 h -20.898 v -5.955 c 0,-17.412 13.675,-22.648 28.311,-22.648 14.071,0 25.626,4.795 27.511,17.828 0.937,6.718 0.234,11.09 -0.082,12.748 -3.287,16.345 -32.823,21.186 -35.04,30.302' style='fill:%231428a0;fill-opacity:1;fill-rule:nonzero;stroke:none' id='path20'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
                        title: "",
                      },
                      {
                        url: "https://stripe.com",
                        image:
                          "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NjggMjIyLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2OCAyMjIuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiM2MzVCRkY7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTQsMTEzLjRjMC0yNS42LTEyLjQtNDUuOC0zNi4xLTQ1LjhjLTIzLjgsMC0zOC4yLDIwLjItMzguMiw0NS42YzAsMzAuMSwxNyw0NS4zLDQxLjQsNDUuMwoJCWMxMS45LDAsMjAuOS0yLjcsMjcuNy02LjV2LTIwYy02LjgsMy40LTE0LjYsNS41LTI0LjUsNS41Yy05LjcsMC0xOC4zLTMuNC0xOS40LTE1LjJoNDguOUM0MTMuOCwxMjEsNDE0LDExNS44LDQxNCwxMTMuNHoKCQkgTTM2NC42LDEwMy45YzAtMTEuMyw2LjktMTYsMTMuMi0xNmM2LjEsMCwxMi42LDQuNywxMi42LDE2SDM2NC42eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMwMS4xLDY3LjZjLTkuOCwwLTE2LjEsNC42LTE5LjYsNy44bC0xLjMtNi4yaC0yMnYxMTYuNmwyNS01LjNsMC4xLTI4LjNjMy42LDIuNiw4LjksNi4zLDE3LjcsNi4zCgkJYzE3LjksMCwzNC4yLTE0LjQsMzQuMi00Ni4xQzMzNS4xLDgzLjQsMzE4LjYsNjcuNiwzMDEuMSw2Ny42eiBNMjk1LjEsMTM2LjVjLTUuOSwwLTkuNC0yLjEtMTEuOC00LjdsLTAuMS0zNy4xCgkJYzIuNi0yLjksNi4yLTQuOSwxMS45LTQuOWM5LjEsMCwxNS40LDEwLjIsMTUuNCwyMy4zQzMxMC41LDEyNi41LDMwNC4zLDEzNi41LDI5NS4xLDEzNi41eiIvPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIyMjMuOCw2MS43IDI0OC45LDU2LjMgMjQ4LjksMzYgMjIzLjgsNDEuMyAJIi8+Cgk8cmVjdCB4PSIyMjMuOCIgeT0iNjkuMyIgY2xhc3M9InN0MCIgd2lkdGg9IjI1LjEiIGhlaWdodD0iODcuNSIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE5Ni45LDc2LjdsLTEuNi03LjRoLTIxLjZ2ODcuNWgyNVY5Ny41YzUuOS03LjcsMTUuOS02LjMsMTktNS4ydi0yM0MyMTQuNSw2OC4xLDIwMi44LDY1LjksMTk2LjksNzYuN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNDYuOSw0Ny42bC0yNC40LDUuMmwtMC4xLDgwLjFjMCwxNC44LDExLjEsMjUuNywyNS45LDI1LjdjOC4yLDAsMTQuMi0xLjUsMTcuNS0zLjNWMTM1CgkJYy0zLjIsMS4zLTE5LDUuOS0xOS04LjlWOTAuNmgxOVY2OS4zaC0xOUwxNDYuOSw0Ny42eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTc5LjMsOTQuN2MwLTMuOSwzLjItNS40LDguNS01LjRjNy42LDAsMTcuMiwyLjMsMjQuOCw2LjRWNzIuMmMtOC4zLTMuMy0xNi41LTQuNi0yNC44LTQuNgoJCUM2Ny41LDY3LjYsNTQsNzguMiw1NCw5NS45YzAsMjcuNiwzOCwyMy4yLDM4LDM1LjFjMCw0LjYtNCw2LjEtOS42LDYuMWMtOC4zLDAtMTguOS0zLjQtMjcuMy04djIzLjhjOS4zLDQsMTguNyw1LjcsMjcuMyw1LjcKCQljMjAuOCwwLDM1LjEtMTAuMywzNS4xLTI4LjJDMTE3LjQsMTAwLjYsNzkuMywxMDUuOSw3OS4zLDk0Ljd6Ii8+CjwvZz4KPC9zdmc+Cg==",
                        title: "",
                      },
                      {
                        url: "https://ycombinator.com",
                        image:
                          "data:image/svg+xml;base64, ",
                        title: "",
                      },
                    ].map(({ url, image, title }) => (
                      <div
                        key={url}
                        className="mr-8 h-[54px] min-w-[250px] overflow-hidden"
                      >
                        <a href={url} target="_blank">
                          <Image
                            src={image}
                            alt={title}
                            className="h-[54px] w-[250px]"
                            width="250"
                            height="54"
                          />
                        </a>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
              <div className="mt-4 flex flex-row items-center justify-center gap-x-8 overflow-hidden">
                <div className="animate-slide mt-4 flex flex-row items-center justify-center gap-x-8"></div>
              </div>
            </div>
          </div>

          <div className="mx-auto max-w-7xl py-32">
            <div className="flex flex-col text-center">
              <span className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
                How does Snapify work?
              </span>
              <span className="mt-4 text-[#6c6684]">
                Get started easily. Share video instantly.
              </span>
            </div>
            <div className="mt-6 flex flex-col gap-x-6 xl:mt-16 xl:flex-row xl:gap-x-20">
              <div className="mt-24 flex flex-1 flex-col items-center justify-center gap-8 xl:flex-row xl:items-start xl:gap-12">
                {[
                  {
                    icon: (
                      <Image
                        src={logo}
                        alt="logo"
                        width={48}
                        height={48}
                        unoptimized
                      />
                    ),
                    title: "1. Record a video message",
                    description:
                      "Record a short video of your screen with just a few clicks. No installations required.",
                  },
                  {
                    icon: <ShareIcon className="h-12 w-12" />,
                    title: "2. Share with a link",
                    description:
                      "Simply share a link to your video message. Your recipients can watch it right then and there without the need to create an account or sign in.",
                  },
                  {
                    icon: <CheckCircleIcon className="h-12 w-12" />,
                    title: "3. Get work done",
                    description:
                      "Get feedback, gather opinions, make decisions and more.",
                  },
                ].map(({ title, description, icon }) => (
                  <div
                    key={title}
                    className="flex w-full max-w-[600px] gap-x-4 xl:max-w-none"
                  >
                    <div className="shrink-0">{icon}</div>
                    <div className="flex flex-col">
                      <span className="mb-4 text-[32px]">{title}</span>
                      <span>{description}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="mx-auto max-w-7xl py-32">
            <div className="flex flex-col items-center justify-center text-center">
              <span className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
                Ways to Use Snapify
              </span>
              <span className="mt-4 max-w-[75%] text-[#6c6684]">
                Snapify helps you get your message across quickly and clearly
                whether you’re sharing an update with your team, documenting a
                bug, or demoing an app.
              </span>
            </div>
            <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
              {[
                {
                  title: "Engineering",
                  description:
                    "Review, document, and collaborate across engineering teams using async video.",
                  features: [
                    "To improve code reviews",
                    "To centralize team knowledge",
                    "To collaborate asynchronously",
                  ],
                  image: engineeringUsecase,
                },
                {
                  title: "Support",
                  description:
                    "Discover a whole new way to delight customers and reach resolutions faster.",
                  features: [
                    "To provide visual support",
                    "To improve self-serve content",
                    "To accelerate team onboarding",
                  ],
                  image: supportUsecase,
                },
              ].map(({ title, description, features, image }) => (
                <div
                  key={title}
                  className="mx-auto max-w-[600px] flex-1 overflow-hidden rounded-lg border border-[#eaeaea]"
                >
                  <div className="flex flex-col pb-2 pt-8">
                    <div className="flex flex-col px-8">
                      <span className="mb-3 text-xl font-semibold">
                        {title}
                      </span>
                      <span className="text-[#666]">{description}</span>
                    </div>
                    <div className="mx-8 mt-4 border-t border-[#eaeaea] pt-4">
                      {features.map((feature) => (
                        <div key={feature} className="mb-2 flex flex-row">
                          <CheckIcon className="h-6 w-6" />
                          <span className="text-md ml-4">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  <Image
                    src={image}
                    width={600}
                    height={575}
                    alt="usecase cover"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="flex w-full items-center justify-center border-y border-[#eaeaea] bg-[#fafafa]">
          <div className="flex max-w-7xl flex-1 flex-col items-center justify-center py-4 lg:h-[140px] lg:flex-row">
            {[
              { stat: "data served", value: "16GB" },
              { stat: "videos viewed", value: "650" },
              { stat: "videos created", value: "260" },
              { stat: "uptime", value: "99.9%" },
            ].map(({ stat, value }) => (
              <div
                key={stat}
                className="flex flex-1 flex-col py-5 text-center lg:border-r lg:border-[#eaeaea] lg:py-0 lg:last:border-r-0"
              >
                <span className="text-6xl font-bold text-black">{value}</span>
                <span className="pt-2 text-sm font-semibold uppercase text-[#666]">
                  {stat}
                </span>
              </div>
            ))}
          </div>
        </div>

        <CTA />

        <Footer />
      </div>

      <VideoRecordModal />
    </>
  );
};

export default Home;
