import type { Metadata } from "next";
import {
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import { twitterHandle } from "@/lib/seo";
import { siteName } from "@/lib/site-content";

const title = "Página não encontrada";
const description = "A página que você procura não existe ou foi movida.";

// O Next já escreve <meta name="robots" content="noindex"> em toda página 404; repetir `robots` aqui duplicaria a tag.
// O layout raiz libera a indexação para o Googlebot, então só essa regra é trocada. A canônica da home também não vale num 404.
// O cartão de compartilhamento é o do próprio 404 e fica sem `url`: o endereço pedido não existe, e o `og:url` da home
// (herdado do layout, que é substituído por inteiro quando a página define `openGraph`) apontaria a prévia para outra página.
export const metadata: Metadata = {
  title,
  description,
  alternates: { canonical: null },
  robots: { googleBot: { index: false, follow: false } },
  openGraph: {
    locale: "pt_BR",
    title,
    description,
    siteName,
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title,
    description,
    creator: twitterHandle,
  },
};

export default function NotFound() {
  return (
    <main className="flex min-h-screen items-center bg-[var(--ink)] px-sp-6 py-sp-16 font-display text-[#f4f2ed] lg:px-sp-12">
      <div className="ds-section-shell grid items-center gap-sp-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,520px)]">
        <div>
          <h1 className="text-[clamp(64px,12vw,96px)] font-semibold leading-none tracking-[-0.04em]">
            404
          </h1>
          <h2 className="mt-sp-4 text-[clamp(22px,3vw,30px)] font-semibold leading-[1.15] tracking-[-0.02em]">
            Página não encontrada
          </h2>
          <p className="mt-sp-4 max-w-[34em] text-[17px] leading-[1.55] text-[rgba(244,242,237,.72)]">
            A página que você está procurando não existe ou foi movida.
          </p>
          <div className="mt-sp-8 flex flex-col gap-sp-3 sm:flex-row">
            <HoverPrefetchLink href="/" className={primaryButton}>
              Voltar ao início
            </HoverPrefetchLink>
            <HoverPrefetchLink href="/cases" className={secondaryButtonDark}>
              Ver os cases
            </HoverPrefetchLink>
          </div>
        </div>

        <div
          aria-hidden="true"
          className="order-first mx-auto aspect-[16/10] w-full max-w-[280px] overflow-hidden lg:order-none lg:max-w-none"
        >
          <video
            className="block h-full w-full object-cover motion-reduce:hidden"
            autoPlay
            muted
            loop
            playsInline
            preload="metadata"
            poster="/3d/peca-404.webp"
          >
            <source src="/3d/peca-404.webm" type="video/webm" />
            <source src="/3d/peca-404.mp4" type="video/mp4" />
          </video>
          {/* biome-ignore lint/performance/noImgElement: imagem decorativa e pequena, só para movimento reduzido */}
          <img
            src="/3d/peca-404.webp"
            alt=""
            width={640}
            height={400}
            loading="lazy"
            className="hidden h-full w-full object-cover motion-reduce:block"
          />
        </div>
      </div>
    </main>
  );
}