import { Navbar } from "@/components/sections/Navbar";
import { tenextButton as TenextButton } from "@/components/shared/Button";
import { PageContainer } from "@/components/shared/PageContainer";

export const metadata = {
  title: "Page not found",
};

export default function NotFound() {
  return (
    <>
      <Navbar />
      <main className="bg-white">
        <section className="flex min-h-[70vh] items-center px-[20px] py-[100px]">
          <PageContainer className="flex flex-col items-center text-center">
            <span className="gradient-text-purple font-[var(--font-manrope)] text-[clamp(90px,18vw,200px)] font-extrabold leading-none">
              404
            </span>
            <h1 className="mt-[10px] max-w-[620px] font-[var(--font-sora)] text-[clamp(28px,4vw,48px)] font-bold leading-[1.15] text-tenext-dark">
              We couldn&apos;t find that page
            </h1>
            <p className="mt-[20px] max-w-[520px] text-[16px] leading-[1.8] text-tenext-text-muted">
              The page you&apos;re looking for may have moved or no longer
              exists. Let&apos;s get you back on track.
            </p>
            <div className="mt-[40px] flex flex-wrap items-center justify-center gap-[16px]">
              <TenextButton
                href="/"
                variant="gradient-fill"
                className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-semibold"
                showArrow={false}
              >
                Back to home
              </TenextButton>
              <TenextButton
                href="/contacts"
                variant="gradient-border"
                className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
                showArrow={true}
              >
                Contact us
              </TenextButton>
            </div>
          </PageContainer>
        </section>
      </main>
    </>
  );
}