import Logo from "@/components/Logo";
import Icon from "@/components/icon";
import React from "react";

const WaitingListWithImageHero = () => {
  const isDarkMode = () =>
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches;
  return (
    <div
      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed"
      style={{
        backgroundImage: isDarkMode()
          ? "linear-gradient(rgba(0, 0, 0, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)"
          : "linear-gradient(rgba(255, 255, 255, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)",
      }}
    >
      <div className="h-screen  w-full bg-clip flex items-center justify-center">
        <div className="text-center py-8 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl text-black dark:text-white sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
            <Icon name="LeafThree24Filled" size="xlarge" />
            Bethel Farms
          </h1>
          <h2 className="text-2xl text-black dark:text-white sm:text-4xl">
            Get notified when we launch
          </h2>
          <form>
            <div className="mt-8 space-y-4">
              <div>
                <label
                  htmlFor="hs-cover-with-gradient-form-name-1"
                  className="sr-only"
                >
                  Full name
                </label>
                <div className="relative">
                  <input
                    type="text"
                    id="hs-cover-with-gradient-form-name-1"
                    className="  py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 placeholder:text-black dark:placeholder:text-white  placeholder:text-black dark:text-white rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
                    placeholder="Full name"
                  />
                  <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                    <svg
                      className="flex-shrink-0 size-4 text-black  dark:text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      width={24}
                      height={24}
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                      <circle cx={12} cy={7} r={4} />
                    </svg>
                  </div>
                </div>
              </div>
              <div>
                <label
                  htmlFor="hs-cover-with-gradient-form-email-1"
                  className="sr-only"
                >
                  Email address
                </label>
                <div className="relative">
                  <input
                    type="email"
                    id="hs-cover-with-gradient-form-email-1"
                    className=" py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-black  placeholder:text-black dark:placeholder:text-white dark:text-white rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
                    placeholder="Email address"
                  />
                  <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                    <svg
                      className="flex-shrink-0 size-4 text-black  dark:text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      width={24}
                      height={24}
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2}
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <rect width={20} height={16} x={2} y={4} rx={2} />
                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                  </div>
                </div>
              </div>
              <div className="grid">
                <button
                  type="submit"
                  className=" sm:p-4 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white/10 text-black dark:text-white hover:bg-white/20 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                >
                  Join the waitlist
                  <svg
                    className="flex-shrink-0 size-4"
                    xmlns="http://www.w3.org/2000/svg"
                    width={24}
                    height={24}
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="m9 18 6-6-6-6" />
                  </svg>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default WaitingListWithImageHero;