"use client";
import React from "react";
import { useRouter } from "next/navigation";

function Page4() {
  const router = useRouter();

  const handleContinue = () => {
    localStorage.removeItem("verification_value");
    router.push("/SignIn");
  };

  return (
    <>
      <div className="relative w-full h-screen">
        {/* Background Image */}
        <img
          src="/assets/BackgroundImageAppInstallation.png"
          alt="Background"
          className="object-cover w-full h-full"
        />

        {/* Overlay Content */}
        <div className="absolute inset-0 flex flex-col">
          {/* Top Right Logo and Snapta */}
          <div className="flex justify-center p-12 sm:justify-end">
            <div className="flex items-center gap-3">
              <img
                src="/assets/logo.png"
                alt="Logo"
                width={40}
                height={40}
                className="w-10 h-10 2xl:w-12 2xl:h-12"
              />
              <img
                src="/assets/snapta.png"
                alt="Snapta"
                className="pt-1 w-28"
                width={170}
                height={32}
              />
            </div>
          </div>

          {/* Center Title */}
          <div className="justify-center">
            <h2 className="text-[#000000] sm:text-4xl text-xl font-semibold font-poppins text-center">
              Snapta App Software Installation
            </h2>
            <p className="text-[#000000] font-poppins text-base text-center pt-2">
              Please make sure the PHP extensions listed below are installed
            </p>
          </div>

          {/* No. of Steps */}
          <div className="flex justify-center py-3 sm:gap-3 place-items-center">
            <button
              className={`rounded-full px-5 py-2 bg-button-gradient text-[#FFFFFF] font-poppins`}
            >
              1
            </button>
            <img src="/assets/DarkStroke.png" className="w-16" />
            <button
              className={`rounded-full px-4 py-2 bg-button-gradient text-[#FFFFFF] font-poppins`}
            >
              2
            </button>
            <img src="/assets/DarkStroke.png" className="w-16" />
            <button
              className={`rounded-full px-4 py-2 bg-button-gradient text-[#FFFFFF] font-poppins`}
            >
              3
            </button>
            <img src="/assets/DarkStroke.png" className="w-16" />
            <button
              className={`rounded-full px-4 py-2 bg-button-gradient text-[#FFFFFF] font-poppins`}
            >
              4
            </button>
            <img src="/assets/DarkStroke.png" className="w-16" />
            <button
              className={`rounded-full px-4 py-2 bg-button-gradient text-[#FFFFFF] font-poppins`}
            >
              5
            </button>
          </div>

          {/* Centered Div */}

          <div className="flex justify-center py-6 sm:w-full w-fit ">
            <div
              className="bg-[#FFFFFF]  sm:w-[950px] rounded-md p-6"
              style={{ boxShadow: "8px 9px 55.9px 0px #00000033" }}
            >
              <div className="justify-between sm:flex">
                <h2 className="font-poppins text-[#000000] text-base flex flex-row">
                  Step 4 :
                  <div className="flex flex-col">
                    <span className="font-poppins text-[#555555] text-base pl-1">
                      Installation Complete
                    </span>
                    <span className="text-[#000000] text-sm sm:block hidden font-poppins pl-1">
                      Your setup is successfull now you can go to Admin or
                      Website login
                    </span>
                  </div>
                </h2>
                <span className="text-[#000000] text-sm  font-poppins sm:hidden block">
                  Your setup is successfull now you can go to Admin or Website
                  login
                </span>
                <div className="flex gap-1 place-items-center">
                  <a
                    target="_blank"
                    href="https://document.snapta.online/"
                    className="font-poppins text-[#435CFF] underline text-xs cursor-pointer"
                  >
                    Read documentation
                  </a>

                  <img src="/assets/info-circle..png" className="w-3 h-3" />
                </div>
              </div>
              {/* Inner Div */}
              <div className="flex justify-center py-4 xl:py-3 sm:px-4">
                <div
                  className="sm:w-[800px] place-items-center rounded-lg py-12 px-10"
                  style={{ boxShadow: "8px 9px 55.9px 0px #00000033" }}
                >
                  <h2 className="text-[#000000] font-poppins font-semibold text-center">
                    All Done!
                  </h2>
                  <img src="/assets/DoneTick.png" className="w-20 py-4" />
                  <div className="flex gap-3">
                    <button className="font-poppins text-[#FFFFFF] py-2 bg-button-gradient rounded-lg px-6 mt-8">
                      <a
                        href="https://admin.snapta.online/"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        Continue to Admin
                      </a>
                    </button>
                    <button
                      onClick={handleContinue}
                      className="font-poppins text-[#FFFFFF] py-2 bg-button-gradient rounded-lg px-6 mt-8"
                    >
                      Continue to Website
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* Divider */}
          <div className="flex justify-center py-2">
            <div className="bg-[#CCCCCC] h-[2px] w-[950px]"></div>
          </div>

          {/* Logo */}
          <div className="sm:flex justify-between w-full max-w-[970px] mx-auto px-4 pb-4 sm:pb-0">
            <div className="flex items-center gap-2">
              <img
                src="/assets/logo.png"
                alt="Logo"
                className="w-5 h-5 sm:w-7 sm:h-7"
              />
              <img
                src="/assets/snapta.png"
                alt="Snapta"
                className="w-16 pt-1 sm:w-20"
              />
            </div>

            <p className="font-poppins text-[#535353] text-sm">
              @2025 | All rights reserved by{" "}
              <a
                className="text-[#2A2A2A] underline font-semibold cursor-pointer"
                href="https://primocys.com/"
                target="_blank"
              >
                Primocys
              </a>
              .
            </p>
          </div>
        </div>
      </div>
    </>
  );
}

export default Page4;