import Background from "@/components/Utilities/Background";
import { title } from "@/constants";
import Image from "next/image";
import React from "react";

const SquaredBackgroundHero = () => {
  return (
    <>
      {/* Hero */}
      <Background>
        <div className="h-screen w-screen flex items-center">
          <div className="pt-12 md:max-w-[50rem] xl:max-w-[60rem] mx-auto px-6 sm:px-6 lg:px-8 md:pt-0">
            {/* Grid */}
            <div className="grid md:grid-cols-2 md:gap-0 xl:gap-20 md:items-center grid-flow-dense">
              <div className="order-1">
                <h1 className="block text-4xl font-extrabold sm:text-4xl lg:text-6xl leading-tight">
                  Build your app fast with{" "}
                  <span className="text-primary">{title}</span>
                </h1>
                <p className="mt-3 text-lg text-secondary-content">
                  Join in a tight knit community of like minded makers as we
                  build apps using Pocketbase and React
                </p>
                {/* Buttons */}
                <div className="mt-7 grid gap-3 w-full sm:inline-flex">
                  <a
                    className="py-3 px-4 inline-flex justify-center items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                    href="https://buy.stripe.com/4gwaGQa9egxb5rO9AA"
                  >
                    <Image
                      alt="fastpocket-icon"
                      src="/images/icon.webp"
                      width="32"
                      height="32"
                    />
                    Get FastPocket
                    <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>
                  </a>
                </div>
                {/* End Buttons */}
              </div>
              {/* End Col */}
              <div className="-order-1 relative mr-4 sm:mr-0 sm:ms-4 sm:order-1">
                <Image
                  priority
                  // className="w-full rounded-md"
                  width="352"
                  height="316"
                  src="/images/fastpocket-diagram_352x316.webp"
                  alt="FastPocket Diagram"
                />
                <div className="absolute inset-0 -z-[1] size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6" />
              </div>
              {/* End Col */}
            </div>
            {/* End Grid */}
          </div>
        </div>
      </Background>
      {/* End Hero */}
    </>
  );
};

export default SquaredBackgroundHero;