"use client"
import Footer from "@/components/layout/footer"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import { useRouter } from "next/navigation"

export default function Page() {
  const router = useRouter()
  return (
    <div className="flex min-h-screen flex-col px-4 py-6 sm:px-6 md:px-10">
      <div className="flex flex-1 flex-col items-center justify-center text-center">
        <Image
          src="/main-icon.png"
          width={160}
          height={160}
          alt="main-icon"
          className="mb-6 w-24 sm:w-28 md:w-32 lg:w-36"
        />

        <h1 className="font-heading text-center text-2xl leading-[120%] font-black tracking-[-0.4px] sm:text-3xl md:text-[36px] lg:text-[48px]">
          Selamat Datang <br /> di <br /> Silancar!
        </h1>

        <Button
          className="mt-8 h-11 w-full max-w-xs cursor-pointer rounded-lg sm:max-w-sm md:max-w-md"
          onClick={() => router.push("/auth/sign-in")}
        >
          Next →
        </Button>
      </div>

      <Footer />
    </div>
  )
}