import React from "react";
import ModalLearnMore from "./ModalLearnMore/ModalLearnMore";
import { SourceModal } from "@/types";
import { Raleway } from "next/font/google";

const raleway = Raleway({
  variable: "--display-font",
  subsets: ["latin"],
});

function HeroHome() {
  const bookDemoOnClick = () => {
    const signUpModal = document.getElementById("sign-up-modal");
    if (!signUpModal) return;
    signUpModal.setAttribute("name", SourceModal.BookDemo);
    signUpModal.removeAttribute("price_id");
    signUpModal.click();
  };

  const learnMoreOnClick = () => {
    const learnMoreModal = document.getElementById("learn-more-modal");
    if (!learnMoreModal) return;
    learnMoreModal.click();
  };

  return (
    <section>
      <div className="max-w-6xl mx-auto px-4 sm:px-6 relative">
        {/* Hero content */}
        <div className="relative pt-[12rem] pb-10 md:pt-40 md:pb-16">
          {/* Section header */}
          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-10">
            <h1
              className={`${raleway.className} text-black dark:text-white font-raleway text-3xl leading-10   lg:py-12 tracking-[-1px] select-none w-[fit-content] md:leading-[6rem] m-auto  mb-4 lg:mb-0 md:text-[5.5rem]`}
              data-aos="fade-up"
            >
              Your Offline Digital Forms Simplified.
            </h1>
            <p
              className="text-lg font-semibold pb-12  mb-8 md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-pink-default to-purple-default w-[fit-content]  mx-auto"
              data-aos="fade-up"
              data-aos-delay="200"
            >
              Sign365
            </p>
            <div className="max-w-xs mx-auto mt-[8rem] sm:max-w-none sm:flex sm:justify-center md:mt-auto">
              <div data-aos="fade-up" data-aos-delay="400">
                <button
                  onClick={bookDemoOnClick}
                  className="btn text-base capitalize rounded text-white bg-pink-550 hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
                >
                  Book Demo
                </button>
              </div>
              <div data-aos="fade-up" data-aos-delay="600">
                <button
                  onClick={learnMoreOnClick}
                  className="btn text-base capitalize rounded text-white bg-gray-825 hover:bg-gray-650 w-full sm:w-auto sm:ml-4"
                >
                  Learn more
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ModalLearnMore />
    </section>
  );
}

export default HeroHome;