import Image from "next/image";
import { getShowcaseAssets } from "@/lib/project-showcase";
import HoverPrefetchLink from "./HoverPrefetchLink";

/** O cartão mostra o site da SEV e leva ao case. */
const SMALL_SCREEN_PROJECT = "sev-modaintima";
const SMALL_SCREEN_TITLE = "SEV Moda Íntima";
const SMALL_SCREEN_HREF = `/cases/${SMALL_SCREEN_PROJECT}`;
/**
 * Altura da imagem do cartão de celular (px): a largura é a da coluna (cerca de 342 px num celular de 390 px). Com 72 px
 * a área da imagem (cerca de 25 mil px²) fica abaixo da do H1 (cerca de 29 mil px² a 390 px): com 96 px ela era maior, e
 * numa rede lenta a imagem, que chega depois, passava a ser o LCP no lugar do título (medido com rede e CPU limitadas).
 */
const SMALL_CARD_IMAGE_HEIGHT = 72;
/**
 * Faixa de 72 px de altura: o pôster do computador (16:10) cortado nela mostrava só uma fatia do topo, e o título
 * "Nova Coleção" saía pela metade. O pôster do celular (390x844, o mesmo site) tem o título em letras maiores: o
 * `object-position` leva a faixa até a linha "Nova Coleção", que cabe inteira nela.
 */
const SMALL_CARD_IMAGE_POSITION = "object-[50%_57%]";

/**
 * Trabalho real do hero, só abaixo de 1024 px: um cartão largo e clicável (a largura da coluna, cerca de 350 px num
 * celular) com o pôster do site da SEV, abaixo dos botões, que leva ao case da SEV; antes era uma moldura de celular
 * de 65 por 160 px, pequena demais para ver o que era. Em telas largas a coluna da direita é da peça 3D, e o trabalho
 * real começa na seção Projetos.
 * O pôster vai pelo next/image com `sizes` do tamanho em que aparece, em `loading="lazy"` e prioridade baixa: o título
 * segue como o maior elemento da dobra (LCP; ver SMALL_CARD_IMAGE_HEIGHT), e em tela larga, onde o cartão fica
 * escondido pelo breakpoint (display: none), a imagem nem é baixada.
 */
export default function HeroWork() {
  const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "mobile");

  return (
    <HoverPrefetchLink
      data-testid="hero-work-mobile"
      href={SMALL_SCREEN_HREF}
      className="hero-in group mt-sp-5 flex w-full flex-col overflow-hidden border border-white/20 bg-white/[0.05] font-display no-underline transition-colors hover:border-white/45 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none [--d:.8s] lg:hidden"
    >
      <span
        className="relative block w-full overflow-hidden bg-[var(--ink)]"
        style={{ height: SMALL_CARD_IMAGE_HEIGHT }}
      >
        <Image
          src={smallCard.poster}
          alt=""
          width={smallCard.width}
          height={smallCard.height}
          sizes="(min-width: 1024px) 1px, calc(100vw - 48px)"
          loading="lazy"
          fetchPriority="low"
          className={`absolute inset-0 block h-full w-full object-cover ${SMALL_CARD_IMAGE_POSITION}`}
        />
      </span>
      <span className="flex min-h-12 items-center justify-between gap-sp-4 px-sp-4 py-sp-2 text-[15px] leading-6 text-[#f4f2ed]">
        <span className="flex flex-col">
          <span className="font-semibold">Site da {SMALL_SCREEN_TITLE}</span>{" "}
          <span className="text-[rgba(244,242,237,.72)]">Ver case</span>
        </span>
        <svg
          aria-hidden="true"
          viewBox="0 0 16 16"
          className="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
        >
          <path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
        </svg>
      </span>
    </HoverPrefetchLink>
  );
}